TWI602111B - 電子裝置及使用者介面的色彩設定方法 - Google Patents

Description

電子裝置及使用者介面的色彩設定方法

本發明是有關於一種電子裝置及其操作方法，且特別是有關於一種電子裝置及其使用者介面的色彩設定方法。

使用者介面(User Interface,UI)是系統和使用者之間進行互動和訊息交換的媒介，其主要是介於使用者與硬體而設計彼此之間互動溝通相關軟體，目的在使得使用者能夠方便有效率地去操作硬體以達成雙向之互動，完成所希望藉助硬體完成之工作，使用者介面定義廣泛，包含了人機互動與圖形使用者介面，凡參與人類與機械的訊息交流的領域都存在著使用者介面。

軟體開發者事先設計時，因為現代軟體常由不同公司開發然後可以執行在同一裝置上，並且使用者界面會有重疊的情形。例如安卓(Android)系統的主螢幕啟動器(home screen launcher)的背景是可以更換的，使用者可以更換桌面的桌布(wallpaper)，此時事先設計的界面工具 集(widget)的顏色，與桌面恐有不協調的使用者感覺。倘若每次更換桌布都要讓使用者重新挑選顏色，又顯得太過麻煩。

為了解決上述問題，相關領域莫不費盡心思來謀求解決之道，但長久以來一直未見適用的方式被發展完成。因此，如何能自動調整使用者介面的色彩，實屬當前重要研發課題之一，亦成為當前相關領域極需改進的目標。

本發明之一態樣是在提供一種電子裝置及其使用者介面的色彩設定方法，以解決先前技術的問題。

本發明所提供之使用者介面的色彩設定方法包括下列步驟：自螢幕的顯示內容中擷取取樣圖像，其中取樣圖像包括前景使用者介面之圖像與背景使用者介面之部分圖像，背景使用者介面之部分圖像係毗連於前景使用者介面之圖像的外圍；分析取樣圖像中背景使用者介面之部分圖像的色彩參數；根據色彩參數，計算出對比色彩參數，其中對比色彩參數與色彩參數具有互補性；根據對比色彩參數，調整前景使用者介面之色彩。

另一方面，本發明所提供之電子裝置包括螢幕、螢幕擷取模組、色彩分析模組、色彩選擇模組與色彩調整模組。螢幕用以顯示背景使用者介面與前景使用者介面；螢幕擷取模組用以自螢幕的顯示內容中擷取取樣圖像，其中取樣圖像包括前景使用者介面之圖像與背景使用者介面之 部分圖像，背景使用者介面之部分圖像係毗連於前景使用者介面之圖像的外圍；色彩分析模組用以分析取樣圖像中背景使用者介面之部分圖像的色彩參數；色彩選擇模組用以根據色彩參數，計算出對比色彩參數，其中對比色彩參數與色彩參數具有互補性；色彩調整模組根據對比色彩參數，調整螢幕所顯示的前景使用者介面之相關色彩。

綜上所述，本發明之技術方案與現有技術相比具有明顯的優點和有益效果。藉由上述技術方案，可達到相當的技術進步，並具有產業上的廣泛利用價值，其至少具有下列優點：1、在多重使用者介面重疊時，自動設定前景使用者介面的色彩，讓使用者感覺色彩分明，從而有效地保護人體眼睛；以及2、無需使用者手動選擇顏色，簡單方便。

以下將以實施方式對上述之說明作詳細的描述，並對本發明之技術方案提供更進一步的解釋。

為讓本發明之上述和其他目的、特徵、優點與實施例能更明顯易懂，所附符號之說明如下：

100‧‧‧電子裝置

110‧‧‧螢幕

120‧‧‧螢幕擷取模組

130‧‧‧色彩分析模組

140‧‧‧色彩選擇模組

150‧‧‧色彩調整模組

210、310‧‧‧前景使用者介面

220、320‧‧‧背景使用者介面

222‧‧‧部分圖像

223‧‧‧第一背景圖像區

225‧‧‧第二背景圖像區

230‧‧‧取樣圖像

250‧‧‧螢幕圖像

260‧‧‧取樣區域

311、312、313‧‧‧邊緣

315‧‧‧圖符

400‧‧‧色彩設定方法

410~440‧‧‧步驟

為讓本發明之上述和其他目的、特徵、優點與實施例能更明顯易懂，所附圖式之說明如下：第1圖是依照本發明一實施例之一種電子裝置的方塊圖；第2圖是依照本發明一實施例之一種前景及背景使用者介面重疊的示意圖；第3圖是依照本發明另一實施例之一種前景及背景使用者 介面重疊的示意圖；以及第4圖是依照本發明一實施例之一種使用者介面的色彩設定方法的流程圖。

