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