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