揭密可視化專家配色秘笈，你在乎的顏色遠遠不夠 - 品牌行銷策略

分類色板用于描述分類數據，如蘋果、香蕉、梨，常用一個顏色代表一個值以區分不同類型，取色時色相分布均衡，相鄰顏色之間明暗需考慮差異性，常用于餅圖的 ... 当前位置：品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚>產品設計>正文 編輯導讀：AntV色板是基于AntDesign色彩體系，并結合數據可視化特性而設計。

在可視化設計中，色板的運用原則上優先保障準確性，考慮在操作指引、交互反饋上起到強化或凸顯的作用。

其次需兼顧色障礙群體，幫助有色盲色弱的人群也能在數據可視化中獲取洞見。

本文為你揭秘可視化色板的搭配種類、以及如何使用。

一、顏色映射原理 在數據可視化領域中，數據與顏色的映射是非常重要的一個環節。

顏色有三個視覺通道，分別是色調（H）、飽和度（S）、明度（B），不同的視覺通道可以與不同的數據類型建議關聯。

色調（H）：通常使用顏色中的不同色調來描述不同的分類數據，如水果品類中蘋果映射為紅色、香蕉映射為黃色、梨映射為綠色，將品類與色調（H）建立了關聯。

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

二、6大色板類型 AntV色板以螞蟻極客藍為起始主色，根據不同數據類型、使用場景擴展出6種可視化色板類型，可完美兼容AntDesignUI資產。

以下所有色板均通過無障礙測試校驗，可放心使用。

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

用法示例 如圖水果價格走勢對比，使用紅色代表蘋果價格、藍色代表藍莓價格、黃色代表香蕉價格。

2.順序色板 順序色板，一般使用同一或鄰近色相，通過明度和飽和度的漸變，常用來表示同一事物中的數值大小或梯度變化，如排行榜等級變化、一個國家或地區新增人口數對比、風險等級變化等。

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

鄰近色順序色板 為拉開顏色差異，可用兩個或以上個色相，通過明度或飽和度漸變，顏色連續而豐富，可產生更多色彩分級，表達更多的連續數值，常用于熱力圖中的熱度變化，通過鄰近色相的差異將聚集部分突顯出來 用法示例 2017年西安居民人均消費支出，通過連續的顏色變化，可以快速感知出居住方面消費占比最大，其次食品煙酒，第三是交替通信 3.發散色板 對比色漸變色板，一般是兩種互補色（也可以是對比色）去展現數據從一個負向值到0點再到正向值的連續變化區間，顯示相對立的兩個值的大小關系，常用于氣溫的冷熱、海拔高低、股票漲跌等 用法示例 全國等溫線圖，使用發散色板表示正負值的氣溫變化，暖色系的橙紅色容易讓人聯系到太陽或熾熱的感受，用于高溫變化，顏色越紅溫度越高，反之，冷色系的藍容易讓人聯想到冰和寒冷的感受，用于低溫變化，顏色越深溫度越低 4.疊加色板 疊加色板，為了色盡其用的原則，將兩組順序色板通過圖層疊加模式產生一組新的色板，一個顏色代表兩種變量數據，常用于觀察一個事物兩個維度變化的相關性，如胖瘦和高矮兩個維度的人數分布中，瘦且高的人群分布 用法示例 雙變量映射地圖，相對于單變量映射的地圖，該地圖形式更加新穎，十分適合用來展示兩個緊密聯系的變量信息。

如下圖所示，圖中展現了美國國民人口居住密度和家庭生產總值的分布關系，縱向由淺到深的紫色映射了人口密度，橫向由淺到深的藍色映射了家庭收入水平，相交的顏色可以總體反映出人口和家庭的分布情況。

可以從地圖中清晰地看到，人口多且收入高的大多分布在沿海地區，人口數少且收入低的則主要分布在中部地區。

5.強調色板 對比突出重點或特定數據，將重點關注的數據標以高飽和度的強調色，其他普通數據標以低飽和、低明度的基本色，常用于對比重點關注事物與其他分類事物的差別，如將自家產品與競品的對比使用 用法示例 如圖某工廠歷年能源消耗占比趨勢對比，分別用五種不同的顏色代表五種能源，其中「天然氣」為重點關注的能源類型，使用飽和度高的藍代表「天然氣」，其他能源類型著以低飽和度的分類顏色，以便關注的「天然氣」能夠快速被觀察到，同時其他類型可作為對比參考而不會因顏色過多而產生干擾。

