2023-12-6 高勁
大概每一位 B 端設(shè)計(jì)師在做組件設(shè)計(jì)時(shí)，都會對色板印象深刻，同時(shí)也會有不少的疑問：
經(jīng)常看我文章的朋友對于“基礎(chǔ)組件”和“業(yè)務(wù)組件”的區(qū)別應(yīng)該耳熟能詳了。
對于相對底層的、開源的、通用的基礎(chǔ)組件庫來說，批量生產(chǎn)多種顏色的色板成本相對較低、準(zhǔn)確性也更高，且可以滿足中后臺設(shè)計(jì)中的開發(fā)者和設(shè)計(jì)者對于顏色的大部分使用需求。例如基礎(chǔ)組件庫 Ant Design、Arco Design 都提供了相對全面和豐富的平臺系統(tǒng)級別的色彩體系，包括 10+ 顏色的基礎(chǔ)色板、中性色板和功能色板：
Ant Design 的基礎(chǔ)色板（部分）、中性色板和功能色板
而對于更具備專業(yè)性和業(yè)務(wù)屬性的、高級的業(yè)務(wù)組件來說，色板的搭建則是圍繞著產(chǎn)品和業(yè)務(wù)的品牌色來完成。設(shè)計(jì)師不需要在一開始搭建業(yè)務(wù)組件庫時(shí)就產(chǎn)出十幾種不同顏色的色板，可以先做出業(yè)務(wù)必用的品牌色板、中性色板和功能色板，之后在設(shè)計(jì)需求中，再基于品牌色進(jìn)一步定義符合產(chǎn)品調(diào)性以及功能訴求的輔助色板：
某產(chǎn)品的品牌色色板、中性色板和功能色板
色板和其梯度色階的作用如下：
1. 操作狀態(tài)，有效反饋。
色階中的顏色可以用在頁面模塊的層級、組件操作的狀態(tài)上，顏色上的微妙變化可以為用戶提供有效的交互反饋：
按鈕不同狀態(tài)的顏色，可以從色階中選擇
2. 全局托底，以防萬一
即使是視覺表現(xiàn)力相對較弱的 B 端產(chǎn)品，也會有多種顏色使用的需求，比如 Tag 標(biāo)簽、插畫、營銷海報(bào)等等。為了使產(chǎn)品的視覺元素更具備一致性，設(shè)計(jì)師可以借鑒通用組件庫的基礎(chǔ)色板，并結(jié)合自己產(chǎn)品的品牌色板制定產(chǎn)品的輔助色，最大限度的保證配色的合理性和用色的一致性：
Ant Design 預(yù)設(shè)的 Tag 類型和顏色，也支持按需定制
3. 縱向推衍，確保精確
色階的每一階顏色都是由相鄰階層的顏色通過色值的計(jì)算推演得到的。一個色板中的色階數(shù)量越多，漸變關(guān)系就會越精確和微妙，顏色的精確度也會越高。為了方便使用，通常一個色板做 1015 級的色階即可：
Arco Design 的基礎(chǔ)色板，從顏色的 HSB 值中可以看出色階中的顏色存在一些數(shù)值規(guī)律。
4. 橫向比較，層級一致
假設(shè)我們將每一個色板都做了 10 級色階，這樣就可以保證不同的顏色在同一層色階層級上的明度、純度和飽和度相對一致。比如下圖中：第 6 級的紅色（Red 60）和第 6 級藍(lán)色（Blue 60）就都是這兩個色板中的主色，都可以用于按鈕的默認(rèn)狀態(tài)；而第 3 級的紅色（Red 30）和第 3 級的藍(lán)色（Blue 30）就都可以用于按鈕的禁用狀態(tài)：
產(chǎn)品中顏色是會傳遞信息語義和內(nèi)容層級的，這樣使用色階來規(guī)范顏色的選擇，可以保證同一個或同一類信息層級上的色彩搭配是相對協(xié)調(diào)和合理的。
很多同學(xué)都想了解組件系統(tǒng)中的色板的計(jì)算和推演方式，其實(shí)色板是由設(shè)計(jì)師和前端統(tǒng)一協(xié)作完成的，設(shè)計(jì)師提供色彩學(xué)的理論基礎(chǔ)，前端開發(fā)完成算法推演。色板的演算方式并不簡單，給大家推薦幾個色板使用或生成工具 ，可以省去推演過程和時(shí)間：
1. Ant Design：Sketch 插件 Kitchen
網(wǎng)站鏈接：https://kitchen.alipay.com/
優(yōu)勢：在最新版的 Kitchen 色板中可以直接選擇和填充顏色，支持一鍵將 AntD 的基礎(chǔ)色板導(dǎo)入至本地文件色板或者創(chuàng)建本地樣式：
不足：
2. Material Design：Figma 插件 Material Theme Builder
網(wǎng)站鏈接：https://goo.gle/m3designkit
優(yōu)勢：可以選擇你想要的任何一種顏色，插件會幫你計(jì)算并生成整套衍生色板，同時(shí)還會檢驗(yàn)出不符合 WCAG 規(guī)則的主題色，并直接利用系統(tǒng)算法幫你做優(yōu)化：
不足：
3. Acro Design：色彩配置工具網(wǎng)站
Arco Color Palette
網(wǎng)站鏈接：https://arco.design/palette/list
優(yōu)勢：提供了 13 個基礎(chǔ)主色色板，設(shè)計(jì)師可以自行調(diào)整這些主色，定制新的色板及色階；同時(shí)提供 WCAG 色彩標(biāo)準(zhǔn)檢測工具，可以對色彩的應(yīng)用和搭配做全方位的檢測：
不足：暫時(shí)沒有提供插件，只支持導(dǎo)出 json 和 less 格式。
文章來源：優(yōu)設(shè)網(wǎng) 作者：Ant Design 元堯
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)(m.izc.net.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://m.izc.net.cn