ray的數據新聞學習日記（九）：可視化過程中的配色問題

作為一個木有什麼審美和色彩感的我來說，配色簡直是可視化過程中無法擺脫的噩夢：要不然就是，各種顏色一頓亂用，把原本有意義的各種圖表變成了上不了檯面的「洗剪吹」；要不然就是藍色、紅色、紅色、藍色的循環使用，想加個別的顏色，都會心頭一顫，不回又出什麼錯吧。

為了，擺脫這個噩夢，近段時間我悉心研究了各種配色的小技巧，覺得還是有些幫助，今天就和大家分享一下。

第一、三大配色方案。

1、漸變色系(Sequential schemes)

按順序漸變，淺顏色表示低值，深顏色表示高值。適合於從低到高有序變化的數據。

2、分裂色系(Diverging schemes)

中間段的臨界值用淺色表示，兩端極值用深色表示，並用對比色調區分兩端值。在數據序列的中間段比較有意義的時候用這種配色方案更合適，比如中間值是均值、中值或零的時候。

3、定性色系(Qualitative schemes)

適合用來表示名詞或分類數據，能夠最大程度地顯示不同類之間的差別。比如用於各人種分布，植被分類等。

第二、在一個可視化系列中，你需要多少種顏色？

在我們決定了使用哪一種配色方案後，接下啦，我們需要決定使用多少顏色。這裡的顏色指的是紅色、藍色、黑色這一類型的主要顏色。

使用不同顏色的主要目的是為了創造出視覺上的對比。而「對比」這一元素在可視化中又是非常重要的，對比可以幫助讀者去判斷不同數據數據的差別。

第三、如何選擇這些顏色？

有的時候我們選擇使用的顏色是為了美觀，而更多時候我們需要考慮的是語義。

何為「語義」，即色彩與其代表的數據能夠產生的語義共鳴。

舉個簡單的例子，假設有一個用來比較蔬菜價格的條形圖，用綠色代表菠菜，用黃色代表玉米，這與我們對事物和顏色的認知是一致的若轉換顏色黃色代表菠菜而綠色代表玉米容易產生混淆。

第四、顏色的亮度以及深淺問題。

可以這麼說，顏色的亮度和深淺直接決定著讀者注意力的先後順序。

比如說：當我們看到下圖時，你首先關注的是哪一個色塊，最後是哪一個？

老實說，對於這張圖有的人可能會先看紅色，而有的會先看藍色。因為這些顏色在深淺上是相等的，所以對於讀者注意力的引導就是隨機的。

那麼我們再來看這一張圖：

這一張圖和上一張的區別就在於，有綠色、也有淺綠色；有黃色，也有淺黃色；以此類推。

在這張圖中，我們的注意力往往是先看深色、再看淺色。

第五、顏色的排列問題。

在確定好所有需要使用的顏色後，你以為就大功告成了。

其實不然，接下啦，我們要思考如何排列這些顏色。這裡就涉及到了一個「識別度」的問題。現在我們來看下面這幅圖。

兩幅圖採用了一模一樣的顏色，但產生了不同的效果。

如果選中的顏色在顏色空間中非常接近例如，比如綠色和黃色。當它們緊臨彼此時，仍然會讓人覺得不易區分，所以最好不要同時用兩種感覺類似的顏色。

同樣的道理，在下面這幅圖中，你覺得左邊還是右邊更容易提取信息呢？

福利區：這些小工具可以幫助你找到完美的配色。（有些工具可能需要科學上網）

1、Colorpicker for data 適合於漸變配色：通過拖動頁面中的兩個球，來獲得兩球之間的梯度色差。

2、Color Hunt 這個是我最喜歡的一個網站。裡面有很多搭配好好了的顏色，用滑鼠掃過色塊就會顯示其顏色編碼，簡直不能更好用。

3、Adobe Color CC

可以自己調顏色、也可以瀏覽網站中搭配好的顏色。當然，Adobe Color CC還有一個特別牛逼的的功能：通過攝像頭的實時拍攝，它會自動識別出當前圖像中幾個主要的配色組合。

4、Color Advice for Maps：適合於地圖可視乎。