本申請涉及用戶圖形界面領域，尤其涉及一種漸變色生成方法和裝置。

背景技術：

圖形用戶界面(GraPhical User Interface，簡稱GUI)在計算機軟件領域通常又會被從業(yè)者簡稱為用戶界面(User Interface，UI)，以下若無特殊說明，本申請所說的UI是指GUI。UI是技術與工業(yè)設計融合的產(chǎn)物，比如說設計新穎獨特的UI可以申請GUI外觀專利加以保護。然而設計師在進行UI設計時，其也需要技術上的支持和輔助，比如特定形狀的繪制工具，又或者特定顏色的選取工具。

在UI設計過程中，設計師經(jīng)常會使用到漸變色，比如將某一按鈕的顏色設置為漸變色，這關系到整個界面的美觀，也關系到用戶使用體驗。比如：漸變色可以幫助用戶清晰地了解按鈕的狀態(tài)，還可以清晰直觀地幫助用戶了解數(shù)據(jù)大小和分布，諸如居民出行的熱力分布圖等。然而，目前在漸變色的選取上，設計師受限于工具能力的限制，很多時候難以取得自己心目中理想的漸變色，這大大制約了設計師在UI設計過程中的利用顏色漸變進行表達的能力。

技術實現(xiàn)要素：

有鑒于此，本申請?zhí)峁┮环N漸變色生成方法和裝置。

具體地，本申請是通過如下技術方案實現(xiàn)的：

一種漸變色生成方法，包括：

根據(jù)用戶的操作確定用戶選擇的基礎顏色；

根據(jù)預定規(guī)則基于所述基礎顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；

根據(jù)指定的曲線參數(shù)以及若干選點變量使用預定的曲線算法從所述變色面上選擇出多個對應顏色的集合作為漸變色提供給用戶。

可選的，其中所述用戶的操作是針對預設的基色帶的選擇操作，所述基色帶是通過HSL模型建立的，該基色帶的各個顏色點均具有相同的色相H，不同顏色點之間的飽和度S以及亮度L的組合不同。

可選的，所述預定規(guī)則包括：

保持基礎顏色的色相H、飽和度S以及亮度L中任意一個參數(shù)不變，變化其他兩個參數(shù)以生成若干候選顏色，所述候選顏色集合包括基礎顏色和候選顏色。

可選的，所述曲線算法為貝塞爾曲線算法。

可選的，所述曲線參數(shù)是若干控制點坐標，該方法還包括：

根據(jù)用戶通過鼠標或者預設文本框輸入的控制點坐標，在所述變色面上生成對應的貝塞爾曲線展示給用戶。

可選的，所述若干選點變量是基于用戶指定的選點變量計算參數(shù)以及選點變量產(chǎn)生算法生成的。

一種漸變色生成裝置，包括：

基礎確定單元，根據(jù)用戶的操作確定用戶選擇的基礎顏色；

變色展示單元，根據(jù)預定規(guī)則基于所述基礎顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；

漸變色選擇單元，根據(jù)指定的曲線參數(shù)以及若干選點變量使用預定的曲線算法從所述變色面上選擇出多個對應顏色的集合作為漸變色提供給用戶。

可選的，其中所述用戶的操作是針對預設的基色帶的選擇操作，所述基色帶是通過HSL模型建立的，該基色帶的各個顏色點均具有相同的色相H，不同顏色點之間的飽和度S以及亮度L的組合不同。

可選的，所述預定規(guī)則包括：

保持基礎顏色的色相H、飽和度S以及亮度L中任意一個參數(shù)不變，變化其他兩個參數(shù)以生成若干候選顏色，所述候選顏色集合包括基礎顏色和候選顏色。

可選的，所述曲線算法為貝塞爾曲線算法。

可選的，所述曲線參數(shù)是若干控制點坐標，該裝置還包括：

曲線生成單元，根據(jù)用戶通過鼠標或者預設文本框輸入的控制點坐標，在所述變色面上生成對應的貝塞爾曲線展示給用戶。

可選的，所述若干選點變量是基于用戶指定的選點變量計算參數(shù)以及選點變量產(chǎn)生算法生成的。

