3.2 如何快速進行UI配色

沒有不好的顏色，只有不好的搭配。色彩是設計中最具表現力和感染力的因素，它通過人們的視覺感受產生一系列的生理、心理感受和類似物理的效應，喚起用戶不同的情緒和感受。對于設計新人，配色始終困惑著他們，“為什么我的頁面總是太花哨？”“為什么別人的作品那么大氣？”初學者在學習配色之前，應先學習色彩心理學的知識，理解色彩對于不同人群帶來的感受。多看優秀的設計作品和觀察周圍美麗的事物，從中獲得優秀的配色靈感，從而提升對色彩的認知。多進行配色練習，隨著時間的推移，設計師會做得越來越好，本篇就通過對色彩的深入了解，來學習如何快速進行UI配色。

一個完整的UI配色應包含主色、輔助色和灰度色（灰度色的配色規范請閱讀上一篇）。主色通常與品牌色一致，在導航欄、圖標、按鈕、菜單等都會使用到。確立了主色后，可以選擇與主色色調一致但能拉開層次的同色系色彩或鄰近色作為輔助色。此外，在一些場景中需要強調內容，因此選擇與主色對立的互補色作為第二輔助色。如果色彩過于鮮艷，還可以降低飽和度和明度，讓色彩變得柔和一些。

理解了UI配色的步驟后，接著我們來學習幾種常見的配色方案。請注意：真正的色環如上圖所示，但為了更加清晰地展示，下文中的示例仍然使用了十二色環。

單色

單色是指某個色彩的明度變化，即在色彩上疊加10%～90%白色或黑色得到的一組顏色。單色搭配由于彼此之間色相相同，因此能和諧共處。

QQ音樂品牌色為綠色和黃色，但其界面設計僅使用綠色作為唯一主色調，單色的界面沒有花里胡哨，給人一種冷靜、清爽的感覺。

在界面中，搜索欄背景色由主色加上10%的黑色得到，聽歌識曲界面中的圓形雷達圖淺色背景由主色加上60%的白色得到，如下圖。

鄰近色

鄰近色是指在色環上任意三個相鄰的顏色，它可以在同一個色調中建立起豐富的質感和層次，和諧但不單調，理所當然成為最安全的配色法則，例如黃色、橘黃、橙色互為鄰近色。

螞蜂窩的品牌色為橙色，其界面設計也延續了品牌色作為主色調，并選擇橙黃和紅色作為輔助色，鄰近色的界面主次分明、豐富飽滿。

互補色

互補色是指在色環上對立的兩個顏色，例如黃色和紫色、橙色和藍色、紅色和綠色等。互補色有著非常強烈的對比度，在顏色飽和度很高時，可以產生許多十分震撼的視覺效果。通常畫面為了吸引眼球經常會使用互補色，但使用不當也有可能使設計顯得非常突兀。

Airbnb的品牌色為紅色，其界面設計使用品牌色的互補色作為主色調，并選擇品牌色作為輔助色，互補色的界面功能清晰、高效簡潔。

分散互補色

分散互補色是指尋找三種顏色，其中兩種互為鄰近色，另一種與它們形成互補色，例如綠色和紅色、橙紅。這種搭配既能保持互補色醒目的強烈對比及視覺上的趣味性，又能讓顏色變得柔和。

優酷的品牌色為藍色和紅色，它們本身互為補色，其界面設計使用藍色作為主色調，選擇紅色及橙色作為輔助色，分散互補色的界面醒目但不凌亂。

對立色

對立色是指尋找三種互相平衡的顏色，在色環上任意三個三角對立的顏色，使用其中一種顏色作為主色，其他兩種顏色作烘托，這樣才能在色彩間取得平衡，產生和諧效果。

36Kr的品牌色為藍色，其界面設計延續了品牌色作為主色調，并選擇三角對立色的紅色和橙黃作為輔助色，使界面充滿了科技感，在冷靜之余又不失活力。