TW201525981A - 用戶介面背景色調整系統及其方法 - Google Patents

Abstract

本發明提供了一種用戶介面背景色調整系統，該調整系統用於根據一圖示的顏色自動調整該圖示的背景色，該調整系統包括依次連接的顏色取樣單元、主色統計與確定單元以及背景確定與生成單元。該調整系統獲取圖示的主色，並根據主色確定背景色。本發明還提供了一種用戶介面背景色的調整方法。

Description

用戶介面背景色調整系統及其方法

本發明涉及一種用戶介面的背景色調整系統及其方法，尤其涉及一種能夠根據圖示顏色自動調整背景色的調整系統及其方法。

具有顯示系統的電產品以其強大的人機交互功能深受使用者的歡迎，用戶通過操作用戶介面上的圖示就可以輕鬆實現人機對話和互動。但是，現在市面上的電產品中，大多數用戶介面的背景顏色都是固定的，用戶不能根據現實的圖示進行背景顏色的調整。在某些情況下，用戶很難將圖示和背景區別開來，不利於提升用戶的使用滿意度。

有鑒於此，有必要提供一種能夠根據圖示顏色自動調整背景色的調整系統。

本發明提供了一種用戶介面背景色調整系統，運行於一電裝置上，該調整系統用於根據顯示於電裝置的顯示單元上圖示的顏色自動調整與該圖示對應的背景區域背景色，該調整系統包括：

顏色取樣單元，用於對所述圖示進行取樣，獲得多個取樣點；

主色統計與確定單元，用於根據所述顏色取樣單元獲取的每個取樣點的顏色值確定所述圖示的主色，以及

背景確定與生成單元，用於根據所述主色統計與確定單元確定的圖示主色確定該圖示對應位置的背景色，以及控制所述顯示單元在所述背景區域顯示該背景色。

本發明還提供了一種用戶介面背景色調整方法，該方法包括：

a，對一圖示進行取樣，獲得多個取樣點；

b，根據所述多個取樣點的顏色值確定所述圖示的主色；

c，根據所述圖示的主色生成所述圖示的背景。

本發明之用戶介面背景色調整系統及其方法，自動獲取圖示的主色，並根據主色確定背景的顏色，實現了背景色的靈活變化，便於提高用戶的使用滿意度。

圖1為本發明一實施方式中的調整系統的功能模組示意圖。

圖2為用戶介面示意圖。

圖3-a為第一類區塊在調整背景色前的狀態示意圖。

圖3-b為圖3-a中圖示區域的取樣示意圖。

圖4為色環示意圖。

圖5為圖3-a中第一類區塊在完成背景色調整後的狀態示意圖。

圖6為圖1中調整系統的方法的主流程圖。

圖7為圖6中步驟S1的子流程圖。

圖8為圖6中步驟S2的子流程圖。

圖9為圖6中步驟S3的子流程圖。

下面將結合附圖，對本發明作進一步的詳細說明。

請參閱圖1，本發明提供了一種用戶介面的背景色調整系統100，以下簡稱調整系統100。該調整系統100運行於一具有顯示單元的電裝置（圖未示）上，用於根據電裝置顯示的應用圖示調整該圖示對應的背景色，該調整系統100同時還包括一存儲模組40。該調整系統100包括顏色取樣單元10、主色統計與確定單元20以及背景確定與生成單元30。

請參閱圖2，用戶介面50為所述電裝置顯示的一交互介面，該用戶介面50由多個不同類型的區塊組成。在本實施方式中，該用戶介面50由第一類區塊51、第二類區塊52、第三類區塊53以及第四類區塊54四種類型的區塊組成，該四種類型的區塊用於放置不同尺寸的圖示。

請參閱圖3-a，以第一類區塊51為例，該第一類區塊51包括圖示區域511、背景區域512和應用名區域513，圖示510顯示於所述圖示區域511中，該圖示510的尺寸固定，且與所述圖示區域511的尺寸相配合。在一實施方式中，在根據圖示510的顏色調整背景區域512的顏色前，該背景區域512和應用名區域513以預設顏色，例如白色填充，該應用名區域513也處於空白狀態，未填充應用名稱。