由以上描述可以看出，本申請基于貝塞爾曲線或其他類似曲線的漸變色的產(chǎn)生過程，可以允許用戶(比如設計師)將漸變色的選擇范圍擴大，相對于線性插值得到的漸變色，設計師更加容易得到表達更為豐富漸變色，為UI設計能力的提升提供了更為堅實的技術基礎。

附圖說明

圖1是一種HSL模型描繪的色彩空間的示意圖。

圖2是相關技術中一種典型的線性漸變色的填充效果示意圖。

圖3是本申請一示例性實施例示出的一種漸變色生成方法的流程示意圖。

圖4是本申請一示例性實施例示出的一種用戶界面示意圖。

圖5是本申請一示例性實施例示出的一種貝塞爾曲線算法示意圖。

圖6A是本申請一示例性實施例示出的一種曲線變化示意圖。

圖6B是本申請一示例性實施例示出的一種曲線變化示意圖。

圖7是本申請一示例性實施例示出的一種用于漸變色生成裝置的一結構示意圖。

圖8是本申請一示例性實施例示出的一種漸變色生成裝置的結構框圖。

具體實施方式

這里將詳細地對示例性實施例進行說明，其示例表示在附圖中。下面的描述涉及附圖時，除非另有表示，不同附圖中的相同數(shù)字表示相同或相似的要素。以下示例性實施例中所描述的實施方式并不代表與本申請相一致的所有實施方式。相反，它們僅是與如所附權利要求書中所詳述的、本申請的一些方面相一致的裝置和方法的例子。

在本申請使用的術語是僅僅出于描述特定實施例的目的，而非旨在限制本申請。在本申請和所附權利要求書中所使用的單數(shù)形式的“一種”、“所述”和“該”也旨在包括多數(shù)形式，除非上下文清楚地表示其他含義。還應當理解，本文中使用的術語“和/或”是指并包含一個或多個相關聯(lián)的列出項目的任何或所有可能組合。

應當理解，盡管在本申請可能采用術語第一、第二、第三等來描述各種信息，但這些信息不應限于這些術語。這些術語僅用來將同一類型的信息彼此區(qū)分開。例如，在不脫離本申請范圍的情況下，第一信息也可以被稱為第二信息，類似地，第二信息也可以被稱為第一信息。取決于語境，如在此所使用的詞語“如果”可以被解釋成為“在……時”或“當……時”或“響應于確定”。

在具體介紹本申請各種具體實現(xiàn)之前，首先介紹一下本申請涉及到的基礎概念及本申請使用到的一些自定義。

在計算機軟件開發(fā)領域，獲取單個或者多個顏色可以理解為從一個色彩空間(也稱為“顏色空間”)中獲得一組或者多組數(shù)值(比如坐標值)，一組數(shù)值就代表著一個顏色。從某種形象的角度來看，一個顏色可以理解為色彩空間中的一個特定的坐標，選擇一個顏色通常也被理解為選擇一個顏色點。色彩空間事實上是把一個色彩模型所有能表示的顏色都放在一起組成的一個集合。

常用的色彩模型包括RGB模型以及HSL模型。對于RGB模型來說，RGB分別代表紅色、綠色、藍色三個分量，每個分量的取值范圍是0到1。標準的紅色在RGB模型中表示為：RGB(1,0,0)，也就是說綠色和藍色的分量為0。HSL模型是目前計算機軟件開發(fā)領域最流行的模型，其使用色相H(0--360)、飽和度S(0％--100％)以及亮度L(0％--100％)來表示一個顏色。標準紅色在HSL模型中表示為HSL(0,100％,50％)。請參考圖1，圖1是HSL模型描繪的色彩空間的示例。以下描述中將以HSL模型為例進行說明，RGB模型或其他模型與HSL模型原理類似不再一一贅述。

