編者按：B端設(shè)計(jì)的色彩體系如何構(gòu)建？本文從色彩分類、色彩體系、色彩應(yīng)用3個方面，幫你掌握B端色彩體系的設(shè)計(jì)基礎(chǔ)。

中后臺管理系統(tǒng)是一種管理工具，用來幫助企業(yè)高效、穩(wěn)定的管理、運(yùn)營、協(xié)作，從而實(shí)現(xiàn)降本增效。因此，在產(chǎn)品體驗(yàn)上更強(qiáng)調(diào)效率和理性。

界面色彩設(shè)計(jì)要遵循這個目標(biāo)，為產(chǎn)品傳達(dá)信息做好服務(wù)，視覺效果上保證界面整體風(fēng)格協(xié)調(diào)、符合審美標(biāo)準(zhǔn)即可。過于花哨的界面，雖然讓用戶可以眼前一亮，但會影響細(xì)節(jié)信息的識別，最終走向"審美疲勞"。今天我們一起聊聊色彩體系的建設(shè)。

一、色彩分類

不同于 C 端產(chǎn)品的運(yùn)營、營銷場景，要求設(shè)計(jì)的多樣性，緊跟設(shè)計(jì)流行趨勢。B 端需要相對穩(wěn)定的色彩體系，這樣才能保證產(chǎn)品設(shè)計(jì)的高效可控。

色彩和布局、字體都是底層的全局樣式，因此需要適配各種應(yīng)用場景和組件設(shè)計(jì)?？v觀各個大廠的設(shè)計(jì)系統(tǒng)，通常會將色彩劃分為 4 種類型。

1. 主色

主色是產(chǎn)品最核心的顏色，使用頻率最高，可以說是構(gòu)成產(chǎn)品風(fēng)格的關(guān)鍵要素。常用于突出信息、引導(dǎo)操作、功能狀態(tài)表達(dá)等。

中后臺管理系統(tǒng)的主色通常首選品牌色，可以更好地傳遞品牌價值，構(gòu)建統(tǒng)一的界面風(fēng)格。例如 TDesign 以騰訊藍(lán)（Tencent Blue）作為主色；公眾號管理后臺采用的是"微信綠"，飛書后臺管理系統(tǒng)采用"藍(lán)綠"品牌色。

來自 TDesign

當(dāng)然并不是所有的品牌色都可以用作主色。在后臺管理系統(tǒng)中，工具類產(chǎn)品的屬性比較強(qiáng)，更強(qiáng)調(diào)產(chǎn)品的科技感、穩(wěn)定性，需要幫助用戶沉浸式地完成工作任務(wù)，因此以藍(lán)色為代表的冷色系應(yīng)用更多。

而過多的暖色調(diào)則會讓人興奮，應(yīng)用相對較少。例如阿里云在框架層面、概覽信息中采用了品牌橙色作為主色，功能頁面還是以藍(lán)色為主。華為云只是將品牌紅色用在了主按鈕上，其他內(nèi)容配色仍然選用藍(lán)色。

2. 功能色

B 端產(chǎn)品還需要借助色彩，向用戶反饋操作結(jié)果、系統(tǒng)狀態(tài)等信息。最典型的就是成功、失敗、提示/警告、錯誤、鏈接等，這些都屬于功能色。

功能色系需要符合用戶的認(rèn)知習(xí)慣，例如一般都是以綠色代表正?；蛘叱晒?、橙色為警告、紅色為錯誤、藍(lán)色作為鏈接。用戶不需要閱讀文字信息，就能直觀地了解信息背后的狀態(tài)。

來自 TDesign

3. 中性色

中性色主要是黑白灰三種顏色，由于沒有冷暖，也沒有色相，又稱為無彩色系。常用于文字、背景、圖標(biāo)、邊框和分割線等元素。

中性色非常重要，在頁面中應(yīng)用最多。由于是無彩色系，只要控制得當(dāng)，可以大面積使用，不會增加界面的信息負(fù)擔(dān)，反而有利于形成內(nèi)容層次和區(qū)域劃分，讓界面更加有序，內(nèi)容結(jié)構(gòu)更加清晰，還不會影響界面風(fēng)格。

來自 TDesign

當(dāng)然中性色使用時，需要有比較明確的色彩對比關(guān)系，否則可能模糊一團(tuán)，影響信息的可讀性。

另外在某些場景下，中性色還可以加入一定的品牌色，讓中性色帶有品牌傾向。在 TDesign 中，將品牌色的混合比例定為 20%。

品牌中性色的計(jì)算公式如下：

Average(r,g,b) = 0.2*(r1,g1,b1) + 0.8*(r2,g2,b2)

4. 擴(kuò)展色

在 B 端產(chǎn)品中，還會有更多顏色需求的場景，例如數(shù)據(jù)可視化、插畫等場景中。為了保證界面的協(xié)調(diào)，擴(kuò)展色可以由主色或者功能色擴(kuò)展而成，主要考慮頁面整體風(fēng)格的美感和用戶體驗(yàn)。