為了使本發明之敘述更加詳盡與完備，可參照所附之圖式及以下所述各種實施例，圖式中相同之號碼代表相同或相似之元件。另一方面，眾所週知的元件與步驟並未描述於實施例中，以避免對本發明造成不必要的限制。

第1圖是依照本發明一實施例之一種電子裝置100的方塊圖，如第1圖所示，電子裝置100包括螢幕110、螢幕擷取模組120、色彩分析模組130、色彩選擇模組140與色彩調整模組150。實作上，電子裝置100可為平板電腦、手機、筆記型電腦或其他可攜式電子產品，螢幕110可為液晶螢幕、電子紙或其他顯示裝置。至於螢幕擷取模組120、色彩分析模組130、色彩選擇模組140與色彩調整模組150之具體實施方式可為軟體、硬體與/或軔體。舉例來說，若以執行速度及精確性為首要考量，則該等模組基本上可選用硬體與/或軔體為主；若以設計彈性為首要考量，則該等模組基本上可選用軟體為主；或者，該等模組可同時採用軟體、硬體及軔體協同作業。應瞭解到，以上所舉的這些例子並沒有所謂孰優孰劣之分，亦並非用以限制本發明，熟習此項技藝者當視當時需要，彈性選擇該等模組的具體實施方式。於一實施例中，螢幕擷取模組120、色彩 分析模組130、色彩選擇模組140與色彩調整模組150可整合至中央處理單元、微控制器或類似功能的電子元件。

請同時參照第1、2圖，於一實施例中，螢幕110可顯示如第2圖所示的螢幕圖像250，例如可為全螢幕畫面。螢幕110顯示之背景使用者介面220與前景使用者介面210彼此部分重疊，舉例來說，前景使用者介面210可為界面工具集(widget)，背景使用者介面220可為桌布。螢幕擷取模組120自螢幕110的顯示內容中擷取取樣圖像230，其中取樣圖像230包括前景使用者介面210之圖像與背景使用者介面220之部分圖像222，背景使用者介面220之部分圖像222係毗連於前景使用者介面210之圖像的外圍；色彩分析模組130用以分析取樣圖像230中背景使用者介面220之部分圖像222的色彩參數；色彩選擇模組140根據色彩參數，計算出對比色彩參數，其中對比色彩參數與色彩參數具有互補性；色彩調整模組150根據對比色彩參數，調整螢幕110所顯示的前景使用者介面之色彩，其顏色改變過程可採用淡入/淡出(fade-in/fade-out)效果。藉此，在多重使用者介面重疊時，電子裝置100自動設定前景使用者介面的色彩，讓使用者感覺色彩分明，從而有效地保護人體眼睛。

實務上，每當背景使用者介面220變換時，使用者就有可能感覺色彩不協調，為了不麻煩使用者手動重選顏色，螢幕擷取模組120可自動偵測背景使用者介面220是否改變，當背景使用者介面220改變時，自螢幕110獲取 螢幕圖像250，進而從螢幕圖像250中剪裁取樣圖像230，然後，再由色彩分析模組130、色彩選擇模組140與色彩調整模組150做後續處理。或者，螢幕擷取模組120可週期性地自螢幕獲取螢幕圖像250，進而從螢幕圖像250中剪裁取樣圖像230，然後，再由色彩分析模組130、色彩選擇模組140與色彩調整模組150做後續處理。藉此，無需使用者手動挑選顏色，簡單方便。

具體而言，螢幕擷取模組120係以前景使用者介面210所占的位置為中心向外等比例擴張的區域定義為取樣區域260，進而將螢幕圖像250中與取樣區域260重疊的範圍剪裁出來以作為取樣圖像230，在本發明之一實施例中，取樣區域260的長和寬為前景使用者介面210的長和寬的各3倍，但將螢幕圖像250中與取樣區域260未重疊的範圍捨棄。藉此，排除了距離前景使用者介面210較遠的背景範圍，以提高取樣的可靠性。

色彩分析模組130將取樣圖像230中背景使用者介面220之部分圖像222劃分為第一背景圖像區223與第二背景圖像區225，進而將第一背景圖像區223的平均色彩值乘以第一權重並且將第二背景圖像區225的平均色彩值乘以第二權重，據以得出色彩參數，其中該第二背景圖像區225係毗連於第一背景圖像區223的外圍，而第一背景圖像區223係毗連於前景使用者介面210之圖像的外圍，第一權重高於第二權重。藉此，電子裝置100優先考量距離前景使用者介面210最近的第一背景圖像區223，有助於提高 色彩調整的突顯性。