在相關技術中，產(chǎn)生漸變色或者說選擇漸變色的實現(xiàn)方式是取得兩個顏色點，然后由特定工具在兩個顏色點之間通過線性插值的方式來實現(xiàn)顏色漸變。漸變色事實上是一個顏色集合，在漸變色的應用上，可以利用漸變色對一個圖形進行填充得到漸變顯示效果。與單色填充一樣，漸變色填充只不過是把使用對象從單色變?yōu)闈u變色(若干單色的集合)，填充的時候可以選擇各種填充方式，比如線性填充，矩形填充，射線填充等等。無論是那種填充一般都是定義填充的起點和重點以及填充方向。值得注意的是，這種填充方式本質上是對漸變色的利用，而不是本申請后續(xù)討論的如何取得一個不單調(diào)的漸變色。

請參考圖2所示，其一種典型的線性漸變色的填充效果示例，PowerPoint軟件中的一個色彩基調(diào)下的8種漸變色填充方式，包括上下左右以及四個對角線方向的8種漸變填充，將鼠標移到任何一個漸變填充方式上，都會對漸變方式進行提示，比如“線性向下”或“線性對角”等等。

在線性插值技術生成漸變色的過程中，插值數(shù)量越多，漸變色所包含的顏色點就越多，反之則越少。但無論是顏色點多少，選出來得漸變色都非常得單調(diào)，并且不能很好地滿足設計師對本意的表達需求。換一個角度來說，由于漸變色事實上是一個顏色點集合，但設計師只能使用兩個顏色點連線上的若干顏色點中的任意一個，而無法獲得連線以外的其他想要的顏色點，這顯然制約了漸變色的豐富程度和表現(xiàn)能力。

請參考圖3，在一個例子中，本申請?zhí)峁┮环N漸變色生成方法。該方法可以包括以下步驟：

步驟301，根據(jù)用戶的操作確定用戶選擇的基礎顏色。

請參考圖4的界面所示，在一個例子中，本申請漸變色生成方法首先可以在界面上向用戶提供一個預設的基色帶401(需要說明的是，由于附圖不是彩色的，所以無法直觀看出來基礎顏色)供用戶從該基色帶401中選擇到一個基礎顏色。在這個例子中，基色帶401是一個可以進行選擇交互的界面，界面上包括若干的基礎顏色點，可以理解為基礎顏色的集合。

在一個例子中，基色帶401可以包括HSL模型中所有的基礎顏色的變化。所謂基礎顏色在本申請中的定義是指：在飽和度S以及亮度L均為特定數(shù)值(比如S＝100％；L＝50％)的情況下的顏色。這也就是說，基礎顏色集合事實上是色相H在(0--360)這個變化區(qū)間，而另外兩個參數(shù)S和L不變所產(chǎn)生的顏色集合?；珟?01由于與色相變化有關，因此有時候也被稱為色相條。在其他例子中，也可以僅僅包括部分色相變化。用戶可以通過鼠標或者其他方式在該界面上選定某個顏色點，該顏色點代表用戶選擇的基礎顏色。

基色帶401可以幫助用戶更方便地選定其想要的基礎顏色，但是在其他例子中，基色帶401也不是必須的。比如說，用戶可以輸入一個數(shù)值來指代一個基礎色，由于主要是色相在變化，因此只需要輸入一個0--360之間的一個數(shù)字即可。當然在很多時候，可以將(0--360)這個變化區(qū)間進行歸一化處理，也就是說輸入一個(0--1)之間的一個數(shù)字即可，這樣也可以唯一確定一個基礎顏色。本領域普通技術人員還可以設計其他的方式來幫助用戶選擇基礎顏色，本申請對此并無限制。

在以上的例子中，假設飽和度S以及亮度L不變，基于色相值H進行變化產(chǎn)生基色帶401。在其他的例子中也可以是飽和度S或者亮度L變化，其他兩個參數(shù)不變來產(chǎn)生基色帶401。在更為簡單的例子中，也可以直接輸入HSL三個維度的參數(shù)來確定一個基礎顏色。

步驟302，根據(jù)預定規(guī)則基于所述基礎顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶。

