不管是做 UI 設(shè)計(jì)還是畫(huà)插畫(huà)，有很多同學(xué)覺(jué)得自己是因?yàn)樘熨x不夠所以對(duì)色彩的敏感度不夠，其實(shí)不然。一個(gè)可能是大家總結(jié)的太少，從來(lái)都是憑感覺(jué)和運(yùn)氣去配色，但配色都是有講究的。本文不會(huì)給大家重復(fù)講解什么是 rgb，什么是 hsb，什么是 cmyk 或者什么三原色，這些大家都可以從網(wǎng)上直接搜到。我今天要給大家分享的是人們是如何認(rèn)識(shí)色彩，并且在產(chǎn)品設(shè)計(jì)中使用的。

人類(lèi)對(duì)色彩感知的原理

大家都知道，對(duì)于不同的顏色，我們對(duì)其的感知是不同的，有人覺(jué)得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那這是什么原因呢？首先我們要知道眼睛內(nèi)存在兩種感光細(xì)胞：視錐細(xì)胞和視桿細(xì)胞，視桿細(xì)胞能夠感知光線(xiàn)強(qiáng)弱但無(wú)法感知顏色，而視錐細(xì)胞卻相反，視錐細(xì)胞內(nèi)還有 3 種對(duì)不同頻率光敏感的細(xì)胞。我們經(jīng)常會(huì)用到視錐細(xì)胞，而視桿細(xì)胞卻用的少，更多的是在黑暗的環(huán)境中使用的多。

視錐細(xì)胞的三種類(lèi)型分別是低頻、中頻和高頻視錐細(xì)胞，分別對(duì)紅、綠、藍(lán)三種顏色的光敏感。而且這三個(gè)視錐細(xì)胞分別也有重合的部分。低頻視錐細(xì)胞對(duì)整個(gè)可見(jiàn)光頻譜都敏感，它的范圍包含的比較廣，特別是對(duì)于頻譜中段的黃色到紅色部分更加敏感。但是像高頻的紫色幾乎只有藍(lán)視錐細(xì)胞可以感知。

大家在平時(shí)生活中都能看到，在馬路上、機(jī)動(dòng)車(chē)道上以及一些警示牌都會(huì)采用黃色、橙色等標(biāo)識(shí)，因?yàn)檫@些非常醒目。更容易被紅視錐細(xì)胞感知到，但如果你的標(biāo)識(shí)用的是冷色調(diào)那這個(gè)交通事故可能要發(fā)生的頻繁得多。

1. 人對(duì)色彩邊緣的對(duì)比更加敏感

我們來(lái)做個(gè)實(shí)驗(yàn)，如下圖，大家覺(jué)得在中間的灰色塊是純色還是漸變色，可能很多同學(xué)看上去都會(huì)覺(jué)得是個(gè)漸變色，但其實(shí)它就是一個(gè)純色，不信的同學(xué)可以自己在工具中嘗試一下。

但如果你把這個(gè)色塊拿出來(lái)后，不在這個(gè)環(huán)境中直接進(jìn)行邊緣對(duì)比，那就不會(huì)出現(xiàn)漸變的情況了。光說(shuō)原理，我們也來(lái)看一下在產(chǎn)品設(shè)計(jì)中需要注意的地方，因?yàn)樵?UI 界面設(shè)計(jì)中我們通常需要把一些圖片、卡片疊加放置，這樣就會(huì)造成邊緣視覺(jué)的對(duì)比，本來(lái)不明顯的兩個(gè)元素重疊之后變的很明顯，例如一些標(biāo)簽的背景色和頁(yè)面整體的背景色。

