最近我在想一個(gè)問(wèn)題：假如設(shè)計(jì)師負(fù)責(zé)一款全新的產(chǎn)品，不受已有規(guī)范的束縛，我們?cè)撊绾味x產(chǎn)品的色彩體系呢？有些設(shè)計(jì)師可能會(huì)憑自己的主觀(guān)想法定義色值，覺(jué)得這個(gè)顏色在界面里好看就用了，但是我覺(jué)得這樣是不夠規(guī)范的，更多應(yīng)該考慮到全局的通用性和科學(xué)性。

基于這個(gè)問(wèn)題點(diǎn)，我網(wǎng)上查看研究了一些資料文章，參考了 Ant Design 和 Material Design，學(xué)習(xí)到了一些定義色彩 ID 的理論知識(shí)，來(lái)看看吧。

色彩

色彩是設(shè)計(jì)系統(tǒng)的重要組成部分，可以使用在品牌感、信息層級(jí)、操作指引、交互反饋的場(chǎng)景。在細(xì)分層面，色彩可以分為主色、輔助色和中性色。

設(shè)計(jì)師調(diào)整顏色的時(shí)候，建議使用 HSB 模式，調(diào)整色彩更直觀(guān)，符合心理預(yù)期，因?yàn)槿四X也是通過(guò)這個(gè)模式來(lái)辨別顏色的。

其中，H 代表色相，S 代表飽和度，B 代表亮度。色相是區(qū)別各種不同色彩的標(biāo)準(zhǔn)，通過(guò) 360°圓形色環(huán)來(lái)取色，每一度代表一個(gè)色相。飽和度指色彩的純度，飽和度越低，越往白色過(guò)渡。亮度指色彩的明亮程度，亮度越低，越往黑色過(guò)渡。

這是常用軟件 HSB 模式調(diào)整顏色的截圖，幫助大家理解。

主色

主色一般和產(chǎn)品的品牌色相關(guān)聯(lián)，很大程度決定了產(chǎn)品整體的調(diào)性和視覺(jué)風(fēng)格，常用于主按鈕、文字高亮、強(qiáng)調(diào)操作等界面場(chǎng)景。

產(chǎn)品 1.0 版本以上，Logo 一般都會(huì)有定義好的品牌色，界面設(shè)計(jì)中的主色和品牌色保持一致即可，可以傳遞統(tǒng)一的理念。如果從 0 開(kāi)始的新產(chǎn)品還沒(méi)有定義 Logo 和品牌色，界面要先設(shè)計(jì)開(kāi)發(fā)，這時(shí)我們可以結(jié)合產(chǎn)品行業(yè)特性、產(chǎn)品理念、產(chǎn)品名稱(chēng)、用戶(hù)特征等進(jìn)行思考，提取關(guān)鍵字和情緒板，從而提取多個(gè)色系，最終和多角色溝通確定主色系，避免后續(xù)反復(fù)調(diào)整的成本。

確定主色系后，設(shè)計(jì)師該如何定義具體色值呢？可能大部分設(shè)計(jì)師都是直接吸取同色系的大廠(chǎng)產(chǎn)品色值，再微調(diào)下參數(shù)做出差異性就確定了。這確實(shí)是一個(gè)取巧方法，畢竟不容易出錯(cuò)。但我覺(jué)得設(shè)計(jì)師需要有自己的思考過(guò)程，所以進(jìn)行了國(guó)內(nèi)外大廠(chǎng)產(chǎn)品主色的調(diào)研分析，總結(jié)了一些共同點(diǎn)和差異點(diǎn)。

我發(fā)現(xiàn) Apple 系和國(guó)內(nèi)產(chǎn)品的主色傾向于飽和度和明度較高的顏色，基本分布在橫豎向三等分的右上角，我認(rèn)為主色取值可以參考這個(gè)區(qū)域。

看下部分產(chǎn)品字色、按鈕色、深色模式的效果，還可以。

而谷歌系、微軟系產(chǎn)品傾向于明度稍低的顏色。從設(shè)計(jì)層面來(lái)看，顏色有點(diǎn)暗、有點(diǎn)臟，不太建議。

我有點(diǎn)不太理解國(guó)外設(shè)計(jì)師的視覺(jué)審美，研究了 WCAG 2.1 無(wú)障礙標(biāo)準(zhǔn)后，才發(fā)現(xiàn)他們?cè)跒檎系K（色盲）用戶(hù)著想，主色都符合 WCAG 2.1 的 4.5:1 最小對(duì)比度（AA 級(jí)）。這個(gè)標(biāo)準(zhǔn)涵蓋了使 Web 內(nèi)容更易于訪(fǎng)問(wèn)的各種建議，遵循這些準(zhǔn)則將使更多殘疾人更容易獲取網(wǎng)站內(nèi)容。從分析的國(guó)內(nèi)產(chǎn)品中，我只發(fā)現(xiàn)知乎的主色符合這個(gè)標(biāo)準(zhǔn)。

這其實(shí)就引發(fā)了我們的思考，視覺(jué)效果和無(wú)障礙人群體驗(yàn)，哪個(gè)更重要呢？我覺(jué)得兩個(gè)層面都挺重要的，不過(guò)在實(shí)際場(chǎng)景中，建議設(shè)計(jì)師更多是結(jié)合品牌調(diào)性、視覺(jué)效果去定義具體色值，在美感、可讀性、可用性之間得到平衡。注意一點(diǎn)，明度不宜太低，顏色會(huì)比較臟，也不太符合年輕用戶(hù)的審美。

