我花了十五年研究人們如何感知視覺資訊。在資料視覺化中,色彩是一個直覺經常失準的領域。
讓我分享研究實際顯示的結果。
色彩在圖表中的三大功能
選擇色彩前,先了解你希望色彩達到什麼目的:
1. 區分類別
當你擁有多個資料序列(產品 A、產品 B、產品 C)時,色彩幫助觀看者區分它們。
研究發現:人們能一目瞭然地可靠區分約 5-8 種色彩。超過此數量,觀看者會開始混淆類別。這就是為何專家級的資料視覺化者會限制調色盤的色彩數量。
2. 編碼數值
在熱圖與區塊著色圖中,色彩代表數量。更深色=更多,更淺色=更少(或反之)。
研究發現:對於多數量化資料,順序色階(單一色相由淺至深)比發散色階更有效。我們直覺理解「飽和度越高=強度越高」。
3. 吸引注意力
色彩突顯重點。灰色長條中的紅色長條會說「看這裡」。
研究發現:單一強調色搭配中性背景,比多種「重要」色彩互相競爭更有效。
色彩的文化包袱
色彩帶有意義,但其意義因情境與文化而異。
紅色
西方情境:危險、虧損、停止、負面、緊急
財務情境:虧損、下跌、賣出
設計情境:錯誤、警示、注意
在中國:好運、繁榮、慶祝
在股票市場:有時相反(某些亞洲市場紅色代表上漲)
安全做法:僅在觀眾共享相同文化脈絡時,將紅色用於「不佳」或「需注意」。考慮輔以形狀或位置提示作為備援。
綠色
普遍意義:成長、通行、正面、自然、成功
財務情境:獲利、上漲、買入、收益
相對普遍,但需注意在某些文化中綠色具有宗教意涵。
安全做法:將綠色與「上漲」或「良好」概念連結,但對關鍵資訊應使用其他區分特徵(如箭頭方向)。
藍色
普遍意義:信任、穩定、平靜、專業
企業情境:最常見的品牌色彩有其道理
低風險:藍色是跨文化與情境最安全的色彩選擇。對有色覺缺陷的人來說,藍色也是辨識度最高的色彩。
橘色/黃色
普遍意義:警告、謹慎、能量、注意力
狀態指示器:常用於「警告」或「需注意」
陷阱:白底上的黃色對比度差。橘色可能顯得強勢。
無障礙設計的現實
許多資料視覺化者忽略的事實:約 8% 男性和 0.5% 女性患有某種形式的色覺缺陷。全球約有 3 億人受影響。
色盲使用者看到的景象
紅綠色盲(最常見):紅色與綠色呈現為相似的渾濁褐色調。
影響:切勿僅依賴紅綠對比來區分類別。對相當一部分的觀眾來說,這種區分無效。
有效的解決方案
- 使用色盲友善調色盤:藍-橘、藍-黃、紫-橘等組合對多數色覺缺陷類型都有良好的區分度。
- 添加次要編碼:圖案、形狀或標籤等不依賴色彩也能發揮作用的元素。
- 確保足夠的明度對比:即使沒有色彩,深淺色調也能區分。
- 測試你的作品:使用 Coblis(色盲模擬器)等工具檢視圖表在色盲使用者眼中的樣貌。
色彩與理解度的相關研究
研究:Cleveland 與 McGill (1984)
發現:沿著共同尺度上的位置判斷,比色彩飽和度的判斷更精確。
應用:不要依賴色彩強度來傳達精確數值。用它呈現整體模式;使用位置(長條、點)進行精確比較。
研究:Healey (1996)
發現:在 200 毫秒內,獨特色彩能從背景中「躍出」,無論背景中有多少其他元素。
應用:若要突顯重點,請選擇與其他元素明顯不同的色彩。細微差異無法有效突顯。
研究:Borland 與 Taylor (2007)
發現:彩虹色系(紅-黃-綠-藍-紫)常被誤解,因為它們缺乏自然的感知順序。
應用:順序資料使用單一色相的漸層。發散資料使用雙色搭配中性中點。
建立資料專用的色彩系統
步驟 1:選擇主要調色盤
你需要:
- 1-2 個品牌色彩(用於與企業識別一致)
- 1 個強調色(用於突顯)
- 1 個中性色(灰色,用於淡化)
- 2-3 個分類色彩(若需要)
這樣就夠了。多數視覺化圖表總共只需要 4-6 種色彩。
步驟 2:定義視覺層級
決定每種色彩的意義:
- 強調色 = 最重要、需採取行動
- 主色 = 主要資料序列、焦點區域
- 輔助色 = 比較資料、背景資訊
- 中性色 = 背景、次要資訊
在所有視覺化圖表中保持一致使用。
步驟 3:建立順序色階
熱圖與強度資料適用:
- 選擇一個色相
- 建立 5-7 種從淺至深的色調
- 確保相鄰色調有足夠對比度
ColorBrewer2 等工具能生成兼顧無障礙設計的色階。
步驟 4:測試與記錄
測試你的調色盤:
- 色盲模擬工具
- 低對比度顯示器
- 列印版本(若適用)
記錄你的色彩編碼,確保每個人都能一致使用。
實用的色彩準則
建議做法:
- 使用藍色作為預設「安全」色彩
- 將分類調色盤限制在 5-7 種色彩
- 使強調色明顯不同
- 進行無障礙測試
- 在不同儀表板間保持一致
避免做法:
- 對順序資料使用彩虹色系
- 僅依賴紅綠區分
- 使用多種強調色
- 在儀表板中改變色彩意義
- 僅用色彩區分類別
不同圖表類型的色彩運用
長條圖
最佳:單一純色搭配一種強調色
尚可:2-3 種色彩用於群組長條
避免:每個長條用不同色彩(除非具明確分類意義)
折線圖
最佳:2-3 種明顯不同的色彩
尚可:輔以不同線條樣式(實線、虛線)
避免:超過 4-5 條不同色彩的線條
熱圖
最佳:單一色相順序色階
尚可:具意義中點的發散色階(雙色)
避免:彩虹色系或高飽和度配色
圓餅圖
最佳:2-3 種具明確意義的色彩
尚可:突顯單一分區,其餘用中性色
避免:環狀分布 7 種以上不同色彩
輔助工具推薦
許多現代視覺化工具內建經過深思熟慮的色彩調色盤。像 ChartGen 這類 AI 驅動工具能自動應用色彩研究——建議無障礙調色盤並維持一致性。
手動工作推薦工具:
- ColorBrewer2(順序與發散色階)
- Viz Palette(無障礙設計檢查)
- Coolors(生成具無障礙評分的調色盤)
最後的提醒
色彩之所以強大,是因為它在「前注意階段」即被處理——早於意識思考。這使其既有效又危險。
有效:正確的色彩能瞬間躍出並引導注意力。
危險:錯誤的色彩會分散注意力、排除特定使用者或誤導解讀。
目標不是使用最多色彩,而是讓色彩運用如此有意識,以至於觀看者幾乎不會注意到色彩本身——他們只是能更快理解資料。


