在今天，受限于國內(nèi)激烈的市場競爭，C 端產(chǎn)品為了爭奪用戶注意力，界面的設(shè)計越來越復(fù)雜，色彩越來越豐富（花哨），極簡的風(fēng)格只存在于少數(shù)頭部產(chǎn)品和工具類產(chǎn)品中。

這種風(fēng)氣會傳導(dǎo)到招聘的要求中，也就是對作品集的審視，往往更重視能駕馭復(fù)雜視覺風(fēng)格的作品，而不是極簡的風(fēng)格。

所以，除了界面設(shè)計中對界面、組件框架樣式的設(shè)計創(chuàng)新外，最重要的就是對界面配色的管理和表現(xiàn)。而配色作為所有設(shè)計類型的終極難題之一，長期困擾著初級 UI 設(shè)計師。

所以我們今天的主題，就是用最簡單、適用的邏輯，來解釋 UI 配色的方法！

一、色彩的選擇模式認(rèn)識

學(xué)會配色首先要理解色彩，以及在 UI 設(shè)計中要配哪些“色”。

首先是對色彩的描述，相信大家或多或少聽說過 RGB、CMYK 之類的名詞，它們就是對不同場景下的色彩描述方法。

比如顯示器成像，是由一個個像素點(diǎn)顯示不同色彩組成的，而像素點(diǎn)的顏色由三個發(fā)光晶體管控制，即 Red 紅、Green 綠、Blue 藍(lán)，它們發(fā)出不同強(qiáng)弱的光進(jìn)行混合，從而形成新像素點(diǎn)上最后顯示的色彩，所以也叫 RGB 色。

而對于現(xiàn)實(shí)世界的物體的染色、印刷，就要使用具體的顏料上色，為了節(jié)省成本工業(yè)界不可能提供成百上千萬的顏料類型，所以使用了 Cyan 青色、Magenta 洋紅色、Yellow 黃色三個顏色作為基礎(chǔ)進(jìn)行混合，生成其它顏色。而因為 Black 黑色、灰色難以用別的顏色混出來，所以單獨(dú)提供，于是就有了 CMYK 色。

在 UI 設(shè)計中，我們的設(shè)計內(nèi)容無須進(jìn)行打印，所以只會以 RGB 模式記錄和顯示。但是 RGB 色的記錄模式比較復(fù)雜，即每個色值有 0-255 的 256 個顏色，要分別記錄這三個數(shù)值，且它們混合后的色彩很難判斷。

所以雖然 UI 中用的是 RGB，但我們?nèi)粘＿x色使用的卻是 HSB 模式，即將顏色劃分成色相 Hue、飽和度 Saturation、明度 Brightnessd。它是對色彩邏輯上的定義，會根據(jù)應(yīng)用的需要轉(zhuǎn)化成 RGB 和 CMYK，所以不用糾結(jié)它不是 RGB 不能顯示怎么辦。

而多數(shù) UI 軟件的色彩選擇面板，就是使用 HSB 的選色邏輯來設(shè)計的，有一個橫向的色相條，加一個表示明度、飽和度的矩形區(qū)域。

雖然色相條是一個長方形，但用過應(yīng)該能發(fā)現(xiàn)它的首尾都是紅色，因為 HSB 模式下建立的色相是一個 360 度的環(huán)形，也叫色環(huán)。選色面板用的色相條，就是這個色環(huán)截開拉直后的效果，所以首尾是同一顏色。

使用 HSB 選色的邏輯 —— 先確定色相，再調(diào)節(jié)飽和度和明度。

如果飽和度 S 值為零，則色彩沒有任何色相只剩下黑白灰，即中性色。明度 B 值控制亮度，0 即完全沒有亮度所以是黑色，100 最亮則是白色，即顏色越深 B 值越小，B 值越大顏色越亮。

學(xué)會使用 HSB 選色和微調(diào)的方式是進(jìn)行配色的關(guān)鍵，因為專業(yè)的設(shè)計過程會有清晰的色彩應(yīng)用思路，會直接通過色彩面板去找到自己要的顏色，甚至是直接手動輸入數(shù)值，而不是把選色面板當(dāng)盲盒隨機(jī)拖一個出來去測試。

在 UI 設(shè)計過程中，如果軟件的色彩面板默認(rèn)是其它模式，優(yōu)先將它們先切換成 HSB （有些是 HEX）模式。

二、UI 界面的色彩類型認(rèn)識

了解選色模式是第一步，而第二步就是認(rèn)識 UI 界面中應(yīng)用的色彩類型有哪些，為進(jìn)一步掌握配色做準(zhǔn)備。

在過去，我們將界面的配色分為主色、輔助色、中性色三種類型，但這次我們要做出新的定義，以滿足目前 UI 設(shè)計趨勢的需要。

UI 界面中應(yīng)用的色彩可以分成：品牌色、功能色、中性色、裝飾色、內(nèi)容色等，四個大類。

1. 品牌色

品牌色即組成產(chǎn)品品牌基調(diào)、個性的核心色彩，用于區(qū)分自己和其它產(chǎn)品之間的區(qū)別。而品牌色并不是只有一個，而是包含主色、輔助色兩個分類。

