Ant Design React 色彩

設(shè)計師專屬

安裝 Kitchen Sketch 插件 ，不但可以使用 Ant Design 官方色板庫，還可以管理自己的專屬色板。

色彩模型

Ant Design 的設(shè)計團(tuán)隊傾向于采用 HSB 色彩模型進(jìn)行設(shè)計，該模型更便于設(shè)計師在調(diào)整色彩時對于顏色有明確的心理預(yù)期，同時也方便團(tuán)隊間的溝通。

系統(tǒng)級色彩體系

Ant Design 系統(tǒng)級色彩體系同樣源于「自然」的設(shè)計價值觀。設(shè)計師通過對自然場景的抽象捕捉，結(jié)合螞蟻的技術(shù)基因，形成了特有的 12 色。進(jìn)一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規(guī)律，借助美術(shù)中素描的思路，對 12 個顏色進(jìn)行了衍生。在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出的。

基礎(chǔ)色板

Ant Design 的基礎(chǔ)色板共計 120 個顏色，包含 12 個主色以及衍生色。這些顏色基本可以滿足中后臺設(shè)計中對于顏色的需求。

Ant Design 的色板還具備進(jìn)一步拓展的能力。經(jīng)過設(shè)計師和程序員的精心調(diào)制，結(jié)合了色彩自然變化的規(guī)律，我們得出了一套色彩生成工具，當(dāng)有進(jìn)一步色彩設(shè)計需求時，設(shè)計者只需按照一定規(guī)則定義完畢主色，便可以自動獲得一系列完整的衍生色。

Ant Design 三代色板的歷史可以參看社區(qū)文章：Ant Design 色板生成算法演進(jìn)之路。

中性色板

中性色包含了黑、白、灰。在螞蟻中后臺的網(wǎng)頁設(shè)計中被大量使用到，合理地選擇中性色能夠令頁面信息具備良好的主次關(guān)系，助力閱讀體驗。Ant Design 的中性色板一共包含了從白到黑的 13 個顏色。

數(shù)據(jù)可視化色板

數(shù)據(jù)可視化色板是在基礎(chǔ)色板以及中性色板的基礎(chǔ)上，融合 AntV 「有效、清晰、準(zhǔn)確、美」的原則產(chǎn)生的。查看色板

色板生成工具

如果上面的色板不能滿足你的需求，你可以選擇一個主色，Ant Design 的色彩生成算法會為你生成完整的色板。

在代碼中使用色板

我們?yōu)槌绦騿T提供了色板的 JavaScript 的使用方式。

npm install @ant-design/colors

import { blue } from '@ant-design/colors';

console.log(blue); // ['#E6F4FF', '#BAE0FF', '#91CAFF', '#69B1FF', '#4096FF', '#1677FF', '#0958D9', '#003EB3', '#002C8C', '#001D66']
console.log(blue.primary); // '#1677FF'

更多使用方式：@ant-design/colors

產(chǎn)品級色彩體系

品牌色的應(yīng)用

品牌色是體現(xiàn)產(chǎn)品特性和傳播理念最直觀的視覺元素之一。在色彩選取時，需要先明確品牌色在界面中的使用場景及范圍。在基礎(chǔ)色板中選擇主色，我們建議選擇色板從淺至深的第六個顏色作為主色。 Ant Design 的品牌色取自基礎(chǔ)色板的藍(lán)色，Hex 值為 #1677ff，應(yīng)用場景包括：關(guān)鍵行動點，操作狀態(tài)、重要信息高亮，圖形化等場景。

功能色

功能色代表了明確的信息以及狀態(tài)，比如成功、出錯、失敗、提醒、鏈接等。功能色的選取需要遵守用戶對色彩的基本認(rèn)知。我們建議在一套產(chǎn)品體系下，功能色盡量保持一致，不要有過多的自定義干擾用戶的認(rèn)知體驗。Ant Design 的功能色板如右圖：

中性色

Ant Design 的中性色主要被大量的應(yīng)用在界面的文字部分，此外背景、邊框、分割線等場景中也非常常見。產(chǎn)品中性色的定義需要考慮深色背景以及淺色背景的差異，同時結(jié)合 WCAG 2.0 標(biāo)準(zhǔn)。Ant Design 的中性色在落地的時候是按照透明度的方式實現(xiàn)的，具體色板如右圖：

企業(yè)級產(chǎn)品設(shè)計中的色彩應(yīng)用

在螞蟻中后臺的設(shè)計中，我們對于色彩的態(tài)度是克制的。色彩在使用時更多的是基于信息傳遞、操作引導(dǎo)和交互反饋等目的。在不破壞操作效率，影響信息的清晰傳達(dá)的這些原則之上，理性的選擇顏色是關(guān)鍵。當(dāng)然在配圖插畫以及展示性頁面中可以適當(dāng)打破這一思路。