6.語義色板 色彩在地圖可視化中的使用，不僅是數據信息傳遞的可視化通道，同時也是更深一層的文化故事的載體，用于表達意義或情感。

重視用色習慣，遵循相關標準，色彩也不是都能寓意的，相當一部分圖表色彩選擇和感情因素無關，而是按照某種習慣來設定色彩，即所謂約定俗成，有的甚至形成來規范。

如氣象預警配色，紅綠燈配色，股市的紅漲綠跌等。

用法示例 某水產公司2019年的月盈利變化，使用紅色表示盈利，綠色表示虧損。

三、8條使用建議 我們發現，在提供官方色板的前提下，仍有用戶并不是十分擅長在實際場景中應用色板，以下幾條設計指引供使用時參考。

1.避免使用過多顏色 在實際應用中，經常會出現大量顏色使用的誤區，建議高亮重要的數據（不超過7個），其他數據默認置灰，通過圖例交互進行查看。

2.保持唯一映射通道 同樣的數據，映射通道應當保持唯一性。

例如當使用柱子高度來映射數據大小時，就不需要再使用顏色通道去映射數據。

3.解釋你的顏色 當圖表中出現不同顏色時，需要向讀者解釋顏色所代表的含義。

4.上下文保持顏色一致性 結合當前頁面環境，建立視覺連續性，對于統一度量，使用同樣的顏色方案，而且在整個頁面（通常是儀表盤）使用時，注意保持整體顏色方案的一致性。

5.不同數據對應不同色板 不同的數據類型建議使用對應的色板，比如分類數據就不建議使用連續色板。

6.不用彩虹色環表達連續數據 不以色環順序來表達連續的有序型或數值型數據，因為色環順序并非人眼自然記憶，且彩虹色變化并非均衡變化，如下圖中灰階的轉化，很容易看出彩虹色并不是一個連續逐漸加深的色板，因此彩虹色環并不適合展示連續數據，容易引起誤解。

7.順序色板選擇需均衡 下圖右側“不建議”圖中，第2、第3個顏色很相近，難以區分，第3、第4個顏色跳躍很大，對于均衡的連續數據表達中，容易引起數據感知的誤差，均衡選色可在PhotoShop的拾色器中使用Lab模式下固定色相不變，調節L值進行等距取色。

8.為視障群體設計 AntV色板在做無障礙驗證時，得出以下幾點取色建議： 分類色板選取需明暗交替： 雖然正常人眼中右側分類色板通過色相可以區分差異，但在視障人士、甚至全色盲，則主要靠顏色的明暗差異來識別不同的數據類型，因此分類色板需要注意適度的明暗交替 離散色板盡量選取藍黃對比： 一般場景中，我們常也會使用黃綠配色，黃綠對比中，黃是暖色系，綠是冷色系，同樣能給到對比感受，且打破常規的藍紅對比色，給到新穎的色彩感受，但如果你的用戶中視障人士占比較多，則盡量避免綠黃配色，如圖為兩種色板在正常人眼和紅綠色盲眼中的對比效果，黃綠配色在紅綠色盲眼中就失去了色彩對比，難以區分。

  作者：白弦，螞蟻集團設計師 本文由@AntDesign原創發布于人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協議 給作者打賞，鼓勵TA抓緊創作！ 贊賞 文章若有侵權請來信告知：品牌行銷策略，產品行銷與設計，各類型行銷推廣案例分享-品牌行銷點點讚»揭密可視化專家配色秘笈，你在乎的顏色遠遠不夠 上一篇12個案例告訴你：交互設計的決策要素有哪些？ 下一篇交互例推：好設計看得見（2） 相關文章萬字長文|詳解企業級B端設計規范搭建思路（實戰篇）做UI，文案也需要設計？設計師的數據分析與場景化設計詳解|產品銷售策略分析跟《動物餐廳》小游戲學習App游戲化設計搞懂這10條設計理論，做出讓用戶一眼就愛上的設計低保真原型VS高保真原型，哪一種更適合你的設計？關于按鈕圓角的困惑，這篇文章全部給你答案 近期文章 六種常見隱藏菜單 從盒馬鮮生／網易嚴選看，服務設計應用的兩大思路 10個技巧，有助提升你的海報設計 交互設計：APP搜索功能淺析 在iPhone的UI設計背后，是一場關于注意力的戰爭 分類 分析比較 產品行銷 產品設計 職場攻略 行銷推廣 體驗行銷