2017-5-3 資深UI設(shè)計(jì)者
Z Yuhan：對色彩的研究通常要么太過隨意缺乏邏輯，要么太過理論化難以理解，這篇文章用非常淺顯易懂的方式，講述了一個(gè)專門研究數(shù)據(jù)可視化的團(tuán)隊(duì)探尋圖標(biāo)色彩搭配的歷程，給出有力的論證，并得出很棒的結(jié)論，非常值得一讀。
雖然現(xiàn)在要獲取的色彩搭配并不難，但是尋找圖表（可視化數(shù)據(jù)）的配色依舊有難度。
在 Graphiq （用可視化的形式提供全球各種數(shù)據(jù)的一家公司，也是作者工作的地方），設(shè)計(jì)圖表色彩就更難了，因?yàn)槲覀兊膱D表需要用各種各樣的形式傳達(dá)上千種數(shù)據(jù)。
我們一開始并沒有直接著手設(shè)計(jì)，而是調(diào)查了現(xiàn)在網(wǎng)上已有的色彩搭配。驚喜的是，我們發(fā)現(xiàn)其中有一些確實(shí)是為復(fù)雜的圖表和可視化數(shù)據(jù)而設(shè)計(jì)的。當(dāng)時(shí)我們發(fā)現(xiàn)了幾個(gè)問題，讓我們不能直接使用這些已有的配色。
問題一：對色盲色弱不夠友好
很多這些配色并不夠可視化，不但在明度上差別不大，而且設(shè)計(jì)它們的人并沒有考慮到清晰的問題。 Flat UI Colors 被使用最多的色板之一，你可以輕易發(fā)現(xiàn)：這些配色看起來很棒，但是色如其名，它們是為 UI 而設(shè)計(jì)的。對色盲和色弱用戶而言，要在圖表上分辨這些顏色恐怕有困難。
Flat UI Colors 的一個(gè)色板：
該色板在紅色盲眼中的樣子：
該色板在全色盲眼中的樣子：
問題二：不夠清晰
另一個(gè)問題是這些配色里面并沒有足夠的顏色。在設(shè)計(jì) Graphiq 的視覺樣式時(shí)，我們需要一個(gè)提供至少6種顏色的配色方案，多一點(diǎn)的話甚至是8到12種，這樣才能覆蓋所有使用場景。
這里有一些 Color Hunt 的例子：
雖然這些配色很好，但是卻不能夠用來展示復(fù)雜的數(shù)據(jù)。
問題三：難以分辨
等等，也有一些搭配是漸變色，理論上這種搭配可以衍生出很多種顏色不是嗎？
遺憾的是這些漸變色的明度變化通常不夠，例如下面這些也是從 Color Hunt 來的：
讓我們用其中第一個(gè)測試一下，看如果用它來展示有10個(gè)維度的數(shù)據(jù)會(huì)怎樣：
這樣看來一般用戶幾乎不可能在圖表中分辨這些顏色，尤其是最左邊哪四個(gè)綠色實(shí)在太像了。
在 Graphiq ，我們以各種方式理解并感受數(shù)據(jù)，并且我們投入了大量時(shí)間尋找了很多適合我們圖表的配色方案。在這個(gè)過程中我們學(xué)到了很多，并且我們愿意向大家分享我們發(fā)現(xiàn)的以下三條原則：
原則一：在色相和明度上都要有足夠大的范圍
為了保證配色容易辨識，且對色弱和色盲來說足夠友好，顏色之間在明度上要有足夠的差異。因?yàn)閷γ鞫鹊谋孀R最容易的，不論是紅色盲、綠色盲還是完全色盲來說。
谷歌 Material Colors 中的 Light Blue：
紅色盲看到的樣子：
色盲看到的樣子：
然而，如果配色中只有明度差異恐怕不夠。顏色間中變化的維度越大，用戶就越容易在圖表上進(jìn)行數(shù)據(jù)比對。如果能夠利用色相的差異，對視力正常的人來說肯定更好。
如上圖，明度和色相上跨越范圍越大，配色就能支持越多維度的圖表。
設(shè)計(jì)師們都知道一個(gè)秘密，可能對邏輯性較強(qiáng)的人*來說不太容易理解：顏色之間并不是平等的。
從純粹的數(shù)學(xué)角度來看，一個(gè)從亮黃到暗紫的漸變與一個(gè)從亮紫到暗黃的漸變相比，給人的感受應(yīng)該是相似的。但是當(dāng)我們實(shí)際看到下圖時(shí)，會(huì)覺得前者比后者要自然很多。
這是因?yàn)槲覀円呀?jīng)習(xí)慣了自然界中的漸變。我們在日落余暉中可以看到從亮黃到暗紫的漸變，但是地球上卻無處可見從亮紫到暗黃的漸變。
△ Kyle Pearce
同樣，從亮綠到藍(lán)紫色，從亮黃到暗綠色、從橙棕色到冷灰色……都是如此：
△ Kbh3rd
△ Ian Britton
△ Jon Sullivan
因?yàn)槲覀冮L期以來都能看到這些自然漸變，我們在配色中看到它們時(shí)也感到熟悉而愉悅。
原則三：使用漸變而不是零散的顏色
漸變配色是最好的，不論你需要的是2種還是10種顏色，都可以從漸變中獲取到。這樣一來不但能夠保證色彩的感覺自然，而且還有足夠的色相和明度差異。
從色板模式轉(zhuǎn)為漸變模式并不容易，你可以嘗試著在 Photoshop 中給漸變畫幾條分隔線，然后對分割點(diǎn)進(jìn)行測試并微調(diào)。這里有一個(gè)截圖可以向大家展示我們是如何修正我們的漸變的：
你可以看到，我們把漸變色板放到最頂上，與灰度漸變相鄰，并從分割線上取色來測試這些真實(shí)的使用情況。
我們對成果非常滿意。下面展示了一些我們正在使用的色板，他們都以純白為起始，以純黑為終點(diǎn)，這樣才能最大限度地利用明度的差異。
冷色：
暖色：
霓虹色：
使用我們的色板
現(xiàn)在配色越來越多，但是他們并不都時(shí)候圖標(biāo)和可視化數(shù)據(jù)。我們研究的方法是讓色彩漸變在色相和明度上范圍竟可能廣。這樣一來我們的色彩就適合色盲和色弱了，對實(shí)力正常的人來說更是如此，并且可以運(yùn)用于維度數(shù)量從1到12的圖標(biāo)。
研究過程中，我們發(fā)現(xiàn)了一些很棒的資源和文章。它們得出了與我們相似的結(jié)論，但是使用的方法更加數(shù)據(jù)化，并且甚至延伸至了色彩理論。我們認(rèn)為應(yīng)該分享給大家作為擴(kuò)展閱讀。
文章
工具
其它資源
這里還有一些好的配色資源，盡管它們并不一定適合可視化數(shù)據(jù)，但是你也許會(huì)覺得有用。
Color Hunt ：高質(zhì)量的色板，方便快速查看，如果你只需要4種顏色的話會(huì)很有用。
COLOURlovers ：很棒的色彩交流社區(qū)，還有各種工具可以用來做配色設(shè)計(jì)。
ColorSchemer Studio ：功能強(qiáng)大的PC取色工具
Coolors ：一個(gè)輕量的色板生成工具
Flat UI Colors ：最流行的的界面色板之一
Material Design Colors ：也是一個(gè)色板，不但提供廣泛的顏色，還提供每個(gè)顏色的“重量”和亮度。
Palettab ：提供顏色和字體方案的 Chrome 擴(kuò)展工具
Swiss Style Color Picker ：也是一個(gè)很好的色板
對色盲色弱來不夠友好*：原文中問題一的標(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è)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.teruid.com