2020-7-30 濤濤
配色，設計師的世紀難題。從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。UI 的發(fā)展從擬物的繁瑣細節(jié)中掙脫出來，卻在色彩的展現(xiàn)中放飛了自我。
零售業(yè)有個有趣的研究成果 —— 「七秒鐘定律」：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內(nèi)，色彩的作用占到了 67%。
要在小小的手機屏幕中加入這么多顏色，并保持其中的聯(lián)系和邏輯，著實不易。如果你還對配色一無所知，完全不知道配色應該怎么入手，那么你需要了解一下，我?guī)啄杲?jīng)驗總結(jié)的配色思路。
無論我們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道最多的地方就是拾色器窗口，我們來看看這些案例：
雖然是不同的應用，但是這個拾色器的用法大同小異，但是，很多新人并沒有搞懂拾色器的正確應用邏輯。
很多人知道，UI 的色彩使用 RGB 模式，但是拾色器主要的選色原理遵循的是 HSB 模式的邏輯，也就是色相（H）、飽和度（S）、明度（B）。
HSB 是色彩科學中對所有顏色屬性的理論劃分，是種概念上的定義，可以用來解釋任何色彩，也就是說可以和 RGB 和 CMYK 相互轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡潔、干練。
因為一個正確的選色過程，是先確定出色相，然后再在這個色相維度下選出明度和飽和度，所以我們首先要關(guān)注色相選擇條。
細心的同學應該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是紅色，那是因為色相的序列是一個首尾相接的環(huán)形模式，所以它實際上就是色環(huán)的柱狀展示圖，應用起來和色環(huán)沒有實際區(qū)別。
接下來就要說到重點，飽和度和明度選擇區(qū)，我自己使用的習慣，是將這個選擇區(qū)通過黃金三分法的方式切割成等比的 9 個區(qū)域，然后明確它們在 UI 中的對應情緒和應用場景。
在過去的大量分析中，互聯(lián)網(wǎng)產(chǎn)品的主色和重要輔助色都會往右上角聚集，一些次要、不可點的色彩聚集在中上方，而文字背景色則聚集在左側(cè)，無人區(qū)則是我們重點避開的對象。
下面我們分析幾個案例，看看它們在這個選擇區(qū)中的色彩分布情況：
大家也可以自己拿一些主流的應用做截圖，然后把它們的 UI 元素色彩排列到拾色面板中，就會得到基本一致的結(jié)果。牢記這9個區(qū)域的場景劃分，可以幫助我們非常、安全地完成 UI 配色。
在眾多的 UI 設計規(guī)范中，色彩部分的介紹，都必然包含三種類型，分別是：
1. 主色的選擇
主色是一個應用的最核心的色彩，品牌的象征色，比如想到餓了么的藍色、微信的綠色、京東的紅色、淘寶的橙色。
確定主色，并沒有大家想象的那么復雜，它的要點在于——你想讓用戶感受到哪種情緒，然后通過情緒關(guān)聯(lián)一個大致的色彩范圍，再進行微調(diào)。
在今天的互聯(lián)網(wǎng)產(chǎn)品中，主色的應用選擇范圍在拾色器區(qū)域的右上角，前面已經(jīng)有解釋了。這和平面設計中的用色有非常大的不同。
移動端產(chǎn)品要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的興趣，那么低飽和清淡的色調(diào)是無法實現(xiàn)這個目標的，所以今天主色飽和度越來越，比如我們之前整理的一篇總結(jié)：
為什么支付寶要換 Logo 顏色？分析下目前 Logo 的主色趨勢
再加上屏幕的 RGB 顯示特性，高對比度，高動態(tài)范圍的特質(zhì)能給用戶提供更好的觀感。所以選擇主色最安全的做法，就是在確定色相類型后，在右上方區(qū)域選出合適的色值。
2. 輔助色的選擇
輔助色是豐富應用中的次要色彩，它會包含一到若干個和主色不同的色彩，除了品牌傳達外，具有更強的實用性。
前面我們提到過色環(huán)，這里就要派上用場了。我們知道色環(huán)是個色彩序列首尾相連的環(huán)形模型，它蘊含一個最樸素的原則，即兩個顏色在這個環(huán)形中角度越大，那么視覺差異性越大，對比越強，比如下圖的展示：
這些配色的模式是不能閉著眼隨便挑的，它們僅僅作為一個色彩對比度的判斷標準。而真正輔助色的選擇，是根據(jù)實際場景的功能決定的。
比如通知、提醒、取消用大紅色，確認、同意用綠色或者藍色，收藏、打分、評價用橙黃色。都是已經(jīng)在用戶心智中建立了標準的用色類型，跟著常規(guī)方法來做，是沒有其它思路的情況下最簡單、最安全的輔助色選擇方式。
沒有標準元素用色的情況下，再考慮應用色環(huán)的 「角度原則」，越需要被突出的顏色，可以在色環(huán)中離主色越遠，越不需要被突出的則越近。
比如下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需要被重點突出的色彩，使用了主色的互補色， 讓我們一眼就能看見并產(chǎn)生強烈的操作欲望。
3. 中性色的選擇
中性色，是頁面中文字、背景用到的顏色，它們承擔起最基本的層次表現(xiàn)、便于閱讀的重任。多數(shù)新手覺得中性色無關(guān)緊要，實際情況恰恰相反。
主色輔助色決定了界面視覺是否出彩，而中性色的應用直接決定了頁面能不能正常使用。如果看過比較多的原型案例，就應該明白，即使只有黑白灰的狀態(tài)下，我們理解這些頁面和進行使用也不會有絲毫的障礙。
中性色的配置，就是制定一個由深到淺的灰度階梯，應用在對應權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。
中性色雖然指的是無個性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍色飽和度，提升觀看體驗（滿足RGB的某種特性）。
這種做法，顏色越淺的時候飽和度應用色值就越低，將這個規(guī)律在拾色器中進行表現(xiàn)，那么我們就可以得到一個 L 型曲線，我稱它為 「中性曲線」。
掌握對于主色、輔助色、中性色的選擇方法，那么對于UI配色的奧義來說，你已經(jīng)掌握了一半，接下來就要了解更具體的實踐思路了。
配色并不是只有色彩的色值本身，大家一直在研究各種色彩心理學和理論，卻很少關(guān)心它們?nèi)绾螒茫绾闻渲谩?
所以，我根據(jù)主色和輔助色應用總結(jié)了一個配色的四象限表格，再分別看看它們對應的案例：
1. 主色占比大，色彩豐富度高
主色會作為頂部標題欄或其它重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產(chǎn)品中又包含了大量功能和服務，需要用豐富的色彩來進行暗示，吸引用戶關(guān)注。
2. 主色占比大，色彩豐富度低
這類配色中，主色的應用占比也大，出現(xiàn)頻率高，鮮有其它顏色出現(xiàn)。比較適用于圖片內(nèi)容豐富的題材中，或者是相對正式、品牌感強的應用。
3. 主色占比小，色彩豐富度高
這是多數(shù)主流應用的趨勢，降低主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自身帶有的服務和功能。
4. 主色占比小，色彩豐富度低
通常，會應用這種方式是因為產(chǎn)品的服務是相對單一，但也需要用戶投入注意力的應用，設計師就會盡力避免給予用戶過多的干擾。
每次在進行配色的時候，我們都需要對自己要應用哪種配色應用方式做出規(guī)劃，然后再動手執(zhí)行。有了這個目標，后面在整個項目的設計中的配色步驟就是水到渠成的事情了。
在實踐前，我們要簡單講講一個應用或者界面的標準配色的流程了，流程順序如下：
具體應該怎么使用這套流程，我們用一個圖蟲APP改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的類型做起。
1. 配色流程演示
原型是 UI 設計的基本藝能了，在開始具體設計、配色前，搭建頁面的框架原型是一個必備的條件，下面，是我們已經(jīng)準備好的原型案例。
然后，我們確定以橙色作為應用主色，并在拾色器中進行確認。
有了主色，就可以對頁面進行色彩填充和圖片填充了。既然我們主色是占比大的，那么首先可以用到的就是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。
接著，我們開始整理中性色的使用，選擇新的顏色來填充文字和背景，清晰的表現(xiàn)模塊層級，文字信息的權(quán)重。
最后，就是添加輔助色和其它色彩的元素了，這個步驟建議都是放在最后一步操作。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，所以先完成基礎搭建，可以更好的幫助我們判斷彩色的使用是否合理。
下面，我們使用彩色的金剛區(qū)圖標，然后將用戶關(guān)注、認證用戶、標簽等元素使用其它色彩，來豐富頁面的色彩內(nèi)容。
2. 其他配色類型應用
根據(jù)第一個方案，我們可以再用這個原型來實現(xiàn)其余的三個方案的配色。
比如下面的主色占比大，但是色彩豐富度低的。因為已經(jīng)不太適用其它輔助色，所以主色填充上我們不再填充頂部導航欄的背景，而是將更多元素應用主色，減少輔助色數(shù)量。
然后是主色占比小，色彩豐富度高的方案，進一步降低主色應用的比例，然后在金剛區(qū)、標簽等處使用較為豐富的配色。
最后，就是主色占比小，色彩豐富性也低的方案，那么使用中性色的元素就開始增多，只保留最核心的一些元素使用主色，和極少的輔助色。
根據(jù)四種不同的配色方案，我們就可以得到四種不同的配色結(jié)果和風格，在每次設計開始實施前，我們都可以根據(jù)這種做法來做嘗試，并選出自己滿意的方案。
要再次強調(diào)，UI 配色是極其強調(diào)形式的應用科學，最后做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調(diào)整，并選出合理的那個。
以上是我們關(guān)于配色有關(guān)知識點的分享，希望可以幫助大家提升對 UI 配色的認識。
文章來源：優(yōu)設 作者：超人的電話亭
藍藍設計( www.gerard.com.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務