從事用研6年后，我總結(jié)了這四個最重要的技能

Z Yuhan：對色彩的研究通常要么太過隨意缺乏邏輯，要么太過理論化難以理解，這篇文章用非常淺顯易懂的方式，講述了一個專門研究數(shù)據(jù)可視化的團(tuán)隊探尋圖標(biāo)色彩搭配的歷程，給出有力的論證，并得出很棒的結(jié)論，非常值得一讀。

雖然現(xiàn)在要獲取的色彩搭配并不難，但是尋找圖表（可視化數(shù)據(jù)）的配色依舊有難度。

在 Graphiq （用可視化的形式提供全球各種數(shù)據(jù)的一家公司，也是作者工作的地方），設(shè)計圖表色彩就更難了，因?yàn)槲覀兊膱D表需要用各種各樣的形式傳達(dá)上千種數(shù)據(jù)。

現(xiàn)在的問題

我們一開始并沒有直接著手設(shè)計，而是調(diào)查了現(xiàn)在網(wǎng)上已有的色彩搭配。驚喜的是，我們發(fā)現(xiàn)其中有一些確實(shí)是為復(fù)雜的圖表和可視化數(shù)據(jù)而設(shè)計的。當(dāng)時我們發(fā)現(xiàn)了幾個問題，讓我們不能直接使用這些已有的配色。

問題一：對色盲色弱不夠友好

很多這些配色并不夠可視化，不但在明度上差別不大，而且設(shè)計它們的人并沒有考慮到清晰的問題。 Flat UI Colors 被使用最多的色板之一，你可以輕易發(fā)現(xiàn)：這些配色看起來很棒，但是色如其名，它們是為 UI 而設(shè)計的。對色盲和色弱用戶而言，要在圖表上分辨這些顏色恐怕有困難。

Flat UI Colors 的一個色板：

該色板在紅色盲眼中的樣子：

該色板在全色盲眼中的樣子：

問題二：不夠清晰

另一個問題是這些配色里面并沒有足夠的顏色。在設(shè)計 Graphiq 的視覺樣式時，我們需要一個提供至少6種顏色的配色方案，多一點(diǎn)的話甚至是8到12種，這樣才能覆蓋所有使用場景。

這里有一些 Color Hunt 的例子：

雖然這些配色很好，但是卻不能夠用來展示復(fù)雜的數(shù)據(jù)。

問題三：難以分辨

等等，也有一些搭配是漸變色，理論上這種搭配可以衍生出很多種顏色不是嗎？

遺憾的是這些漸變色的明度變化通常不夠，例如下面這些也是從 Color Hunt 來的：

讓我們用其中第一個測試一下，看如果用它來展示有10個維度的數(shù)據(jù)會怎樣：

這樣看來一般用戶幾乎不可能在圖表中分辨這些顏色，尤其是最左邊哪四個綠色實(shí)在太像了。

我們的方法

在 Graphiq ，我們以各種方式理解并感受數(shù)據(jù)，并且我們投入了大量時間尋找了很多適合我們圖表的配色方案。在這個過程中我們學(xué)到了很多，并且我們愿意向大家分享我們發(fā)現(xiàn)的以下三條原則：

原則一：在色相和明度上都要有足夠大的范圍

為了保證配色容易辨識，且對色弱和色盲來說足夠友好，顏色之間在明度上要有足夠的差異。因?yàn)閷γ鞫鹊谋孀R最容易的，不論是紅色盲、綠色盲還是完全色盲來說。

谷歌 Material Colors 中的 Light Blue：

紅色盲看到的樣子：

色盲看到的樣子：

然而，如果配色中只有明度差異恐怕不夠。顏色間中變化的維度越大，用戶就越容易在圖表上進(jìn)行數(shù)據(jù)比對。如果能夠利用色相的差異，對視力正常的人來說肯定更好。

如上圖，明度和色相上跨越范圍越大，配色就能支持越多維度的圖表。

原則二：借鑒自然色彩

設(shè)計師們都知道一個秘密，可能對邏輯性較強(qiáng)的人*來說不太容易理解：顏色之間并不是平等的。

從純粹的數(shù)學(xué)角度來看，一個從亮黃到暗紫的漸變與一個從亮紫到暗黃的漸變相比，給人的感受應(yīng)該是相似的。但是當(dāng)我們實(shí)際看到下圖時，會覺得前者比后者要自然很多。

這是因?yàn)槲覀円呀?jīng)習(xí)慣了自然界中的漸變。我們在日落余暉中可以看到從亮黃到暗紫的漸變，但是地球上卻無處可見從亮紫到暗黃的漸變。

△   Kyle Pearce

