在今天，受限于國(guó)內(nèi)激烈的市場(chǎng)競(jìng)爭(zhēng)，C 端產(chǎn)品為了爭(zhēng)奪用戶(hù)注意力，界面的設(shè)計(jì)越來(lái)越復(fù)雜，色彩越來(lái)越豐富（花哨），極簡(jiǎn)的風(fēng)格只存在于少數(shù)頭部產(chǎn)品和工具類(lèi)產(chǎn)品中。
這種風(fēng)氣會(huì)傳導(dǎo)到招聘的要求中，也就是對(duì)作品集的審視，往往更重視能駕馭復(fù)雜視覺(jué)風(fēng)格的作品，而不是極簡(jiǎn)的風(fēng)格。
所以，除了界面設(shè)計(jì)中對(duì)界面、組件框架樣式的設(shè)計(jì)創(chuàng)新外，最重要的就是對(duì)界面配色的管理和表現(xiàn)。而配色作為所有設(shè)計(jì)類(lèi)型的終極難題之一，長(zhǎng)期困擾著初級(jí) UI 設(shè)計(jì)師。
所以我們今天的主題，就是用最簡(jiǎn)單、適用的邏輯，來(lái)解釋 UI 配色的方法！
學(xué)會(huì)配色首先要理解色彩，以及在 UI 設(shè)計(jì)中要配哪些“色”。
首先是對(duì)色彩的描述，相信大家或多或少聽(tīng)說(shuō)過(guò) RGB、CMYK 之類(lèi)的名詞，它們就是對(duì)不同場(chǎng)景下的色彩描述方法。
比如顯示器成像，是由一個(gè)個(gè)像素點(diǎn)顯示不同色彩組成的，而像素點(diǎn)的顏色由三個(gè)發(fā)光晶體管控制，即 Red 紅、Green 綠、Blue 藍(lán)，它們發(fā)出不同強(qiáng)弱的光進(jìn)行混合，從而形成新像素點(diǎn)上最后顯示的色彩，所以也叫 RGB 色。
而對(duì)于現(xiàn)實(shí)世界的物體的染色、印刷，就要使用具體的顏料上色，為了節(jié)省成本工業(yè)界不可能提供成百上千萬(wàn)的顏料類(lèi)型，所以使用了 Cyan 青色、 Magenta 洋紅色、 Yellow 黃色三個(gè)顏色作為基礎(chǔ)進(jìn)行混合，生成其它顏色。而因?yàn)?Black 黑色、灰色難以用別的顏色混出來(lái)，所以單獨(dú)提供，于是就有了 CMYK 色。
在 UI 設(shè)計(jì)中，我們的設(shè)計(jì)內(nèi)容無(wú)須進(jìn)行打印，所以只會(huì)以 RGB 模式記錄和顯示。但是 RGB 色的記錄模式比較復(fù)雜，即每個(gè)色值有 0-255 的 256 個(gè)顏色，要分別記錄這三個(gè)數(shù)值，且它們混合后的色彩很難判斷。
所以雖然 UI 中用的是 RGB，但我們?nèi)粘＿x色使用的卻是 HSB 模式，即將顏色劃分成色相 Hue、飽和度 Saturation、明度 Brightnessd。
它是對(duì)色彩邏輯上的定義，會(huì)根據(jù)應(yīng)用的需要轉(zhuǎn)化成 RGB 和 CMYK，所以不用糾結(jié)它不是 RGB 不能顯示怎么辦。
而多數(shù) UI 軟件的色彩選擇面板，就是使用 HSB 的選色邏輯來(lái)設(shè)計(jì)的，有一個(gè)橫向的色相條，加一個(gè)表示明度、飽和度的矩形區(qū)域。
雖然色相條是一個(gè)長(zhǎng)方形，但用過(guò)應(yīng)該能發(fā)現(xiàn)它的首尾都是紅色，因?yàn)?HSB 模式下建立的色相是一個(gè)360度的環(huán)形，也叫色環(huán)。選色面板用的色相條，就是這個(gè)色環(huán)截開(kāi)拉直后的效果，所以首尾是同一顏色。
使用 HSB 選色的邏輯 ——
先確定色相，再調(diào)節(jié)飽和度和明度
。
如果飽和度 S 值為零，則色彩沒(méi)有任何色相只剩下黑白灰，即中性色。明度 B 值控制亮度，0 即完全沒(méi)有亮度所以是黑色，100 最亮則是白色，即顏色越深 B 值越小，B 值越大顏色越亮。
學(xué)會(huì)使用 HSB 選色和微調(diào)的方式是進(jìn)行配色的關(guān)鍵，因?yàn)閷?zhuān)業(yè)的設(shè)計(jì)過(guò)程會(huì)有清晰的色彩應(yīng)用思路，會(huì)直接通過(guò)色彩面板去找到自己要的顏色，甚至是直接手動(dòng)輸入數(shù)值，而不是把選色面板當(dāng)盲盒隨機(jī)拖一個(gè)出來(lái)去測(cè)試。
在 UI 設(shè)計(jì)過(guò)程中，如果軟件的色彩面板默認(rèn)是其它模式，優(yōu)先將它們先切換成 HSB （有些是 HEX）模式。
了解選色模式是第一步，而第二步就是認(rèn)識(shí)UI界面中應(yīng)用的色彩類(lèi)型有哪些，為進(jìn)一步掌握配色做準(zhǔn)備。
在過(guò)去，我們將界面的配色分為主色、輔助色、中性色三種類(lèi)型，但這次我們要做出新的定義，以滿足目前 UI 設(shè)計(jì)趨勢(shì)的需要。
UI 界面中應(yīng)用的色彩可以分成：品牌色、功能色、中性色、裝飾色、內(nèi)容色等，四個(gè)大類(lèi)。
品牌色即組成產(chǎn)品品牌基調(diào)、個(gè)性的核心色彩，用于區(qū)分自己和其它產(chǎn)品之間的區(qū)別。而品牌色并不是只有一個(gè)，而是包含主色、輔助色兩個(gè)分類(lèi)。
首先品牌主色，是品牌的核心色調(diào)，是和品牌進(jìn)行綁定的色彩錨點(diǎn)，比如想到美團(tuán)就是黃色，想到肯德基就是紅色，想到星巴克就是綠色。常規(guī)的品牌主色有且只能有一個(gè)。
而輔助色，則是建立在品牌色彩系統(tǒng)內(nèi)搭配主色出現(xiàn)的色彩。比如麥當(dāng)勞的核心主色是黃色（LOGO 色，"金"拱門(mén)），但相信麥當(dāng)勞的紅色你們一定也不陌生，它們經(jīng)常相伴出現(xiàn)。再比如沃爾瑪，雖然主色是藍(lán)色但是黃色在品牌制品和包裝上也沒(méi)少用。
輔助色可以只有一個(gè)也可以有多個(gè)，作為補(bǔ)充比使用單一主色會(huì)更具辨識(shí)度和豐富性。但它不是必須的，因?yàn)樵?UI 界面中出現(xiàn)的顏色往往非常多，品牌輔助色的加入往往會(huì)讓配色變得更困難，反而成為拖累。
功能色，就是根據(jù)界面?zhèn)鬟_(dá)信息、隱喻所應(yīng)用的色彩，具有比較明確的工具作用而存在。部分場(chǎng)景下用戶(hù)對(duì)色彩代表的寓意認(rèn)識(shí)根深蒂固時(shí)，那么我們就有必要順應(yīng)這種認(rèn)識(shí)來(lái)添加色彩。
比如電商中紅色代表價(jià)格、折扣，工具產(chǎn)品里綠色代表成功通過(guò)，國(guó)內(nèi)金融產(chǎn)品里紅色代表上漲綠色代表下跌，幣圈行業(yè)反過(guò)來(lái)綠色代表上漲紅色代表下跌等。
功能色的應(yīng)用是必要的，因?yàn)樯室彩怯糜趥鬟f信息的關(guān)鍵要素之一。但是，功能色不一定完全和品牌色脫節(jié)，如果品牌色和想要的功能色接近，往往直接使用品牌色即可，不用創(chuàng)建新的顏色。
比如京東的價(jià)格、優(yōu)惠用的就是品牌主色，支付寶的確認(rèn)、同意用的也是品牌主色。
中性色就是黑白灰，即沒(méi)有顏色的“顏色”。
一個(gè)項(xiàng)目再怎么花哨，也會(huì)包含不需要使用花哨色彩的背景、文字、圖標(biāo)，而
通常它們?cè)谡麄€(gè)應(yīng)用內(nèi)的占比才是最大的，而不是品牌色！
中性色是支撐整個(gè)產(chǎn)品色彩體系的骨架，用好中性色就能讓界面被用戶(hù)快速理解、認(rèn)識(shí)。所以在一些品牌色就是以黑色為主色的產(chǎn)品中，用戶(hù)也并不會(huì)因?yàn)楫a(chǎn)品沒(méi)有使用其它色相而不知道應(yīng)用怎么使用。
前面提到的三種色彩類(lèi)型，都是要進(jìn)入項(xiàng)目設(shè)計(jì)規(guī)范內(nèi)的“標(biāo)準(zhǔn)色”，而應(yīng)用實(shí)際設(shè)計(jì)過(guò)程中光靠這些標(biāo)準(zhǔn)色是無(wú)法滿足所有場(chǎng)景的。
比如一些特定的活動(dòng)頁(yè)面，或者裝飾圖標(biāo)，運(yùn)營(yíng)場(chǎng)景等，都會(huì)根據(jù)具體的需求或美觀性應(yīng)用其它色彩。
裝飾色的配置沒(méi)有非常具體的要求，在一定程度上就是脫離原有的規(guī)范標(biāo)準(zhǔn)，作為一個(gè)獨(dú)立的設(shè)計(jì)去完成。所以很多大廠產(chǎn)品在不同頁(yè)面中的運(yùn)營(yíng)需求不同，于是裝飾色各用各的，導(dǎo)致最終呈現(xiàn)出來(lái)的結(jié)果非常割裂。
裝飾色是在今天的移動(dòng)端設(shè)計(jì)中最大的難題，因?yàn)槲覀円尤牒芏嘈碌纳蔬M(jìn)去會(huì)和規(guī)范色形成沖突。雖然線上很多產(chǎn)品的配色都有種放棄治療的決絕，但在招聘環(huán)節(jié)中對(duì)色彩的應(yīng)用上這些要求又全部回來(lái)辣（就是這么分裂）！
最后一個(gè)，就是內(nèi)容色了，即產(chǎn)品內(nèi)展示的內(nèi)容所使用的色彩，如用戶(hù)的照片，商品的圖片，廣告的圖片等等。
某種程度上來(lái)說(shuō)內(nèi)容用什么顏色是不可控的，不在配色的考慮范圍內(nèi)。但對(duì)于一些特定的產(chǎn)品中，內(nèi)容用什么顏色是有確定性的，甚至直接規(guī)范內(nèi)容制作、拍攝、后期的用色規(guī)范，讓整體的配色能更統(tǒng)一和諧。
比如美妝、服裝、茶飲類(lèi)品牌自家的應(yīng)用或小程序：
并且在作品集項(xiàng)目和評(píng)審中，設(shè)計(jì)師自己輸出的界面也是要考慮內(nèi)容用色的，因?yàn)閮?nèi)容往往在頁(yè)面中占比很大，用色的好壞會(huì)直接影響觀看者對(duì)整個(gè)頁(yè)面的評(píng)價(jià)，所以我們必須要把它當(dāng)成配色的一部分來(lái)處理。
配色就是完成對(duì)上面五種色彩類(lèi)型的選擇、控制、管理，形成最終呈現(xiàn)的效果。
上一節(jié)介紹了 UI 配色的五個(gè)對(duì)象，而這一節(jié)中，我們就要針對(duì)它們的配色進(jìn)行更細(xì)致的解說(shuō)。
學(xué)習(xí) UI 配色，就繞不過(guò)去平面配色的各類(lèi)知識(shí)點(diǎn)、概念、技法，雖然 UI 設(shè)計(jì)原則上也是平面設(shè)計(jì)的一種，但在配色上卻有很大的差異，不能直接照搬平面配色的邏輯。
平面和 UI 配色的差異主要由下面三點(diǎn)組成：
-
-
-
第一點(diǎn)，也是最重要的一點(diǎn)，就是平面設(shè)計(jì)的對(duì)象是“靜止”的，在設(shè)計(jì)被制作出來(lái)后就被固定。而 UI 設(shè)計(jì)的對(duì)象是 “動(dòng)態(tài)” 的，不管是內(nèi)容還是界面本身都會(huì)經(jīng)常發(fā)生修改變化。
靜態(tài)的設(shè)計(jì)穩(wěn)定，就意味著設(shè)計(jì)意圖可以貫徹，個(gè)性化易于塑造。而動(dòng)態(tài)的設(shè)計(jì)意味不確定性，上線后內(nèi)容的變更或產(chǎn)品迭代會(huì)直接破壞原有的設(shè)計(jì)，導(dǎo)致設(shè)計(jì)意圖的流產(chǎn)。
第二點(diǎn)，則是色彩顯示模式的差異。平面設(shè)計(jì)要進(jìn)入真實(shí)世界就要經(jīng)過(guò)染色或印刷（CMYK），這些制品的色彩經(jīng)過(guò)光的折射后才進(jìn)入人眼。而 UI 設(shè)計(jì)的色彩則是由屏幕自身發(fā)光呈現(xiàn)（RGB），直接進(jìn)入人眼。
自發(fā)光和折射光呈現(xiàn)的色彩觀感是非常不同的，這由它們的物理特性決定（暫不拓展），最直觀的一個(gè)差異，就是屏幕發(fā)光是會(huì)“刺眼”的，能讓人眼覺(jué)得不適和過(guò)快疲勞。比如熒光色系，或者大面積的對(duì)比色。
自發(fā)光產(chǎn)生的生理影響，決定了 UI 配色為了滿足可用性就要排除一部分色彩，讓配色的范圍大大縮小。所以平面中有句話叫沒(méi)有難看的顏色，只有配不好的顏色，并不適用于 UI 配色。
第三點(diǎn)，就是品牌輸出目標(biāo)的差異。傳統(tǒng)品牌的色彩系統(tǒng)更注重品牌的概念、價(jià)值觀的表達(dá)，通過(guò)在門(mén)店、包裝、物料、服務(wù)上的統(tǒng)一應(yīng)用，來(lái)潛移默化的塑造用戶(hù)對(duì)品牌的認(rèn)識(shí)和定位。
而互聯(lián)網(wǎng)產(chǎn)品能影響用戶(hù)的主要渠道就是手機(jī)或顯示器上小小的屏幕，在這個(gè)小小的屏幕內(nèi)還要和成千上萬(wàn)的其它產(chǎn)品競(jìng)爭(zhēng)。所以互聯(lián)網(wǎng)產(chǎn)品對(duì)品牌的塑造上是非常“強(qiáng)硬”的，要讓用戶(hù)強(qiáng)烈的感知到并快速形成印象。
平面和 UI 配色的邏輯的差異，自然會(huì)導(dǎo)致實(shí)踐的方式也不同，需要單獨(dú)學(xué)習(xí)。這也是很多 UI 設(shè)計(jì)師一直學(xué)習(xí)配色相關(guān)知識(shí)但還是做不好UI配色的原因，因?yàn)檫@是兩套不同的體系。
在建立 UI 配色系統(tǒng)時(shí)，第一步確定的通常都是品牌色。而品牌色的建立包含兩種情況，一種是設(shè)計(jì)的產(chǎn)品已經(jīng)是個(gè)完整的品牌建立過(guò)自己的 VI 系統(tǒng)，另一種情況是完全獨(dú)立的新產(chǎn)品需要全部重新創(chuàng)建。
時(shí)，原則上 UI 的配色也要使用原來(lái)制定的品牌 VI 用色。但前面也說(shuō)過(guò)平面用色和屏幕用色差異巨大，所以 UI 用色可以在原有的基礎(chǔ)上做調(diào)整，比如 MUJI、宜家。
如果還仔細(xì)研究過(guò)成功的獨(dú)立產(chǎn)品配色，那么就會(huì)發(fā)現(xiàn)一個(gè)規(guī)律，主色基本都處于飽和度明度面板的右上方。
這種設(shè)置的依據(jù)，都是為了讓主色能更鮮艷、明亮。一方面是在屏幕上更能吸引用戶(hù)注意和灌輸品牌認(rèn)知，另一部分鮮艷的色彩在屏幕中展示起來(lái)也更舒適、和諧，客觀決定了不應(yīng)該使用一些“有氣無(wú)力”的顏色作為產(chǎn)品主色。
遵循這種規(guī)律，那么主色的選擇就是先確定色相類(lèi)型，然后在明度、飽和度面板的右上方再選出具體的顏色。
除了主色外，品牌的輔助色定義也遵循相同的原則。但是，如果不是品牌VI本身就定義過(guò)輔助色的情況下，不建議新產(chǎn)品定義輔助色，因?yàn)樗苋菀紫♂屩魃臋?quán)重，不能帶來(lái)太多的幫助。
除了品牌色外，最重要的色彩定義就是中性色，在我自己的設(shè)計(jì)流程中，甚至是先定義中性色再去定義品牌色。
中性色是由黑白灰組成的多個(gè)色彩，并通過(guò)灰度值（HSB 的 B 值）的高低來(lái)形成一個(gè)表現(xiàn)強(qiáng)弱的等級(jí)階梯。通常一個(gè) UI 產(chǎn)品中會(huì)使用不少于5個(gè)以上的中性色，以滿足信息對(duì)比性的需要。
為了方便記憶，我們會(huì)對(duì) B 值使用5的倍數(shù)做定義，比如10、20、40、60、80、90等。
中性色的定義并不困難，只要不同等級(jí)的顏色有足夠的差異即可，至于需要多少級(jí)的顏色，根據(jù)具體項(xiàng)目的需要決定。
下面還有兩個(gè)中性色定義的細(xì)節(jié)，一個(gè)是
盡量避免使用純黑色
（B 值0），因?yàn)榧兒谠?OLED 屏幕中是完全不發(fā)光的狀態(tài)，所以會(huì)和周遭的顏色產(chǎn)生極大的反差，難以進(jìn)行控制。
第二個(gè)細(xì)節(jié)，就是成熟項(xiàng)目中的中性色往往并不是純灰色，而是會(huì)加入輕微的色相（主要是藍(lán)色色相）進(jìn)去，讓中性色的應(yīng)用不會(huì)那么僵硬和枯燥。
加入色相的中性色，會(huì)提供非常微妙的潛在影響，但并不需要用戶(hù)感知到這些顏色使用了色相，所以往往只添加了極少的色相值。顏色越淺，色相值就需要越弱才不易被感知，反之可以添加的色相值范圍就越強(qiáng)。
所以中性色的配色邏輯可以在明度、飽和度面板中遵循下方這樣的曲線：
之后制定功能色的配色邏輯，在定義它們之前最好已經(jīng)完成了項(xiàng)目主要界面內(nèi)容和原型的搭建，能預(yù)判項(xiàng)目中包含了哪些特定的信息、要素、模塊是需要使用非品牌色和中性色來(lái)表示的。
比如前文提到的金融軟件，包含漲跌的示意。電商購(gòu)物應(yīng)用，包含價(jià)格和優(yōu)惠。一個(gè)普通的社區(qū)應(yīng)用，包含收藏、點(diǎn)贊和會(huì)員等。
當(dāng)主色不適合對(duì)這些內(nèi)容進(jìn)行填充時(shí)，就應(yīng)該選新的顏色作為功能色進(jìn)行填充。而功能色的選擇也是最簡(jiǎn)單的部分，因?yàn)楣δ苌哪繕?biāo)通常都很明確，而它們也可以從主色的選擇區(qū)域內(nèi)產(chǎn)生。
進(jìn)入到裝飾色的環(huán)節(jié)，就不在色彩規(guī)范定義的顏色范圍內(nèi)了，進(jìn)入到“看碟下菜”的階段。
裝飾色的應(yīng)用首先面對(duì)的就是裝飾圖標(biāo)的用色，比如快速入口、瓷片區(qū)用的裝飾圖標(biāo)，往往會(huì)使用其它顏色來(lái)提高界面色彩的豐富性。
在這類(lèi)圖標(biāo)的配色中，沒(méi)有固定的配色規(guī)律可以遵循，只能憑感覺(jué)配。但值得慶幸的是，裝飾圖標(biāo)的用色也和主色選色類(lèi)似，可以選擇范圍其實(shí)很小，直接在這個(gè)范圍內(nèi)選色很快就能得到想要的結(jié)果。
總結(jié)一些線上成熟產(chǎn)品的快速入口配色，大家就會(huì)發(fā)現(xiàn)用色其實(shí)非常固定：
除了圖標(biāo)外，第二種裝飾用色就是運(yùn)營(yíng)場(chǎng)景，比如節(jié)日主題或是專(zhuān)題頁(yè)面，針對(duì)它們的設(shè)計(jì)，可以理解成是針對(duì)一個(gè)獨(dú)立頁(yè)面定義新的主色和輔助色，覺(jué)得怎么做合適怎么來(lái)……
雖然它們的應(yīng)用可能和產(chǎn)品主色沖突，但運(yùn)營(yíng)內(nèi)容的權(quán)重往往是高于項(xiàng)目配色要求的，所以在線上項(xiàng)目中只要加入運(yùn)營(yíng)設(shè)計(jì)開(kāi)始，界面色彩就開(kāi)始“雞飛狗跳”。
而在作品集項(xiàng)目的設(shè)計(jì)中，就要確定裝飾色的應(yīng)用目標(biāo)，即通過(guò)更多的色彩來(lái)增加設(shè)計(jì)的豐富性，所以盡量從非主色的色系里選擇，避免使用和主色近似的色彩。
最后，就是在填充內(nèi)容配圖時(shí)使用的色彩了。這里也分兩種情況，即該內(nèi)容在頁(yè)面中的占比。
如果占比過(guò)大，比如占據(jù)半屏以上的廣告圖、商品圖，那么填充進(jìn)去的內(nèi)容必定直接影響整個(gè)頁(yè)面的色彩觀感。
所以在這種場(chǎng)景下，建議使用背景色比較單一的圖片，會(huì)比填充色彩凌亂、復(fù)雜的圖片效果更好。當(dāng)然，內(nèi)容的用色不能和主色完全一致，也不能和主色產(chǎn)生不協(xié)調(diào)感，這要設(shè)計(jì)師自己判斷。
然后就是普通內(nèi)容的用色，比如商品列表中的商品圖，動(dòng)態(tài)列表內(nèi)的動(dòng)態(tài)圖，新聞列表中的封面等等。尺寸不大，但是往往出現(xiàn)的數(shù)量很多。
對(duì)這些內(nèi)容圖的用色傾向太強(qiáng)會(huì)使設(shè)計(jì)結(jié)果看起來(lái)非常“刻意”，或是色彩的搭配非常混亂，所以很多設(shè)計(jì)稿一看就是飛機(jī)稿的原因就是配圖使用太刻意，無(wú)法呈現(xiàn)界面應(yīng)有的狀態(tài)。
這類(lèi)內(nèi)容圖的填充和上一種情況要反著來(lái)，即弱化顏色的存在感。盡量使用沒(méi)有高飽和度或白色的背景圖，可以讓它們更好的融入整個(gè)界面，不會(huì)成為界面的累贅。
根據(jù)這些總結(jié)出來(lái)的原則，我們可以再回到識(shí)色面板中做一個(gè)總結(jié)。先將明度、飽和度區(qū)域用橫豎做成三等分的“井”字，確定大致色相后選擇具體色彩的區(qū)域通常都集中在右上角，背景集中在左上角，中性色集中在左側(cè)的區(qū)域內(nèi)。
UI的配色相比平面非常簡(jiǎn)單，因?yàn)榕渖膶?duì)象固定，每種配色對(duì)象的選擇范圍也很 “固定”。配色就是一個(gè)蘿卜一個(gè)坑的分配適合的色彩，只要積累一定案例分析和實(shí)踐經(jīng)驗(yàn)，就能快速掌握。
而UI配色所謂的品牌調(diào)性，也遠(yuǎn)遠(yuǎn)沒(méi)有平面那么復(fù)雜，要做的就是組合出和同類(lèi)產(chǎn)品不同，能被用戶(hù)記憶的色彩！
一個(gè)完整的平面視覺(jué)畫(huà)面，里面包含的所有元素、色彩都不是孤立的，都會(huì)和其它元素形成聯(lián)系，產(chǎn)生整體的影響。
而我們?cè)谠O(shè)計(jì)過(guò)程中，如果對(duì)元素的設(shè)計(jì)、配色是逐一完成的，那就很難控制整體的效果。因?yàn)槟阍谧龅谝粋€(gè)元素的配色時(shí)，是很難預(yù)估它在最終畫(huà)面中的效果是否是合理的。
所以在我的配色建議中，不能一邊設(shè)計(jì)框架、交互、布局、樣式時(shí)一邊配色，而要把它當(dāng)成一個(gè)獨(dú)立的步驟，即 —— 配色階段，在完成界面的基礎(chǔ)的原型或簡(jiǎn)單的上色后，再進(jìn)行統(tǒng)一的配色操作。
而配色的操作也不是看著元素一個(gè)一個(gè)填的，而是根據(jù)配色的類(lèi)型，分層次、分順序逐步完成。前面之所以把 UI 的色彩類(lèi)型拆解得那么細(xì)致，其中一個(gè)原因就是為了應(yīng)對(duì)當(dāng)前的情況。
配色的第一步就是完成中性色的配置，前面我們說(shuō)過(guò)中性色是整個(gè)項(xiàng)目色彩的骨骼、基礎(chǔ)框架。在我們完成前期頁(yè)面原型設(shè)計(jì)的階段，就可以先創(chuàng)建中性色的階梯，來(lái)完成對(duì)界面層次、信息權(quán)重的表現(xiàn)。
有了這個(gè)基礎(chǔ)，第二步就是填充品牌色，品牌色是整個(gè)項(xiàng)目配色中最關(guān)鍵的色彩類(lèi)型，因?yàn)樗⒂脩?hù)對(duì)品牌的認(rèn)識(shí)，是一個(gè)必須使用且要高頻使用的色彩類(lèi)型。
并且，后續(xù)所有的顏色的制定都會(huì)和品牌色發(fā)生聯(lián)系，理論上這些顏色和品牌色產(chǎn)生的聯(lián)系必須是和諧、穩(wěn)固、有效的。所以制定了品牌色，也就對(duì)后續(xù)的配色產(chǎn)生的一定的影響和約束。
接著，就是制定功能色。因?yàn)楫a(chǎn)品的基礎(chǔ)原型構(gòu)建完成以后，設(shè)計(jì)師對(duì)產(chǎn)品使用哪些特殊的字段、信息就會(huì)有清晰的認(rèn)識(shí)。那么最好把這些需要特殊表現(xiàn)的內(nèi)容先整理并羅列出來(lái)，然后選出合理的功能色進(jìn)行填充。
再往后就是填充容，根據(jù)相關(guān)的場(chǎng)景、內(nèi)容、風(fēng)格來(lái)選擇合適的配圖，確保配圖的用色不會(huì)和前面的色彩產(chǎn)生沖突，且根據(jù)配圖的類(lèi)型決定它們色彩的突出程度。
最后就是裝飾色的處理，主要針對(duì)復(fù)雜的組件細(xì)節(jié)和圖標(biāo)等完成配色。之所以放在最后，是因?yàn)檠b飾色的選擇是最復(fù)雜且沒(méi)有限制的，但它依舊要確保和畫(huà)面其它色彩能建立和諧的聯(lián)系。
所以當(dāng)其它顏色的配置都已經(jīng)完成以后，裝飾色的配色范圍就被大大限制了，選擇范圍變小，選擇起來(lái)自然也就更容易。
應(yīng)用這種配色方法，我們可以非常快的完成對(duì)界面的配色，并且可以在每個(gè)階段檢查對(duì)應(yīng)配色的效果，并快速做出修改。除了效率外，這么做最大的好處，
就是幫助我們更有效地提升對(duì)色彩地深入認(rèn)識(shí)，以及積累不同配色組合的方案
。
講到這里，分層次和順序按一定的條件選色填充，就是UI配色的全部嗎？
當(dāng)然不止，還有一個(gè)更重要的部分 ——
對(duì)設(shè)計(jì)風(fēng)格的構(gòu)建
。
即展開(kāi)正式的配色之前，設(shè)計(jì)師還需要對(duì)項(xiàng)目采用哪種風(fēng)格做出定義，后續(xù)的設(shè)計(jì)包括版式、圖標(biāo)、樣式、色彩，都是構(gòu)建這個(gè)風(fēng)格的一部分。比如很多作品集包裝中會(huì)展示 “情緒版”，它就是項(xiàng)目前期分析中探索設(shè)計(jì)風(fēng)格的工具之一。
理論上配色的前置環(huán)節(jié)，是先探索并確定設(shè)計(jì)風(fēng)格，為配色指明方向。但這個(gè)流程對(duì)設(shè)計(jì)師的職業(yè)水平是有很高要求的，如果本身項(xiàng)目經(jīng)驗(yàn)少，對(duì)設(shè)計(jì)風(fēng)格的積累理解不足，是沒(méi)辦法建立風(fēng)格和色彩的聯(lián)系的。
初級(jí)設(shè)計(jì)師會(huì)認(rèn)為情緒版、品牌化的分析是種包裝，毫無(wú)意義，但專(zhuān)業(yè)的 UI 設(shè)計(jì)師和團(tuán)隊(duì)卻對(duì)風(fēng)格定義和分析樂(lè)此不彼，這就是
經(jīng)驗(yàn)限制了認(rèn)知，我們沒(méi)辦法想象還沒(méi)做好的工作要怎么才能突破瓶頸做的更好
！
所以在前期的積累過(guò)程中，不用過(guò)分關(guān)注品牌、風(fēng)格化的分析，而是先確保能按照上面的做法輸出有效的配色。只要每個(gè)層級(jí)的配色不出錯(cuò)，那么最終結(jié)果也會(huì)附帶品牌和風(fēng)格的附加屬性。
而在適應(yīng)這種操作并越來(lái)越熟練以后，你們就會(huì)發(fā)現(xiàn)只用這種方法的配色是 —— 莫得靈魂的，它們不能賦予你設(shè)計(jì)方案底層的價(jià)值和深度，要突破這種瓶頸就要追求更宏觀的思考和分析。
所以先從實(shí)踐出發(fā)，用實(shí)踐積累經(jīng)驗(yàn)和有效的問(wèn)題，然后才能真正理解進(jìn)階的思維和流程的價(jià)值。
這次的配色演示我要用一個(gè)學(xué)員的作品為例，下面是原圖：
在這套界面中，顏色的整體觀感顯然是很不好的。一方面主色的應(yīng)用和品牌（捷安特）很不符合，另一方面色彩的搭配不和諧，尤其是內(nèi)容色和配色很沖突。
還有一個(gè)很重要的因素，就是默認(rèn)使用的深色配色，這是非常難駕馭的方向，完全不推薦新手在輸出項(xiàng)目作品時(shí)使用。
所以在后續(xù)的演示中，我們會(huì)分成兩個(gè)部分，首先從淺色模式開(kāi)展了解基本的配色邏輯，然后再在這個(gè)基礎(chǔ)上進(jìn)行深色模式的配色說(shuō)明，掌握兩種配色模式的實(shí)踐路徑。
首先從淺色模式開(kāi)始說(shuō)起，在進(jìn)行配色前，先完成基礎(chǔ)的原型框架，為配色做后續(xù)的準(zhǔn)備。而完成基礎(chǔ)框架就要順便完成對(duì)中性色的定義，選擇合適的中性色數(shù)量和色彩，滿足產(chǎn)品需要。
原型對(duì)原圖做了簡(jiǎn)單的修改和調(diào)整，讓布局先更合理一點(diǎn)，才適合配色的發(fā)揮。
因?yàn)榻莅蔡厥且粋€(gè)成熟品牌，有自己的 VI 系統(tǒng)，所以選色要從官方品牌的色彩出發(fā)，主色是深藍(lán)色（RGB 已經(jīng)比印刷色更淺），淺藍(lán)是輔助色。
然后，開(kāi)始填充主色和輔助色。主色要填充到頁(yè)面最重要的元素和背景色上，比如 LOGO、選中的底部導(dǎo)航圖標(biāo)、首頁(yè)背景色、重要的標(biāo)簽、按鈕等。輔助色可以添加到相對(duì)次要但高頻出現(xiàn)的一些設(shè)計(jì)元素上，如次要標(biāo)簽、按鈕等。
接著總結(jié)界面中包含的一些應(yīng)該填充色彩但又不適合用主色、中性色的對(duì)象，比如價(jià)格元素、評(píng)分、收藏、熱門(mén)等。
到這里色彩的主體已經(jīng)有了，就可以先開(kāi)始往里面填圖片內(nèi)容了。整體的選圖標(biāo)準(zhǔn)用比較“安全”的做法，即大圖有能和主色搭配的背景顏色，小圖則盡量避免有大色塊、復(fù)雜的色彩，減少?zèng)_突性。
最后就到了裝飾色的填充上，對(duì)于一些特殊組件，以及裝飾圖標(biāo)，就要在前面的配色基礎(chǔ)上做選擇。得到最終結(jié)果并沒(méi)有使用什么理論、規(guī)則，僅僅是從一系列的選擇中找出自己最滿意的結(jié)果而已。
到這一步基本配色也就完成了，可以再和原來(lái)的做法做一次對(duì)比。
這就是我們總結(jié)出來(lái)的最簡(jiǎn)單的基礎(chǔ)配色方式，而上面的方案也不是唯一的配色方案，你們可以嘗試自己臨摹一遍原型，自己填充一遍色彩，看看能得到什么新的結(jié)果。
作者：酸梅干超人鏈接：https://www.zcool.com.cn/article/ZMTY0NjQxMg==.html來(lái)源：站酷著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
