配色，設(shè)計(jì)師的世紀(jì)難題。從平面到屏幕，CMYK 到 RGB，墨點(diǎn)到像素，色彩越來(lái)越豐富，形式越來(lái)越復(fù)雜。UI 的開(kāi)展從擬物的繁瑣細(xì)節(jié)中擺脫出來(lái)，卻在色彩的展現(xiàn)中放飛了自我。

零賣(mài)業(yè)有個(gè)有趣的鉆研成果 —— 「七秒鐘定律」：人們?cè)谔暨x商品和服務(wù)時(shí) ，只需求 7 秒鐘就能夠斷定是否感樂(lè)趣，而在這瞬間的 7 秒鐘內(nèi)，色彩的作用占到了 67%。

要在小小的手機(jī)屏幕中進(jìn)入這么多顏色，并連結(jié)其中的聯(lián)系和邏輯，實(shí)在不易。若你還對(duì)配色一無(wú)所知，完全不知道配色應(yīng)該怎么入手，辣么你需求打聽(tīng)一下，我?guī)啄杲?jīng)驗(yàn)總結(jié)的配色思路。

拾色器中的黃金三分法

無(wú)論咱們用 PS、AI，還是 Sketch、XD、Figma，和色彩打交道至多的地方即是拾色器窗口，咱們來(lái)看看這些案例：

固然是不同的應(yīng)用，但是這個(gè)拾色器的用法如出一轍，但是，許多新人并無(wú)搞懂拾色器的正確應(yīng)用邏輯。

許多人知道，UI 的色彩使用 RGB 模式，但是拾色器要緊的選色道理遵循的是 HSB 模式的邏輯，也即是色相（H）、飽和度（S）、明度（B）。

HSB 是色彩科學(xué)中對(duì)全部顏色屬性的表面劃分，是種觀點(diǎn)上的定義，能夠用來(lái)注釋任何色彩，也即是說(shuō)能夠和 RGB 和 CMYK 互相轉(zhuǎn)化，且 HSB 的選色邏輯更清晰、簡(jiǎn)潔、精悍。

因?yàn)橐粋€(gè)正確的選色過(guò)程，是先斷定出色相，然后再在這個(gè)色相維度下選出明度和飽和度，因此咱們首先要關(guān)注色相選定條。

細(xì)心的同窗應(yīng)該已經(jīng)發(fā)現(xiàn)了，它們的首尾都是血色，那是因?yàn)樯嗟男蛄惺且粋€(gè)首尾相接的環(huán)形模式，因此它現(xiàn)實(shí)上即是色環(huán)的柱狀展示圖，應(yīng)用起來(lái)和色環(huán)沒(méi)有現(xiàn)實(shí)差別。

接下來(lái)就要說(shuō)到重點(diǎn)，飽和度和明度選定區(qū)，我自己使用的習(xí)氣，是將這個(gè)選定區(qū)通過(guò)黃金三分法的方法切割成等比的 9 個(gè)區(qū)域，然后明白它們?cè)?UI 中的對(duì)應(yīng)感情和應(yīng)用場(chǎng)景。

在以前的大量剖析中，互聯(lián)網(wǎng)產(chǎn)物的主色和重要輔助色都會(huì)往右上角聚集，少許次要、不可點(diǎn)的色彩聚集在中上方，而筆墨背景色則聚集在左側(cè)，無(wú)人區(qū)則是咱們重點(diǎn)避讓的對(duì)象。

底下咱們剖析幾個(gè)案例，看看它們?cè)谶@個(gè)選定區(qū)中的色彩漫衍情況：

大家也能夠自己拿少許合流的應(yīng)用做截圖，然后把它們的 UI 元素色彩分列到拾色面板中，就會(huì)得到根基一致的結(jié)果。牢記這9個(gè)區(qū)域的場(chǎng)景劃分，能夠贊助咱們很高效、平安地實(shí)現(xiàn) UI 配色。

UI配色中的色彩選定

在浩繁的 UI 設(shè)計(jì)規(guī)范中，色彩片面的介紹，都勢(shì)必包含三品種型，劃分是：

• 主色：應(yīng)用的焦點(diǎn)色彩，品牌色
• 輔色：豐富頁(yè)面視覺(jué)和轉(zhuǎn)達(dá)效果的次要顏色
• 中性：沒(méi)有色相的筆墨、背景用色

1. 主色的選定

主色是一個(gè)應(yīng)用的最焦點(diǎn)的色彩，品牌的象征色，好比想到餓了么的藍(lán)色、微信的綠色、京東的血色、淘寶的橙色。

斷定主色，并無(wú)大家想象的辣么復(fù)雜，它的要點(diǎn)在于——你想讓用戶感覺(jué)到類(lèi)感情，然后通過(guò)感情關(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)奪用戶的注意力，引起用戶的樂(lè)趣，辣么低飽和平淡的色調(diào)是無(wú)法實(shí)現(xiàn)這個(gè)指標(biāo)的，因此今天主色飽和度越來(lái)越極致，好比咱們之前整理的一篇總結(jié)：