在基礎顏色選好之后，可以基于該基礎顏色使用預定規(guī)則來確定出一個候選顏色集合，后續(xù)可以從這個候選顏色集合中確定出用戶想要的漸變色。請參考圖4，這個候選顏色集合可以在界面上展示為一個變色面402，其中每個顏色點均來自所述候選顏色集合。在一個例子中，候選顏色集合可以包括基礎顏色以及基礎顏色在HSL模型中S維度上以及L維度進行變化產(chǎn)生各種顏色(也成候選顏色)。如前所述，飽和度S的變化區(qū)間是(0％--100％)，而亮度L的變化區(qū)間是(0％--100％)，在本例子中，可以將飽和度S以及亮度L的變化進行窮盡以確定出所有可能變化的候選顏色。理論上來說，可以變化出的候選顏色是無窮多的，但事實上計算機是存在計算粒度的，因此可以變化出的候選顏色依然是有限的，只是數(shù)量依然相當龐大。這些變化出來的候選顏色與基礎顏色的差異在于飽和度S和/或亮度S的不同，所有候選顏色的色相值都是相同的。在其他的例子中，飽和度S或者亮度L的變化區(qū)間未必是(0％--100％)，也可以是其他預定的范圍，比如(10％到80％)等等。值得注意的是，在其他例子中，確定基礎顏色之后，也可以保持飽和度S或者亮度L不變，在其他兩個維度進行變化。

步驟303，根據(jù)指定的曲線參數(shù)以及若干選點變量使用預定的曲線算法從變色面上選擇出多個對應顏色的集合作為漸變色提供給用戶。

在圖4中，變色面402的基礎顏色是“玫紅色”，因此整個變色面402是玫紅色在亮度L以及飽和度S上各種變化的顏色集合。與線性插值不同的是，本申請使用曲線算法來幫助用戶選擇出一個顏色集合作為漸變色。請參考圖5，以貝塞爾(Bezier)曲線為例來講解漸變色的產(chǎn)生過程。Bezier曲線是一種參數(shù)曲線，它可以通過多個控制點參數(shù)P(控制點的位置或者說控制點坐標)來控制曲線的形狀，通過改變變量t(一維變量)的取值(0<t<1)來確定曲線上的每一點。貝塞爾曲線的階數(shù)由控制點的個數(shù)n來決定，階數(shù)為n–1。圖4所示就是一個二階Bezier曲線，由三個控制點P0,P1,P2來控制形狀，當變量t＝0.25時可以計算得到曲線上的一個點B。點B的集合構成貝塞爾曲線，通用貝塞爾曲線的計算公式如下:

其中

對于上述公式，當貝塞爾曲線算法的所有參數(shù)確定下來，即所有的P確定后，把變量t帶入公式后就可以找到曲線上的對應的所有的點。具體來說，在0到1之間，變化變量t的值就可以計算出曲線上的每一個點的位置，把這些點連接起來就可以繪制出貝塞爾曲線，由于每個變量t的值都對應到一個顏色點，因此本申請將變量t也稱為選點變量。假設本例中選用的貝塞爾曲線是三階貝塞爾曲線，則該曲線對應4個控制點，這4個控制點就是三階貝塞爾曲線的4個參數(shù)。

請參考圖4，在這個例子中，所述四個控制點(P0,P1,P2,P3)可以分別位于各自的初始位置，具體位置在哪里并不具體限定。由于四個控制點已經(jīng)確定，變化變量t的取值即可繪制出對應的貝塞爾曲線，也就是說此時有對應的初始貝塞爾曲線展示在變色面402上。變色面402中這條曲線路徑上的所有顏色形成了一個顏色集合。如果這個曲線是用戶滿意的曲線，那么后續(xù)的漸變色將是這個顏色集合的子集。也就是說，這個顏色集合或者說這個曲線路徑是漸變色的來源。

請繼續(xù)參考圖4，如果用戶通過觀察變色面402中這條貝塞爾曲線所覆蓋的顏色集合后認為這個曲線所覆蓋的范圍不是自身預期的，則可以通過改變控制點的位置來改變曲線。當檢測到用戶使用鼠標或文本框的輸入方式改變控制點位置時，根據(jù)用戶的輸入操作將該控制點的位置進行相應變化。當一個或多個控制點發(fā)生變化后，可以基于控制點位置變化使用貝塞爾曲線算法計算出新的貝塞爾曲線，并展示在變色面402上。請參考圖6A以及6B所示不同控制點組合所對應的曲線變化示例。