如果你想要讓兩個(gè)顏色接近的元素具有識(shí)別度，那么最好將這兩個(gè)元素進(jìn)行重疊擺放而不是分開(kāi)擺放。另外，如果是卡片樣式的設(shè)計(jì)，背景色一定不要過(guò)于灰暗也不要過(guò)于淺白，過(guò)于深的話(huà)會(huì)讓卡片輪廓過(guò)于明顯而導(dǎo)致整體看上去顯臟以及很明顯的對(duì)比，顯得不自然和舒適。如果過(guò)于淺的話(huà)也會(huì)導(dǎo)致信息的不聚焦。

還有，為什么被框起來(lái)的文字會(huì)看上去更加有點(diǎn)擊的欲望其實(shí)也是這個(gè)道理，因?yàn)槲淖趾捅尘隘B加產(chǎn)生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號(hào)。當(dāng)它被賦予顏色之后，我們才會(huì)意識(shí)到它需要我們?nèi)プ⒁饣蛘呖杀稽c(diǎn)擊，但依然不夠明顯，所以為了強(qiáng)化可點(diǎn)擊這個(gè)感覺(jué)，我們才用了線(xiàn)框、背景色、箭頭等方式。

色彩在UI設(shè)計(jì)中的作用

1. 加深品牌印象與品牌感

一般來(lái)說(shuō)，產(chǎn)品都會(huì)有一個(gè)品牌的主色。而這個(gè)品牌的主色也通常會(huì)運(yùn)用在外面的產(chǎn)品界面中，所以例如閑魚(yú)、馬蜂窩等，主色都采用了黃色，黃色具有非?；顫?、有趣、好玩的特性，無(wú)論是線(xiàn)上還是線(xiàn)下都使用了這個(gè)品牌黃色，從每一個(gè)線(xiàn)上元素的主色，到線(xiàn)下包裝的印刷色。

但一定要注意的是，如果品牌的主色偏灰偏暗的話(huà)，可能不太適合線(xiàn)上的產(chǎn)品進(jìn)行通用。例如之前的嚴(yán)選、云集、711便利店、宜家等產(chǎn)品的主色都是偏深和暗的，所以在線(xiàn)上的界面用起來(lái)會(huì)非常不和諧，和整體偏淺色、輕的風(fēng)格對(duì)比起來(lái)太強(qiáng)烈，引起不適。

而且線(xiàn)上覺(jué)得還不錯(cuò)的顏色，由于印刷的原理，實(shí)物也會(huì)更加偏低飽和和偏暗。

2. 引導(dǎo)用戶(hù)視覺(jué)凹增加易讀性

我們?cè)凇度绾斡欣碛袚?jù)做設(shè)計(jì)，而不是憑感覺(jué)？》里提到了人們?nèi)绾伍喿x信息，提到了一個(gè)視覺(jué)凹的概念。所以在界面中，什么樣的地方使用色彩是有講究的。所以在這里通常會(huì)需要使用顏色的地方在于希望引導(dǎo)用戶(hù)和吸引用戶(hù)注意的地方才會(huì)使用色彩。例如下方產(chǎn)品，使用了高亮色來(lái)引導(dǎo)用戶(hù)視覺(jué)。

當(dāng)然色彩的運(yùn)用也會(huì)將整個(gè)頁(yè)面的層級(jí)凸顯出來(lái)，而不單純的用中性色來(lái)區(qū)分層級(jí)。

3. 區(qū)分信息交互的狀態(tài)

同樣是上兩張圖，大家可以清晰的看到，美團(tuán)中的附近熱賣(mài)好點(diǎn)、滿(mǎn)減標(biāo)簽、價(jià)格，其實(shí)都只具備信息的呈現(xiàn)，但不具備交互的特征和狀態(tài)。但淘票票中的「4.7萬(wàn)」和「展開(kāi)」卻不一樣，「展開(kāi)」使用了輔助藍(lán)色，這里的展開(kāi)就具備這個(gè)文案所描述的這個(gè)控件具備的交互特性──點(diǎn)擊后將隱藏的文字展示出來(lái)。藍(lán)色一般我們都會(huì)使用在某個(gè)可點(diǎn)的鏈接上，當(dāng)然也會(huì)有其他的色彩來(lái)表示可點(diǎn)擊。

