顏色搭配,3個(gè)可視化信息圖的色彩搭配技巧
雖然如今好的配色方案已經(jīng)唾手可得,但想為數(shù)據(jù)可視化找到合適的配色方案,難度仍然不小。因信息圖的獨(dú)特屬性,在保證色彩具有清晰辨識(shí)度的同時(shí),還必須滿(mǎn)足豐富而不凌亂的配色要求。不過(guò)即使你對(duì)色彩不敏感,用了今天這篇干貨提到的3個(gè)技巧,也能輕松制作出好看的信息圖。
在信息圖方面,事情甚至更加棘手,因?yàn)槲覀円ㄟ^(guò)上千種各不相同的數(shù)據(jù)集合來(lái)傳遞信息,它們有著各自迥異的視覺(jué)表現(xiàn)。
目前的問(wèn)題
我們沒(méi)有立刻開(kāi)始建立自己的配色表,而是發(fā)起了一些調(diào)查,研究網(wǎng)絡(luò)上已存在的配色方案。令人驚訝的是,我們發(fā)現(xiàn)其中只有少數(shù)是為復(fù)雜的圖表和數(shù)據(jù)可視化而設(shè)計(jì)的。我們發(fā)現(xiàn)一些不能使用現(xiàn)有配色的原因。
問(wèn)題1:辨識(shí)度低
我們看過(guò)的許多配色方案都不適用于數(shù)據(jù)可視化。不僅由于顏色的明度差異不大,其實(shí)它們?cè)趧?chuàng)造時(shí)就沒(méi)有考慮過(guò)辨識(shí)度。Flat UI配色是最廣泛使用的配色之一,原因顯而易見(jiàn):它非常優(yōu)秀。但是,正如它名字所述,這是為界面而設(shè)計(jì)的。使用Flat UI配色的話(huà),色盲者就難以辨認(rèn)出數(shù)據(jù)圖像。
Flat UI配色的完整色彩、紅色盲模式、灰度模式。
問(wèn)題2:色彩不夠多
另一個(gè)問(wèn)題是,許多現(xiàn)有配色方案沒(méi)有足夠的顏色。創(chuàng)造數(shù)據(jù)可視化信息圖時(shí),我們需要至少6種顏色的配色方案,甚至有時(shí)需要8到12種顏色,才能滿(mǎn)足所有的應(yīng)用場(chǎng)景。我們看過(guò)的許多配色方案都沒(méi)有足夠多的色彩供選擇。
下面是Color Hunt里的一些例子:
雖然這些都是很棒的配色,但它們都不夠靈活,無(wú)法提供豐富的色系。
問(wèn)題3:難以區(qū)分
不過(guò)等一下,還有一些配色方案看起來(lái)像是漸變——理論上說(shuō)可以創(chuàng)造出任意數(shù)量的顏色,對(duì)吧?
不幸的是,它們明度差異通常不大,其中許多顏色很容易變得無(wú)法區(qū)分,就像這一組,同樣來(lái)自Color Hunt:
我們?cè)囍x第一組,把它擴(kuò)展為10級(jí)色彩:
如果普通用戶(hù)能正確的區(qū)分出這些顏色,并與相應(yīng)的數(shù)據(jù)項(xiàng)對(duì)應(yīng)起來(lái),我就服了,尤其是能區(qū)分出左邊的4種綠色。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- ps基礎(chǔ)教程
- 色彩搭配
- 配色教程
- 十萬(wàn)個(gè)為什麼
- 顏色搭配
學(xué)習(xí) · 提示
相關(guān)教程
推薦教程
- 聊聊界面設(shè)計(jì)過(guò)程中,遇到視覺(jué)BUG時(shí)的處理方法
- 攝影后期培訓(xùn)“老師”用“假色環(huán)” 黃 藍(lán)不是互補(bǔ)色
- 色彩系列教程(3):實(shí)際運(yùn)用
- 科普知識(shí),講解一下常的6種圖片格式
- 顏色管理,讓自己的照片在網(wǎng)上正確地顯示
- 包裝設(shè)計(jì),快速設(shè)計(jì)好看的包裝及定位的心得
- 設(shè)計(jì)趨勢(shì),了解2015年的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)
- 排版知識(shí),三個(gè)提升閱讀體驗(yàn)的排版小技巧
- 設(shè)計(jì)神器,PS CC2015版本圓角腳本插件漢化及下載
- 圖像處理新手知識(shí)之七——色彩模式莫混淆