在B端設(shè)計(jì)中，數(shù)據(jù)可視化是必不可少而且非常重要，越來越多的設(shè)計(jì)師需要和數(shù)據(jù)打交道，但是很多設(shè)計(jì)師不懂可視化當(dāng)中不同用途的圖表規(guī)范，只是單純設(shè)計(jì)出好看的數(shù)據(jù)圖表，卻不能給用戶帶來更多的信息和價(jià)值。

因此掌握數(shù)據(jù)可視化能力是設(shè)計(jì)師必不可少的一個(gè)技能，然而目前國內(nèi)互聯(lián)網(wǎng)對于數(shù)據(jù)的教學(xué)不夠全面，這讓很多B端的設(shè)計(jì)師很苦惱，所以今天我結(jié)合自己的工作經(jīng)驗(yàn)和大家分享一下--“數(shù)據(jù)可視化之圖表設(shè)計(jì)”，為大家梳理一套完整的數(shù)據(jù)可視化的框架，以及關(guān)于可視化設(shè)計(jì)的基本準(zhǔn)則和規(guī)范。幫助大家理解什么樣的數(shù)據(jù)對應(yīng)什么樣的圖標(biāo)，了解顏色的意義，知道數(shù)據(jù)排版的要點(diǎn)。

一、基礎(chǔ)概念

將不可見的數(shù)據(jù)轉(zhuǎn)化為可見的圖形和符號，從中發(fā)現(xiàn)規(guī)律和特征，以獲取更多的信息和價(jià)值。

在當(dāng)前互聯(lián)網(wǎng)的時(shí)代下，一頁圖可能對標(biāo)一個(gè)龐大且復(fù)雜的數(shù)據(jù)表格，按照人類本身對圖的記憶遠(yuǎn)大于對抽象文字的記憶，所以我們要學(xué)會(huì)讓數(shù)據(jù)說話，數(shù)據(jù)可視化除了“簡潔直觀”，還可有容易理解和記憶、傳遞信息更豐富的特點(diǎn)。

接下來我們開始思考如何制作數(shù)據(jù)可視化圖標(biāo)？首先規(guī)范的流程是最好的前提，下面的工作流程結(jié)合我自己的經(jīng)驗(yàn)和日常企業(yè)的數(shù)據(jù)分析場景，找到了一個(gè)合適的參考，我們就可以步步為營，避免很多不必要的返工，保證設(shè)計(jì)質(zhì)量和項(xiàng)目進(jìn)度。

二、選定可視化圖表

很多小伙伴在做可視化圖表設(shè)計(jì)過程中，肯定遇到過這樣的困擾，發(fā)現(xiàn)自己做完的圖標(biāo)并未能準(zhǔn)確表達(dá)自己的意圖，也無法傳達(dá)自己的意圖，圖表通常讓用戶看完困惑不已，主要問題出現(xiàn)在分析的維度沒有找準(zhǔn)或定義的比較混亂，面對B端龐大復(fù)雜的圖標(biāo)，同樣的一個(gè)指標(biāo)的數(shù)據(jù)，我們從不同維度分析就會(huì)出現(xiàn)不同結(jié)果。用一句古話來形容：橫看成嶺側(cè)成峰。

國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示，他把數(shù)據(jù)的關(guān)系分成了4種類型，幫助我們?nèi)ミx擇合適的圖表來呈現(xiàn)，我對其進(jìn)行了總結(jié)并美化（如下圖）。

上圖向大家展示了數(shù)據(jù)分析常用的4個(gè)維度，我們在選定數(shù)據(jù)指標(biāo)后，我們需要和數(shù)據(jù)產(chǎn)品經(jīng)理溝通我們核心需求，是我們想通過可視化向用戶傳遞什么價(jià)值信息。上圖引導(dǎo)我們從“聯(lián)系、分布、比較、構(gòu)成”四個(gè)維度更有邏輯的思考這個(gè)問題，我們在進(jìn)行圖表設(shè)計(jì)時(shí)首先進(jìn)行需求的分析，熟悉數(shù)據(jù)并且明確數(shù)據(jù)要展現(xiàn)出來的信息，然后選用合適的圖表來進(jìn)行數(shù)據(jù)的展現(xiàn)。

聯(lián)系：數(shù)據(jù)之間的相關(guān)性

分布：指標(biāo)里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律

比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面

構(gòu)成：指標(biāo)里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何

考慮到日常企業(yè)的數(shù)據(jù)分析場景，圖中有些圖表使用頻率是非常低的。所以我參考了上圖的部分內(nèi)容，對其進(jìn)行了總結(jié)，重新整合成三個(gè)維度