所以不是所有的元素都要賦予顏色，這樣會(huì)使整個(gè)頁(yè)面非?；靵y。

另外，UI 設(shè)計(jì)中主色除了引導(dǎo)用戶(hù)的作用外，也可以表示當(dāng)前正被激活的信息狀態(tài)。例如愛(ài)奇藝 app 中播放詳情頁(yè)面，當(dāng)前版塊標(biāo)簽和正在播放劇集的激活狀態(tài)。

4. 營(yíng)造氛圍傳遞熱度

色彩除了上方所述的字段中的不同使用，在圖片和整體氛圍營(yíng)造中也起了很大的作用，目前很多 2c 的產(chǎn)品往往會(huì)在界面氛圍的營(yíng)造中運(yùn)用一些手段。例如導(dǎo)航欄、底部標(biāo)簽欄上的圖標(biāo)，或者在首頁(yè)營(yíng)銷(xiāo)版塊的瓷片區(qū)域都會(huì)用品牌色在活動(dòng)時(shí)段內(nèi)進(jìn)行氛圍打造。

在UI設(shè)計(jì)中色彩運(yùn)用的坑與技巧

1. 色彩的正反兩面

在色彩的心理學(xué)上，大家都知道每個(gè)顏色具有一定的性格特征和表達(dá)。而且都會(huì)有正反兩面，可以看下方多種色彩的描述。

然而其實(shí)很多的產(chǎn)品使用的色彩和我們所認(rèn)知的會(huì)有一些差別，比如咖啡品牌的主色選擇，在我們常規(guī)人之中，咖啡應(yīng)該是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其實(shí)都用了和咖啡本質(zhì)沒(méi)什么關(guān)系的顏色。

在瑞幸剛出來(lái)的時(shí)候，很多人其實(shí)不太習(xí)慣把這個(gè)藍(lán)色和咖啡結(jié)合起來(lái)，但是為了塑造品牌差異化，瑞幸一直將「藍(lán)色」作為品牌的主基調(diào)，「小藍(lán)杯」這一稱(chēng)呼不但讓消費(fèi)者感到親切，也在眾多的咖啡中有了屬于自己的記憶點(diǎn)。在這支廣告片中，主基調(diào)同樣是使用藍(lán)色，不但符合了當(dāng)下消費(fèi)者的視覺(jué)偏好，也在為用戶(hù)留下記憶點(diǎn)之后，讓用戶(hù)在看到藍(lán)色時(shí)自然而然地想到瑞幸咖啡。

2. 顏色的禁忌用法

但凡各位使用了這樣的配色，保證各位過(guò)不了試用期，相信我。所以大家千萬(wàn)要避開(kāi)。

高飽和度的色彩

高飽和度的色彩，會(huì)讓人產(chǎn)生「幻覺(jué)」！讓人產(chǎn)生視覺(jué)疲勞，例如我將餓了么這個(gè)界面的色調(diào)調(diào)整一下大家看一下，不亮瞎算我輸。

灰部使用過(guò)多的配色

為什么很多時(shí)候我們總覺(jué)得界面臟兮兮的。是因?yàn)槲覀冊(cè)诮缑婊蛘吲渖惺褂昧诉^(guò)多的低飽和度、灰度較多的配色，所以這也是要避免的。

沒(méi)有規(guī)律且過(guò)多的配色

讓界面或者插畫(huà)看起來(lái)非?；靵y。一般來(lái)說(shuō)顏色的使用也需要有側(cè)重點(diǎn)，所以我們常用的方法是6、3、1的色彩配比。

熒光色

熒光色絕對(duì)不可以使用在 UI 界面中，尤其是主色。

太輕柔的顏色