二、構(gòu)建色彩體系

在確定基礎(chǔ)顏色后，需要通過灰度或者透明度，衍生形成色彩體系，滿足各種場景的顏色需求。這就需要了解一些色彩的基本理論。

1. HSB 色彩空間

我們最開始學(xué)習(xí)色彩的時候，必然會提到三原色的概念。

光學(xué)三原色（RGB）：紅、綠、藍(lán)。三原色混合后，組成顯示屏顯示顏色，三原色同時相加為白色。RGB 是從顏色發(fā)光的原理來設(shè)定的，當(dāng)它們的光相互疊合的時候，色彩相混，而亮度卻等于兩者亮度之總和，越混合亮度越高，即加法混合。

當(dāng)三色灰度數(shù)值相同時，產(chǎn)生不同灰度值的灰色調(diào)，即三色灰度都為 0 時，是最暗的黑色調(diào)；三色灰度都為 255 時，是最亮的白色調(diào)。

在設(shè)計(jì)調(diào)色時，RGB 模式并不好用，我們優(yōu)先選擇更容易理解的 HSB 模式，也就是色相（Hue）、飽和度（Saturation）、明度（Brightness），通過這三個維度更便于色彩調(diào)整。

色相（Hue）

色調(diào)就是顏色在色輪的位置，標(biāo)準(zhǔn)色輪是 0-360°的圓環(huán)。在日常使用時，色相用顏色名稱標(biāo)識，比如紅、綠或橙色等等，黑色和白色無色相。

飽和度（Saturation）

飽和度可以理解為顏色的強(qiáng)度或純度，表示色相中灰色成分所占的比例。通常以"%" 來表示，范圍是 0%~100%。飽和度越高，顏色更加鮮艷；飽和度越低，顏色就會越灰暗。

明度（Brightness）

明度是顏色的明暗程度，通常也是以 0%（黑色）~100%（白色）來度量。將這 3 個維度集合起來，可以搭建出 HSB 色彩空間。調(diào)整 3 個參數(shù)，就可以選擇我們想要的顏色。

不過在 Figma、Sketch、Photoshop 這些繪圖軟件中，色彩面板都是以平面的方式出現(xiàn)的，并且增加了透明度參數(shù)，形成更容易調(diào)節(jié)的 HSVA 色彩空間。

2. 搭建色板

確定好基礎(chǔ)色后，可以通過 HSVA 模型生成一系列的色板。包括 2 種方法：

透明度調(diào)整法

可以設(shè)定一系列的透明度系數(shù)得到淺色梯度，或者疊加黑色透明度得到深色梯度，借助吸色工具就可以得到對應(yīng)的色值，最后根據(jù)視覺效果微調(diào)即可。

飽和度/明度參數(shù)調(diào)整

在保證色相數(shù)值不動的情況下，直接調(diào)整顏色的飽和度和明度。淺色系一般是要降低飽和度，提高明度。而深色系則需要降低明度，根據(jù)視覺效果調(diào)整飽和度。

除了設(shè)計(jì)師自定義之外，有些設(shè)計(jì)系統(tǒng)還提供了算法工具，自動生成色彩梯度。

例如 Ant Design、Acrodesign 都提供了色板生成工具。并且 Ant Design 還提供了主色參數(shù)建議：飽和度和明度不低于 70。

Ant Design 色板工具地址： https://ant.design/docs/spec/colors

Acrodesign 色板工具地址： https://arco.design/palette/list

三、色彩應(yīng)用

一旦建立了色彩體系，正常情況下，選擇規(guī)范顏色就可以了。不過由于設(shè)計(jì)規(guī)范中，我們定義的色值默認(rèn)是應(yīng)用在白色背景中的。

實(shí)際使用時，字體或者圖標(biāo)應(yīng)用的背景色會比較復(fù)雜，例如背景色可能是不同色階的主色、功能色，或者帶有遮罩層的場景中。不同的背景色會對視覺顯示產(chǎn)生影響。但是我們又無法窮盡定義所有可能性，這樣既增加了設(shè)計(jì)師的工作量，也會增加開發(fā)的工作量。

為了滿足這些場景的色彩需求，除了固定色值的方式，還可以增加透明度梯度。讓內(nèi)容可以與背景色融合，帶給用戶更好的閱讀和視覺體驗(yàn)。

來自 Ant Design

寫在最后

歸根到底，色彩規(guī)范只是為了讓設(shè)計(jì)更有章法和依據(jù)。B 端產(chǎn)品界面設(shè)計(jì)，還是需要謹(jǐn)慎克制，要在規(guī)范內(nèi)合理使用色彩，善于利用色彩清晰區(qū)分和傳達(dá)信息，引導(dǎo)操作，不要讓色彩成為了界面的干擾因素。

參考文獻(xiàn)：

1. https://ant.design/index-cn
2. https://tdesign.tencent.com/
3. https://arco.design/
4. http://www.woshipm.com/pd/4928465.Html

作者：子牧UXD