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