圖表的作用，是幫助我們更好地看懂?dāng)?shù)據(jù)。選擇什么圖表，需要回答的首要問題是『我有什么數(shù)據(jù)，需要用圖表做什么』，而不是 『圖表長成什么樣』 ，根據(jù)數(shù)據(jù)選用合適的圖表展現(xiàn)來把數(shù)據(jù)的信息傳達(dá)給用戶。因此我們從數(shù)據(jù)出發(fā)、熟悉每種圖表的定義、適用場景、優(yōu)缺點(diǎn)，從功能角度對圖表進(jìn)行分類，這樣才能快速選擇合適的圖表。

2.2.1 比較類圖表

（1）柱狀圖

定義：柱狀圖是一種以長方形的長度為變量的統(tǒng)計(jì)圖表。長條圖用來比較兩個(gè)或以上的價(jià)值（不同時(shí)間或者不同條件），只有一個(gè)變量，通常利用于較小的數(shù)據(jù)集分析。

特點(diǎn)：

1、這個(gè)分類不限于地區(qū)、品牌等，可以是一個(gè)時(shí)間周期；

2、數(shù)量控制在5-12條最佳；

使用建議：

1、使用合適的寬度去適配柱條的寬度

當(dāng)柱子太窄時(shí)，用戶的視覺可能會(huì)集中在兩個(gè)柱中間的負(fù)空間，而這里是不承載任何數(shù)據(jù)的。寬度推薦使用在1/2 柱寬到 1 柱寬之間，但也要視情況而定。

2、不推薦采用全圓角

柱形圖可以有適當(dāng)?shù)膱A角，全圓角則有可能歪曲可視化圖表的表達(dá)，用戶可能無法明確是圓心還會(huì)頂點(diǎn)作為峰值。

3、不要使用非水平和豎直的文字標(biāo)注，也不要使用轉(zhuǎn)行

有時(shí)坐標(biāo)軸上的注釋文字會(huì)很多，所以很多人為了妥協(xié)，在小空間內(nèi)顯示出所有的文字標(biāo)注內(nèi)容，而使用傾斜的文本，或者將文本轉(zhuǎn)行處理。

不要用過于復(fù)雜的設(shè)計(jì)形式，數(shù)據(jù)可視化的第一要義是簡單易懂，所以在遇到標(biāo)簽文字過長時(shí)，可以采用將柱狀圖轉(zhuǎn)化為條形圖

（2）條形圖

定義：條形圖是用寬度相同的條形的高度或長短來表示數(shù)據(jù)多少的圖形。條形圖能夠使人們一眼看出各個(gè)數(shù)據(jù)的大小，易于比較數(shù)據(jù)之間的差別。當(dāng)條目較多，如大于12條，移動(dòng)端上的柱狀圖會(huì)顯得擁擠不堪，更適合使用條形圖。

特點(diǎn)：

1、與柱狀圖類似，只是交換了X軸與Y軸位置；

2、多用于豎長的顯示區(qū)域，例如手機(jī)端、大屏的一側(cè)；

3、多用于top排行或分類名稱較長的情況；

4、數(shù)量一般不超過30條，否則易帶來視覺和記憶負(fù)擔(dān)

使用建議：

1、采用有序排列，軸標(biāo)簽右對齊

對多個(gè)數(shù)據(jù)系列排序時(shí)，如果不涉及到日期等特定數(shù)據(jù)，最好能符合一定的邏輯用直觀的方式引導(dǎo)用戶更好的查看數(shù)據(jù)。

可以通過升序或降序排布，例如按照數(shù)量從多到少來對數(shù)據(jù)進(jìn)行排序，也可以按照字母順序等來排布?？傊?，按照邏輯排序可以一定程度上引導(dǎo)人們更好地閱讀數(shù)據(jù)。

2、標(biāo)簽直接顯示在柱體上

條形圖還可以通過省略橫軸和縱軸，并直接在柱子上表明數(shù)值，來降低數(shù)據(jù)墨水比，進(jìn)一步提高信息的獲取效率。

（3）折線圖

定義：用于顯示數(shù)據(jù)在一個(gè)連續(xù)的時(shí)間間隔或者時(shí)間跨度上的變化，它的特點(diǎn)是反映事物隨時(shí)間或有序類別而變化的趨勢。折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律（周期性、螺旋性等）、峰值等特征。

特點(diǎn)：

