AntV 色板是基于 Ant Design 色彩體系，并結(jié)合數(shù)據(jù)可視化特性而設(shè)計(jì)。在可視化設(shè)計(jì)中，色板的運(yùn)用原則上優(yōu)先保障準(zhǔn)確性，考慮在操作指引、交互反饋上起到強(qiáng)化或凸顯的作用。其次需兼顧色障礙群體，幫助有色盲色弱的人群也能在數(shù)據(jù)可視化中獲取洞見。本文為你揭秘可視化色板的搭配種類、以及如何使用。

顏色映射原理

在數(shù)據(jù)可視化領(lǐng)域中，數(shù)據(jù)與顏色的映射是非常重要的一個(gè)環(huán)節(jié)。顏色有三個(gè)視覺通道，分別是色調(diào)（H）、飽和度（S）、明度（B），不同的視覺通道可以與不同的數(shù)據(jù)類型建議關(guān)聯(lián)。

色調(diào)（H）：通常使用顏色中的不同色調(diào)來描述不同的分類數(shù)據(jù)，如水果品類中蘋果映射為紅色、香蕉映射為黃色、梨映射為綠色，將品類與色調(diào)（H）建立了關(guān)聯(lián)。

飽和度（S）/明度（B）：顏色通過明暗和飽和度的共同變化來描述有序或數(shù)值型的連續(xù)數(shù)據(jù)，比如身高由低到高或由 160cm 到 180 cm 的顏色映射為由淺到深，將連續(xù)變化與顏色的明暗飽和變化建立關(guān)聯(lián)。

6 大色板類型

AntV 色板以螞蟻極客藍(lán)為起始主色，根據(jù)不同數(shù)據(jù)類型、使用場景擴(kuò)展出 6 種可視化色板類型，可完美兼容 Ant Design UI 資產(chǎn)。以下所有色板均通過無障礙測試校驗(yàn)，可放心使用。

分類色板

分類色板用于描述分類數(shù)據(jù)，如蘋果、香蕉、梨，常用一個(gè)顏色代表一個(gè)值以區(qū)分不同類型，取色時(shí)色相分布均衡，相鄰顏色之間明暗需考慮差異性，常用于餅圖的不同分類、填充地圖中的不同國家、關(guān)系圖中的不同角色等。

用法示例

如圖水果價(jià)格走勢對(duì)比，使用紅色代表蘋果價(jià)格、藍(lán)色代表藍(lán)莓價(jià)格、黃色代表香蕉價(jià)格。

順序色板

順序色板，一般使用同一或鄰近色相，通過明度和飽和度的漸變，常用來表示同一事物中的數(shù)值大小或梯度變化，如排行榜等級(jí)變化、一個(gè)國家或地區(qū)新增人口數(shù)對(duì)比、風(fēng)險(xiǎn)等級(jí)變化等。

單色順序色板

單一色相漸變稱之為單色順序色板，人眼可識(shí)別的色彩數(shù)量 5～7 個(gè)，為保證信息的最佳識(shí)別度，盡可能的克制使用顏色數(shù)量。

鄰近色順序色板

為拉開顏色差異，可用兩個(gè)或以上個(gè)色相，通過明度或飽和度漸變，顏色連續(xù)而豐富，可產(chǎn)生更多色彩分級(jí)，表達(dá)更多的連續(xù)數(shù)值，常用于熱力圖中的熱度變化，通過鄰近色相的差異將聚集部分突顯出來

用法示例

2017 年西安居民人均消費(fèi)支出，通過連續(xù)的顏色變化，可以快速感知出居住方面消費(fèi)占比最大，其次食品煙酒，第三是交替通信

發(fā)散色板

對(duì)比色漸變色板，一般是兩種互補(bǔ)色（也可以是對(duì)比色）去展現(xiàn)數(shù)據(jù)從一個(gè)負(fù)向值到 0 點(diǎn)再到正向值的連續(xù)變化區(qū)間，顯示相對(duì)立的兩個(gè)值的大小關(guān)系，常用于氣溫的冷熱、海拔高低、股票漲跌等

用法示例

全國等溫線圖，使用發(fā)散色板表示正負(fù)值的氣溫變化，暖色系的橙紅色容易讓人聯(lián)系到太陽或熾熱的感受，用于高溫變化，顏色越紅溫度越高，反之，冷色系的藍(lán)容易讓人聯(lián)想到冰和寒冷的感受，用于低溫變化，顏色越深溫度越低

疊加色板

疊加色板，為了色盡其用的原則，將兩組順序色板通過圖層疊加模式產(chǎn)生一組新的色板，一個(gè)顏色代表兩種變量數(shù)據(jù)，常用于觀察一個(gè)事物兩個(gè)維度變化的相關(guān)性，如胖瘦和高矮兩個(gè)維度的人數(shù)分布中，瘦且高的人群分布

用法示例

雙變量映射地圖，相對(duì)于單變量映射的地圖，該地圖形式更加新穎，十分適合用來展示兩個(gè)緊密聯(lián)系的變量信息。如下圖所示，圖中展現(xiàn)了美國國民人口居住密度和家庭生產(chǎn)總值的分布關(guān)系，縱向由淺到深的紫色映射了人口密度，橫向由淺到深的藍(lán)色映射了家庭收入水平，相交的顏色可以總體反映出人口和家庭的分布情況?？梢詮牡貓D中清晰地看到，人口多且收入高的大多分布在沿海地區(qū)，人口數(shù)少且收入低的則主要分布在中部地區(qū)。

