如何設(shè)計(jì)B端色彩體系?3個步驟幫你掌握起來!
編者按: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):
- https://ant.design/index-cn
- https://tdesign.tencent.com/
- https://arco.design/
- http://www.woshipm.com/pd/4928465.Html
作者:子牧UXD
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請?jiān)L問:網(wǎng)站技術(shù)