如果我負(fù)責(zé)一款產(chǎn)品，已經(jīng)確定藍(lán)色系為主色，我會(huì)選擇明亮一點(diǎn)的色值，在文字、按鈕、深色模式等常用場(chǎng)景下保證可讀性和可用性。色值定為#247FFF，后面講輔助色的時(shí)候會(huì)用到。

輔助色

輔助色，可以用于特定功能、狀態(tài)反饋、應(yīng)用圖標(biāo)等場(chǎng)景，反饋的成功、失敗、警告狀態(tài)最常用到了。

基于主色，我們?cè)趺炊x輔助色呢？我總結(jié)了點(diǎn)小方法。

1. 以主色的色相為基礎(chǔ)，差值為 15°，圍繞 360°色環(huán)提取 24 色。（差值 15°的顏色屬于同類(lèi)色臨界點(diǎn)，有利于我們劃分色度層級(jí)，又不會(huì)失去想要的色系）

2. 參考常用配色理論：相似色、鄰近色、三分色、互補(bǔ)色，得出部分色值。

3. 結(jié)合界面場(chǎng)景和使用效果，對(duì)顏色進(jìn)行刪減和補(bǔ)充，最終確定所需要的輔助色。（建議最多 12 種，避免色彩太多，不利于設(shè)計(jì)師理解使用）

4、將輔助色和主色對(duì)比，進(jìn)行視覺(jué)感官明度校正。（雖然色彩的飽和度和明度一樣，但不同色相的視覺(jué)感官明度是不一樣的，綠色、黃色、青色實(shí)際看起來(lái)特別淺，所以我們要手動(dòng)調(diào)整）

校準(zhǔn)方式：在顏色上面疊加純黑色圖層，圖層模式選擇色相，就可以直觀(guān)地看到無(wú)彩色視覺(jué)感官明度。相差大的顏色可以以 5 為差值調(diào)整飽和度或明度，最后再根據(jù)效果進(jìn)行微調(diào)。（色相的差值能被 5 整除，飽和度和明度同樣適用）

調(diào)色板

為了滿(mǎn)足界面對(duì)色彩的需求，需要對(duì)主色和輔助色進(jìn)行色板延伸，建立不同梯度的調(diào)色板。

這里有兩種計(jì)算方法：

1. 淺色調(diào)色板，在顏色上依次疊加 20%、40%、60%、80%、90%不透明度的白色；深色調(diào)色板，在顏色上依次疊加 20%、40%、60%、80%不透明度的黑色。

2. 淺色調(diào)色板，色相（H）往感光明度高的色相依次差值 2，飽和度（S）依次減少 15，明度（B）依次增加 5；深色調(diào)色板，色相（H）往感光明度低的色相依次差值 2，明度（B）依次減少 15，飽和度（S）依次增加 5。（Ant Design 和 Material Design 調(diào)色板也都加了色相旋轉(zhuǎn)）。

從對(duì)比效果來(lái)看，比較建議使用第 2 種方法，使用 HSB 模式的值進(jìn)行遞減/遞增得到完整漸變色板，顏色更加明亮通透。Ant Design 官網(wǎng)也有在線(xiàn)生成調(diào)色板功能，和第二種方法邏輯類(lèi)似，可以快速生成，大家可以去使用。

最終生成主色和輔助色的調(diào)色板，效果如下。

中性色

中性色包含黑、白、灰，合理地使用中性色能夠使界面信息層級(jí)主次分明，助力于瀏覽體驗(yàn)，常用于字色、控件色、背景色的場(chǎng)景。

由于純灰色顯得比較臟，人眼對(duì)偏藍(lán)的灰色閱讀體驗(yàn)更好，在桌面端更建議使用灰色相加點(diǎn)藍(lán)。

計(jì)算方法：

1. 選擇和主色視覺(jué)感官明度相同的灰色，按調(diào)色板方法建立梯度色板。

2. 將藍(lán)色調(diào)色板不透明度調(diào)為 10%，灰色調(diào)色板不透明度調(diào)為 90%，兩個(gè)色板疊加，最后吸取顏色，再加入黑白兩個(gè)色板，就確定了從白到黑的 12 種顏色。

最終，我們就確定了一款產(chǎn)品的色彩體系，界面中使用的顏色需要遵循調(diào)色板色值，一致性設(shè)計(jì)。

總結(jié)

以上就是設(shè)計(jì)系統(tǒng)中建立色彩體系的思考總結(jié)。設(shè)計(jì)師調(diào)整顏色時(shí)，建議使用 HSB 模式，調(diào)整色彩更直觀(guān)，符合心理預(yù)期。主色需要結(jié)合品牌調(diào)性、視覺(jué)效果定義具體 ID 色值，在美感、可讀性、可用性之間得到平衡。注意，明度不宜太低，顏色會(huì)比較臟。輔助色、調(diào)色板、中性色定義 ID 色值過(guò)程中，建議遵循一定的色彩理論準(zhǔn)則，科學(xué)地定義顏色，更有說(shuō)服力。

還有許多不足，繼續(xù)學(xué)習(xí)去了。

參考文獻(xiàn)：

• Ant Design 設(shè)計(jì)系統(tǒng) – 色彩
• Material Design 設(shè)計(jì)系統(tǒng) – 色彩
• Ant Design 色板生成算法演進(jìn)之路
• Web 內(nèi)容無(wú)障礙指南 (WCAG) 2.1

作者：ALEI的設(shè)計(jì)思考