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

人類對色彩感知的原理

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

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

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

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

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

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

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

還有，為什么被框起來的文字會看上去更加有點擊的欲望其實也是這個道理，因為文字和背景疊加產生的輪廓只是文字的輪廓，在我們的第一印象中只是一種符號。當它被賦予顏色之后，我們才會意識到它需要我們去注意或者可被點擊，但依然不夠明顯，所以為了強化可點擊這個感覺，我們才用了線框、背景色、箭頭等方式。

色彩在UI設計中的作用

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

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

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

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

2. 引導用戶視覺凹增加易讀性

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

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

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

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

所以不是所有的元素都要賦予顏色，這樣會使整個頁面非常混亂。

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

4. 營造氛圍傳遞熱度

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

在UI設計中色彩運用的坑與技巧

1. 色彩的正反兩面

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

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

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

2. 顏色的禁忌用法

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

高飽和度的色彩

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

灰部使用過多的配色

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

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

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

熒光色

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

太輕柔的顏色

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

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

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

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

不要將對抗色重疊

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

‍正確的UI配色方法

1. 定義主色

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

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

2. 定義中性色

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

作者的微信公眾號：「應謀鬼計」