請一併參閱圖1和圖3-b，所述顏色取樣單元10用於對所述圖示區域511中顯示的圖示510進行取樣，該顏色取樣單元10包括座標定義模組11、座標取樣模組12和第一顏色統計模組13。當所述圖示510被顯示於所述圖示區域511中時，該座標定義模組11建立直角坐標系，將所述圖示510各個顏色點的位置以座標的形式定義。在本實施方式中，該座標定義模組11以所述圖示區域511一個角的頂點，例如左下角頂點做為座標原點建立直角坐標系，該圖示區域511即位於該直角坐標系的第一象限。

所述座標取樣模組12用於在所述圖示區域511中一預設的取樣區域514內對所述圖示510的顏色點以預設間距進行等間隔的取樣。該預設的取樣區域514的尺寸根據所述圖示區域511的尺寸確定，在本實施方式中，該取樣區域514為所述圖示區域511四周分別縮進17%後形成的區域。確定該取樣區域514後，所述座標取樣模組12首先以該取樣區域514中距離座標原點最近的點為基點沿X軸方向進行等間距採樣，然後在X軸取樣點的基礎上沿Y軸方向進行相同的等間距採樣。

所述第一顏色統計模組13用於獲取所述圖示510進行取樣後每個取樣點的顏色值。所述取樣點的顏色值是指取樣點的R、G、B值。

所述主色統計與確定單元20用於根據所述第一顏色統計模組13獲取的每個取樣點的顏色值確定所述圖示510的主色，包括第一容差計算模組21、第二顏色統計模組22和主色確定模組23。

所述第一容差計算模組21用於計算所述每個取樣點對其他取樣點的容差值。首先，隨機選取一取樣點P1，其顏色值為P1(R1,G1,B1)，依次計算該取樣點P1與其他所有取樣點的容差值，例如相對取樣點P2的容差值，該取樣點P2的顏色值為P2(R2,G2,B2)，則P1對P2的容差值t=max((R1-R2),(G1-G2),(B1-B2))+max(|R1-R2|,|G1-G2|,|B1-B2|)，其中，max((R1-R2),(G1-G2),(B1-B2))中的R1-R2、G1-G2和B1-B2的運算結果需要為正值，若結果為負值，則放置在max(|R1-R2|,|G1-G2|,|B1-B2|)中進行運算。例如，P1(33,33,43)對P2(31,30,48)的容差值t=max((33-31),(33-30))+max(|43-48|)，運算結果為8。

所述第二顏色統計模組22用於根據第一容差計算模組21計算的每個取樣點對其他取樣點的容差值確定的顏色相同的取樣點的個數。具體的，第二顏色統計模組22判斷所述第一容差計算模組21計算出的取樣點P1對P2的容差值是否低於一預設值，若低於，則認為P1和P2是同一種顏色，否則認為P1和P2是不同的顏色。

在一實施方式中，完成P1對P2的容差值計算後，再計算P1對其他取樣點的容差值，直到P1對其他所有取樣點的容差值計算完畢，然後統計與P1相同的顏色的出現次數。在與P1不同顏色的取樣點中隨機選取一個取樣點，例如P3，然後計算該取樣點P3對其他與P1不同顏色的取樣點的容差值，再統計與該取樣點P3相同的顏色的出現次數，依此方法進行，直到完成對所述座標取樣模組12選取的取樣點中每種顏色的出現次數的統計，從而確定顏色相同的取樣點的個數。

在另一實施方式中，完成P1對P2的容差值計算後，確定P1與P2是否為同一種顏色，若是，則計P1顏色出現的次數為2，然後在其他的取樣點中隨機選取一個取樣點，例如P4，計算該取樣點P4對P1的容差值，確定P4與P1是否為同一種顏色，若是，則計P1顏色出現的次數為3。若P1與P2為不同的顏色，則分別計P1和P2的出現次數為1，然後在其他的取樣點中隨機選取一個取樣點，例如P5，分別計算該取樣點P5對P1和P5對P2的容差值，並確定P5與P1或P2是否為同一種顏色。依此方法進行，直到完成對所述座標取樣模組12選取的取樣點中每種顏色的出現次數的統計，從而確定顏色相同的取樣點的個數。

所述主色確定模組23用於根據所述第二顏色統計模組22確定的顏色相同的取樣點的個數確定所述圖示510的主色。該主色確定模組23首先選出取樣點中出現次數最多的顏色，即顏色相同的取樣點的個數最多的顏色，然後通過該顏色的顏色值確定該顏色是否為白色或者黑色，若否，則該顏色即為所述圖示510的主色；若是，則直接確定灰色為該圖示510的主色。

