10年經驗的資深設計師，總結了這份 UI 配色設計終極奧義

配色，設計師的世紀難題。從平面到屏幕，CMYK 到 RGB，墨點到像素，色彩越來越豐富，形式越來越復雜。UI 的開展從擬物的繁瑣細節中擺脫出來，卻在色彩的展現中放飛了自我。

零賣業有個有趣的鉆研成果 —— 「七秒鐘定律」：人們在挑選商品和服務時 ，只需求 7 秒鐘就能夠斷定是否感樂趣，而在這瞬間的 7 秒鐘內，色彩的作用占到了 67%。

要在小小的手機屏幕中進入這么多顏色，并連結其中的聯系和邏輯，實在不易。若你還對配色一無所知，完全不知道配色應該怎么入手，辣么你需求打聽一下，我幾年經驗總結的配色思路。

拾色器中的黃金三分法

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

固然是不同的應用，但是這個拾色器的用法如出一轍，但是，許多新人并無搞懂拾色器的正確應用邏輯。

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

HSB 是色彩科學中對全部顏色屬性的表面劃分，是種觀點上的定義，能夠用來注釋任何色彩，也即是說能夠和 RGB 和 CMYK 互相轉化，且 HSB 的選色邏輯更清晰、簡潔、精悍。

因為一個正確的選色過程，是先斷定出色相，然后再在這個色相維度下選出明度和飽和度，因此咱們首先要關注色相選定條。

細心的同窗應該已經發現了，它們的首尾都是血色，那是因為色相的序列是一個首尾相接的環形模式，因此它現實上即是色環的柱狀展示圖，應用起來和色環沒有現實差別。

接下來就要說到重點，飽和度和明度選定區，我自己使用的習氣，是將這個選定區通過黃金三分法的方法切割成等比的 9 個區域，然后明白它們在 UI 中的對應感情和應用場景。

在以前的大量剖析中，互聯網產物的主色和重要輔助色都會往右上角聚集，少許次要、不可點的色彩聚集在中上方，而筆墨背景色則聚集在左側，無人區則是咱們重點避讓的對象。

底下咱們剖析幾個案例，看看它們在這個選定區中的色彩漫衍情況：

大家也能夠自己拿少許合流的應用做截圖，然后把它們的 UI 元素色彩分列到拾色面板中，就會得到根基一致的結果。牢記這9個區域的場景劃分，能夠贊助咱們很高效、平安地實現 UI 配色。

UI配色中的色彩選定

在浩繁的 UI 設計規范中，色彩片面的介紹，都勢必包含三品種型，劃分是：

• 主色：應用的焦點色彩，品牌色
• 輔色：豐富頁面視覺和轉達效果的次要顏色
• 中性：沒有色相的筆墨、背景用色

1. 主色的選定

主色是一個應用的最焦點的色彩，品牌的象征色，好比想到餓了么的藍色、微信的綠色、京東的血色、淘寶的橙色。

斷定主色，并無大家想象的辣么復雜，它的要點在于——你想讓用戶感覺到類感情，然后通過感情關聯一個大致的色彩局限，再進行微調。

在今天的互聯網產物中，主色的應用選定局限在拾色器區域的右上角，前方已經有注釋了。這和平面設計中的用色有很大的不同。

挪動端產物要在一個方寸大的空間中爭奪用戶的注意力，引起用戶的樂趣，辣么低飽和平淡的色調是無法實現這個指標的，因此今天主色飽和度越來越極致，好比咱們之前整理的一篇總結：

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

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

2. 輔助色的選定

輔助色是豐富應用中的次要色彩，它會包含一到幾何個和主色不同的色彩，除了品牌轉達外，具備更強的實用性。

前方咱們提到過色環，這里就要派上用場了。咱們知道色環是個色彩序列首尾相連的環形模型，它蘊含一個最質樸的準則，即兩個顏色在這個環形中角度越大，辣么視覺迥異性越大，比擬越強，好比下圖的展示：

這些配色的模式是不能夠閉著眼隨便挑的，它們僅僅作為一個色彩比擬度的校驗規范。而真正輔助色的選定，是憑據現實場景的功效決意的。

好比通知、提醒、作廢用大血色，確認、和議用綠色大概藍色，收藏、打分、評價用橙黃色。都是已經在用戶心智中建立了規范的用色范例，跟著通例技巧來做，是沒有別的思路的情況下最簡單、最平安的輔助色選定方法。

