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