所述背景確定與生成單元30用於根據所述主色確定模組23確定的主色確定所述背景區域512的背景色，並控制所述背景區域512顯示該確定的背景色。背景確定與生成單元30包括第二容差計算模組31、背景色確定模組32和背景生成模組33。

請一併參閱圖4，所述存儲模組40中存儲有一色環60，該色環60包括多種互不相同的顏色，且該多種顏色為連續變化的，即相鄰的兩種顏色之間顏色值相差很小。在本實施方式中，所述色環60包括21種顏色，該21種顏色成圓環狀均勻排布，分為紅色區61、綠色區62以及藍色區63三個區域，其中每個區域包括7種顏色，該7種顏色包括1種純色以及6種漸變色。以紅色區61為例，該紅色區61包括1個純紅色，其顏色值為(255,0,0)，靠近綠色區62的方向為3個綠色漸變色，其顏色值為(255,A,0)，其中，A代表的數值隨著該綠色漸變色與所述綠色區62的距離減小而增大，靠近藍色區63的方向為3個藍色漸變色，其顏色值為(255,0,B)，其中B代表的數值隨著該藍色漸變色與所述藍色區63的距離減小而增大。該存儲模組40同時還記錄該色環60中每種顏色的顏色值以及相鄰關係。

所述第二容差計算模組31用於計算所述主色對色環60中每種顏色的容差值。計算方法與所述第一容差計算模組21的方法相同，在此省略描述。

所述背景色確定模組32用於確定所述色環60中與主色顏色最相近的顏色的一相鄰色為所述背景區域512的背景色。具體地，該背景色確定模組32首先比較主色與色環60中每種顏色的容差值，找到容差值最小的顏色，該顏色即為與主色顏色最相近的顏色，然後根據色環60中每種顏色的相鄰關係找到與該顏色相鄰的兩種顏色，任取一種顏色做為背景色。

請一併參閱圖5，所述背景生成模組33用於控制所述用戶介面50的背景區域512顯示該確定的背景色，並控制所述用戶介面50的應用名區域513顯示所述圖示510對應的應用名稱，該背景生成模組33同時還控制所述應用名區域513顯示該確定的背景色。

請參閱圖6，為本發明一實施方式中調整系統100的用戶介面背景色調整方法流程圖，該方法包括：

步驟S1，顏色取樣單元10對一圖示進行取樣，獲得多個取樣點。

步驟S2，主色統計與確定單元20根據所述多個取樣點的顏色值確定所述圖示的主色；

步驟S3，背景確定與生成單元30根據所述圖示的主色生成所述圖示的背景。

請參閱圖7，其中，步驟S1具體包括：

步驟S10，座標定義模組11建立一直角坐標系，以座標的形式定義所述圖示510各個顏色點的位置。具體地，在本實施方式中，該座標定義模組11以所述圖示區域511的一個角的頂點，例如左下角頂點做為座標原點建立直角坐標系，該圖示區域511即位於該直角坐標系的第一象限。

步驟S11，座標取樣模組12在所述圖示區域511中一預設的取樣區域514內對所述圖示510的顏色點以預設間距進行等間隔的取樣。該取樣區域514的尺寸根據所述圖示區域511的尺寸確定。

在本實施方式中，該取樣區域514為所述圖示區域511四周分別縮進17%後形成的區域。確定該取樣區域514後，所述座標取樣模組12首先以該取樣區域514中距離座標原點最近的點為基點沿X軸方向進行等間距採樣，然後在X軸取樣點的基礎上沿Y軸方向進行相同的等間距採樣。

步驟S12，第一顏色統計模組13獲取所述座標取樣模組12對所述圖示510進行取樣後每個取樣點的顏色值。

請參閱圖8，其中，步驟S2具體包括：

步驟S13，第一容差計算模組21計算所述每個取樣點對其他取樣點的容差值。

具體地，首先隨機選取兩個取樣點P1和P2，其顏色值分別為P1(R1,G1,B1)和P2(R2,G2,B2)，則P1對P2的容差值t=max((R1-R2),(G1-G2),(B1-B2))+max(|R1-R2|,|G1-G2|,|B1-B2|)，其中，max((R1-R2),(G1-G2),(B1-B2))中的R1-R2、G1-G2和B1-B2的運算結果需要為正值，若結果為負值，則放置在max(|R1-R2|,|G1-G2|,|B1-B2|)中進行運算。例如，P1(33,33,43)對P2(31,30,48)的容差值t=max((33-31),(33-30))+max(|43-48|)，運算結果為8。

