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

人類對色彩感知的原理

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

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

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

1. 人對色彩邊緣的對比更加敏感

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

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

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

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

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

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

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

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

而且線上覺得還不錯的顏色，由于印刷的原理，實物也會更加偏低飽和和偏暗。

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

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

當(dāng)然色彩的運用也會將整個頁面的層級凸顯出來，而不單純的用中性色來區(qū)分層級。

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

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

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

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

4. 營造氛圍傳遞熱度

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

在UI設(shè)計中色彩運用的坑與技巧

1. 色彩的正反兩面

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

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

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

2. 顏色的禁忌用法

但凡各位使用了這樣的配色，保證各位過不了試用期，相信我。所以大家千萬要避開。

高飽和度的色彩

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

灰部使用過多的配色

為什么很多時候我們總覺得界面臟兮兮的。是因為我們在界面或者配色中使用了過多的低飽和度、灰度較多的配色，所以這也是要避免的。

沒有規(guī)律且過多的配色

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

熒光色

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

太輕柔的顏色

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

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

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

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

不要將對抗色重疊

例如下方，兩種對抗色重疊后會引起視覺閃爍的感覺。

正確的UI配色方法

1. 定義主色

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

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

2. 定義中性色

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

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