一、平面和 UI 配色的差異

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

平面和 UI 配色的差異主要由下面三點組成：

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

第一點，也是最重要的一點，就是平面設(shè)計的對象是“靜止”的，在設(shè)計被制作出來后就被固定。而 UI 設(shè)計的對象是 “動態(tài)” 的，不管是內(nèi)容還是界面本身都會經(jīng)常發(fā)生修改變化。

靜態(tài)的設(shè)計穩(wěn)定，就意味著設(shè)計意圖可以貫徹，個性化易于塑造。而動態(tài)的設(shè)計意味不確定性，上線后內(nèi)容的變更或產(chǎn)品迭代會直接破壞原有的設(shè)計，導(dǎo)致設(shè)計意圖的流產(chǎn)。

第二點，則是色彩顯示模式的差異。平面設(shè)計要進入真實世界就要經(jīng)過染色或印刷（CMYK），這些制品的色彩經(jīng)過光的折射后才進入人眼。而 UI 設(shè)計的色彩則是由屏幕自身發(fā)光呈現(xiàn)（RGB），直接進入人眼。

自發(fā)光和折射光呈現(xiàn)的色彩觀感是非常不同的，這由它們的物理特性決定（暫不拓展），最直觀的一個差異，就是屏幕發(fā)光是會“刺眼”的，能讓人眼覺得不適和過快疲勞。比如熒光色系，或者大面積的對比色。

自發(fā)光產(chǎn)生的生理影響，決定了 UI 配色為了滿足可用性就要排除一部分色彩，讓配色的范圍大大縮小。所以平面中有句話叫沒有難看的顏色，只有配不好的顏色，并不適用于 UI 配色。

第三點，就是品牌輸出目標的差異。傳統(tǒng)品牌的色彩系統(tǒng)更注重品牌的概念、價值觀的表達，通過在門店、包裝、物料、服務(wù)上的統(tǒng)一應(yīng)用，來潛移默化的塑造用戶對品牌的認識和定位。

而互聯(lián)網(wǎng)產(chǎn)品能影響用戶的主要渠道就是手機或顯示器上小小的屏幕，在這個小小的屏幕內(nèi)還要和成千上萬的其它產(chǎn)品競爭。所以互聯(lián)網(wǎng)產(chǎn)品對品牌的塑造上是非常“強硬”的，要讓用戶強烈的感知到并快速形成印象。

平面和 UI 配色的邏輯的差異，自然會導(dǎo)致實踐的方式也不同，需要單獨學(xué)習(xí)。這也是很多 UI 設(shè)計師一直學(xué)習(xí)配色相關(guān)知識但還是做不好 UI 配色的原因，因為這是兩套不同的體系。

二、品牌色的選擇

在建立 UI 配色系統(tǒng)時，第一步確定的通常都是品牌色。而品牌色的建立包含兩種情況，一種是設(shè)計的產(chǎn)品已經(jīng)是個完整的品牌建立過自己的 VI 系統(tǒng)，另一種情況是完全獨立的新產(chǎn)品需要全部重新創(chuàng)建。

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

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

這種設(shè)置的依據(jù)，都是為了讓主色能更鮮艷、明亮。一方面是在屏幕上更能吸引用戶注意和灌輸品牌認知，另一部分鮮艷的色彩在屏幕中展示起來也更舒適、和諧，客觀決定了不應(yīng)該使用一些“有氣無力”的顏色作為產(chǎn)品主色。

遵循這種規(guī)律，那么主色的選擇就是先確定色相類型，然后在明度、飽和度面板的右上方再選出具體的顏色。

除了主色外，品牌的輔助色定義也遵循相同的原則。但是，如果不是品牌 VI 本身就定義過輔助色的情況下，不建議新產(chǎn)品定義輔助色，因為它很容易稀釋主色的權(quán)重，不能帶來太多的幫助。

三、中性色的選擇

除了品牌色外，最重要的色彩定義就是中性色，在我自己的設(shè)計流程中，甚至是先定義中性色再去定義品牌色。

中性色是由黑白灰組成的多個色彩，并通過灰度值（HSB 的 B 值）的高低來形成一個表現(xiàn)強弱的等級階梯。通常一個 UI 產(chǎn)品中會使用不少于 5 個以上的中性色，以滿足信息對比性的需要。

為了方便記憶，我們會對 B 值使用 5 的倍數(shù)做定義，比如 10、20、40、60、80、90 等。

中性色的定義并不困難，只要不同等級的顏色有足夠的差異即可，至于需要多少級的顏色，根據(jù)具體項目的需要決定。

下面還有兩個中性色定義的細節(jié)，一個是盡量避免使用純黑色（B 值 0），因為純黑在 OLED 屏幕中是完全不發(fā)光的狀態(tài)，所以會和周遭的顏色產(chǎn)生極大的反差，難以進行控制。

第二個細節(jié)，就是成熟項目中的中性色往往并不是純灰色，而是會加入輕微的色相（主要是藍色色相）進去，讓中性色的應(yīng)用不會那么僵硬和枯燥。

