雖然如今好的配色方案已經(jīng)唾手可得，但想為數(shù)據(jù)可視化找到合適的配色方案，難度仍然不小。因信息圖的獨特屬性，在保證色彩具有清晰辨識度的同時，還必須滿足豐富而不凌亂的配色要求。不過即使你對色彩不敏感，用了今天這篇干貨提到的3個技巧，也能輕松制作出好看的信息圖。

在信息圖方面，事情甚至更加棘手，因為我們要通過上千種各不相同的數(shù)據(jù)集合來傳遞信息，它們有著各自迥異的視覺表現(xiàn)。

目前的問題

我們沒有立刻開始建立自己的配色表，而是發(fā)起了一些調(diào)查，研究網(wǎng)絡(luò)上已存在的配色方案。令人驚訝的是，我們發(fā)現(xiàn)其中只有少數(shù)是為復(fù)雜的圖表和數(shù)據(jù)可視化而設(shè)計的。我們發(fā)現(xiàn)一些不能使用現(xiàn)有配色的原因。

問題1：辨識度低

我們看過的許多配色方案都不適用于數(shù)據(jù)可視化。不僅由于顏色的明度差異不大，其實它們在創(chuàng)造時就沒有考慮過辨識度。Flat UI配色是最廣泛使用的配色之一，原因顯而易見：它非常優(yōu)秀。但是，正如它名字所述，這是為界面而設(shè)計的。使用Flat UI配色的話，色盲者就難以辨認出數(shù)據(jù)圖像。

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

問題2：色彩不夠多

另一個問題是，許多現(xiàn)有配色方案沒有足夠的顏色。創(chuàng)造數(shù)據(jù)可視化信息圖時，我們需要至少6種顏色的配色方案，甚至有時需要8到12種顏色，才能滿足所有的應(yīng)用場景。我們看過的許多配色方案都沒有足夠多的色彩供選擇。

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

問題3：難以區(qū)分

不過等一下，還有一些配色方案看起來像是漸變——理論上說可以創(chuàng)造出任意數(shù)量的顏色，對吧？

不幸的是，它們明度差異通常不大，其中許多顏色很容易變得無法區(qū)分。

如果普通用戶能正確的區(qū)分出這些顏色，并與相應(yīng)的數(shù)據(jù)項對應(yīng)起來，我就服了，尤其是能區(qū)分出左邊的4種綠色。

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

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

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

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

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

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

第2條：仿照自然的配色

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

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

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

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

由于我總能看到這些自然的漸變，所以當我們在可視化圖表中看到對應(yīng)的配色時，會感覺熟悉和愉快。

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

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

改用漸變的思維并不容易，不過有個好方法，可以在Photoshop中拉輔助線到斷點位置，與數(shù)據(jù)的數(shù)量對應(yīng)上，然后持續(xù)對漸變進行測試與調(diào)整。以下是我們在修正漸變時產(chǎn)生的屏幕截圖。

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

我們的配色方案

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

冷色、暖色和霓虹色。

配色的實際運用

長話短說

盡管優(yōu)秀的配色方案越來越多，但并非所有都適用于圖表和數(shù)據(jù)可視化。我們的配色方法就是創(chuàng)建色調(diào)與明度變化都足夠大的自然漸變。這么做能使我們的配色便于色盲辨識，對其他人則更明顯，并且可以滿足1到12種數(shù)據(jù)。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

當前題目：3個技巧搞定可視化信息圖的色彩搭配
URL網(wǎng)址：http://www.rwnh.cn/news42/316042.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、用戶體驗、品牌網(wǎng)站制作、網(wǎng)頁設(shè)計公司、做網(wǎng)站、電子商務(wù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)