1、橫軸如果不是表示連續(xù)數(shù)值，折線圖的意義不大

2、數(shù)量一般不少于3條，否則用柱狀圖更合適

使用建議：

1、反映事物隨時(shí)間或有序類別而變化的趨勢

折線圖看的是趨勢，所有不是有序類別的不適合使用折線圖

2、視覺美化

折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減，不能和面積圖累計(jì)的概念混淆，由于折線圖放在界面上的視覺重量很弱，所以我們可以通過添加微漸變加重視覺。

（4）面積圖

定義：面積圖又叫區(qū)域圖。 它是在折線圖的基礎(chǔ)之上形成的, 它將折線圖中折線與自變量坐標(biāo)軸之間的區(qū)域使用顏色或者紋理填充，顏色的填充可以更好的突出趨勢信息，需要注意的是顏色要帶有一定的透明度，透明度可以很好地幫助使用者觀察不同序列之間的重疊關(guān)系，沒有透明度的面積會(huì)導(dǎo)致不同序列之間相互遮蓋，減少可以被觀察到的信息。

使用建議：

1、不要超過7個(gè)序列

當(dāng)數(shù)據(jù)系列過多時(shí)，往往造成用戶難以觀察的痛苦，所以建議使用堆疊面積圖時(shí)數(shù)據(jù)系列最好不要超過7個(gè)。

（5）分組條形圖

分組條形圖屬于條形圖的一種，又叫簇狀條形圖，是一種以不同分組高度相同的長方形的寬度為變量的統(tǒng)計(jì)圖表，每個(gè)分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區(qū)別各個(gè)分類，各個(gè)分組之間需要保持間隔。

特點(diǎn)：

1、適用場景

分組條形圖適用于表達(dá)相同分類不同組別的數(shù)據(jù)，或者相同組別不同分類的數(shù)據(jù)，簡而言之，就是根據(jù)一個(gè)相同變量的不同分組進(jìn)行數(shù)據(jù)表達(dá)。

2、不適用場景

分組條形圖不適合用于表達(dá)分組過多的，數(shù)據(jù)量較大的數(shù)據(jù)，也不適合用于表達(dá)趨勢類的數(shù)據(jù)。

（6）雙向條形圖

定義：雙向柱狀圖又叫正負(fù)條形圖，是使用正向和反向的柱子顯示類別之間的數(shù)值比較，其中分類軸表示需要對比的分類維度，連續(xù)軸代表相應(yīng)的數(shù)值。

（7）玫瑰圖

定義：一種圓形直方圖，使用半徑長短表示數(shù)值大小?？梢栽谝曈X上夸大數(shù)據(jù)之間的差異。

特點(diǎn)：

1、由于面積等于半徑的平方，玫瑰圖會(huì)將數(shù)值之間的差異放大

2、南丁格爾玫瑰圖不能用于表示占比構(gòu)成

3、數(shù)量：一般 不超過30條，否則易帶來視覺和記憶負(fù)擔(dān)

（8）雷達(dá)圖

定義：雷達(dá)圖又稱為蜘蛛網(wǎng)圖、網(wǎng)絡(luò)圖，蜘蛛圖，星圖，是以在同一點(diǎn)開始的軸上顯示的三個(gè)或更多個(gè)變量的二維圖表的形式來顯示多元數(shù)據(jù)的方法，所有這些方面都可以類似地量化，常用于排名、評估、評論等數(shù)據(jù)的展示，比如我們玩王者榮耀中英雄的各項(xiàng)性能指標(biāo)。

特點(diǎn)：

1、指標(biāo)得分接近圓心，說明處于較差狀態(tài)，應(yīng)分析改進(jìn)；指標(biāo)得分接近外變現(xiàn)，說明處于理想狀態(tài)

2、數(shù)量控制在5-8個(gè)最佳

（9）子彈圖

定義：對比分類數(shù)據(jù)的數(shù)值大小以及是否達(dá)標(biāo)

特點(diǎn)：

1、可以通過標(biāo)記刻度區(qū)間，來進(jìn)行更好的評估

2、數(shù)量控制在10個(gè)以內(nèi)

（10）漏斗圖

定義：由多個(gè)梯形從上而下疊加而成。從上到下的項(xiàng)有邏輯上的順序關(guān)系，梯形面積表示某個(gè)業(yè)務(wù)量與上一個(gè)環(huán)節(jié)之間的差異，通過漏斗各環(huán)節(jié)業(yè)務(wù)數(shù)據(jù)的比較，能夠直觀地發(fā)現(xiàn)和說明問題所在，為決策者提供一定的參考。

