如何爲你的UI制定一套色彩系統？來看這個實戰案例！

色彩在UI設計中的作用：加深品牌印象與品牌感、引導用戶視覺凹增加易讀性、區分信息交互的狀態、營造氛圍傳遞熱度……

前言

不管是做 UI 設計還是畫插畫，有很多同學覺得自己是因爲天賦不夠所以對色彩的敏感度不夠，其實不然。一個可能是大家總結的太少，從來都是憑感覺和運氣去配色，但配色都是有講究的。

一個設計作品呈現到用戶面前，第一眼進入眼簾的就是產品的視覺表現，而產品的色彩在其中起到了舉足輕重的作用，毫無疑問色彩搭配對於設計師來說是非常重要的。那麼具體到實際項目中該使用什麼怎樣的色彩，需要怎麼做呢？

用戶界面是一個設計師用理性思維解決用戶感性需求的窗口。如果對色彩的運用不加以剋制，界面可能會顯得花哨而沒有主次；但過於拘謹又容易使界面保守，難以激發用戶情緒，下面以Bee express項目的實例來理性推導制定一套色彩系統。

切勿直奔主題

做過設計的同學應該都知道顏色模式：RGB、CMYK、Lab 等等，這裏不做過多的解釋了。另外每個顏色具有一定的性格特徵和表達方式，而且都會有正反兩面。雖然每種色彩都有正向性格特徵，但是我們在定位主體色之前一定要知道所選擇色彩的負面特徵對企業是否會帶來負面的影響，

開始之前我們需要了解在配色過程中需要避免出現的問題，如果你經常出現下列的問題，保證你在試用期內一次性就能拿到全部薪資，emmm……

高飽和度的色彩會造成我們的視覺疲勞及視幻；
灰部使用過多的配色會使界面有一種髒兮兮、霧濛濛的感覺，甚至心情低落；
沒有規律且過多的配色。如果你不是做五彩斑斕的黑，建議6、3、1的色彩配比，輔助色不超過3種；
熒光色。使用這種色彩的，建議跟色彩對視，看誰堅持的更久，除非是你贏了；
太輕柔的顏色-沒有重點且輕飄飄的感覺；
現在很火的新擬物化設計對於部分（沒有絕對）產品可能會造成信息識別性很差；
不要將對抗色重疊，否則你會很浮躁。

定位品牌色

雖然設計是相通的，但是在不同的設計領域進行配色時，依然會存在巨大的區別。更換品牌的主體色，都不會是因爲設計師自己的決定，而是公司在商業策略上優先做出了調整，然後通過品牌視覺上的變更將這個信息傳遞給消費者。

Bee Express快遞、速遞櫃業務爲主，前期的主色及視覺形象以橙黃色爲主，爲了避免視覺跳躍性太大，以及後期IP形象（蜜蜂吉祥物）打造，本次品牌色彩升級在原有基礎上優化了色調，以保證後期產品的易用性和延展性，並利用最科學、最適用的方式推導出輔助色，以提升應用視覺的豐富性和感官體驗。

express原主色：

爲了不影響原有色調前期的視覺傳播，即在原有主體色的基礎上調整SHB的數值，讓色彩更具視覺衝擊力，在色彩襯托（字體、圖標）更清晰。

H（Hue：色相）
S（Saturation：飽和度）
B（Brightness：明度）

通過調整後的主體色也能看出，明亮清晰的主體色（品牌色）也更適合在界面中的運用，爲信息傳遞、引導操作、品牌價值帶來更大的提升。

信息傳遞：產品的首要目的是傳遞用戶所需要的信息，這就需要界面有清晰的層級關係，明確、舒適的閱讀體驗。
引導操作：清晰合理的操作引導，讓用戶能夠準確地根據引導進行下一步操作。
品牌價值：很多同學會忽略這一點，導致產品的界面與品牌關聯性差，整體界面沒有品牌感。

根據主體色推理同色系

同色係爲統一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時可以讓界面保持色彩上的一致性，整體感較強，產生低對比度的和諧美感，給人協調統一的感覺。

具體是指與品牌色 H（色相）一致，通過改變 S（飽和度）與 B（明度）變化產生的色組。分別往淺色/深色方向按均勻數據增減，各產生5個座標值。

綜上能看出，使用同一色系即可完成一個項目，但是對於中大型項目來說實在是過於單調，沒有太多的層次感，因此我們需要多色搭配爲輔。多色的輔助顏色可設定不同的任務屬性和情感表達，再搭配中性色黑白灰，能賦予更多的變化和層次。

提取24色-鋪墊輔助色

根據主體色 H（色相）爲基礎，不斷地遞增、遞減 15，在 0-360 之間可以得出 24 個顏色，也就是將 360° 色環分割爲 24 份，（24份在360°色環上，每一個色相的角度爲15°），最終得到下圖24色。

選取輔助色

輔助色需要滿足的兩個條件：

和品牌色有明顯區分：避免所選輔助色感官上給用戶視覺區別與品牌色差距不大，傳遞的調性太過一致；

不能過於突兀：根據色彩原理，互補色是最能與品牌色本色產生視覺感官對比的顏色，但可能會有些突兀。爲了讓顏色的輔助起到豐富畫面的作用，而不是反而讓整個版面顯得不和諧，所以選擇互補色的鄰近色作爲輔助色，避免直接使用互補色。

鄰近色：色相差值 15° 以內的顏色爲鄰近色;
類似色：色相差值 30° 以內的顏色爲類似色;
互補色：色相差值 180° 的顏色爲互補色。

基於品牌色可衍生出 3 個輔助色：一個與品牌色傳遞調性有明顯區分的類似色；兩個互補色的鄰近色。

類似色搭配：使用色相相近的顏色，頁面元素不會相互衝突，更加協調有質感。

互補色搭配：選擇使用互補色，最佳搭配是一種作爲主色，另一種用於強調。它們有着非常強烈的對比度，用在需要特別強調某個元素時會非常有效。

視覺統一感官校準

每一種顏色都有自己的「感官明度」，也就是發光度。根據現有的使用場景，類似色和互補色大都用在同層級的信息展示上，而當我們將最終得到的輔助色擺放在一起之後發現，雖然我們提取出的輔助色明度色值都一致，因爲顏色本身自帶的感官明度屬性有所區別，導致視覺上會有明顯的明暗差別。需要通過發光度來進行最終的顏色校正。

校準方式：依次在輔助色上疊加一層純黑圖層，將該純黑圖層顏色模式調整爲 Hue（色相），就可以通過無彩色系下的明度色值，進行對比，使色彩視覺感官保持一致（青色和藍色屬冷色調，固需加深）。