加入色相的中性色，會提供非常微妙的潛在影響，但并不需要用戶感知到這些顏色使用了色相，所以往往只添加了極少的色相值。顏色越淺，色相值就需要越弱才不易被感知，反之可以添加的色相值范圍就越強。

所以中性色的配色邏輯可以在明度、飽和度面板中遵循下方這樣的曲線：

四、功能色的配色邏輯

之后制定功能色的配色邏輯，在定義它們之前最好已經(jīng)完成了項目主要界面內(nèi)容和原型的搭建，能預(yù)判項目中包含了哪些特定的信息、要素、模塊是需要使用非品牌色和中性色來表示的。

比如前文提到的金融軟件，包含漲跌的示意。電商購物應(yīng)用，包含價格和優(yōu)惠。一個普通的社區(qū)應(yīng)用，包含收藏、點贊和會員等。

當(dāng)主色不適合對這些內(nèi)容進行填充時，就應(yīng)該選新的顏色作為功能色進行填充。而功能色的選擇也是最簡單的部分，因為功能色的目標通常都很明確，而它們也可以從主色的選擇區(qū)域內(nèi)產(chǎn)生。

五、裝飾色的配色邏輯

進入到裝飾色的環(huán)節(jié)，就不在色彩規(guī)范定義的顏色范圍內(nèi)了，進入到“看碟下菜”的階段。

裝飾色的應(yīng)用首先面對的就是裝飾圖標的用色，比如快速入口、瓷片區(qū)用的裝飾圖標，往往會使用其它顏色來提高界面色彩的豐富性。

在這類圖標的配色中，沒有固定的配色規(guī)律可以遵循，只能憑感覺配。但值得慶幸的是，裝飾圖標的用色也和主色選色類似，可以選擇范圍其實很小，直接在這個范圍內(nèi)選色很快就能得到想要的結(jié)果。

總結(jié)一些線上成熟產(chǎn)品的快速入口配色，大家就會發(fā)現(xiàn)用色其實非常固定：

除了圖標外，第二種裝飾用色就是運營場景，比如節(jié)日主題或是專題頁面，針對它們的設(shè)計，可以理解成是針對一個獨立頁面定義新的主色和輔助色，覺得怎么做合適怎么來……

雖然它們的應(yīng)用可能和產(chǎn)品主色沖突，但運營內(nèi)容的權(quán)重往往是高于項目配色要求的，所以在線上項目中只要加入運營設(shè)計開始，界面色彩就開始“雞飛狗跳”。

而在作品集項目的設(shè)計中，就要確定裝飾色的應(yīng)用目標，即通過更多的色彩來增加設(shè)計的豐富性，所以盡量從非主色的色系里選擇，避免使用和主色近似的色彩。

六、內(nèi)容色的配色邏輯

最后，就是在填充內(nèi)容配圖時使用的色彩了。這里也分兩種情況，即該內(nèi)容在頁面中的占比。

如果占比過大，比如占據(jù)半屏以上的廣告圖、商品圖，那么填充進去的內(nèi)容必定直接影響整個頁面的色彩觀感。

所以在這種場景下，建議使用背景色比較單一的圖片，會比填充色彩凌亂、復(fù)雜的圖片效果更好。當(dāng)然，內(nèi)容的用色不能和主色完全一致，也不能和主色產(chǎn)生不協(xié)調(diào)感，這要設(shè)計師自己判斷。

然后就是普通內(nèi)容的用色，比如商品列表中的商品圖，動態(tài)列表內(nèi)的動態(tài)圖，新聞列表中的封面等等。尺寸不大，但是往往出現(xiàn)的數(shù)量很多。

對這些內(nèi)容圖的用色傾向太強會使設(shè)計結(jié)果看起來非常“刻意”，或是色彩的搭配非常混亂，所以很多設(shè)計稿一看就是飛機稿的原因就是配圖使用太刻意，無法呈現(xiàn)界面應(yīng)有的狀態(tài)。

這類內(nèi)容圖的填充和上一種情況要反著來，即弱化顏色的存在感。盡量使用沒有高飽和度或白色的背景圖，可以讓它們更好的融入整個界面，不會成為界面的累贅。

根據(jù)這些總結(jié)出來的原則，我們可以再回到識色面板中做一個總結(jié)。先將明度、飽和度區(qū)域用橫豎做成三等分的“井”字，確定大致色相后選擇具體色彩的區(qū)域通常都集中在右上角，背景集中在左上角，中性色集中在左側(cè)的區(qū)域內(nèi)。

UI 的配色相比平面非常簡單，因為配色的對象固定，每種配色對象的選擇范圍也很 “固定”。配色就是一個蘿卜一個坑的分配適合的色彩，只要積累一定案例分析和實踐經(jīng)驗，就能快速掌握。

而 UI 配色所謂的品牌調(diào)性，也遠遠沒有平面那么復(fù)雜，要做的就是組合出和同類產(chǎn)品不同，能被用戶記憶的色彩！

結(jié)尾

后面還有個案例的實操演示，打算做得完整一點，所以放在下篇再展示。目前對配色輸出越寫越覺得應(yīng)該作為一個完整的知識庫來編輯，比較很多零碎的色彩知識點很難系統(tǒng)的放進來。

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

作者：超人的電話亭