除了可以根據(jù)鼠標的操作來改變控制點的位置進而改變曲線之外，在其他例子中，還可以提供文本框，供用戶輸入控制點在變色面402中的坐標。請參考圖6A或圖6B，假設變色面402的左下角是原點，X軸表達亮度L，變化范圍為0到1，Y軸表達飽和度S，變化范圍也是0到1。用戶輸入控制點的坐標就可以實現(xiàn)曲線的變化。在圖4的示例中，四個控制點都有對應的坐標輸入框，也就是控制點的實際坐標都允許用戶通過文本框中輸入數(shù)字來實現(xiàn)位置改變。

在本申請一個優(yōu)選的例子中，界面當前使能了鼠標輸入以及文本框輸入兩種方式。此時，可以根據(jù)用戶在文本框的輸入的控制點坐標實時改變變色面402中控制點的位置，也可以將在用戶通過鼠標改變控制點位置后，將控制點新位置在所述輸入框中將坐標更新。鼠標輸入的方式是操作速度快，但很難得到一個精確的結果。而文本框輸入的方式可以允許用戶對這個大概可用的結果進行微調(diào)，調(diào)整精度高，但調(diào)整速度慢。這種通過鼠標輸入與文本框輸入兩種方式的結合可以允許用戶快速地變化出一條自己想要的貝塞爾曲線。用戶可以通過鼠標輸入的方式得到一個大概的結果，然后再通過文本框輸入的方式微調(diào)來得到一個與其預期更加吻合的精確結果，即一條自己滿意的貝塞爾曲線。

在得到自己想要的貝塞爾曲線后，就可以通過指定若干貝塞爾曲線算法中的變量t從貝塞爾曲線上獲得多個顏色點。在控制點確定之后，貝塞爾曲線就可以確定下來。此時任意一個變量t都會對應到貝塞爾曲線中一個顏色點。由于當前呈現(xiàn)在變色面402中的曲線理論上代表了無數(shù)個顏色的集合，雖然事實上是有限的，但數(shù)量依然非常龐大。用戶實際需要的漸變色可能是一個少數(shù)顏色的集合，比如20或者50個顏色的集合。一種簡單的做法是，軟件事先指定20個或50個變量t的值，就可以計算得到對應數(shù)量的顏色點，這些顏色點的顏色集合就是一個漸變色。根據(jù)這些顏色點代表的顏色相應生成對應的純色圖形(比如純色框)給用戶，這個序列中每個純色圖形對應使用一個計算得到的顏色點的顏色。換一個角度來說這個序列就是漸變色的一個直觀表達，用戶可以從這個純色序列中選用任意多個顏色使用。

在另一個例子中，為了給用戶提供更多的便利性，允許用戶生成這個純色圖形序列中純色圖形的數(shù)量，也就是漸變色這個顏色集合中顏色的數(shù)量。在這個例子中，可以允許用戶輸入一個等差參數(shù)m來間接確定若干個t的取值，根據(jù)m確定一個等差數(shù)列，等差數(shù)列中的每個數(shù)值就是變量t的取值。其中等差數(shù)列S的項數(shù)為m，S0＝0，Sm＝1-1/m，公差為1/m。Si可以表達為：0+1/m*i，其中i為大于等于0，小于等于m-1的整數(shù)。假設m＝10，那么t的取值分別為0，0.1，0.2，0.3……0.8,0.9。m的數(shù)值可以由用戶指定。在其他例子中，還可以通過等比數(shù)列或其他的方式一次性產(chǎn)生若干個參數(shù)值t。在本申請中，這種一次性生成若干個參數(shù)值t的方法稱為t值產(chǎn)生算法，也稱為選點變量產(chǎn)生算法，其可以是各種算法，本申請并不限制；而m則稱為選點變量計算參數(shù)。選點變量產(chǎn)生算法的優(yōu)勢在于，其允許用戶輸入少量參數(shù)即可得到其指定數(shù)量的變量t的值，從而一次性地通過貝塞爾曲線算法在曲線上找到與參數(shù)值t對應的指定數(shù)量的顏色點，基于這些顏色點確定出漸變色，進而可以產(chǎn)生出對應的純色圖形序列直觀展現(xiàn)所述漸變色，供用戶后續(xù)使用。