步驟S14，第二顏色統計模組22用於根據第一容差計算模組21計算的每個取樣點對其他取樣點的容差值確定的顏色相同的取樣點的個數。

具體地，若P1對P2的容差值低於所述預設值，則認為P1和P2是同一種顏色，否則認為P1和P2是不同的顏色。

在一實施方式中，完成P1對P2的容差值計算後，再計算P1對其他取樣點的容差值，直到P1對其他所有取樣點的容差值計算完畢，然後統計與P1相同的顏色的出現次數。在與P1不同顏色的取樣點中隨機選取一個取樣點，例如P3，然後計算該取樣點P3對其他與P1不同顏色的取樣點的容差值，再統計與該取樣點P3相同的顏色的出現次數，依此方法進行，直到完成對所述座標取樣模組12選取的取樣點中每種顏色的出現次數的統計。

在另一實施方式中，完成P1對P2的容差值計算後，確定P1與P2是否為同一種顏色，若是，則計P1顏色出現的次數為2，然後在其他的取樣點中隨機選取一個取樣點，例如P4，計算該取樣點P4對P1的容差值，確定P4與P1是否為同一種顏色，若是，則計P1顏色出現的次數為3。若P1與P2為不同的顏色，則分別計P1和P2的出現次數為1，然後在其他的取樣點中隨機選取一個取樣點，例如P5，分別計算該取樣點P5對P1和P5對P2的容差值，並確定P5與P1或P2是否為同一種顏色。依此方法進行，直到完成對所述座標取樣模組12選取的取樣點中每種顏色的出現次數的統計。

步驟S15，主色確定模組23用於根據所述第二顏色統計模組22確定的顏色相同的取樣點的個數確定所述圖示510的主色。

具體地，該主色確定模組23首先選出取樣點中出現次數最多的顏色，即顏色相同的取樣點的個數最多的顏色，然後通過該顏色的顏色值確定該顏色是否為白色或者黑色，若否，則該顏色即為所述圖示510的主色；若是，則直接確定灰色為該圖示510的主色。

請參閱圖9，其中，步驟S3具體包括：

步驟S16，第二容差計算模組31計算所述主色對一色環60中每種顏色的容差值。

步驟S17，背景色確定模組32確定所述色環60中與主色顏色最相近的顏色的一相鄰色為所述背景區域512的背景色。

具體地，該背景色確定模組32首先比較主色與色環60中每種顏色的容差值，找到容差值最小的顏色，該顏色即為與主色顏色最相近的顏色，然後根據色環60中每種顏色的相鄰關係找到與該顏色相鄰的兩種顏色，任取一種顏色做為背景色。

步驟S18，背景生成模組33控制所述用戶介面50的背景區域512顯示該確定的背景色，並控制所述用戶介面50的應用名區域513顯示所述圖示510對應的應用名稱，該背景生成模組33同時還控制所述應用名區域513顯示該確定的背景色。

本發明之用戶介面背景色調整系統及其方法，自動獲取圖示的主色，並根據主色確定背景的顏色，實現了背景色的靈活變化，便於提高用戶的使用滿意度。

本技術領域的普通技術人員應當認識到，以上的實施方式僅是用來說明本發明，而並非用作為對本發明的限定，只要在本發明的實質精神範圍之內，對以上實施方式所作的適當改變和變化都落在本發明要求保護的範圍之內。

100‧‧‧調整系統

10‧‧‧顏色取樣單元

11‧‧‧座標定義模組

12‧‧‧座標取樣模組

13‧‧‧第一顏色統計模組

20‧‧‧主色統計與確定單元

21‧‧‧第一容差計算模組

22‧‧‧第二顏色統計模組

23‧‧‧主色確定模組

30‧‧‧背景確定與生成單元

31‧‧‧第二容差計算模組

32‧‧‧背景色確定模組

33‧‧‧背景生成模組

40‧‧‧存儲模組

50‧‧‧用戶介面

51‧‧‧第一類區塊

510‧‧‧圖示

511‧‧‧圖示區域

512‧‧‧背景區域

513‧‧‧應用名區域

514‧‧‧取樣區域