實作上，色彩分析模組130所得出的色彩參數係對應第一顏色，色彩選擇模組140根據色彩參數所計算出的對比色彩參數係對應第二顏色，其中第一顏色與第二顏色互為補色。在疊加型的原色系統中，例如RGB系統，若兩種顏色等量混合時能產生白色，則該兩種顏色互為補色；相對地，在消減型的原色系統中，例如CMYK系統，若兩種顏色等量混合時產生接近黑色的濁褐色，則該兩種顏色互為補色。以RGB系統為例，若色彩參數(R255,G255,B0)係對應於純黃色，通過色彩選擇模組140的計算：R(255-255),G(255-255),B(255-0)，其計算出的對比色彩參數(R0,G0,B255)係對應於藍色；若色彩參數(R0,G255,B0)係對應於綠色，通過色彩選擇模組140的計算：R(255-0),G(255-255),B(255-0)，其計算出的對比色彩參數(R255,G0,B255)係對應於紫色。另一方面，HSV是一種將RGB系統中的點在圓柱坐標系中的表示法，HSV即色相、飽和度、明度(Hue,Saturation,Value)，Hue的範圍是0~360，計算互補色方法是(Hue+180)取360的餘數。舉例來說，藍色在RGB系統中的色彩參數(R0,G0,B255)可轉換成HSV系統中的色彩參數(H(240),S(100),V(100))，而對比色彩參數為H((240+180)%360),S(100),V(100)=H(60),S(100),V(100)。應瞭解到，以上所舉的RGB、HSV系統僅為例示，並非用以限制本發明，實務上，熟習此項技藝者應視當時需要彈性選擇任何的色彩模型。

色彩調整模組150可改變前景使用者介面210之內部顏色，使內部顏色含有上述之第二顏色，藉以突顯前景使用者介面210的色彩。舉例來說，前景使用者介面210之內部顏色包括字型顏色，若字型顏色變為第二顏色，則字體相較於背景可以更清楚。再者，色彩調整模組150可改變前景使用者介面210之邊緣顏色，使邊緣顏色至少含有第二顏色，藉以使前景使用者介面210與背景使用者介面220之間得交界更為明顯。

為了對「邊緣顏色」做更進一步闡述，請同時參照第1、3圖，於一實施例中，螢幕110可顯示如第3圖所示的螢幕圖像350，螢幕圖像350中呈現了背景使用者介面320與前景使用者介面310，舉例來說，前景使用者介面310可為選單，背景使用者介面320可為桌布。色彩調整模組150可設定前景使用者介面310具有複數層邊緣311、312、313，進而將這些邊層緣312的顏色係調整為由第二顏色與第一顏色交替排列，舉例來說，邊緣311、313為第二顏色，而邊緣312為第一顏色，藉以使前景使用者介面310與背景使用者介面320之間得交界更為分明。另一方面，關於前景使用者介面210之內部顏色，色彩調整模組150可改變前景使用者介面310中圖符315的顏色，使圖符315的顏色含有第二顏色(如：第二顏色邊框、第二顏色的字型…等)，藉以突顯圖符315的色彩。

第4圖是依照本發明一實施例之一種使用者介面的色彩設定方法400的流程圖。如第4圖所示，色彩設定 方法400包括步驟410~440(應瞭解到，在本實施例中所提及的步驟，除特別敘明其順序者外，均可依實際需要調整其前後順序，甚至可同時或部分同時執行)。至於實施該些步驟的硬體裝置，由於以上實施例已具體揭露，因此不再重複贅述之。

若背景使用者介面與前景使用者介面彼此部分重疊，於步驟410，自螢幕的顯示內容中擷取取樣圖像，其中取樣圖像包括前景使用者介面之圖像與背景使用者介面之部分圖像，背景使用者介面之部分圖像係毗連於前景使用者介面之圖像的外圍；於步驟420，分析取樣圖像中背景使用者介面之部分圖像的色彩參數；於步驟430，根據色彩參數，計算出一對比色彩參數，其中對比色彩參數與色彩參數具有互補性；於步驟440，根據對比色彩參數，調整前景使用者介面之色彩，其顏色改變過程可採用淡入/淡出效果。藉此，在多重使用者介面重疊時，色彩設定方法400自動設定前景使用者介面的色彩，讓使用者感覺色彩分明，從而有效地保護人體眼睛。

