顔色不僅可以傳遞出美感,通過不同的組合排序,還能形成一門新的界面語言,講述數據的故事,本文為你揭秘色闆的搭配種類、以及如何科學的使用色闆。
今天文中所舉案例,主要圍繞螞蟻系統設計體系中的 AntV 色闆,包括顔色的用法及注意事項。
AntV 色闆是基于 Ant Design 色彩體系,并結合數據可視化特性而設計。在可視化設計中,色闆的運用原則上優先保障準确性,考慮在操作指引、交互反饋上起到強化或凸顯的作用。其次需兼顧色障礙群體,幫助有色盲色弱的人群也能在數據可視化中獲取洞見。
在數據可視化領域中,數據與顔色的映射是非常重要的一個環節。顔色有三個視覺通道,分别是色調(H)、飽和度(S)、明度(B),不同的視覺通道可以與不同的數據類型進行關聯。
色調(H):通常使用顔色中的不同色調來描述不同的分類數據,如水果品類中蘋果映射為紅色、香蕉映射為黃色、梨映射為綠色,将品類與色調(H)建立了關聯。
飽和度(S)/明度(B):顔色通過明暗和飽和度的共同變化來描述有序或數值型的連續數據,比如身高由低到高或由 160cm 到 180 cm 的顔色映射為由淺到深,将連續變化與顔色的明暗飽和變化建立關聯。
AntV 色闆以螞蟻極客藍為起始主色,根據不同數據類型、使用場景擴展出 6 種可視化色闆類型,可完美兼容 Ant Design UI 資産。以下所有色闆均通過無障礙測試校驗,可放心使用。
分類色闆用于描述分類數據,如蘋果、香蕉、梨,常用一個顔色代表一個值以區分不同類型,取色時色相分布均衡,相鄰顔色之間明暗需考慮差異性,常用于餅圖的不同分類、填充地圖中的不同國家、關系圖中的不同角色等。
分類色版|基礎10色
分類色版|擴展20色
用法示例:如圖水果價格走勢對比,使用紅色代表蘋果價格、藍色代表藍莓價格、黃色代表香蕉價格。
02-順序色闆
順序色闆,一般使用同一或鄰近色相,通過明度和飽和度的漸變,常用來表示同一事物中的數值大小或梯度變化,如排行榜等級變化、一個國家或地區新增人口數對比、風險等級變化等。
單色順序色闆
單一色相漸變稱之為單色順序色闆,人眼可識别的色彩數量 5~7 個,為保證信息的最佳識别度,盡可能的克制使用顔色數量。
鄰近色順序色闆
為拉開顔色差異,可用兩個或以上個色相,通過明度或飽和度漸變,顔色連續而豐富,可産生更多色彩分級,表達更多的連續數值,常用于熱力圖中的熱度變化,通過鄰近色相的差異将聚集部分突顯出來
用法示例
2017 年西安居民人均消費支出,通過連續的顔色變化,可以快速感知出居住方面消費占比最大,其次食品煙酒,第三是交替通信
對比色漸變色闆,一般是兩種互補色(也可以是對比色)去展現數據從一個負向值到 0 點再到正向值的連續變化區間,顯示相對立的兩個值的大小關系,常用于氣溫的冷熱、海拔高低、股票漲跌等
用法示例
全國等溫線圖,使用發散色闆表示正負值的氣溫變化,暖色系的橙紅色容易讓人聯系到太陽或熾熱的感受,用于高溫變化,顔色越紅溫度越高,反之,冷色系的藍容易讓人聯想到冰和寒冷的感受,用于低溫變化,顔色越深溫度越低
04-疊加色闆
疊加色闆,為了色盡其用的原則,将兩組順序色闆通過圖層疊加模式産生一組新的色闆,一個顔色代表兩種變量數據,常用于觀察一個事物兩個維度變化的相關性,如胖瘦和高矮兩個維度的人數分布中,瘦且高的人群分布
命名規範:『疊加模式 色相名稱』首字母,如 MYG = Multiple Yellow Green
用法示例
雙變量映射地圖,相對于單變量映射的地圖,該地圖形式更加新穎,十分适合用來展示兩個緊密聯系的變量信息。如下圖所示,圖中展現了美國國民人口居住密度和家庭生産總值的分布關系,縱向由淺到深的紫色映射了人口密度,橫向由淺到深的藍色映射了家庭收入水平,相交的顔色可以總體反映出人口和家庭的分布情況。可以從地圖中清晰地看到,人口多且收入高的大多分布在沿海地區,人口數少且收入低的則主要分布在中部地區。
對比突出重點或特定數據,将重點關注的數據标以高飽和度的強調色,其他普通數據标以低飽和、低明度的基本色,常用于對比重點關注事物與其他分類事物的差别,如将自家産品與競品的對比使用
推薦9色
擴展19色
用法示例
如圖某工廠曆年能源消耗占比趨勢對比,分别用五種不同的顔色代表五種能源,其中「天然氣」為重點關注的能源類型,使用飽和度高的藍代表「天然氣」,其他能源類型着以低飽和度的分類顔色,以便關注的「天然氣」能夠快速被觀察到,同時其他類型可作為對比參考而不會因顔色過多而産生幹擾。
色彩在地圖可視化中的使用,不僅是數據信息傳遞的可視化通道,同時也是更深一層的文化故事的載體,用于表達意義或情感。重視用色習慣,遵循相關标準,色彩也不是都能寓意的,相當一部分圖表色彩選擇和感情因素無關,而是按照某種習慣來設定色彩,即所謂約定俗成,有的甚至形成來規範。如氣象預警配色,紅綠燈配色,股市的紅漲綠跌等。
用法示例
某水産公司 2019 年的月盈利變化,使用紅色表示盈利,綠色表示虧損。
我們發現,有同學并不是十分擅長在實際場景中應用色闆,以下幾條設計指引供使用時參考。
在實際應用中,經常會出現大量顔色使用的誤區,建議高亮重要的數據(不超過 7 個),其他數據默認置灰,通過圖例交互進行查看。
同樣的數據,映射通道應當保持唯一性。例如當使用柱子高度來映射數據大小時,就不需要再使用顔色通道去映射數據。
當圖表中出現不同顔色時,需要向讀者解釋顔色所代表的含義。
結合當前頁面環境,建立視覺連續性,對于統一度量,使用同樣的顔色方案,而且在整個頁面(通常是儀表盤)使用時,注意保持整體顔色方案的一緻性。
不同的數據類型建議使用對應的色闆,比如分類數據就不建議使用連續色闆。
不以色環順序來表達連續的有序型或數值型數據,因為色環順序并非人眼自然記憶,且彩虹色變化并非均衡變化,如下圖中灰階的轉化,很容易看出彩虹色并不是一個連續逐漸加深的色闆,因此彩虹色環并不适合展示連續數據,容易引起誤解。
下圖右側“不建議”圖中,第 2 、第 3 個顔色很相近,難以區分,第 3 、第 4 個顔色跳躍很大,對于均衡的連續數據表達中,容易引起數據感知的誤差,均衡選色可在 PhotoShop 的拾色器中使用 Lab 模式下固定色相不變,調節 L 值進行等距取色。
08-離散色闆盡量選取藍黃對比
一般場景中,我們常也會使用黃綠配色,黃綠對比中,黃是暖色系,綠是冷色系,同樣能給到對比感受,且打破常規的藍紅對比色,給到新穎的色彩感受,但如果你的用戶中視障人士占比較多,則盡量避免綠黃配色,如圖為兩種色闆在正常人眼和紅綠色盲眼中的對比效果,黃綠配色在紅綠色盲眼中就失去了色彩對比,難以區分。
AntV 色闆在做無障礙驗證時,得出以下幾點取色建議 :
分類色闆選取需明暗交替
雖然正常人眼中右側分類色闆通過色相可以區分差異,但在視障人士、甚至全色盲,則主要靠顔色的明暗差異來識别不同的數據類型,因此分類色闆需要注意适度的明暗交替
~此文轉載,如有侵權,請聯系删除
,更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!