首先品牌主色，是品牌的核心色調(diào)，是和品牌進(jìn)行綁定的色彩錨點(diǎn)，比如想到美團(tuán)就是黃色，想到肯德基就是紅色，想到星巴克就是綠色。常規(guī)的品牌主色有且只能有一個。

而輔助色，則是建立在品牌色彩系統(tǒng)內(nèi)搭配主色出現(xiàn)的色彩。比如麥當(dāng)勞的核心主色是黃色（LOGO 色，"金"拱門），但相信麥當(dāng)勞的紅色你們一定也不陌生，它們經(jīng)常相伴出現(xiàn)。再比如沃爾瑪，雖然主色是藍(lán)色但是黃色在品牌制品和包裝上也沒少用。

輔助色可以只有一個也可以有多個，作為補(bǔ)充比使用單一主色會更具辨識度和豐富性。但它不是必須的，因為在 UI 界面中出現(xiàn)的顏色往往非常多，品牌輔助色的加入往往會讓配色變得更困難，反而成為拖累。

2. 功能色

功能色，就是根據(jù)界面?zhèn)鬟_(dá)信息、隱喻所應(yīng)用的色彩，具有比較明確的工具作用而存在。部分場景下用戶對色彩代表的寓意認(rèn)識根深蒂固時，那么我們就有必要順應(yīng)這種認(rèn)識來添加色彩。

比如電商中紅色代表價格、折扣，工具產(chǎn)品里綠色代表成功通過，國內(nèi)金融產(chǎn)品里紅色代表上漲綠色代表下跌，幣圈行業(yè)反過來綠色代表上漲紅色代表下跌等。

功能色的應(yīng)用是必要的，因為色彩也是用于傳遞信息的關(guān)鍵要素之一。但是，功能色不一定完全和品牌色脫節(jié)，如果品牌色和想要的功能色接近，往往直接使用品牌色即可，不用創(chuàng)建新的顏色。

比如京東的價格、優(yōu)惠用的就是品牌主色，支付寶的確認(rèn)、同意用的也是品牌主色。

3. 中性色

中性色就是黑白灰，即沒有顏色的“顏色”。

一個項目再怎么花哨，也會包含不需要使用花哨色彩的背景、文字、圖標(biāo)，而通常它們在整個應(yīng)用內(nèi)的占比才是最大的，而不是品牌色！

中性色是支撐整個產(chǎn)品色彩體系的骨架，用好中性色就能讓界面被用戶快速理解、認(rèn)識。所以在一些品牌色就是以黑色為主色的產(chǎn)品中，用戶也并不會因為產(chǎn)品沒有使用其它色相而不知道應(yīng)用怎么使用。

4. 裝飾色

前面提到的三種色彩類型，都是要進(jìn)入項目設(shè)計規(guī)范內(nèi)的“標(biāo)準(zhǔn)色”，而應(yīng)用實(shí)際設(shè)計過程中光靠這些標(biāo)準(zhǔn)色是無法滿足所有場景的。

比如一些特定的活動頁面，或者裝飾圖標(biāo)，運(yùn)營場景等，都會根據(jù)具體的需求或美觀性應(yīng)用其它色彩。

裝飾色的配置沒有非常具體的要求，在一定程度上就是脫離原有的規(guī)范標(biāo)準(zhǔn)，作為一個獨(dú)立的設(shè)計去完成。所以很多大廠產(chǎn)品在不同頁面中的運(yùn)營需求不同，于是裝飾色各用各的，導(dǎo)致最終呈現(xiàn)出來的結(jié)果非常割裂。

裝飾色是在今天的移動端設(shè)計中最大的難題，因為我們要加入很多新的色彩進(jìn)去會和規(guī)范色形成沖突。雖然線上很多產(chǎn)品的配色都有種放棄治療的決絕，但在招聘環(huán)節(jié)中對色彩的應(yīng)用上這些要求又全部回來辣（就是這么分裂）！

5. 內(nèi)容色

最后一個，就是內(nèi)容色了，即產(chǎn)品內(nèi)展示的內(nèi)容所使用的色彩，如用戶的照片，商品的圖片，廣告的圖片等等。

某種程度上來說內(nèi)容用什么顏色是不可控的，不在配色的考慮范圍內(nèi)。但對于一些特定的產(chǎn)品中，內(nèi)容用什么顏色是有確定性的，甚至直接規(guī)范內(nèi)容制作、拍攝、后期的用色規(guī)范，讓整體的配色能更統(tǒng)一和諧。

比如美妝、服裝、茶飲類品牌自家的應(yīng)用或小程序：

并且在作品集項目和評審中，設(shè)計師自己輸出的界面也是要考慮內(nèi)容用色的，因為內(nèi)容往往在頁面中占比很大，用色的好壞會直接影響觀看者對整個頁面的評價，所以我們必須要把它當(dāng)成配色的一部分來處理。

比如我們前陣子之前分享過的案例：

配色就是完成對上面五種色彩類型的選擇、控制、管理，形成最終呈現(xiàn)的效果。

結(jié)尾

今天的分享就到這里，時間有限一口氣寫不完，下一篇會繼續(xù)展開對配色方法的具體介紹和案例演示。

作者：超人的電話亭