配色，設計師的世紀難題。從平面到屏幕，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 配色是極其強調形式的應用科學，最後做的往往會和一開始想的效果有極大出入，所以需要我們有幾個備選方案，可以隨時進行調整，並選出合理的那個。

總結

以上是我們關於配色有關知識點的分享，希望可以幫助大家提升對 UI 配色的認識。

更多配色方法：

歡迎關注作者的微信公衆號：「超人的電話亭」