同樣，從亮綠到藍(lán)紫色，從亮黃到暗綠色、從橙棕色到冷灰色……都是如此：

△   Kbh3rd

△   Ian Britton

△   Jon Sullivan

因?yàn)槲覀冮L期以來都能看到這些自然漸變，我們在配色中看到它們時也感到熟悉而愉悅。

原則三：使用漸變而不是零散的顏色

漸變配色是最好的，不論你需要的是2種還是10種顏色，都可以從漸變中獲取到。這樣一來不但能夠保證色彩的感覺自然，而且還有足夠的色相和明度差異。

從色板模式轉(zhuǎn)為漸變模式并不容易，你可以嘗試著在 Photoshop 中給漸變畫幾條分隔線，然后對分割點(diǎn)進(jìn)行測試并微調(diào)。這里有一個截圖可以向大家展示我們是如何修正我們的漸變的：

你可以看到，我們把漸變色板放到最頂上，與灰度漸變相鄰，并從分割線上取色來測試這些真實(shí)的使用情況。

我們的色板

我們對成果非常滿意。下面展示了一些我們正在使用的色板，他們都以純白為起始，以純黑為終點(diǎn)，這樣才能最大限度地利用明度的差異。

冷色：

暖色：

霓虹色：

使用我們的色板

總結(jié)

現(xiàn)在配色越來越多，但是他們并不都時候圖標(biāo)和可視化數(shù)據(jù)。我們研究的方法是讓色彩漸變在色相和明度上范圍竟可能廣。這樣一來我們的色彩就適合色盲和色弱了，對實(shí)力正常的人來說更是如此，并且可以運(yùn)用于維度數(shù)量從1到12的圖標(biāo)。

相關(guān)文章、工具和資源

研究過程中，我們發(fā)現(xiàn)了一些很棒的資源和文章。它們得出了與我們相似的結(jié)論，但是使用的方法更加數(shù)據(jù)化，并且甚至延伸至了色彩理論。我們認(rèn)為應(yīng)該分享給大家作為擴(kuò)展閱讀。

文章

1. How To Avoid Equidistant HSV Colors
2. Mastering Multi-hued Color Scales with Chroma.js
3. Subtleties of Color (Part 1 of 6)
4. The viridis color palettes by Bob Rudis, Noam Ross and Simon Garnier
5. A New Colormap for MATLAB – Part 1 – Introduction

工具

1. Colorpicker for data ：可以在 Chrome 上獲取漸變色，并立即在圖表上查看效果的工具
2. chroma.js：處理顏色的JavaScript庫
3. Colorbrewer2：用來為圖表選擇顏色的工具，既支持多種色相也支持單色相
4. gradStop.js：生成單色方案和等距漸變點(diǎn)的 JavaScript 庫
5. Color Oracle：免費(fèi)的色盲測試工具， Windows 、 Mac 和 Linux 都能使用。

其它資源

這里還有一些好的配色資源，盡管它們并不一定適合可視化數(shù)據(jù)，但是你也許會覺得有用。

Color Hunt ：高質(zhì)量的色板，方便快速查看，如果你只需要4種顏色的話會很有用。

COLOURlovers ：很棒的色彩交流社區(qū)，還有各種工具可以用來做配色設(shè)計。

ColorSchemer Studio ：功能強(qiáng)大的PC取色工具

Coolors ：一個輕量的色板生成工具

Flat UI Colors ：最流行的的界面色板之一

Material Design Colors ：也是一個色板，不但提供廣泛的顏色，還提供每個顏色的“重量”和亮度。

Palettab ：提供顏色和字體方案的 Chrome 擴(kuò)展工具

Swiss Style Color Picker ：也是一個很好的色板

標(biāo)注：

對色盲色弱來不夠友好*：原文中問題一的標(biāo)題是“Low Accessibility”，通常用形容來產(chǎn)品對殘障人士的友好度不夠，這一點(diǎn)在歐美國家經(jīng)常作為需要重視的產(chǎn)品硬指標(biāo)（也是由于他們的色盲色弱發(fā)病率比亞洲高很多）。因?yàn)樵谥形睦餂]有簡短精準(zhǔn)的說法，所以我在寫的是“對色盲色弱不夠友好”。

邏輯性較強(qiáng)的人*：原文的寫法是“l(fā)eft-brained folks”，直譯是左腦型的人。通常左腦型的人被認(rèn)為邏輯嚴(yán)謹(jǐn)，右腦型的人被認(rèn)為有藝術(shù)天賦。因?yàn)檫@種說法在中文里不是很通用，所以我寫的是“邏輯性較強(qiáng)的人”。

藍(lán)藍(lán)設(shè)計( m.cqzjtgb.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)