數據可視化配色指南:三大配色方法,做出諮詢報告一樣的圖表

2020-12-04 量子位

作者 Michael Yi伊瓢 編譯量子位 出品 | 公眾號 QbitAI

做數據圖表的時候，只會用Excel裡的系統默認顏色？

別別別，大家都用默認配色，千篇一律，毫無特點。

可是學習色彩設計，又是十分費工夫的一件事，不僅要搞明白RGB、CMYK等各種顏色體系，搞懂各種配色方法，重點是還要看大量的案例，培養良好的審美觀，防止自己做出來的東西辣眼睛……

不如我們來「一文學會」系列吧，這篇Michael Yi發在Medium上的文章，就簡單清晰的介紹了三種數據可視化中的配色方法，讓你的圖表看起來清晰、翔實、用戶體驗友好，就像諮詢公司的報告一樣專業。

另外，還有不少實用技巧和工具~

三種配色方法

根據數據的不同類型，有三種不同的調色方法。

定性調色板

定性調色板主要用在分類展示的數據圖中，比如不同國家、不同企業、不同個體分類展示，每個類目沒有固定的順序。

當然，你必須得給每個類目一種專屬的顏色，不然重複了或者顏色太接近就分不清了。

實在不行可以給同一種顏色調整明度和飽和度，比如紅色有暗紅色、大紅色、粉紅色，不過，最好是同一種色系之間有某種聯繫，比如淺色是以日為單位，深色是以周圍單位。

或者，用最簡單粗暴的方式，把數目太小的那些類目打包起來，命名為「其它」。

順序調色板

如果你的類目是按照一定順序排列的，或者就是數字，那麼可用順序調色板，用顏色的深淺表示數據。

比如可以用比較淺的顏色表示比較小的數字，用比較深的顏色表示比較大的數字。

分散調色板

分散調色板更像是兩個順序調色板拼起來一樣，只不過區別是顏色較暗淡的放在中間部分，兩邊各選擇明亮的顏色。

這樣做的意義在於，中間暗淡的部分可以用作中心值或者參考值，比如用藍色表示正數，用橙色表示負數，中間的灰色則是0；或者用藍色表示正面，用橙色表示負面，用灰色表示中立。

重點避坑指南

掌握了方法，還要注意規避一些問題。

不要亂用顏色

如果你需要在許多個類目中強調個別幾個，那就在顏色上加以區分。

比如在這張圖裡，如果你只想強調Cobras和Bulls兩個類目，那就不要把所有類目都加上顏色，可以選擇把其他設計成灰色，給這兩個類目加上顏色。

系列配色保持一致

如果你的整份文件裡包含很多圖表，那麼在不同的圖表中，同一個類目最好用同一種顏色。

這樣當你的讀者從頭到尾往下看的時候，不會因為顏色所指代的目標變了而感到懵逼。

顏色，是有意義的

另外，在不同情況下，顏色是有不同意義的，比如我們做一個阿里和騰訊對比的圖，那麼用橙色指代阿里，藍色指代騰訊就非常合適了，因為他們本身的logo就是這兩個顏色。再比如，公司內部的文件，可以用自己公司的品牌色來作圖。

而在不同國家不同文化中，同一個顏色的意義也是不同的，比如大紅色，在我國往往給人一種過年的感覺，但在一些西方國家則可能意味著熱情，也可能意味著危險。所以，配色的時候考慮一下你的受眾。

另外非常重要的一點是：

不要用螢光色！不要用螢光色！不要用螢光色！

這些高亮度高飽和度的顏色，只會讓你的讀者感到亮瞎了。

甚至，在必要的時候用灰色展示非重點數據，也可以將重點數據展示的更清晰。

對色盲友好一點

另外，你總會遇到色盲人群，其中紅綠色盲最多，所以，在設置顏色的時候，除了調整色相之外，可以稍微調整一下明度和飽和度，這樣他們也可以分得清不同顏色代指的類目。

或者，你可以乾脆用色盲模擬器，來看看你的配色能否被色盲人群分辨出來：

https://www.color-blindness.com/coblis-color-blindness-simulator/

配色工具

最後，這裡有一些在線配色工具可供選用。

ColorBrewer

這個工具的配色非常經典，幾乎就是office裡的默認配色。

http://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3

Data Color Picker

用於生成兩種顏色的漸變，可以自由選擇需要多少種顏色過渡。

https://learnui.design/tools/data-color-picker.html

Chroma.js Color Palette Helper

可以製作順序調色板或者發散調色板，根據不同需要調整調色板的漸變過程。

https://vis4.net/palettes/#/9|s|00429d,96ffea,ffffe0|ffffe0,ff005e,93003a|1|1

Color Thief

