網(wǎng)頁設(shè)計(jì)必殺-3個(gè)技巧搞定可視化信息圖的色彩搭配
雖然如今好的配色方案已經(jīng)唾手可得,但想為數(shù)據(jù)可視化找到合適的配色方案,網(wǎng)頁設(shè)計(jì)難度仍然不小。因信息圖的獨(dú)特屬性,在保證色彩具有清晰辨識(shí)度的同時(shí),還必須滿足豐富而不凌亂的配色要求。不過即使你對(duì)色彩不敏感,用了今天圖趣分享這篇干貨提到的3個(gè)技巧,也能輕松制作出好看的信息圖。
在信息圖方面,事情甚至更加棘手,因?yàn)槲覀円ㄟ^上千種各不相同的數(shù)據(jù)集合來傳遞信息,它們有著各自迥異的視覺表現(xiàn)。
目前的問題
我們沒有立刻開始建立自己的配色表,而是發(fā)起了一些調(diào)查,研究網(wǎng)絡(luò)上已存在的配色方案。令人驚訝的是,我們發(fā)現(xiàn)其中只有少數(shù)是為復(fù)雜的圖表和數(shù)據(jù)可視化而設(shè)計(jì)的。我們發(fā)現(xiàn)一些不能使用現(xiàn)有配色的原因。
問題1:辨識(shí)度低
我們看過的許多配色方案都不適用于數(shù)據(jù)可視化。不僅由于顏色的明度差異不大,其實(shí)它們在創(chuàng)造時(shí)就沒有考慮過辨識(shí)度。Flat UI配色是最廣泛使用的配色之一,原因顯而易見:它非常優(yōu)秀。但是,正如它名字所述,這是為界面而設(shè)計(jì)的。使用Flat UI配色的話,色盲者就難以辨認(rèn)出數(shù)據(jù)圖像。
Flat UI配色的完整色彩、紅色盲模式、灰度模式。
問題2:色彩不夠多
另一個(gè)問題是,許多現(xiàn)有配色方案沒有足夠的顏色。創(chuàng)造數(shù)據(jù)可視化信息圖時(shí),我們需要至少6種顏色的配色方案,甚至有時(shí)需要8到12種顏色,才能滿足所有的應(yīng)用場景。我們看過的許多配色方案都沒有足夠多的色彩供選擇。
下面是Color Hunt里的一些例子:
雖然這些都是很棒的配色,但它們都不夠靈活,無法提供豐富的色系。
問題3:難以區(qū)分
不過等一下,還有一些配色方案看起來像是漸變——理論上說可以創(chuàng)造出任意數(shù)量的顏色,對(duì)吧?
不幸的是,它們明度差異通常不大,其中許多顏色很容易變得無法區(qū)分,就像這一組,同樣來自Color Hunt:
我們試著選第一組,把它擴(kuò)展為10級(jí)色彩:
如果普通用戶能正確的區(qū)分出這些顏色,并與相應(yīng)的數(shù)據(jù)項(xiàng)對(duì)應(yīng)起來,我就服了,尤其是能區(qū)分出左邊的4種綠色。
在Graphiq,我們以數(shù)據(jù)為生命,并且投入了大量時(shí)間尋找能夠用于數(shù)據(jù)可視化的配色方案,不是一組,而是許多組。我們在這個(gè)過程中受益良多,并且打算分享這些能夠創(chuàng)造出靈活配色的準(zhǔn)則:
第1條:色調(diào)與明度的跨度都要大
要確保配色非常容易辨識(shí)與區(qū)分,它們的明度差異一定要夠大。明度差異需要全局考慮。選擇一種單色系的配色,并且測試它在紅色盲、綠色盲與灰度模式下的表現(xiàn)。你就能迅速了解這個(gè)配色的辨識(shí)度水平。
△ Google Material配色中的淺藍(lán)色的完整色彩、紅色盲模式與灰度模式。
但是,有一組明度跨度大的配色還不夠。配色越多樣,用戶越容易將數(shù)據(jù)與圖像聯(lián)系起來。如果能善加利用色調(diào)的變化,就能使非色盲用戶更加輕松。
對(duì)于明度與色調(diào),跨度越大,就能承載越多的數(shù)據(jù)。
第2條:仿照自然的配色
設(shè)計(jì)師都知道一個(gè)小秘密,對(duì)于理性派們而言這似乎不符合常識(shí):并非所有顏色都是均等的。
從純數(shù)學(xué)的角度來看,淡紫到深黃的過渡,與淡黃到深紫的過渡,感覺大概相似。但我們在下面可以看到,前者感覺很自然,后者則不是。
這是由于我們已經(jīng)習(xí)慣于那些長期存在于自然界中的漸變。在華麗的日落中,我們就能看到明黃色向深紫色的漸變,但卻沒有哪里能看到淡紫色向深黃色的過渡。
類似的,還有淺綠色到藏藍(lán)色、鵝黃色到深綠色、棕紅色到藍(lán)灰色,等等。
由于我總能看到這些自然的漸變,所以當(dāng)我們在可視化圖表中看到對(duì)應(yīng)的配色時(shí),會(huì)感覺熟悉和愉快。
第3條:使用漸變,不要選擇一系列固定顏色
漸變配色結(jié)合不同色調(diào),對(duì)兩者都最好。無論你需要2種顏色還是10種,漸變中都能提取出這些顏色,讓可視化圖表感覺自然,同時(shí)保有足夠的色調(diào)與明度差異。
改用漸變的思維并不容易,不過有個(gè)好方法,可以在Photoshop中拉輔助線到斷點(diǎn)位置,與數(shù)據(jù)的數(shù)量對(duì)應(yīng)上,然后持續(xù)對(duì)漸變進(jìn)行測試與調(diào)整。以下是我們在修正漸變時(shí)產(chǎn)生的屏幕截圖。
可以看到,我們將配色表緊挨著頂部的灰度漸變,調(diào)整漸變疊加(之后就能得到精確的漸變色值),然后從那些斷點(diǎn)處選取顏色,測試配色在實(shí)際運(yùn)用中的效果。
我們的配色方案
我們對(duì)最終成果感到興奮。下面是我們使用的部分配色,它們都有從純白到純黑的漸變,以達(dá)到最大限度的明度差異。
冷色、暖色和霓虹色。
配色的實(shí)際運(yùn)用
長話短說
盡管優(yōu)秀的配色方案越來越多,但并非所有都適用于圖表和數(shù)據(jù)可視化。我們的配色方法就是創(chuàng)建色調(diào)與明度變化都足夠大的自然漸變。這么做能使我們的配色便于色盲辨識(shí),對(duì)其他人則更明顯,并且可以滿足1到12種數(shù)據(jù)。
本文地址:http://pkvc.cn/tutorial/ui2995.html
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問題
- 網(wǎng)頁設(shè)計(jì)精粹 網(wǎng)頁中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁UI - 原子設(shè)計(jì)理論(上)
- 如何通過設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺設(shè)計(jì)系列文章(二):全屏