Ant Design React 色彩

設(shè)計(jì)師專(zhuān)屬

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

色彩模型

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

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

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

基礎(chǔ)色板

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

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

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

中性色板

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

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

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

色板生成工具

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

在代碼中使用色板

我們?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)品級(jí)色彩體系

品牌色的應(yīng)用

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

功能色

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

中性色

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

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

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