為何支付寶要換 Logo 顏色？剖析下目前 Logo 的主色趨向

再加上屏幕的 RGB 表現(xiàn)特征，高比擬度，高動(dòng)靜局限的特質(zhì)能給用戶提供更好的觀感。因此選定主色最平安的做法，即是在斷定色相范例后，在右上方區(qū)域選出適宜的色值。

2. 輔助色的選定

輔助色是豐富應(yīng)用中的次要色彩，它會(huì)包含一到幾何個(gè)和主色不同的色彩，除了品牌轉(zhuǎn)達(dá)外，具備更強(qiáng)的實(shí)用性。

前方咱們提到過(guò)色環(huán)，這里就要派上用場(chǎng)了。咱們知道色環(huán)是個(gè)色彩序列首尾相連的環(huán)形模型，它蘊(yùn)含一個(gè)最質(zhì)樸的準(zhǔn)則，即兩個(gè)顏色在這個(gè)環(huán)形中角度越大，辣么視覺(jué)迥異性越大，比擬越強(qiáng)，好比下圖的展示：

這些配色的模式是不能夠閉著眼隨便挑的，它們僅僅作為一個(gè)色彩比擬度的校驗(yàn)規(guī)范。而真正輔助色的選定，是憑據(jù)現(xiàn)實(shí)場(chǎng)景的功效決意的。

好比通知、提醒、作廢用大血色，確認(rèn)、和議用綠色大概藍(lán)色，收藏、打分、評(píng)價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了規(guī)范的用色范例，跟著通例技巧來(lái)做，是沒(méi)有別的思路的情況下最簡(jiǎn)單、最平安的輔助色選定方法。

沒(méi)有規(guī)范元素用色的情況下，再思量應(yīng)用色環(huán)的 「角度準(zhǔn)則」，越需求被突出的顏色，能夠在色環(huán)中離主色越遠(yuǎn)，越不需求被突出的則越近。

好比下方攜程的案例，主色在藍(lán)色的情況下，支付、保險(xiǎn)金標(biāo)簽這些需求被重點(diǎn)突出的色彩，使用了主色的互補(bǔ)色， 讓咱們一眼就能瞥見(jiàn)并產(chǎn)生猛烈的操縱愿望。

3. 中性色的選定

中性色，是頁(yè)面中筆墨、背景用到的顏色，它們負(fù)擔(dān)起最根基的層次闡揚(yáng)、便于閱讀的重?fù)?dān)。多數(shù)小白覺(jué)得中性色無(wú)關(guān)緊要，現(xiàn)實(shí)情況湊巧相反。

主色輔助色決意了界面視覺(jué)是否出彩，而中性色的應(yīng)用直接決意了頁(yè)面能不能夠正常使用。若看過(guò)相對(duì)多的原型案例，就應(yīng)該清楚，即便惟有黑白灰的狀況下，咱們明白這些頁(yè)面和進(jìn)行使用也不會(huì)有絲毫的障礙。

中性色的配置，即是訂定一個(gè)由深到淺的灰度階梯，應(yīng)用在對(duì)應(yīng)權(quán)重的元素上，色彩輕重的要緊校驗(yàn)依據(jù)是 HSB 中的 B（明度） 值。

中性色固然指的是無(wú)個(gè)性，但并不是只能用純灰色，多見(jiàn)的一種做法，即是為中性色增加適量的藍(lán)色飽和度，提升觀看體驗(yàn)（滿足RGB的某種特征）。

這種做法，顏色越淺的時(shí)分飽和度應(yīng)用色值就越低，將這個(gè)規(guī)則在拾色器中進(jìn)行闡揚(yáng)，辣么咱們就能夠得到一個(gè) L 型曲線，我稱(chēng)它為 「中性曲線」。

掌握對(duì)于主色、輔助色、中性色的選定技巧，辣么對(duì)于UI配色的奧義來(lái)說(shuō)，你已經(jīng)掌握了一半，接下來(lái)就要打聽(tīng)更詳細(xì)的現(xiàn)實(shí)思路了。

配色方法的四象限

配色并不是惟有色彩的色值自己，大家一直在鉆研種種色彩生理學(xué)和表面，卻很少體貼它們?cè)鯓討?yīng)用，怎樣配置。

因此，我憑據(jù)主色和輔助色應(yīng)用總結(jié)了一個(gè)配色的四象限表格，再劃分看看它們對(duì)應(yīng)的案例：

1. 主色占比大，色彩豐富度高