特點(diǎn)：

適用于業(yè)務(wù)流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析，不適合表示無邏輯順序的分類對比

使用建議：

1、漏斗圖不是表示各個(gè)分類的占比情況，而是展示數(shù)據(jù)變化的一個(gè)邏輯流程，如果數(shù)據(jù)是無邏輯順序的占比比較，建議使用餅圖更合適。

2、可以根據(jù)數(shù)據(jù)選擇使用對比色或同一種顏色的色調(diào)漸變，從最暗到最淺來依照漏斗的尺寸排列。切記，不要添加許多圖層和顏色造成漏斗圖難以閱讀。

比較類圖表總結(jié)

2.2.2 構(gòu)成類圖表

（1）餅圖

定義：用于表示不同分類的占比情況，通過弧度大小來對比各種分類，將一個(gè)圓餅按照分類的占比劃分成多個(gè)區(qū)塊，整個(gè)圓餅代表數(shù)據(jù)的總量，每個(gè)圓弧所在的塊表示該分類占總體的比例大小，所有圓弧所在的塊組成的圓餅等于 100%，這樣可以很好地幫助用戶快速了解數(shù)據(jù)的占比分配。

特點(diǎn)：

1、可以通過標(biāo)記刻度區(qū)間，來更好的評估

2、數(shù)量控制在10個(gè)以內(nèi)

使用建議：

1、餅圖適合用來展示單一維度數(shù)據(jù)的占比，要求其數(shù)值中沒有零或負(fù)值，并確保各分塊占比總和為100%

2、餅圖不適合被用于數(shù)據(jù)的比較

（2）環(huán)圖

定義：本質(zhì)是將餅圖中間區(qū)域挖空

特點(diǎn)：

1、餅圖的整體性太強(qiáng)，我們會(huì)將注意力更多集中在扇形的面積上，環(huán)圖則可以很好地避免這個(gè)問題

2、建議分類數(shù)量不超過9個(gè)

使用建議：

餅圖更加集中面積，環(huán)圖會(huì)集中在角度和弧長上，所以我們中間的空間利用率還可以更好的利用。

（3）旭日圖

定義：旭日圖（Sunburst）由多層的環(huán)形圖組成，在數(shù)據(jù)結(jié)構(gòu)上，內(nèi)圈是外圈的父節(jié)點(diǎn)。因此，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。

特點(diǎn)：

1、旭日圖=N張餅圖

2、離遠(yuǎn)心越近，代表層級越高

3、下一層級的總和構(gòu)成上一層級

4、可以無限向外擴(kuò)展

（4）堆疊面積圖

定義：堆積面積圖是一種特殊的面積圖，可以用來比較在一個(gè)區(qū)間內(nèi)的多個(gè)變量。如果有多個(gè)數(shù)據(jù)系列，并想分析每個(gè)類別的部分到整體的關(guān)系，并展現(xiàn)部分量對于總量的貢獻(xiàn)時(shí)，使用堆積面積圖是非常合適的選擇。

特點(diǎn)：

1、適合表達(dá)總量和分量的構(gòu)成情況

2、分類指標(biāo)的縱軸起點(diǎn)，并不是從0開始，而是在上一個(gè)分類基礎(chǔ)上疊加

使用建議：

1、圖表有重疊的數(shù)據(jù)時(shí)，類別數(shù)量越多，重疊越多，因此可見度越低，所以不建議堆疊面積圖中包含過多數(shù)據(jù)系列.

2、堆積面積圖要展示部分和整體之間的關(guān)系，所以不能用于包含負(fù)值的數(shù)據(jù)的展示。

3、建議堆疊面積圖中把變化量較大的數(shù)據(jù)放在上方，變化量較小的數(shù)據(jù)放在下方會(huì)獲得更好的展示效果。

（5）堆疊柱狀圖

定義：堆疊柱狀圖是柱狀圖的擴(kuò)展，不同的是，柱狀圖的數(shù)據(jù)值為并行排列，堆疊柱圖則是一個(gè)個(gè)疊加起來的。它可以展示每一個(gè)分類的總量，以及該分類包含的每個(gè)小分類的大小及占比，因此非常適合處理部分與整體的關(guān)系。

特點(diǎn)：

1、二級分類并不是按照同一基準(zhǔn)對齊的

使用建議：

大多數(shù)的堆疊柱狀圖都是垂直繪制的，但是如果你的數(shù)據(jù)標(biāo)簽特別長時(shí)，考慮更好地展示效果，可以選擇使用水平堆疊的方式。