在很多 dribbble 的飛機(jī)稿中，經(jīng)常能看到這樣的配色和練習(xí)。無(wú)論是在練習(xí)中還是實(shí)際項(xiàng)目中，這樣的界面也完全無(wú)法讓用戶(hù)看到想看的信息，沒(méi)有重點(diǎn)且輕飄飄的感覺(jué)。

現(xiàn)在很火的新擬物化設(shè)計(jì)

說(shuō)真的，這樣的風(fēng)格確實(shí)耳目一新，但個(gè)人覺(jué)得可能不會(huì)成為主流。因?yàn)樗秃偷谖宸N一樣：信息可識(shí)別性很差。且不談色弱的人群，就正常的用戶(hù)來(lái)說(shuō)大面積的白色+飽和度低的元素結(jié)合，感覺(jué)就是得了「白內(nèi)障」。另外我們常說(shuō)的一點(diǎn)就是所有元素都強(qiáng)調(diào)就等于什么都沒(méi)有強(qiáng)調(diào)，這樣的風(fēng)格在每一個(gè)元素都具有陰影的情況下都在爭(zhēng)先恐后讓用戶(hù)感知，原則是輕量化卻又需要那么多陰影，這樣就有點(diǎn)自相矛盾的感覺(jué)。

為了營(yíng)造這樣的「新擬物」的輕量氛圍，還不得不在整個(gè)界面中簡(jiǎn)化大部分元素，能不加文字就不能加文字。有一句話(huà)一直非常影響我做設(shè)計(jì)：「設(shè)計(jì)是需要被簡(jiǎn)化的，但是簡(jiǎn)化的過(guò)程一定不簡(jiǎn)單」。所以不是單純的簡(jiǎn)化所有元素為了達(dá)到這個(gè)風(fēng)格的目的。

不要將對(duì)抗色重疊

例如下方，兩種對(duì)抗色重疊后會(huì)引起視覺(jué)閃爍的感覺(jué)。

正確的UI配色方法

1. 定義主色

首先我們必須要說(shuō)，色彩肯定是需要結(jié)合產(chǎn)品和用戶(hù)的定位去指定和提煉的，所以前期會(huì)需要去做一些研究，例如用戶(hù)畫(huà)像，品牌沖刺或者是情緒板等方法。得到幾類(lèi)「真實(shí)的虛擬用戶(hù)」，從而確定一些主色的方案。然后我們?cè)谥魃倪x擇中需要避開(kāi)上面提到的坑，并且對(duì)市面上的 app 進(jìn)行總結(jié)，我們發(fā)現(xiàn)大部分的產(chǎn)品色，簡(jiǎn)單來(lái)講在我們 HSB 模式中取色都在一個(gè)固定的范圍，就像這樣。

在上文中也說(shuō)到用色比例的 631 法則，所以在選取輔助色的時(shí)候我們需要定義好輔助色可以用在什么地方。例如知乎，其實(shí)輔助色沒(méi)有非常明顯的一種或者兩種，都是多色的輔助色方案，都在一個(gè)配色的系統(tǒng)中選取顏色即可。大部分產(chǎn)品目前都是這樣的策略，一個(gè)主色搭配多個(gè)輔色，如果有其他獨(dú)立的板塊可能需要重新定義專(zhuān)屬的配色策略。

2. 定義中性色

其次再定義中性色，比如字體和線(xiàn)條以及背景色。字體是為了讓信息有對(duì)比，顯示層級(jí)，那么通常給 2-3 種層級(jí)即可，至少 2 種，至多 3 種。在選擇 3 個(gè)層次的中性色文字時(shí)，給大家一個(gè)建議：標(biāo)題/正文文字顏色 HSB 的 B 值不要大于 20，備注和次要文字 b 值不要大于 50，默認(rèn)文字不要大于 80，大家可以去嘗試一下，且中性色不得使用純黑。

文章來(lái)源：優(yōu)設(shè)   作者：應(yīng)俊