顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

2022-12-26 18:35:03 來(lái)源/作者: / 己有:48人學(xué)習(xí)過(guò)

在Graphiq,我們以數(shù)據(jù)為生命,并且投入了大量時(shí)間尋找能夠用于數(shù)據(jù)可視化的配色方案,不是一組,而是許多組。我們?cè)谶@個(gè)過(guò)程中受益良多,并且打算分享這些能夠創(chuàng)造出靈活配色的準(zhǔn)則:

第1條:色調(diào)與明度的跨度都要大

要確保配色非常容易辨識(shí)與區(qū)分,它們的明度差異一定要夠大。明度差異需要全局考慮。選擇一種單色系的配色,并且測(cè)試它在紅色盲、綠色盲與灰度模式下的表現(xiàn)。你就能迅速了解這個(gè)配色的辨識(shí)度水平。

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

△ Google Material配色中的淺藍(lán)色的完整色彩、紅色盲模式與灰度模式。

但是,有一組明度跨度大的配色還不夠。配色越多樣,用戶越容易將數(shù)據(jù)與圖像聯(lián)系起來(lái)。如果能善加利用色調(diào)的變化,就能使非色盲用戶更加輕松。

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

對(duì)于明度與色調(diào),跨度越大,就能承載越多的數(shù)據(jù)。

第2條:仿照自然的配色

設(shè)計(jì)師都知道一個(gè)小秘密,對(duì)于理性派們而言這似乎不符合常識(shí):并非所有顏色都是均等的。

從純數(shù)學(xué)的角度來(lái)看,淡紫到深黃的過(guò)渡,與淡黃到深紫的過(guò)渡,感覺大概相似。但我們?cè)谙旅婵梢钥吹剑罢吒杏X很自然,后者則不是。

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

這是由于我們已經(jīng)習(xí)慣于那些長(zhǎng)期存在于自然界中的漸變。在華麗的日落中,我們就能看到明黃色向深紫色的漸變,但卻沒有哪里能看到淡紫色向深黃色的過(guò)渡。

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

類似的,還有淺綠色到藏藍(lán)色、鵝黃色到深綠色、棕紅色到藍(lán)灰色,等等。

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧

顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