主色會(huì)作為頂部標(biāo)題欄或別的重要模塊中的背景色，進(jìn)行大面積應(yīng)用，加深用戶對(duì)品牌的認(rèn)知和辨識(shí)度。而產(chǎn)物中又包含了大量功效和服務(wù)，需求用豐富的色彩來(lái)進(jìn)行暗示，吸引用戶關(guān)注。

2. 主色占比大，色彩豐富度低

這類(lèi)配色中，主色的應(yīng)用占比也大，出現(xiàn)頻率高，鮮有別的顏色出現(xiàn)。相對(duì)適用于圖片內(nèi)容豐富的題材中，大概是相對(duì)正式、品牌感強(qiáng)的應(yīng)用。

3. 主色占比小，色彩豐富度高

這是多數(shù)合流應(yīng)用的趨向，低落主色占比，留出更多的空間給內(nèi)容模塊的展示上，突出自己帶有的服務(wù)和功效。

4. 主色占比小，色彩豐富度低

通常，會(huì)應(yīng)用這種方法是因?yàn)楫a(chǎn)物的服務(wù)是相對(duì)單一，但也需求用戶投入注意力的應(yīng)用，設(shè)計(jì)師就會(huì)盡力以免賜與用戶過(guò)量的攪擾。

每次在進(jìn)行配色的時(shí)分，咱們都需求對(duì)自己要應(yīng)用類(lèi)配色應(yīng)用方法做出計(jì)劃，然后再著手實(shí)行。有了這個(gè)指標(biāo)，后面在整個(gè)項(xiàng)目的設(shè)計(jì)中的配色步驟即是水到渠成的事情了。

配色流程演示

在現(xiàn)實(shí)前，咱們要簡(jiǎn)單講講一個(gè)應(yīng)用大概界面的規(guī)范配色的流程了，流程順序以下：

詳細(xì)應(yīng)該怎么使用這套流程，咱們用一個(gè)圖蟲(chóng)APP改版的案例來(lái)做演示，首先從四象限中的第一個(gè)主色占比高、色彩豐富度高的范例做起。

1. 配色流程演示

原型是 UI 設(shè)計(jì)的根基藝能了，在首先詳細(xì)設(shè)計(jì)、配色前，搭建頁(yè)面的框架原型是一個(gè)必備的條件，底下，是咱們已經(jīng)籌辦好的原型案例。

然后，咱們斷定以橙色作為應(yīng)用主色，并在拾色器中進(jìn)行確認(rèn)。

有了主色，就能夠?qū)?yè)面進(jìn)行色彩添補(bǔ)和圖片添補(bǔ)了。既然咱們主色是占比大的，辣么首先能夠用到的即是頂部標(biāo)題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。

接著，咱們首先整理中性色的使用，選定新的顏色來(lái)添補(bǔ)筆墨和背景，清晰的闡揚(yáng)模塊層級(jí)，筆墨消息的權(quán)重。

最后，即是增加輔助色和別的色彩的元素了，這個(gè)步驟建議都是放在最后一步操縱。因?yàn)樯试截S富，越難控制，容易讓整個(gè)畫(huà)面顯得雜亂無(wú)序，因此先實(shí)現(xiàn)基礎(chǔ)搭建，能夠更好的贊助咱們校驗(yàn)彩色的使用是否合理。

底下，咱們使用彩色的金剛區(qū)圖標(biāo)，然后將用戶關(guān)注、認(rèn)證用戶、標(biāo)簽等元素使用別的色彩，來(lái)豐富頁(yè)面的色彩內(nèi)容。

2. 別的配色范例應(yīng)用

憑據(jù)第一個(gè)方案，咱們能夠再用這個(gè)原型來(lái)實(shí)現(xiàn)別的的三個(gè)方案的配色。

好比底下的主色占比大，但是色彩豐富度低的。因?yàn)橐呀?jīng)不太適用別的輔助色，因此主色添補(bǔ)上咱們不再添補(bǔ)頂部導(dǎo)航欄的背景，而是將更多元素應(yīng)用主色，削減輔助色數(shù)目。

然后是主色占比小，色彩豐富度高的方案，進(jìn)一步低落主色應(yīng)用的比例，然后在金剛區(qū)、標(biāo)簽等處使用較為豐富的配色。

最后，即是主色占比小，色彩豐富性也低的方案，辣么使用中性色的元素就首先增加，只保留最焦點(diǎn)的少許元素使用主色，和極少的輔助色。

憑據(jù)四種不同的配色方案，咱們就能夠得到四種不同的配色結(jié)果和風(fēng)格，在每次設(shè)計(jì)首先實(shí)施前，咱們都能夠憑據(jù)這種做法來(lái)做嘗試，并選出自己寫(xiě)意的方案。

要再次夸大，UI 配色是極端夸大形式的應(yīng)用科學(xué)，最后做的往往會(huì)和一首先想的效果有極大收支，因此需求咱們有幾個(gè)備選方案，能夠隨時(shí)進(jìn)行調(diào)整，并選出合理的那個(gè)。