往期回顧：

一、平面和 UI 配色的差異

學(xué)習(xí) UI 配色，就繞不過(guò)去平面配色的各類(lèi)知識(shí)點(diǎn)、概念、技法，雖然 UI 設(shè)計(jì)原則上也是平面設(shè)計(jì)的一種，但在配色上卻有很大的差異，不能直接照搬平面配色的邏輯。

平面和 UI 配色的差異主要由下面三點(diǎn)組成：

1. 靜態(tài)和動(dòng)態(tài)的差異
2. 色彩模式的差異
3. 品牌輸出目標(biāo)差異

第一點(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)潛移默化的塑造用戶對(duì)品牌的認(rèn)識(shí)和定位。

而互聯(lián)網(wǎng)產(chǎn)品能影響用戶的主要渠道就是手機(jī)或顯示器上小小的屏幕，在這個(gè)小小的屏幕內(nèi)還要和成千上萬(wàn)的其它產(chǎn)品競(jìng)爭(zhēng)。所以互聯(lián)網(wǎng)產(chǎn)品對(duì)品牌的塑造上是非常“強(qiáng)硬”的，要讓用戶強(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)建。

原則上 UI 的配色也要使用原來(lái)制定的品牌 VI 用色，但前面也說(shuō)過(guò)平面用色和屏幕用色差異巨大，所以 UI 用色可以在原有的基礎(chǔ)上做調(diào)整，比如 MUJI、宜家。

如果還仔細(xì)研究過(guò)成功的獨(dú)立產(chǎn)品配色，那么就會(huì)發(fā)現(xiàn)一個(gè)規(guī)律，主色基本都處于飽和度明度面板的右上方。

這種設(shè)置的依據(jù)，都是為了讓主色能更鮮艷、明亮。一方面是在屏幕上更能吸引用戶注意和灌輸品牌認(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ì)提供非常微妙的潛在影響，但并不需要用戶感知到這些顏色使用了色相，所以往往只添加了極少的色相值。顏色越淺，色相值就需要越弱才不易被感知，反之可以添加的色相值范圍就越強(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)容色的配色邏輯

最后，就是在填充內(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)品不同，能被用戶記憶的色彩！

結(jié)尾

后面還有個(gè)案例的實(shí)操演示，打算做得完整一點(diǎn)，所以放在下篇再展示。目前對(duì)配色輸出越寫(xiě)越覺(jué)得應(yīng)該作為一個(gè)完整的知識(shí)庫(kù)來(lái)編輯，比較很多零碎的色彩知識(shí)點(diǎn)很難系統(tǒng)的放進(jìn)來(lái)。

所以你們轉(zhuǎn)發(fā)、點(diǎn)贊越多，越可以鼓勵(lì)我們完成這個(gè)復(fù)雜的工作。

歡迎關(guān)注作者的微信公眾號(hào)：「超人的電話亭」