52‧‧‧第二類區塊

53‧‧‧第三類區塊

54‧‧‧第四類區塊

60‧‧‧色環

61‧‧‧紅色區

62‧‧‧綠色區

63‧‧‧藍色區

S1~S3、S10~S18‧‧‧步驟

無

100‧‧‧調整系統

10‧‧‧顏色取樣單元

11‧‧‧座標定義模組

12‧‧‧座標取樣模組

13‧‧‧第一顏色統計模組

20‧‧‧主色統計與確定單元

21‧‧‧第一容差計算模組

22‧‧‧第二顏色統計模組

23‧‧‧主色確定模組

30‧‧‧背景確定與生成單元

31‧‧‧第二容差計算模組

32‧‧‧背景色確定模組

33‧‧‧背景生成模組

40‧‧‧存儲模組

Claims (10)

1. 一種用戶介面背景色調整系統，運行於一電子裝置上，該調整系統用於根據顯示於電子裝置的顯示單元上圖示的顏色自動調整與該圖示對應的背景區域背景色，其改良在於，該調整系統包括：
   顏色取樣單元，用於對所述圖示進行取樣，獲得多個取樣點；
   主色統計與確定單元，用於根據所述顏色取樣單元獲取的每個取樣點的顏色值確定所述圖示的主色，以及
   背景確定與生成單元，用於根據所述主色統計與確定單元確定的圖示主色確定該圖示對應位置的背景色，以及控制所述顯示單元在所述背景區域顯示該背景色。
2. 如申請專利範圍第1項所述的調整系統，其中，所述顏色取樣單元包括：
   座標定義模組，用於建立一直角坐標系；
   座標取樣模組，用於在一圖示區域中的取樣區域內對所述圖示的顏色點進行取樣，獲得多個取樣點，以及
   第一顏色統計模組，用於獲取每個取樣點的顏色值。
3. 如申請專利範圍第2項所述的調整系統，其中，所述主色統計與確定單元包括：
   第一容差計算模組，用於計算每個取樣點對其他取樣點的容差值；
   第二顏色統計模組，用於根據第一容差計算模組計算的每個取樣點對其他取樣點的容差值確定的顏色相同的取樣點的個數，以及
   主色確定模組，用於根據顏色相同的取樣點的個數確定所述圖示的主色。
4. 如申請專利範圍第3項所述的調整系統，其中，所述電裝置還包括一存儲模組，該存儲模組存儲有一色環，該色環包括多種互不相同的顏色，且該多種顏色為連續變化的，該存儲模組同時還記錄該色環中每種顏色的顏色值以及相鄰關係。
5. 如申請專利範圍第4項所述的調整系統，其中，所述背景確定與生成單元包括：
   第二容差計算模組，用於計算所述圖示的主色對所述色環中多種顏色的容差值；
   背景色確定模組，用於確定所述色環中與圖示主色顏色最相近的顏色的一相鄰色為所述背景區域的背景色，以及
   背景生成模組，用於控制所述背景區域顯示所述背景色。
6. 一種用戶介面背景色調整方法，其改良在於，該方法包括：
   a，對一圖示進行取樣，獲得多個取樣點；
   b，根據所述多個取樣點的顏色值確定所述圖示的主色，及
   c，根據所述圖示的主色生成所述圖示的背景。
7. 如申請專利範圍第6項所述的調整方法，其中，步驟a具體包括：
   d，建立一直角坐標系；
   e，在預設的的取樣區域內對所述圖示的顏色點進行取樣；
   f，獲取取樣點的顏色值。
8. 如申請專利範圍第7項所述的調整方法，其中，步驟b具體包括：
   g，計算每個取樣點對其他取樣點的容差值；
   h，根據所述容差值確定顏色相同的取樣點的個數；
   i，根據所述顏色相同的取樣點的個數確定所述圖示的主色。
9. 如申請專利範圍第8項所述的調整方法，其中，在步驟h中，若兩種顏色之間的容差值低於所述預設值，則認為該兩種顏色為相同的顏色；否則認為該兩種顏色為不同的顏色。
10. 如申請專利範圍第8項所述的調整方法，其中，步驟c具體包括：
    j，計算所述圖示的主色對一色環中每種顏色的容差值；
    k，確定所述色環中與圖示主色顏色最相近的顏色的一相鄰色做為背景色；
    l，控制所述背景區域顯示所述背景色。