雖然如今好的配色方案已經(jīng)唾手可得，但為數(shù)據(jù)可視化找到合適的配色方案，卻仍是一項(xiàng)巨大挑戰(zhàn)。

在Graphiq，事情甚至更加棘手，因?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)造Graphiq的數(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種綠色。

我們的方式

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

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

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

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

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

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

第2條：仿照自然的配色

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

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

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

照片來(lái)源于Kyle Pearce、Wesley Fryer、和Jon Sullivan。

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

照片來(lái)源于Kbh3rd、Ian Britton、和Jon Sullivan。

由于我總能看到這些自然的漸變，所以當(dāng)我們?cè)诳梢暬瘓D表中看到對(duì)應(yīng)的配色時(shí)，會(huì)感覺(jué)熟悉和愉快。

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

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

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

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

我們的配色方案

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

冷色、暖色和霓虹色。

配色的實(shí)際運(yùn)用

長(zhǎng)話(huà)短說(shuō)

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

閱讀、工具和資源 [更新]

這個(gè)過(guò)程中，我們發(fā)現(xiàn)了一些很棒的資源和文章，與我們得出的結(jié)論類(lèi)似，但他們采用了更精確的方法，甚至鉆研了色彩理論。我們覺(jué)得應(yīng)該分享出來(lái)，供大家深度閱讀：

閱讀

1. 如何避免等差的HSV顏色，作者Gregor Aisch
2. 通過(guò)chroma.js控制多色調(diào)的色彩比例，作者Gregor Aisch
3. 微妙的顏色，作者Robert Simmon
4. 翠綠配色方案，作者Bob Rudis、Noam Ross和Simon Garnier
5. MATLAB色彩地圖，作者Steve Eddins

工具

1. 數(shù)據(jù)顏色采集工具——一件很趁手的工具，讓你保持濃度不變的同時(shí)輕松選擇配色
2. Chroma.js——一個(gè)處理色彩的JavaScript庫(kù)
3. Colorbrewer2——熱點(diǎn)圖與數(shù)據(jù)可視化顏色工具，自帶了多色調(diào)與單色調(diào)的方案

其他資源

我們還找到一些其他愛(ài)不釋手的配色資源。雖然它們并非專(zhuān)為數(shù)據(jù)可視化而設(shè)計(jì)，不過(guò)我們覺(jué)得或許對(duì)你有幫助。

1. ColorHunt——高質(zhì)量配色方案，能夠快速預(yù)覽，如果你只需要4種顏色，這是絕佳的資源
2. COLOURlovers——很棒的顏色社區(qū)，其中有許多工具可以創(chuàng)建配色方案，還有設(shè)計(jì)模式
3. ColorSchemer Studio——強(qiáng)大的桌面取色應(yīng)用
4. Coolors——輕量級(jí)隨機(jī)配色生成器，你可以鎖定你想要的顏色，然后替換其他的
5. Flat UI Colors——很棒的UI配色，這是最流行的配色之一
6. Material Design Colors——另一套優(yōu)秀的UI配色。它不僅提供了跨度巨大的顏色，也為每種顏色提供了不同的“色深”，或者說(shuō)明度
7. Palettab——一個(gè)Chrome插件，在每個(gè)標(biāo)簽頁(yè)里呈現(xiàn)一套新的配色方案和字體靈感
8. Swiss Style Color Picker——另一個(gè)優(yōu)秀的配色方案集

希望本文對(duì)你有所幫助！你建立配色方案的過(guò)程是怎樣的？你還用到其他的工具嗎？我們想聽(tīng)聽(tīng)你在配色與可視化圖表方面的經(jīng)驗(yàn)。

想了解更多我們的工作流程，請(qǐng)訂閱我們的刊物：Graphiq Engineering。

原文鏈接：https://medium.com/graphiq-engineering/finding-the-right-color-palettes-for-data-visualizations-fcd4e707a283#.s6benocrb

作者信息：Samantha Zhang

Senior UI/UX @GraphiqHQ. Tutorial writer @TutsPlusCode. Product maker. Data nerd. Side project ninja. More at http://samanthaz.me/ and @moyicat

#專(zhuān)欄作家#

可樂(lè)橙，微信公眾號(hào)：可樂(lè)橙（colachangreen）。人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家，UI/UX設(shè)計(jì)師，關(guān)注互聯(lián)網(wǎng)，關(guān)注科技?，F(xiàn)居杭州，與小伙伴們正在創(chuàng)業(yè)途中?；蛟S不是一名優(yōu)秀的設(shè)計(jì)師，至少是個(gè)快樂(lè)的設(shè)計(jì)師。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉(zhuǎn)載。