通過以上的描述可以看出，如果用戶對產(chǎn)生的漸變色結果不滿意，其可以隨時通過改變控制點參數(shù)或參數(shù)值t來改變漸變色的產(chǎn)生，此時代表漸變色的純色圖形序列將跟隨用戶輸入的改變而實時變化。值得注意的是，在傳統(tǒng)技術中，貝塞爾曲線算法的多應用于工業(yè)領域的產(chǎn)品輪廓或建筑輪廓的設計。比如說汽車商場可以在汽車外形設計工具中利用貝塞爾曲線算法去設計和調(diào)整汽車的流線，獲得更好的美觀或者更低的風阻系數(shù)。在本申請中，貝塞爾曲線的利用主要是為了獲得一組顏色的集合。這種基于貝塞爾曲線或其他類似曲線的漸變色的產(chǎn)生過程，可以允許用戶(比如設計師)將漸變色的選擇范圍擴大，相對于線性插值得到的漸變色，設計師更加容易得到表達更為豐富漸變色，為UI設計能力的提升提供了更為堅實的技術基礎。

需要說明的是，前述步驟303中預定的曲線算法并不限制于貝塞爾曲線算法，還可以采用其他基于參數(shù)樣條曲線進行曲線漸變的曲線算法，本申請對此不作特殊限制。

與前述漸變色生成方法的實施例相對應，本申請還提供了漸變色生成裝置的實施例。

本申請漸變色生成裝置的實施例可以應用在終端上。裝置實施例可以通過軟件實現(xiàn)，也可以通過硬件或者軟硬件結合的方式實現(xiàn)。以軟件實現(xiàn)為例，作為一個邏輯意義上的裝置，是通過其所在終端的處理器將非易失性存儲器中對應的計算機程序指令讀取到內(nèi)存中運行形成的。從硬件層面而言，如圖7所示，為本申請漸變色生成裝置所在終端的一種硬件結構圖，除了圖7所示的處理器、內(nèi)存、網(wǎng)絡接口、以及非易失性存儲器之外，實施例中裝置所在的終端通常根據(jù)該指定的實際功能，還可以包括其他硬件，對此不再贅述。

圖8是本申請一示例性實施例示出的一種漸變色生成裝置的框圖。

請參考圖8，所述漸變色生成裝置700可以應用在前述圖7所示的終端中，包括有：基礎確定單元701、變色展示單元702、漸變色選擇單元703以及曲線生成單元704。

其中，所述基礎確定單元701，根據(jù)用戶的操作確定用戶選擇的基礎顏色；

所述變色展示單元702，根據(jù)預定規(guī)則基于所述基礎顏色生成候選顏色集合，基于該候選顏色集合生成變色面并展現(xiàn)給用戶；

所述漸變色選擇單元703，根據(jù)指定的曲線參數(shù)以及若干選點變量使用預定的曲線算法從所述變色面上選擇出多個對應顏色的集合作為漸變色提供給用戶。

可選的，其中所述用戶的操作是針對預設的基色帶的選擇操作，所述基色帶是通過HSL模型建立的，該基色帶的各個顏色點均具有相同的色相H，不同顏色點之間的飽和度S以及亮度L的組合不同。

可選的，所述預定規(guī)則包括：

保持基礎顏色的色相H、飽和度S以及亮度L中任意一個參數(shù)不變，變化其他兩個參數(shù)以生成若干候選顏色，所述候選顏色集合包括基礎顏色和候選顏色。

可選的，所述曲線算法為貝塞爾曲線算法。

可選的，所述曲線參數(shù)是若干控制點坐標，該裝置還包括：

所述曲線生成單元704，根據(jù)用戶通過鼠標或者預設文本框輸入的控制點坐標，在所述變色面上生成對應的貝塞爾曲線展示給用戶。

可選的，所述若干選點變量是基于用戶指定的選點變量計算參數(shù)以及選點變量產(chǎn)生算法生成的。

以上所述僅為本申請的較佳實施例而已，并不用以限制本申請，凡在本申請的精神和原則之內(nèi)，所做的任何修改、等同替換、改進等，均應包含在本申請保護的范圍之內(nèi)。