3個技巧搞定視覺化資訊圖的色彩搭配

發表於2015-12-08

雖然如今好的配色方案已經唾手可得,但為資料視覺化找到合適的配色方案,卻仍是一項巨大挑戰

在Graphiq,事情甚至更加棘手,因為我們要通過上千種各不相同的資料集合來傳遞資訊,它們有著各自迥異的視覺表現

目前的問題

我們沒有立刻開始建立自己的配色表,而是發起了一些調查,研究網路上已存在的配色方案。令人驚訝的是,我們發現其中只有少數是為複雜的圖表和資料視覺化而設計的。我們發現一些不能使用現有配色的原因。

問題1:辨識度低

我們看過的許多配色方案都不適用於資料視覺化。不僅由於顏色的明度差異不大,其實它們在創造時就沒有考慮過辨識度。Flat UI配色是最廣泛使用的配色之一,原因顯而易見:它非常優秀。但是,正如它名字所述,這是為介面而設計的。使用Flat UI配色的話,色盲者就難以辨認出資料影像。

Flat UI配色的完整色彩、紅色盲模式、灰度模式。

問題2:色彩不夠多

另一個問題是,許多現有配色方案沒有足夠的顏色。創造Graphiq的資料視覺化時,我們需要至少6種顏色的配色方案,甚至有時需要8到12種顏色,才能滿足所有的應用場景。我們看過的許多配色方案都沒有足夠多的色彩供選擇。

下面是Color Hunt裡的一些例子:

雖然這些都是很棒的配色,但它們都不夠靈活,無法提供豐富的色系。

問題3:難以區分

不過等一下,還有一些配色方案看起來像是漸變——理論上說可以創造出任意數量的顏色,對吧?

不幸的是,它們明度差異通常不大,其中許多顏色很容易變得無法區分,就像這一組,同樣來自Color Hunt:

我們試著選第一組,把它擴充套件為10級色彩:

如果普通使用者能正確的區分出這些顏色,並與相應的資料項對應起來,我就服了,尤其是能區分出左邊的4種綠色。

我們的方式

在Graphiq,我們以資料為生命,並且投入了大量時間尋找能夠用於資料視覺化的配色方案,不是一組,而是許多組。我們在這個過程中受益良多,並且打算分享這些能夠創造出靈活配色的準則:

第1條:色調與明度的跨度都要大

要確保配色非常容易辨識與區分,它們的明度差異一定要夠大。明度差異需要全域性考慮。選擇一種單色系的配色,並且測試它在紅色盲、綠色盲與灰度模式下的表現。你就能迅速瞭解這個配色的辨識度水平。

Google Material配色中的淺藍色的完整色彩、紅色盲模式與灰度模式。

但是,有一組明度跨度大的配色還不夠。配色越多樣,使用者越容易將資料與影像聯絡起來。如果能善加利用色調的變化,就能使非色盲使用者更加輕鬆。

對於明度與色調,跨度越大,就能承載越多的資料。

第2條:仿照自然的配色

設計師都知道一個小祕密,對於理性派們而言這似乎不符合常識:並非所有顏色都是均等的。

從純數學的角度來看,淡紫到深黃的過渡,與淡黃到深紫的過渡,感覺大概相似。但我們在下面可以看到,前者感覺很自然,後者則不是。

這是由於我們已經習慣於那些長期存在於自然界中的漸變。在華麗的日落中,我們就能看到明黃色向深紫色的漸變,但卻沒有哪裡能看到淡紫色向深黃色的過渡。

照片來源於Kyle PearceWesley Fryer、和Jon Sullivan

類似地,還有淺綠色到藏藍色、鵝黃色到深綠色、棕紅色到藍灰色,等等。

照片來源於Kbh3rdIan Britton、和Jon Sullivan

由於我總能看到這些自然的漸變,所以當我們在視覺化圖表中看到對應的配色時,會感覺熟悉和愉快。

第3條:使用漸變,不要選擇一系列固定顏色

漸變配色結合不同色調,對兩者都最好。無論你需要2種顏色還是10種,漸變中都能提取出這些顏色,讓視覺化圖表感覺自然,同時保有足夠的色調與明度差異。

改用漸變的思維並不容易,不過有個好方法,可以在Photoshop中拉輔助線到斷點位置,與資料的數量對應上,然後持續對漸變進行測試與調整。以下是我們在修正漸變時產生的螢幕截圖。

可以看到,我們將配色表緊挨著頂部的灰度漸變,調整漸變疊加(之後就能得到精確的漸變色值),然後從那些斷點處選取顏色,測試配色在實際運用中的效果。

我們的配色方案

我們對最終成果感到興奮。下面是我們使用的部分配色,它們都有從純白到純黑的漸變,以達到最大限度的明度差異。

冷色、暖色和霓虹色。

配色的實際運用

長話短說

儘管優秀的配色方案越來越多,但並非所有都適用於圖表和資料視覺化。我們的配色方法就是建立色調與明度變化都足夠大的自然漸變。這麼做能使我們的配色便於色盲辨識,對其他人則更明顯,並且可以滿足1到12種資料。

相關文章