數(shù)據(jù)分析師都會(huì)經(jīng)歷做數(shù)據(jù)圖表的過(guò)程，很多人在呈現(xiàn)可視化圖表的時(shí)候，會(huì)注意到有配色這個(gè)事兒，數(shù)獵哥想告訴你，注意到這一點(diǎn)的你已經(jīng)勝過(guò)很多人了。
但其實(shí)，配色不僅僅有讓人愉悅工作的功能，還承載著數(shù)據(jù)本身的意義，今天DataHunter數(shù)獵哥就給你帶來(lái)一堂“數(shù)據(jù)色彩學(xué)”。擦亮眼睛仔細(xì)體驗(yàn)吧?。ㄒ韵聢D表，均使用 Data Analytics 軟件制作）。
一、這兩套可視化圖表，你覺(jué)得哪個(gè)好看？
A方案
B方案
互動(dòng)揭曉： 選擇其實(shí)因人而異的。從功能上，數(shù)獵哥認(rèn)為B方案是更可取的。因?yàn)椴煌臄?shù)據(jù)因素有不同的意義，而顏色的“色相，亮度，飽和度”會(huì)給人不同的認(rèn)識(shí)體驗(yàn)。
二、為什么配色對(duì)數(shù)據(jù)可視化如此重要？
數(shù)據(jù)可視化可以定義為用形狀表達(dá)數(shù)字。有效的可視化有助于過(guò)濾不必要的信息干擾，方便用戶對(duì)數(shù)據(jù)有更深入的理解，進(jìn)行深層次高效率的信息挖掘。
但實(shí)際工作中，我們的可視化圖表總被人吐槽不好看，分析背后的原因，不得不提到的就是圖表的配色。我們往往都有自己喜愛(ài)的顏色，可以按照自己的想法去配置，但卻忽略了在愉悅他人的同時(shí)，還肩負(fù)著更好的闡述數(shù)據(jù)的重任。
例如：DataHunter為零售企業(yè)制作的“庫(kù)存觀察”
但不論這些形狀是哪種類型，例如面積、線條、點(diǎn)等，他們都需要有配色。有時(shí)配色只起到使得形狀能被看見(jiàn)的功能；有時(shí)它們起到顯示類別或者區(qū)分的功能；除此以外，配色還會(huì)影響我們的理解力。
比如色彩會(huì)提升我們想表達(dá)的內(nèi)容的效果，大量的心理學(xué)研究結(jié)果也支持了這一觀點(diǎn)，生活中也有很多類似的例子，例如孩子充滿想象力的填色常常使大人分不清他們到底畫(huà)了什么，再例如色彩更漂亮的水果會(huì)給我們它會(huì)更好吃的感官。配色和數(shù)據(jù)是相輔相成的，配色需要在尊重?cái)?shù)據(jù)的基礎(chǔ)上，幫助數(shù)據(jù)“傳情達(dá)意”；同時(shí)，數(shù)據(jù)反過(guò)來(lái)又為配色提供優(yōu)化的反饋意見(jiàn)。
三、數(shù)據(jù)可視化圖表配色，常見(jiàn)誤區(qū)
1.沒(méi)有考慮展示的場(chǎng)景
好的信息圖表可視化設(shè)計(jì)是將圖形和視覺(jué)元素以一種可以吸引讀者注意力的方式融合在一起。并不是所有的色彩方案都適用于可視化圖表，我們需要考慮它們?cè)诟鞣N其他場(chǎng)景下的目的和需求。
比如可視化圖表常用于需要展示數(shù)據(jù)分析結(jié)果的場(chǎng)景中，如數(shù)據(jù)監(jiān)控、分析、個(gè)人工作臺(tái)等，此時(shí)多面向B端用戶：如數(shù)據(jù)分析師、運(yùn)營(yíng)人員、產(chǎn)品經(jīng)理等。如果按使用場(chǎng)景維度分，大致可分為圖表閱讀者、圖表制作者兩類。
例如：DataHunter為網(wǎng)站制作的“促銷活動(dòng)分析”
閱讀者通過(guò)圖表監(jiān)測(cè)產(chǎn)品的健康度，或查看用戶訪問(wèn)趨勢(shì)等用戶行為數(shù)據(jù)，幫助企業(yè)的業(yè)務(wù)進(jìn)行決策；而圖表制作者會(huì)對(duì)數(shù)據(jù)進(jìn)行加工處理幫助業(yè)務(wù)完成數(shù)據(jù)分析、報(bào)表搭建，如Data Analytics、Tableau、Power BI等都是數(shù)據(jù)分析型工具。
2.沒(méi)有應(yīng)用基本的配色原理
這里主要集中在三個(gè)方面：辨識(shí)度低、色彩不夠多、難以區(qū)分。
許多配色方案不僅由于顏色的明度差異不大，其實(shí)它們?cè)趧?chuàng)造時(shí)就沒(méi)有考慮過(guò)辨識(shí)度。Flat UI 配色是最廣泛使用的配色之一，原因顯而易見(jiàn)：它非常優(yōu)秀。但是，正如它名字所述，這是為界面而設(shè)計(jì)的。使用Flat UI配色的話，色盲者就難以辨認(rèn)出數(shù)據(jù)圖像。
另一個(gè)問(wèn)題是，許多現(xiàn)有配色方案沒(méi)有足夠的顏色；最后還有一些配色方案看起來(lái)像是漸變，但它們明度差異通常不大，其中許多顏色很容易變得無(wú)法區(qū)分。
四、可視化圖表配色的基本技巧
我們通常會(huì)將顏色分為色相、明度和飽和度三個(gè)屬性，這是我們配色的基礎(chǔ)。色相不具備明顯的順序性，可以用作定義不同屬性的數(shù)據(jù)。而明度和飽和度是具有一定的順序性的，因此在數(shù)據(jù)可視化的過(guò)程中，可以被當(dāng)做是一種定量的屬性來(lái)應(yīng)用。
1.單一屬性數(shù)據(jù)
在圖表只展示單一屬性的情況下，使用單色就能表達(dá)數(shù)據(jù)意義了，這時(shí)建議不要使用多色。除此以外，還可以通過(guò)對(duì)明度和飽和度的變化，來(lái)展示相同屬性數(shù)據(jù)的不同數(shù)值，這需要注意明度和飽和度的差異要足夠大，以確保配色容易被區(qū)分。
另外，明度差異需要全局考慮。選擇一種單色系的配色，并且測(cè)試它在紅色盲、綠色盲與灰度模式下的表現(xiàn)。你就能迅速了解這個(gè)配色的辨識(shí)度水平。但是，有一組明度跨度大的配色還不夠，配色越多樣，用戶越容易將數(shù)據(jù)與圖像聯(lián)系起來(lái)。如果能善加利用色調(diào)的變化，就能使非色盲用戶更加輕松。對(duì)于明度與色調(diào)，跨度越大，就能承載越多的數(shù)據(jù)。
2.多種屬性數(shù)據(jù)
對(duì)于不同屬性的數(shù)據(jù)，這時(shí)建議用不同色相來(lái)區(qū)分不同屬性。如果能夠準(zhǔn)確的使用不同的色相，并且配合明度與飽和度的變化，可以讓用戶在使用過(guò)程中的色覺(jué)感更加輕松。
明度和飽和度可以編碼數(shù)據(jù)的順序或數(shù)量特征。通常我們只會(huì)在特定圖表內(nèi)使用到多亮度或多飽和度，例如在一個(gè)“熱力圖”中，用不同亮度的紅色來(lái)表示不同的氣溫測(cè)量值。
這里同時(shí)需要注意的是選擇多色時(shí)，一定要選擇容易區(qū)分的色相。有一些配色方案看起來(lái)像是漸變，但是因?yàn)椴町惒淮?，在改變其明度與飽和度的過(guò)程中，容易變得無(wú)法區(qū)分：
人們?cè)诓贿B續(xù)區(qū)域的情況下通?？梢苑直?~12種不同色相，以及有限個(gè)可辨亮度層次。過(guò)多的顏色使用將對(duì)人類的視覺(jué)感知產(chǎn)生困擾。建議謹(jǐn)慎選擇顏色的數(shù)量。
最后在考慮圖表中的顏色數(shù)量時(shí)，需要將背景色和圖例顏色考慮進(jìn)去，即顯示區(qū)域所有顏色的總和。如果著色區(qū)域比較小，由于視覺(jué)通道的相互影響，可分辨的數(shù)量將相應(yīng)有所下降。
3.背景色
圖表設(shè)計(jì)中的顏色使用必須統(tǒng)一，背景顏色不要選取與圖表主體內(nèi)容相同或相近的顏色。在一個(gè)精心設(shè)計(jì)的圖表中，背景顏色既要能良好地襯托圖表主體，又不產(chǎn)生喧賓奪主的效果。通常我們較多地使用白色、淺灰色作為背景顏色，有些情況下也會(huì)使用黑色。
例如：Data Analytics制作的“客戶RFM群體分析”
如果需要某種顏色作為背景，建議使用飽和度和明度較低的主題色，這樣不會(huì)影響數(shù)據(jù)的可識(shí)別性。
4.透明度
透明度是與色相、亮度、飽和度緊密相關(guān)的另一個(gè)視覺(jué)通道。由于透明度編碼本身受亮度和飽和度編碼的強(qiáng)烈影響，顏色之間的跨度太小，數(shù)據(jù)不易區(qū)分，建議不要同時(shí)使用這三個(gè)視覺(jué)通道。但是它可以和色相編碼一起使用。
在圖表中出現(xiàn)很多層次堆疊在一起的時(shí)候，可以使用透明度，使得每一個(gè)數(shù)據(jù)都能夠在背景層之上良好地顯示，并且不會(huì)互相干擾。
5.漸變色
漸變配色結(jié)合不同色調(diào)，對(duì)兩者都最好。無(wú)論你需要2種顏色還是10種，漸變中都能提取出這些顏色，讓可視化圖表感覺(jué)自然，同時(shí)保有足夠的色調(diào)與明度差異。
改用漸變的思維并不容易，不過(guò)有個(gè)好方法，可以在Photoshop中拉輔助線到斷點(diǎn)位置，與數(shù)據(jù)的數(shù)量對(duì)應(yīng)上，然后持續(xù)對(duì)漸變進(jìn)行測(cè)試與調(diào)整。以下是我們?cè)谛拚凉u變時(shí)產(chǎn)生的屏幕截圖。
可以看到，我們將配色表緊挨著頂部的灰度漸變，調(diào)整漸變疊加(之后就能得到精確的漸變色值)，然后從那些斷點(diǎn)處選取顏色，測(cè)試配色在實(shí)際運(yùn)用中的效果。
6.仿照自然的顏色
設(shè)計(jì)師都知道一個(gè)小秘密，對(duì)于理性派們而言這似乎不符合常識(shí)：并非所有顏色都是均等的。從純數(shù)學(xué)的角度來(lái)看，淡紫到深黃的過(guò)渡，與淡黃到深紫的過(guò)渡，感覺(jué)大概相似。但我們?cè)谙旅婵梢钥吹?，前者感覺(jué)很自然，后者則不是。
這是由于我們已經(jīng)習(xí)慣于那些長(zhǎng)期存在于自然界中的漸變。在華麗的日落中，我們就能看到明黃色向深紫色的漸變，但卻沒(méi)有哪里能看到淡紫色向深黃色的過(guò)渡。類似的，還有淺綠色到藏藍(lán)色、鵝黃色到深綠色、棕紅色到藍(lán)灰色，等等。由于我總能看到這些自然的漸變，所以當(dāng)我們?cè)诳梢暬瘓D表中看到對(duì)應(yīng)的配色時(shí)，會(huì)感覺(jué)熟悉和愉快。
五、實(shí)踐課堂：如何進(jìn)行配色？
數(shù)據(jù)可視化的核心需求是更好的闡釋數(shù)據(jù)，其中的色彩理論比起圖形語(yǔ)法更為感性、藝術(shù)。但是數(shù)據(jù)可視化是理性的藝術(shù)，這就要求理智的找到符合用戶使用場(chǎng)景的配色方案。
因此，基于不同場(chǎng)景下的不同用戶，對(duì)色彩核心訴求歸納為以下三點(diǎn)：①色彩需豐富，滿足復(fù)雜數(shù)據(jù)場(chǎng)景下的展示；②因需長(zhǎng)時(shí)間閱讀，色彩盡可能柔和不刺眼；③分類色彩需不具傾向性，清晰可辨且和諧。
1.大屏配色
數(shù)據(jù)可視化的設(shè)計(jì)常用于大屏展示，由于背景面積過(guò)大，在大屏設(shè)備中普遍用深色作為背景色，以減少屏幕拖尾，觀眾在視覺(jué)上也不會(huì)覺(jué)得刺眼。另外深色背景更能聚焦視覺(jué)，利用色調(diào)與明度的變化，能夠保證可視化圖表的清晰辨識(shí)度，便于突出內(nèi)容，最后也方便做出一些流光、粒子等酷炫的效果。
利用Data MAX 軟件制作的可視化大屏
總的來(lái)說(shuō)大屏的整體背景深色系雖然選擇搭配很多，不過(guò)百搭的色系還是推薦深藍(lán)色系。
2.中小屏配色
中小屏幕背景色選擇范圍就比較廣，淺色、彩色、深色均可以做出很好的設(shè)計(jì)。相比之下，淺色背景更適合展示大量的數(shù)據(jù)信息，因?yàn)樵跍\色底上數(shù)據(jù)圖表的識(shí)別度比較高。而深色、彩色背景更適合渲染簡(jiǎn)單的數(shù)據(jù)，用于烘托氣氛。
3.圖表配色
在圖表的顏色運(yùn)用上，色彩是最直接的信息表達(dá)的方式，往往比圖形和文字更加直觀的傳遞信息，不同顏色的的組合也能體現(xiàn)數(shù)據(jù)的邏輯關(guān)系。顏色的表示方法有很多種，如RGB、CMYK等，在可視化設(shè)計(jì)中，顏色作為用于數(shù)據(jù)編碼的視覺(jué)通道，HSV的顏色表示方式更加符合人類感知方式，同時(shí)也更加適合展示數(shù)據(jù)。
（1）色彩辨識(shí)度
如前文中所說(shuō)，要確保配色非常容易辨識(shí)與區(qū)分，對(duì)于使用單一色相配色，明度差異需要全局考慮，明度跨度一定要夠大才能更清晰的展示數(shù)據(jù)。明度跨度是否合適，可以通過(guò)在灰度模式下配色的辨識(shí)度來(lái)判斷。
（2）色彩跨度
多色相配色在數(shù)據(jù)可視化中是相當(dāng)常見(jiàn)的，多色相配色使用戶容易將數(shù)據(jù)與圖像聯(lián)系起來(lái)。 如圖所示，當(dāng)需要的顏色較少時(shí)，避免使用相近的色相同類色和相近色。盡量選擇對(duì)比色或互補(bǔ)色，這樣可以使不同屬性數(shù)據(jù)在圖表中展示更加清晰。當(dāng)圖表需要的顏色較多時(shí)，如何讓多種色相的顏色看來(lái)和諧，有2種取色的方法：
①色環(huán)提取法：選擇同一飽和度和明度的不同色調(diào)作為可視化圖表的配色，這樣可以使圖表看起來(lái)協(xié)調(diào)統(tǒng)一。
②漸變色取色法：在取漸變色時(shí)，可以在Photoshop中制作出色相變化的色帶并疊加明度漸變的色帶，獲得明度和色相均變化的色帶。然后根據(jù)數(shù)據(jù)的數(shù)量，拉輔助線到取色點(diǎn)的位置，從斷點(diǎn)處選取顏色，對(duì)漸變進(jìn)行測(cè)試與調(diào)整，測(cè)試配色在實(shí)際運(yùn)用中的效果，選取最優(yōu)的配色。
六、注意事項(xiàng)
1.如果你在制作一些跟工作相關(guān)的材料，選擇配色方案的一個(gè)很好又安全的方法就是遵循公司的品牌顏色方針，這會(huì)加深對(duì)品牌認(rèn)知；
2.當(dāng)然也可以結(jié)合內(nèi)容主題來(lái)給你的信息圖表配上最好的顏色。比如，你的信息圖是關(guān)于咖啡的你可以使用咖啡色漸變和它的補(bǔ)充顏色；
3.如果你只在圖表中使用一種顏色，使用同一種色彩，那么相同的變量需使用相同的顏色來(lái)保持一致性，這樣不會(huì)使您的文章過(guò)于花哨；
4.需向讀者解釋各種顏色代表的含義，這時(shí)可以采用圖例的方式解釋代表值或者變量的每個(gè)視覺(jué)標(biāo)記。
七、小結(jié)
由于可視化圖表的特殊屬性，在顏色的選擇上，會(huì)有別于其他的配色方案。在具有清晰辨識(shí)度的同時(shí)，還必須滿足豐富而不凌亂的配色要求，才能更好的表達(dá)數(shù)據(jù)的意義。如果大家覺(jué)得讀完文章，但是自己做圖表還是有困難，就用Data Analytics 新出的多種主題“皮膚”功能。
開(kāi)頭的B方案就是用它制作的，一鍵更換皮膚功能，滿足多終端設(shè)備自適應(yīng)配色需求，幫你大大節(jié)省配色精力，讓你全身心投入工作。
灰藍(lán)版皮膚
亮綠版皮膚
黑色版皮膚
深藍(lán)版皮膚
關(guān)于 DataHunter
DataHunter 是一家專業(yè)的數(shù)據(jù)分析和商業(yè)智能服務(wù)提供商，注冊(cè)于2014年。團(tuán)隊(duì)核心成員來(lái)自 IBM、Oracle、SAP 等知名公司，深耕大數(shù)據(jù)分析領(lǐng)域，具有十余年豐富的企業(yè)服務(wù)經(jīng)驗(yàn)。
DataHunter 旗下核心產(chǎn)品智能數(shù)據(jù)分析平臺(tái) Data Analytics、數(shù)據(jù)大屏設(shè)計(jì)配置工具 Data MAX 已在業(yè)內(nèi)形成自己的獨(dú)特優(yōu)勢(shì)，并在各行業(yè)積累了眾多標(biāo)桿客戶和成功案例。
成立以來(lái)，DataHunter就致力于為客戶提供實(shí)時(shí)、高效、智能的數(shù)據(jù)分析展示解決方案，幫助企業(yè)查看分析數(shù)據(jù)并改進(jìn)業(yè)務(wù)，成為最值得信賴的數(shù)據(jù)業(yè)務(wù)公司。
聯(lián)系客服