（6）瀑布圖

定義：通過顯示正值（收入）和負(fù)值（支出）對總量的貢獻(xiàn)來顯示結(jié)果累積的過程，因?yàn)樾嗡破俨剂魉环Q之為瀑布圖。瀑布圖通過巧妙的設(shè)置，使圖表中數(shù)據(jù)的排列形狀（稱為浮動(dòng)列）看似瀑布懸空，從而反映數(shù)據(jù)在不同時(shí)期或受不同因素影響的程度及結(jié)果，還可以直觀反映出數(shù)據(jù)的增減變化，在工作表中非常實(shí)用。

特點(diǎn)：

1、過程值為正的時(shí)候，向上加；

2、過程值為負(fù)的時(shí)候，向下減；

構(gòu)成類圖標(biāo)總結(jié)

2.2.3 分布和聯(lián)系類圖表

（1）地圖

定義：特殊高亮的形式顯示數(shù)據(jù)集中的區(qū)域和數(shù)據(jù)所在的地理區(qū)域的圖示。使用地圖作為背景，對數(shù)據(jù)的地理分布顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小，將數(shù)據(jù)在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。

特點(diǎn)：

1、結(jié)合散點(diǎn)：位置坐標(biāo)更清晰

2、結(jié)合飛線圖：表達(dá)起始點(diǎn)和目標(biāo)點(diǎn)的鏈接或流向關(guān)系

使用建議：

1、必須要有地理位置

2、展現(xiàn)的通常是以某個(gè)地區(qū)為單位的匯總的連續(xù)信息

3、當(dāng)你用基于地圖的熱力圖的時(shí)候，顏色梯度變化一定是有規(guī)律的，一定根據(jù)數(shù)值遞增遞減來變化的，否則在視覺上產(chǎn)生錯(cuò)誤引導(dǎo)

（2）散點(diǎn)圖

定義：數(shù)據(jù)點(diǎn)在直角坐標(biāo)系平面上的分布圖，表示因變量隨自變量而變化的大致趨勢。

（3）氣泡圖

定義：氣泡圖是顯示變量之間相關(guān)性的一種圖表。與散點(diǎn)圖類似。在直角坐標(biāo)系中顯示數(shù)據(jù)的兩個(gè)變量（X和Y軸）之間的關(guān)系，數(shù)據(jù)顯示為點(diǎn)的集合。與散點(diǎn)圖不同的是，氣泡圖是一個(gè)多變量圖，它增加了第三個(gè)數(shù)值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值?？梢酝ㄟ^氣泡的位置分布和大小比例，來分析數(shù)據(jù)的規(guī)律。

特點(diǎn)：

有一定的數(shù)據(jù)量是展現(xiàn)三個(gè)變量之前的相關(guān)性，數(shù)據(jù)具有3個(gè)序列、特征及相關(guān)值。

舉個(gè)栗子：

我們回歸到線下場景，我們通常在逛生鮮超市類如盒馬生鮮、沃爾瑪?shù)龋瑫?huì)發(fā)現(xiàn)里面售賣的雞蛋、生鮮類會(huì)比外面便宜很多，因?yàn)樗麄內(nèi)菀走^期，屬于成本極高的食品，通過限購來讓他們引流，從而吸引更多的顧客來買那些成本低、單品收入高的商品。

三、總結(jié)

最后給大家總結(jié)一下，首先我們拿到數(shù)據(jù)后先明確我們的使用目標(biāo)，是讓用戶用最短的時(shí)間了解到數(shù)據(jù)帶來的信息，結(jié)合每個(gè)圖表的優(yōu)缺點(diǎn)，選擇合適的圖表，從需求和目標(biāo)出發(fā)，切忌盲目的增加和刪減元素，圖表的易用性大于它的美觀度。

 

 

以上就是本篇文章的全部內(nèi)容，數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學(xué)，關(guān)于可視化相關(guān)的知識還有很多沒有涉及到，例如可視化圖表的構(gòu)成、圖表運(yùn)用場景、數(shù)據(jù)可視化大屏等等，后續(xù)希望大家持續(xù)關(guān)注。

參考文獻(xiàn)：

《CCtalk B端產(chǎn)品設(shè)計(jì)》by 美芳

螞蟻數(shù)據(jù)可視化

設(shè)計(jì)師要了解的數(shù)據(jù)可視化 —— 基礎(chǔ)篇

ECharts數(shù)據(jù)可視化

藍(lán)藍(lán)設(shè)計(jì)( www.teruid.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)