實務上，每當背景使用者介面變換時，使用者就有可能感覺色彩不協調，為了不麻煩使用者手動重選顏色，於步驟410可偵測背景使用者介面是否改變，當背景使用者介面改變時，自螢幕獲取一螢幕圖像，進而從螢幕圖像中剪裁取樣圖像，然後，再由步驟420~440做後續處理。或者，於步驟410可週期性地自螢幕獲取一螢幕圖像，進而從螢幕圖像中剪裁取樣圖像，然後，再由步驟420~440 做後續處理。藉此，無需使用者手動挑選顏色，簡單方便。

具體而言，於步驟410，以前景使用者介面所占的位置為中心向外等比例擴張的區域定義為一取樣區域；將螢幕圖像中與取樣區域重疊的範圍剪裁出來以作為取樣圖像。藉此，排除了距離前景使用者介面較遠的背景範圍，以提高取樣的可靠性。

於步驟420，將取樣圖像中背景使用者介面之部分圖像劃分為一第一背景圖像區與一第二背景圖像區，其中第二背景圖像區係毗連於第一背景圖像區的外圍，而第一背景圖像區係毗連於前景使用者介面之圖像的外圍；接著，將第一背景圖像區的平均色彩值乘以第一權重並將第二背景圖像區的平均色彩值乘以第二權重，據以得出色彩參數，其中第一權重高於第二權重。藉此，色彩設定方法400優先考量距離前景使用者介面最近的第一背景圖像區223，有助於提高色彩調整的突顯性。

於步驟430中，可藉由前述互補色的原則來選取較為突顯的色彩。於一實施例中，於步驟420所得出的色彩參數係對應第一顏色，於步驟430根據色彩參數所計算出的對比色彩參數係對應第二顏色，第一顏色與第二顏色互為補色。

於步驟440中，可改變前景使用者介面之內部顏色，使內部顏色含有第二顏色，藉以突顯前景使用者介面的色彩。舉例來說，前景使用者介面之內部顏色包括字型顏色，若字型顏色變為第二顏色，則字體相較於背景可以 更清楚。或者或再者，於步驟440中，亦可改變前景使用者介面之邊緣顏色，使邊緣顏色至少含有第二顏色，藉以使前景使用者介面與背景使用者介面之間得交界更為明顯。

為了更突顯「邊緣顏色」，於一實施例中，於步驟440可設定前景使用者介面具有複數層邊緣，將些邊層緣的顏色係調整為由第一顏色與第二顏色交替排列。

如上所述之色彩設定方法400可經由各類電腦裝置來實作，例如前述之電子裝置100等，亦可將部份功能實作為一程式產品(如：手機APP)以供使用者下載，或是部份功能實作為一應用程式儲存於一電腦可讀取之記錄媒體中，而使電腦讀取此記錄媒體後令一電腦系統執行色彩設定方法400。

雖然本發明已以實施方式揭露如上，然其並非用以限定本發明，任何熟習此技藝者，在不脫離本發明之精神和範圍內，當可作各種之更動與潤飾，因此本發明之保護範圍當視後附之申請專利範圍所界定者為準。

400‧‧‧色彩設定方法

410~440‧‧‧步驟

Claims (20)

