一、色彩分類
不同于C端產(chǎn)品的運營、營銷場景，要求設(shè)計的多樣性，緊跟設(shè)計流行趨勢。B端需要相對穩(wěn)定的色彩體系，這樣才能保證產(chǎn)品設(shè)計的高效可控。
色彩和布局、字體都是底層的全局樣式，因此需要適配各種應(yīng)用場景和組件設(shè)計。縱觀各個大廠的設(shè)計系統(tǒng)，通常會將色彩劃分為4種類型。
1、主色
主色是產(chǎn)品最核心的顏色，使用頻率最高，可以說是構(gòu)成產(chǎn)品風(fēng)格的關(guān)鍵要素。常用于突出信息、引導(dǎo)操作、功能狀態(tài)表達等。
中后臺管理系統(tǒng)的主色通常首選品牌色，可以更好地傳遞品牌價值，構(gòu)建統(tǒng)一的界面風(fēng)格。例如TDesign 以騰訊藍（Tencent Blue）作為主色；公眾號管理后臺采用的是“微信綠”，飛書后臺管理系統(tǒng)采用“藍綠”品牌色。
圖片來自TDesign
當(dāng)然并不是所有的品牌色都可以用作主色。在后臺管理系統(tǒng)中，工具類產(chǎn)品的屬性比較強，更強調(diào)產(chǎn)品的科技感、穩(wěn)定性，需要幫助用戶沉浸式地完成工作任務(wù)，因此以藍色為代表的冷色系應(yīng)用更多。
而過多的暖色調(diào)則會讓人興奮，應(yīng)用相對較少。例如阿里云在框架層面、概覽信息中采用了品牌橙色作為主色，功能頁面還是以藍色為主。華為云只是將品牌紅色用在了主按鈕上，其他內(nèi)容配色仍然選用藍色。
2、功能色
B端產(chǎn)品還需要借助色彩，向用戶反饋操作結(jié)果、系統(tǒng)狀態(tài)等信息。最典型的就是成功、失敗、提示/警告、錯誤、鏈接等，這些都屬于功能色。
功能色系需要符合用戶的認知習(xí)慣，例如一般都是以綠色代表正常或者成功、橙色為警告、紅色為錯誤、藍色作為鏈接。用戶不需要閱讀文字信息，就能直觀地了解信息背后的狀態(tài)。
圖片來自TDesign
3、中性色
中性色主要是黑白灰三種顏色，由于沒有冷暖，也沒有色相，又稱為無彩色系。常用于文字、背景、圖標、邊框和分割線等元素。
中性色非常重要，在頁面中應(yīng)用最多。由于是無彩色系，只要控制得當(dāng)，可以大面積使用，不會增加界面的信息負擔(dān)，反而有利于形成內(nèi)容層次和區(qū)域劃分，讓界面更加有序，內(nèi)容結(jié)構(gòu)更加清晰，還不會影響界面風(fēng)格。
圖片來自TDesign
當(dāng)然中性色使用時，需要有比較明確的色彩對比關(guān)系，否則可能模糊一團，影響信息的可讀性。
另外在某些場景下，中性色還可以加入一定的品牌色，讓中性色帶有品牌傾向。在TDesign中，將品牌色的混合比例定為 20%。
品牌中性色的計算公式如下：
Average(r,g,b) = 0.2*(r1,b1,g1) + 0.8*(r2,b2,g2)
4、擴展色
在B端產(chǎn)品中，還會有更多顏色需求的場景，例如數(shù)據(jù)可視化、插畫等場景中。為了保證界面的協(xié)調(diào)，擴展色可以由主色或者功能色擴展而成，主要考慮頁面整體風(fēng)格的美感和用戶體驗。
二、構(gòu)建色彩體系
在確定基礎(chǔ)顏色后，需要通過灰度或者透明度，衍生形成色彩體系，滿足各種場景的顏色需求。這就需要了解一些色彩的基本理論。
1、HSB色彩空間
我們最開始學(xué)習(xí)色彩的時候，必然會提到三原色的概念。
光學(xué)三原色（RGB）：紅、綠、藍。三原色混合后，組成顯示屏顯示顏色，三原色同時相加為白色。RGB是從顏色發(fā)光的原理來設(shè)定的，當(dāng)它們的光相互疊合的時候，色彩相混，而亮度卻等于兩者亮度之總和，越混合亮度越高，即加法混合。
當(dāng)三色灰度數(shù)值相同時，產(chǎn)生不同灰度值的灰色調(diào)，即三色灰度都為0時，是最暗的黑色調(diào)；三色灰度都為255時，是最亮的白色調(diào)。
在設(shè)計調(diào)色時，RGB模式并不好用，我們優(yōu)先選擇更容易理解的HSB模式，也就是色相（Hue）、飽和度（Saturation）、明度（Brightness），通過這三個維度更便于色彩調(diào)整。
1）色相（Hue）
色調(diào)就是顏色在色輪的位置，標準色輪是0-360°的圓環(huán)。在日常使用時，色相用顏色名稱標識，比如紅、綠或橙色等等，黑色和白色無色相。
2）飽和度（Saturation）
飽和度可以理解為顏色的強度或純度，表示色相中灰色成分所占的比例。通常以“%” 來表示，范圍是0%~100%。飽和度越高，顏色更加鮮艷；飽和度越低，顏色就會灰暗。
3）明度（Brightness）
明度是顏色的明暗程度，通常也是以0%（黑色）~100%（白色）來度量。
將這3個維度集合起來，可以搭建出HSB色彩空間。調(diào)整3個參數(shù)，就可以選擇我們想要的顏色。
不過在Figma、Sketch、Photoshop這些繪圖軟件中，色彩面板都是以平面的方式出現(xiàn)的，并且增加了透明度參數(shù)，形成更容易調(diào)節(jié)的HSVA色彩空間。
2、搭建色板
確定好基礎(chǔ)色后，可以通過HSVA模型生成一系列的色板。包括2種方法：
1）透明度調(diào)整法
可以設(shè)定一系列的透明度系數(shù)得到淺色梯度，或者疊加黑色透明度得到深色梯度，借助吸色工具就可以得到對應(yīng)的色值，最后根據(jù)視覺效果微調(diào)即可。
2）飽和度/明度參數(shù)調(diào)整
在保證色相數(shù)值不動的情況下，直接調(diào)整顏色的飽和度和明度。淺色系一般是要降低飽和度，提高明度。而深色系則需要降低明度，根據(jù)視覺效果調(diào)整飽和度。
除了設(shè)計師自定義之外，有些設(shè)計系統(tǒng)還提供了算法工具，自動生成色彩梯度。
例如Ant Design、Acrodesign都提供了色板生成工具。并且Ant Design 還提供了主色參數(shù)建議：飽和度和明度不低于70。
Ant Design色板工具地址：
https://ant.design/docs/spec/colors-cn
Acrodesign色板工具地址：
https://arco.design/palette/list
三、色彩應(yīng)用
一旦建立了色彩體系，正常情況下，選擇規(guī)范顏色就可以了。不過由于設(shè)計規(guī)范中，我們定義的色值默認是應(yīng)用在白色背景中的。
實際使用時，字體或者圖標應(yīng)用的背景色會比較復(fù)雜，例如背景色可能是不同色階的主色、功能色，或者帶有遮罩層的場景中。不同的背景色會對視覺顯示產(chǎn)生影響。但是我們又無法窮盡定義所有可能性，這樣既增加了設(shè)計師的工作量，也會增加開發(fā)的工作量。
為了滿足這些場景的色彩需求，除了固定色值的方式，還可以增加透明度梯度。讓內(nèi)容可以與背景色融合，帶給用戶更好的閱讀和視覺體驗。
圖片來自Ant Design
寫在最后
歸根到底，色彩規(guī)范只是為了讓設(shè)計更有章法和依據(jù)。B端產(chǎn)品界面設(shè)計，還是需要謹慎克制，要在規(guī)范內(nèi)合理使用色彩，善于利用色彩清晰區(qū)分和傳達信息，引導(dǎo)操作，不要讓色彩成為了界面的干擾因素。
參考文獻：
https://ant.design/index-cn
https://tdesign.tencent.com/
https://arco.design/
http://www.woshipm.com/pd/4928465.html
原文地址：子畝UXD（公眾號）
作者：子牧先生
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》設(shè)計基礎(chǔ)(4)：B端中后臺管理系統(tǒng)色彩體系
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司