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