我們知道許多自然情景中的顏色都是讓人感到舒服的配色，這款工具就可以幫你把照片中的顏色提取出來。

https://lokeshdhakar.com/projects/color-thief/

Viz Palette

對色盲非常友好的調色工具。

https://projects.susielu.com/viz-palette

傳送門

How to Choose Colors for Your Data Visualizations作者：Michael Yihttps://medium.com/nightingale/how-to-choose-the-colors-for-your-data-visualizations-50b2557fa335

相關焦點

  • 數據圖表可視化的配色一致性原則
    在論證中，顏色的使用應該基於數據，而不是個人偏好或品牌顏色。接下來我們使用數據分析系統DataFocus所製作的圖表來進行相應的演示。因此，即使我們對同一指標進行不同尺寸的數據可視化分析，我們也建議分別對銷售和退貨金額使用相同的顏色系統。例如，對於顏色匹配，銷售額應為黃色，付款金額為藍色。在遵循指示器顏色一致性顏色匹配原理之後，用戶可以根據顏色區別快速理解當前數據可視化圖表所表示的指示符的含義。
  • 數據可視化圖表怎麼做才好看?
    可視化技術仿佛有一種化平凡為非凡的魔力，冷冰冰的數據，經過可視化技術的加工，便酒麴入甕般幻化成視覺的盛宴，炫酷的、繽紛的、簡約的、繁複的……數據之美被展現的淋漓盡致。複雜的比如這種：簡單的比如而我們日常使用Excel或者PPT畫圖，一般是這種千篇一律的柱形圖和折線圖，還有那一成不變的配色如何做出高大上的圖表呢？
  • PPT數據圖表自定義配色,簡潔清新,可直接套用
    配色是設計PPT中需要考慮的重要因素，很多小白在設計時，不能很好的配色，結果出來的成品五顏六色，讓人看起來眼花繚亂，而一份好的配色方案則能讓你的PPT大放光彩，不僅看起簡潔大方，還有高大上的風範。上圖的數據圖表中以綠色為主色調，簡潔明了。
  • 大公司都是怎麼做數據可視化規範的
    如何從中啟發來構建自己的數據可視化設計指南？企業或組織進行數據可視化時，需要用數據可視化設計指南來規範信息表示形式。通常包括是什麼（圖表的類型有哪些？）、為什麼（如為什麼使用這個顏色？）和怎麼做（如用什麼工具設計？）。如果涉及到一些設計工具，如Excel、R、D3.js或Tableau，可視化指南還會提供一個模板來演示如何應用。
  • 網際網路人要了解的數據可視化 —— 基礎篇
    所以這也促使我開啟了這個系列《網際網路人需要了解的數據可視化》，希望能夠給大家帶來一些不一樣的內容，為大家梳理一個完整的數據可視化框架。今天帶來的就是這個系列的第一篇，數據可視化的概念以及數據可視化設計的基本準則。最近一直在做國際外包，時間非常的零散，而寫邏輯性強的文章又非常耗費精力。所以從開題到現在，用了將近2個月的時間才將這篇文章徹底收尾。
  • 手把手教你做一個好色之「圖」 | 圖表家族#16
    這一期，我們就來學習如何在數據可視化的過程中正確使用配色，做一個好色之「圖」。　　巧借它山之「色」　　　　圖片來源：visually capitalist　　數據可視化過程中顏色的運用，其重要性不言而喻。可以說，配色是改變圖表「顏值」最快捷有效的方式。
  • 一分鐘搞定PPT配色丨附24個PPT配色網站
    各位親愛的大寶貝兒們~今天要分享的是「如何快速搞定PPT配色」。作為一個隨意派的PPTer，雖然很少套模板，但還是會使用同一套配色方案和同款字體維持整個PPT的統一性。很多PPTer都糾結如何配置顏色，尤其在給圖表配色的時候。
  • 用DataFocus將Excel數據繪製圖表後的編輯與美化
    今天，我們繼續來看下，用DataFocus將Excel數據繪製成所需圖表後，如何進行圖表的編輯與美化。下面以柱狀圖為例，探尋一些常見的圖表配置。 數據列的隨時添加 當需要對數據源表中數據進行計算並展示在圖表中時，可以製作公式列，也可以直接在搜索框中使用公式和源列名進行數據計算。
  • 可視化工具不知道怎麼選?深度評測5大Python數據可視化工具
    作者 | 劉早起來源 | 早起Python（ID: zaoqi-python）相信很多讀者學習Python就是希望作出各種酷炫的可視化圖表，當然你一定會聽說過Matplotlib、Pyecharts、Seaborn、Plotly、Bokeh這五大工具，本文就將通過真實繪圖來深度評測這五個Python數據可視化的庫，看看到底這幾種工具各有什麼優缺點
  • 數據可視化之旅(三):數據圖表的選擇(中)
    作者 | Destiny 來源 | 木東居士 0x00 前言數據圖表的選擇（上），分享了「時序數據」和「比例數據」的可視化圖表方案。不同的數據類型、不同的闡述目的，決定了數據可視化展現形式的差異。因此，今天這篇文章，主要是分享兩類不同的可視化目的及其可選擇的圖表形式。「對比型數據」：對比兩組或兩組以上數據的差異。
  • 這十個網際網路巨頭的網站配色數據拿去!
    在網際網路上，一個好的網頁配色能叫人眼前一亮，甚至產生極大的品牌效應，好比「阿里橙」、「鏈家綠」等等。來自美國的一位設計師Paul Hebert爬取了全球前10大網站的網頁配色數據，發現了一些有趣的現象： 哪種顏色最受歡迎？在潛移默化中，這些熱門網站又向你灌輸了怎樣的用色傾向呢？
  • 美院資深設計師借用圖撲案例,淺談數據時代的可視化設計
    小結結合情感打造二維設計美感上篇我們講到了《可視化設計-數據時代的美味製造者（上篇）》，分析完了邏輯性的可視化概念與設計流程。接下來讓我們開始具體的講解可視化設計進行中的設計方法。首先，想要設計出一個好看的可視化大屏，藝術性是必不可少的。
  • 優秀的數據可視化,原來是這樣做的!
    大數據時代，數據驅動決策。處理不好龐大、複雜的數據，其價值將大打折扣。可以想像一本沒有圖片的教科書。沒有圖表、圖形或是帶有箭頭和標籤的插圖或流程圖，那麼這門學科將變得更加難以理解。人類天生就是視覺動物，而視覺效果對於分析數據、傳達實驗結果甚至做出驚人的發現至關重要。
  • B端互動設計——數據可視化圖表
    因此掌握數據可視化能力是設計師必不可少的一個技能，然而目前國內網際網路對於數據的教學不夠全面，這讓很多B端的設計師很苦惱；所以今天我結合自己的工作經驗和大家分享一下——「數據可視化之圖表設計」，為大家梳理一套完整的數據可視化的框架，以及關於可視化設計的基本準則和規範。　　幫助大家理解什麼樣的數據對應什麼樣的圖標，了解顏色的意義，知道數據排版的要點。
  • 數據可視化圖表工具有哪些圖表類型?
    每到月度、季度、年度總結的時候，用到最多的、最有說服力的就是數據了。讓數據說話，擺事實、講道理才能贏得上級的肯定。 大家都聽過「數據可視化」，也知道要用直觀的圖表讓受眾理解複雜多變的數據。
  • 如何用pandas更快地進行數據可視化?
    Pandas更快的進行數據可視化！更多圖表，一覽Pandas強大下面我們繼續看看，一行pandas代碼能做出哪些常用的圖！只需要設置subplots=True就行了，子圖位置、大小調整方式和Matplotlib設置一樣！
  • UI設計中配色設計攻略
    不知道有沒有小夥伴跟我一樣在做頁面配色時會很痛苦呢，很多時候都是憑感覺去配色。最近研究了一下配色方法，今天我就針對UI設計中配色設計攻略進行簡單的說明，希望能幫助到一部分小夥伴。有個有趣的研究成果 —— 「七秒鐘定律」：人們在挑選商品和服務時 ，只需要 7 秒鐘就可以確定是否感興趣，而在這短暫的 7 秒鐘內，色彩的作用佔到了 67%。
  • 最全面的UI 配色指南(附大量實例)
    如何選擇配色方案/適合上手的配色工具/如何利用色彩提高可讀性/為色盲用戶配色等多個小節，涵蓋了大部分UI 配色的知識點，同時附有大量實例，強烈推薦閱讀。就重要性而言，在APP 應用中色彩元素扮演的角色僅次於功能。 人與計算機的互動主要基於與圖形用戶界面元素的交互，而色彩在該交互中起著關鍵作用。
  • 不知道用什麼圖表展示數據?看這份圖表選擇指南就夠了
    我們做數據分析的有句話叫「一圖勝千言」，圖表是展現數據的一種重要展現形式，選對了圖表就能幫助我們更加快速、直觀的傳達數據信息。但是圖表的種類繁多，應用場景不一，所以很多新手在進行數據可視化時，經常不知道什麼樣的圖表來展示自己的數據才是最合適的，今天就給大家分享圖表選擇的正確流程和方法，幫助大家選擇正確圖表圖表設計痛點什麼才是好的圖表？
  • 數據可視化,職場數據分析都需要哪些常用的圖表?
    2020-12-28 14:35:08　來源: 季札之初使 舉報 　　數據可視化是為了使得數據更高效的反應數據情況