1. 一種使用者介面的色彩設定方法，包括：自一螢幕的顯示內容中擷取一取樣圖像，其中該取樣圖像包括一前景使用者介面之圖像與一背景使用者介面之部分圖像，該背景使用者介面之該部分圖像係毗連於該前景使用者介面之該圖像的外圍；分析該取樣圖像中該背景使用者介面之該部分圖像的色彩參數；根據該色彩參數，計算出一對比色彩參數，其中該對比色彩參數與該色彩參數具有互補性；以及根據該對比色彩參數，調整該前景使用者介面之色彩。
2. 如請求項1所述之色彩設定方法，其中自該螢幕擷取該取樣圖像的步驟包括：偵測該背景使用者介面是否改變；以及當該背景使用者介面改變時，自該螢幕獲取一螢幕圖像，進而從該螢幕圖像中剪裁該取樣圖像。
3. 如請求項1所述之色彩設定方法，其中自該螢幕擷取該取樣圖像的步驟包括：週期性地自該螢幕獲取一螢幕圖像，進而從該螢幕圖像中剪裁該取樣圖像。
4. 如請求項2或3所述之色彩設定方法，其中從該螢幕圖像中剪裁該取樣圖像的步驟包括： 以該前景使用者介面所占的位置為中心向外等比例擴張的區域定義為一取樣區域；以及將該螢幕圖像中與該取樣區域重疊的範圍剪裁出來以作為該取樣圖像。
5. 如請求項1所述之色彩設定方法，其中分析該取樣圖像中該背景使用者介面之該部分圖像的該色彩參數的步驟包括：將該取樣圖像中該背景使用者介面之該部分圖像劃分為一第一背景圖像區與一第二背景圖像區，其中該第二背景圖像區係毗連於該第一背景圖像區的外圍，而該第一背景圖像區係毗連於該前景使用者介面之該圖像的外圍；以及將該第一背景圖像區的平均色彩值乘以第一權重並將該第二背景圖像區的平均色彩值乘以第二權重，據以得出該色彩參數，其中該第一權重高於該第二權重。
6. 如請求項1所述之色彩設定方法，其中該色彩參數係對應一第一顏色，該對比色彩參數係對應一第二顏色，該第一顏色與該第二顏色互為補色。
7. 如請求項6所述之色彩設定方法，其中調整該前景使用者介面之該色彩的步驟包括：改變該前景使用者介面之內部顏色，使該內部顏色含有該第二顏色。
8. 如請求項7所述之色彩設定方法，其中該內部顏色 包括字型顏色。
9. 如請求項6所述之色彩設定方法，其中調整該前景使用者介面之該色彩的步驟包括：改變該前景使用者介面之邊緣顏色，使該邊緣顏色至少含有該第二顏色。
10. 如請求項9所述之色彩設定方法，其中改變該前景使用者介面之該邊緣顏色的步驟包括：設定該前景使用者介面具有複數層邊緣；以及將該些邊層緣的顏色係調整為由該第一顏色與該第二顏色交替排列。
11. 一種電子裝置，包括：一螢幕，用以顯示一背景使用者介面與一前景使用者介面；一螢幕擷取模組，用以自該螢幕的顯示內容中擷取一取樣圖像，其中該取樣圖像包括該前景使用者介面之圖像與該背景使用者介面之部分圖像，該背景使用者介面之該部分圖像係毗連於該前景使用者介面之該圖像的外圍；一色彩分析模組，用以分析該取樣圖像中該背景使用者介面之該部分圖像的色彩參數；一色彩選擇模組，用以根據該色彩參數，計算出一對比色彩參數，其中該對比色彩參數與該色彩參數具有互補性；以及一色彩調整模組，用以根據該對比色彩參數，調整該螢 幕所顯示的該前景使用者介面之色彩。
12. 如請求項11所述之電子裝置，其中該螢幕擷取模組偵測該背景使用者介面是否改變，當該背景使用者介面改變時，自該螢幕獲取一螢幕圖像，進而從該螢幕圖像中剪裁該取樣圖像。
13. 如請求項11所述之電子裝置，其中該螢幕擷取模組週期性地自該螢幕獲取一螢幕圖像，進而從該螢幕圖像中剪裁該取樣圖像。
14. 如請求項12或13所述之電子裝置，其中該螢幕擷取模組以該前景使用者介面所占的位置為中心向外等比例擴張的區域定義為一取樣區域，進而將該螢幕圖像中與該取樣區域重疊的範圍剪裁出來以作為該取樣圖像。
15. 如請求項11所述之電子裝置，其中該色彩分析模組將該取樣圖像中該背景使用者介面之該部分圖像劃分為一第一背景圖像區與一第二背景圖像區，進而將該第一背景圖像區的平均色彩值乘以第一權重並將該第二背景圖像區的平均色彩值乘以第二權重，據以得出該色彩參數，其中該第二背景圖像區係毗連於該第一背景圖像區的外圍，而該第一背景圖像區係毗連於該前景使用者介面之該圖像的外圍，該第一權重高於該第二權重。
16. 如請求項11所述之電子裝置，其中該色彩參數係 對應一第一顏色，該對比色彩參數係對應一第二顏色，該第一顏色與該第二顏色互為補色。
17. 如請求項16所述之電子裝置，其中該色彩調整模組改變該前景使用者介面之內部顏色，使該內部顏色含有該第二顏色。
18. 如請求項17所述之電子裝置，其中該內部顏色包括字型顏色。
19. 如請求項16所述之電子裝置，其中該色彩調整模組改變該前景使用者介面之邊緣顏色，使該邊緣顏色至少含有該第二顏色。
20. 如請求項19所述之電子裝置，其中該色彩調整模組設定該前景使用者介面具有複數層邊緣，進而將該些邊層緣的顏色係調整為由該第二顏色與該第一顏色交替排列。