作者 Michael Yi
伊瓢 編譯
量子位 出品 | 公眾號(hào) QbitAI
做數(shù)據(jù)圖表的時(shí)候，只會(huì)用Excel里的系統(tǒng)默認(rèn)顏色？
別別別，大家都用默認(rèn)配色，千篇一律，毫無(wú)特點(diǎn)。
可是學(xué)習(xí)色彩設(shè)計(jì)，又是十分費(fèi)工夫的一件事，不僅要搞明白R(shí)GB、CMYK等各種顏色體系，搞懂各種配色方法，重點(diǎn)是還要看大量的案例，培養(yǎng)良好的審美觀，防止自己做出來(lái)的東西辣眼睛……
不如我們來(lái)“一文學(xué)會(huì)”系列吧，這篇Michael Yi發(fā)在Medium上的文章，就簡(jiǎn)單清晰的介紹了三種數(shù)據(jù)可視化中的配色方法，讓你的圖表看起來(lái)清晰、翔實(shí)、用戶體驗(yàn)友好，就像咨詢公司的報(bào)告一樣專業(yè)。
另外，還有不少實(shí)用技巧和工具~
三種配色方法
根據(jù)數(shù)據(jù)的不同類型，有三種不同的調(diào)色方法。
定性調(diào)色板
定性調(diào)色板主要用在分類展示的數(shù)據(jù)圖中，比如不同國(guó)家、不同企業(yè)、不同個(gè)體分類展示，每個(gè)類目沒(méi)有固定的順序。
當(dāng)然，你必須得給每個(gè)類目一種專屬的顏色，不然重復(fù)了或者顏色太接近就分不清了。
實(shí)在不行可以給同一種顏色調(diào)整明度和飽和度，比如紅色有暗紅色、大紅色、粉紅色，不過(guò)，最好是同一種色系之間有某種聯(lián)系，比如淺色是以日為單位，深色是以周圍單位。
或者，用最簡(jiǎn)單粗暴的方式，把數(shù)目太小的那些類目打包起來(lái)，命名為“其它”。
順序調(diào)色板
如果你的類目是按照一定順序排列的，或者就是數(shù)字，那么可用順序調(diào)色板，用顏色的深淺表示數(shù)據(jù)。
比如可以用比較淺的顏色表示比較小的數(shù)字，用比較深的顏色表示比較大的數(shù)字。
分散調(diào)色板
分散調(diào)色板更像是兩個(gè)順序調(diào)色板拼起來(lái)一樣，只不過(guò)區(qū)別是顏色較暗淡的放在中間部分，兩邊各選擇明亮的顏色。
這樣做的意義在于，中間暗淡的部分可以用作中心值或者參考值，比如用藍(lán)色表示正數(shù)，用橙色表示負(fù)數(shù)，中間的灰色則是0；或者用藍(lán)色表示正面，用橙色表示負(fù)面，用灰色表示中立。
重點(diǎn)避坑指南
掌握了方法，還要注意規(guī)避一些問(wèn)題。
不要亂用顏色
如果你需要在許多個(gè)類目中強(qiáng)調(diào)個(gè)別幾個(gè)，那就在顏色上加以區(qū)分。
比如在這張圖里，如果你只想強(qiáng)調(diào)Cobras和Bulls兩個(gè)類目，那就不要把所有類目都加上顏色，可以選擇把其他設(shè)計(jì)成灰色，給這兩個(gè)類目加上顏色。
系列配色保持一致
如果你的整份文件里包含很多圖表，那么在不同的圖表中，同一個(gè)類目最好用同一種顏色。
這樣當(dāng)你的讀者從頭到尾往下看的時(shí)候，不會(huì)因?yàn)轭伾复哪繕?biāo)變了而感到懵逼。
顏色，是有意義的
另外，在不同情況下，顏色是有不同意義的，比如我們做一個(gè)阿里和騰訊對(duì)比的圖，那么用橙色指代阿里，藍(lán)色指代騰訊就非常合適了，因?yàn)樗麄儽旧淼膌ogo就是這兩個(gè)顏色。再比如，公司內(nèi)部的文件，可以用自己公司的品牌色來(lái)作圖。
而在不同國(guó)家不同文化中，同一個(gè)顏色的意義也是不同的，比如大紅色，在我國(guó)往往給人一種過(guò)年的感覺(jué)，但在一些西方國(guó)家則可能意味著熱情，也可能意味著危險(xiǎn)。所以，配色的時(shí)候考慮一下你的受眾。
另外非常重要的一點(diǎn)是：
不要用熒光色！
不要用熒光色！
不要用熒光色！
這些高亮度高飽和度的顏色，只會(huì)讓你的讀者感到亮瞎了。
甚至，在必要的時(shí)候用灰色展示非重點(diǎn)數(shù)據(jù)，也可以將重點(diǎn)數(shù)據(jù)展示的更清晰。
對(duì)色盲友好一點(diǎn)
另外，你總會(huì)遇到色盲人群，其中紅綠色盲最多，所以，在設(shè)置顏色的時(shí)候，除了調(diào)整色相之外，可以稍微調(diào)整一下明度和飽和度，這樣他們也可以分得清不同顏色代指的類目。
或者，你可以干脆用色盲模擬器，來(lái)看看你的配色能否被色盲人群分辨出來(lái)：
https://www.color-blindness.com/coblis-color-blindness-simulator/
配色工具
最后，這里有一些在線配色工具可供選用。
ColorBrewer
這個(gè)工具的配色非常經(jīng)典，幾乎就是office里的默認(rèn)配色。
http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3
Data Color Picker
用于生成兩種顏色的漸變，可以自由選擇需要多少種顏色過(guò)渡。
https://learnui.design/tools/data-color-picker.html
Chroma.js Color Palette Helper
可以制作順序調(diào)色板或者發(fā)散調(diào)色板，根據(jù)不同需要調(diào)整調(diào)色板的漸變過(guò)程。
https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1
Color Thief
我們知道許多自然情景中的顏色都是讓人感到舒服的配色，這款工具就可以幫你把照片中的顏色提取出來(lái)。
https://lokeshdhakar.com/projects/color-thief/
Viz Palette
對(duì)色盲非常友好的調(diào)色工具。
https://projects.susielu.com/viz-palette
傳送門(mén)
How to Choose Colors for Your Data Visualizations
聯(lián)系客服