強(qiáng)調(diào)色板

對(duì)比突出重點(diǎn)或特定數(shù)據(jù)，將重點(diǎn)關(guān)注的數(shù)據(jù)標(biāo)以高飽和度的強(qiáng)調(diào)色，其他普通數(shù)據(jù)標(biāo)以低飽和、低明度的基本色，常用于對(duì)比重點(diǎn)關(guān)注事物與其他分類事物的差別，如將自家產(chǎn)品與競品的對(duì)比使用

用法示例

如圖某工廠歷年能源消耗占比趨勢對(duì)比，分別用五種不同的顏色代表五種能源，其中「天然氣」為重點(diǎn)關(guān)注的能源類型，使用飽和度高的藍(lán)代表「天然氣」，其他能源類型著以低飽和度的分類顏色，以便關(guān)注的「天然氣」能夠快速被觀察到，同時(shí)其他類型可作為對(duì)比參考而不會(huì)因顏色過多而產(chǎn)生干擾。

語義色板

色彩在地圖可視化中的使用，不僅是數(shù)據(jù)信息傳遞的可視化通道，同時(shí)也是更深一層的文化故事的載體，用于表達(dá)意義或情感。重視用色習(xí)慣，遵循相關(guān)標(biāo)準(zhǔn)，色彩也不是都能寓意的，相當(dāng)一部分圖表色彩選擇和感情因素?zé)o關(guān)，而是按照某種習(xí)慣來設(shè)定色彩，即所謂約定俗成，有的甚至形成來規(guī)范。如氣象預(yù)警配色，紅綠燈配色，股市的紅漲綠跌等。

用法示例

某水產(chǎn)公司 2019 年的月盈利變化，使用紅色表示盈利，綠色表示虧損。

8 條使用建議

我們發(fā)現(xiàn)，在提供官方色板的前提下，仍有用戶并不是十分擅長在實(shí)際場景中應(yīng)用色板，以下幾條設(shè)計(jì)指引供使用時(shí)參考。

避免使用過多顏色

在實(shí)際應(yīng)用中，經(jīng)常會(huì)出現(xiàn)大量顏色使用的誤區(qū)，建議高亮重要的數(shù)據(jù)（不超過 7 個(gè)），其他數(shù)據(jù)默認(rèn)置灰，通過圖例交互進(jìn)行查看。

保持唯一映射通道

同樣的數(shù)據(jù)，映射通道應(yīng)當(dāng)保持唯一性。例如當(dāng)使用柱子高度來映射數(shù)據(jù)大小時(shí)，就不需要再使用顏色通道去映射數(shù)據(jù)。

解釋你的顏色

當(dāng)圖表中出現(xiàn)不同顏色時(shí)，需要向讀者解釋顏色所代表的含義。

上下文保持顏色一致性

結(jié)合當(dāng)前頁面環(huán)境，建立視覺連續(xù)性，對(duì)于統(tǒng)一度量，使用同樣的顏色方案，而且在整個(gè)頁面（通常是儀表盤）使用時(shí)，注意保持整體顏色方案的一致性。

不同數(shù)據(jù)對(duì)應(yīng)不同色板

不同的數(shù)據(jù)類型建議使用對(duì)應(yīng)的色板，比如分類數(shù)據(jù)就不建議使用連續(xù)色板。

不用彩虹色環(huán)表達(dá)連續(xù)數(shù)據(jù)

不以色環(huán)順序來表達(dá)連續(xù)的有序型或數(shù)值型數(shù)據(jù)，因?yàn)樯h(huán)順序并非人眼自然記憶，且彩虹色變化并非均衡變化，如下圖中灰階的轉(zhuǎn)化，很容易看出彩虹色并不是一個(gè)連續(xù)逐漸加深的色板，因此彩虹色環(huán)并不適合展示連續(xù)數(shù)據(jù)，容易引起誤解。

順序色板選擇需均衡

下圖右側(cè)“不建議”圖中，第 2 、第 3 個(gè)顏色很相近，難以區(qū)分，第 3 、第 4 個(gè)顏色跳躍很大，對(duì)于均衡的連續(xù)數(shù)據(jù)表達(dá)中，容易引起數(shù)據(jù)感知的誤差，均衡選色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不變，調(diào)節(jié) L 值進(jìn)行等距取色。

為視障群體設(shè)計(jì)

AntV 色板在做無障礙驗(yàn)證時(shí)，得出以下幾點(diǎn)取色建議 ：

• 分類色板選取需明暗交替

雖然正常人眼中右側(cè)分類色板通過色相可以區(qū)分差異，但在視障人士、甚至全色盲，則主要靠顏色的明暗差異來識(shí)別不同的數(shù)據(jù)類型，因此分類色板需要注意適度的明暗交替

• 離散色板盡量選取藍(lán)黃對(duì)比

一般場景中，我們常也會(huì)使用黃綠配色，黃綠對(duì)比中，黃是暖色系，綠是冷色系，同樣能給到對(duì)比感受，且打破常規(guī)的藍(lán)紅對(duì)比色，給到新穎的色彩感受，但如果你的用戶中視障人士占比較多，則盡量避免綠黃配色，如圖為兩種色板在正常人眼和紅綠色盲眼中的對(duì)比效果，黃綠配色在紅綠色盲眼中就失去了色彩對(duì)比，難以區(qū)分。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來源：站酷   作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)