沒有規范元素用色的情況下，再思量應用色環的 「角度準則」，越需求被突出的顏色，能夠在色環中離主色越遠，越不需求被突出的則越近。

好比下方攜程的案例，主色在藍色的情況下，支付、保險金標簽這些需求被重點突出的色彩，使用了主色的互補色， 讓咱們一眼就能瞥見并產生猛烈的操縱愿望。

3. 中性色的選定

中性色，是頁面中筆墨、背景用到的顏色，它們負擔起最根基的層次闡揚、便于閱讀的重擔。多數小白覺得中性色無關緊要，現實情況湊巧相反。

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

中性色的配置，即是訂定一個由深到淺的灰度階梯，應用在對應權重的元素上，色彩輕重的要緊校驗依據是 HSB 中的 B（明度） 值。

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

這種做法，顏色越淺的時分飽和度應用色值就越低，將這個規則在拾色器中進行闡揚，辣么咱們就能夠得到一個 L 型曲線，我稱它為 「中性曲線」。

掌握對于主色、輔助色、中性色的選定技巧，辣么對于UI配色的奧義來說，你已經掌握了一半，接下來就要打聽更詳細的現實思路了。

配色方法的四象限

配色并不是惟有色彩的色值自己，大家一直在鉆研種種色彩生理學和表面，卻很少體貼它們怎樣應用，怎樣配置。

因此，我憑據主色和輔助色應用總結了一個配色的四象限表格，再劃分看看它們對應的案例：

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

主色會作為頂部標題欄或別的重要模塊中的背景色，進行大面積應用，加深用戶對品牌的認知和辨識度。而產物中又包含了大量功效和服務，需求用豐富的色彩來進行暗示，吸引用戶關注。

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

這類配色中，主色的應用占比也大，出現頻率高，鮮有別的顏色出現。相對適用于圖片內容豐富的題材中，大概是相對正式、品牌感強的應用。

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

這是多數合流應用的趨向，低落主色占比，留出更多的空間給內容模塊的展示上，突出自己帶有的服務和功效。

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

通常，會應用這種方法是因為產物的服務是相對單一，但也需求用戶投入注意力的應用，設計師就會盡力以免賜與用戶過量的攪擾。

每次在進行配色的時分，咱們都需求對自己要應用類配色應用方法做出計劃，然后再著手實行。有了這個指標，后面在整個項目的設計中的配色步驟即是水到渠成的事情了。

配色流程演示

在現實前，咱們要簡單講講一個應用大概界面的規范配色的流程了，流程順序以下：

詳細應該怎么使用這套流程，咱們用一個圖蟲APP改版的案例來做演示，首先從四象限中的第一個主色占比高、色彩豐富度高的范例做起。

1. 配色流程演示

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

然后，咱們斷定以橙色作為應用主色，并在拾色器中進行確認。

有了主色，就能夠對頁面進行色彩添補和圖片添補了。既然咱們主色是占比大的，辣么首先能夠用到的即是頂部標題欄的背景色了，以及底部 Tabbar 中的選中色，大按鈕色等。

接著，咱們首先整理中性色的使用，選定新的顏色來添補筆墨和背景，清晰的闡揚模塊層級，筆墨消息的權重。

最后，即是增加輔助色和別的色彩的元素了，這個步驟建議都是放在最后一步操縱。因為色彩越豐富，越難控制，容易讓整個畫面顯得雜亂無序，因此先實現基礎搭建，能夠更好的贊助咱們校驗彩色的使用是否合理。

底下，咱們使用彩色的金剛區圖標，然后將用戶關注、認證用戶、標簽等元素使用別的色彩，來豐富頁面的色彩內容。

2. 別的配色范例應用

憑據第一個方案，咱們能夠再用這個原型來實現別的的三個方案的配色。

好比底下的主色占比大，但是色彩豐富度低的。因為已經不太適用別的輔助色，因此主色添補上咱們不再添補頂部導航欄的背景，而是將更多元素應用主色，削減輔助色數目。

然后是主色占比小，色彩豐富度高的方案，進一步低落主色應用的比例，然后在金剛區、標簽等處使用較為豐富的配色。

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

憑據四種不同的配色方案，咱們就能夠得到四種不同的配色結果和風格，在每次設計首先實施前，咱們都能夠憑據這種做法來做嘗試，并選出自己寫意的方案。

要再次夸大，UI 配色是極端夸大形式的應用科學，最后做的往往會和一首先想的效果有極大收支，因此需求咱們有幾個備選方案，能夠隨時進行調整，并選出合理的那個。