起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識B端交互設計——數(shù)據(jù)可視化圖表
編輯導語：設計師如今在日常工作中也會遇到很多數(shù)據(jù)，對于設計師來說，好看并不是判斷的標準，實際價值和作用才是真正需要的；本文作者分享了關(guān)于數(shù)據(jù)可視化的框架，以及關(guān)于可視化設計的基本準則和規(guī)范，我們一起來學習一下。
在B端設計中，數(shù)據(jù)可視化是必不可少而且非常重要，越來越多的設計師需要和數(shù)據(jù)打交道，但是很多設計師不懂可視化當中不同用途的圖表規(guī)范，只是單純設計出好看的數(shù)據(jù)圖表，卻不能給用戶帶來更多的信息和價值。
因此掌握數(shù)據(jù)可視化能力是設計師必不可少的一個技能，然而目前國內(nèi)互聯(lián)網(wǎng)對于數(shù)據(jù)的教學不夠全面，這讓很多B端的設計師很苦惱；所以今天我結(jié)合自己的工作經(jīng)驗和大家分享一下——“數(shù)據(jù)可視化之圖表設計”，為大家梳理一套完整的數(shù)據(jù)可視化的框架，以及關(guān)于可視化設計的基本準則和規(guī)范。
幫助大家理解什么樣的數(shù)據(jù)對應什么樣的圖標，了解顏色的意義，知道數(shù)據(jù)排版的要點。
一、基礎(chǔ)概念
1. 什么是數(shù)據(jù)可視化
將不可見的數(shù)據(jù)轉(zhuǎn)化為可見的圖形和符號，從中發(fā)現(xiàn)規(guī)律和特征，以獲取更多的信息和價值。
在當前互聯(lián)網(wǎng)的時代下，一頁圖可能對標一個龐大且復雜的數(shù)據(jù)表格，按照人類本身對圖的記憶遠大于對抽象文字的記憶，所以我們要學會讓數(shù)據(jù)說話，數(shù)據(jù)可視化除了“簡潔直觀”，還可有容易理解和記憶、傳遞信息更豐富的特點。
2. 可視化設計流程
接下來我們開始思考如何制作數(shù)據(jù)可視化圖標？
首先規(guī)范的流程是最好的前提，下面的工作流程結(jié)合我自己的經(jīng)驗和日常企業(yè)的數(shù)據(jù)分析場景，找到了一個合適的參考，我們就可以步步為營，避免很多不必要的返工，保證設計質(zhì)量和項目進度。
二、選定可視化圖標
很多小伙伴在做可視化圖表設計過程中，肯定遇到過這樣的困擾——發(fā)現(xiàn)自己做完的圖標并未能準確表達自己的意圖，也無法傳達自己的意圖，圖表通常讓用戶看完困惑不已，主要問題出現(xiàn)在分析的維度沒有找準或定義的比較混亂；面對B端龐大復雜的圖標，同樣的一個指標的數(shù)據(jù)，我們從不同維度分析就會出現(xiàn)不同結(jié)果。
用一句古話來形容：橫看成嶺側(cè)成峰。
1. 確定分析維度
國外專家Andrew Abela曾整理了一份圖表類型選擇指南圖示，他把數(shù)據(jù)的關(guān)系分成了4種類型，幫助我們?nèi)ミx出合適的圖表來呈現(xiàn)，我對其總結(jié)并進行了美化（見下圖）。
上圖向大家展示了數(shù)據(jù)分析常用的4個維度，我們在選定數(shù)據(jù)指標后，我們需要和數(shù)據(jù)產(chǎn)品經(jīng)理溝通我們核心需求，是我們想通過可視化向用戶傳遞什么價值信息。
上圖引導我們從“聯(lián)系、分布、比較、構(gòu)成”四個維度更有邏輯的思考這個問題，我們在進行圖表設計時首先進行需求的分析，熟悉數(shù)據(jù)并且明確數(shù)據(jù)要展現(xiàn)出來的信息，然后選用合適的圖表來進行數(shù)據(jù)的展現(xiàn)。
- 聯(lián)系：數(shù)據(jù)之間的相關(guān)性；
- 分布：指標里的數(shù)據(jù)主要集中在什么范圍、表現(xiàn)出怎樣的規(guī)律；
- 比較：數(shù)據(jù)之間存在何種差異、差異主要體現(xiàn)在哪些方面；
- 構(gòu)成：指標里的數(shù)據(jù)都由哪幾部分組成、每部分占比如何；
考慮到日常企業(yè)的數(shù)據(jù)分析場景，圖中有些圖表使用頻率是非常低的。所以我參考了上圖的部分內(nèi)容，對其進行了總結(jié)，重新整合成三個維度：
2. 選定可視化圖表類型
圖表的作用，是幫助我們更好地看懂數(shù)據(jù)。選擇什么圖表，需要回答的首要問題是『我有什么數(shù)據(jù)，需要用圖表做什么』，而不是 『圖表長成什么樣』 ，根據(jù)數(shù)據(jù)選用合適的圖表展現(xiàn)來把數(shù)據(jù)的信息傳達給用戶；因此我們從數(shù)據(jù)出發(fā)、熟悉每種圖表的定義、適用場景、優(yōu)缺點，從功能角度對圖表進行分類，這樣才能快速選擇合適的圖表。
1）比較類圖表
柱狀圖：
定義：柱狀圖是一種以長方形的長度為變量的統(tǒng)計圖表。長條圖用來比較兩個或以上的價值（不同時間或者不同條件），只有一個變量，通常利用于較小的數(shù)據(jù)集分析。
特點：
- 這個分類不限于地區(qū)、品牌等，可以是一個時間周期；
- 數(shù)量控制在5-12條最佳；
使用建議：
使用合適的寬度去適配柱條的寬度：當柱子太窄時，用戶的視覺可能會集中在兩個柱中間的負空間，而這里是不承載任何數(shù)據(jù)的。寬度推薦使用在1/2 柱寬到 1 柱寬之間，但也要視情況而定。
不推薦采用全圓角：柱形圖可以有適當?shù)膱A角，全圓角則有可能歪曲可視化圖表的表達，用戶可能無法明確是圓心還會頂點作為峰值。
不要使用非水平和豎直的文字標注，也不要使用轉(zhuǎn)行：
- 有時坐標軸上的注釋文字會很多，所以很多人為了妥協(xié)，在小空間內(nèi)顯示出所有的文字標注內(nèi)容，而使用傾斜的文本，或者將文本轉(zhuǎn)行處理。
- 不要用過于復雜的設計形式，數(shù)據(jù)可視化的第一要義是簡單易懂，所以在遇到標簽文字過長時，可以采用將柱狀圖轉(zhuǎn)化為條形圖。
2）條形圖
定義：條形圖是用寬度相同的條形的高度或長短來表示數(shù)據(jù)多少的圖形，條形圖能夠使人們一眼看出各個數(shù)據(jù)的大小，易于比較數(shù)據(jù)之間的差別。
當條目較多，如大于12條，移動端上的柱狀圖會顯得擁擠不堪，更適合使用條形圖。
特點：
- 與柱狀圖類似，只是交換了X軸與Y軸位置；
- 多用于豎長的顯示區(qū)域，例如手機端、大屏的一側(cè)；
- 多用于top排行或分類名稱較長的情況；
- 數(shù)量一般不超過30條，否則易帶來視覺和記憶負擔
使用建議：
采用有序排列，軸標簽右對齊：
- 對多個數(shù)據(jù)系列排序時，如果不涉及到日期等特定數(shù)據(jù)，最好能符合一定的邏輯用直觀的方式引導用戶更好的查看數(shù)據(jù)。
- 可以通過升序或降序排布，例如按照數(shù)量從多到少來對數(shù)據(jù)進行排序，也可以按照字母順序等來排布；總之，按照邏輯排序可以一定程度上引導人們更好地閱讀數(shù)據(jù)。
標簽直接顯示在柱體上：條形圖還可以通過省略橫軸和縱軸，并直接在柱子上表明數(shù)值，來降低數(shù)據(jù)墨水比，進一步提高信息的獲取效率。
3）折線圖
定義：用于顯示數(shù)據(jù)在一個連續(xù)的時間間隔或者時間跨度上的變化，它的特點是反映事物隨時間或有序類別而變化的趨勢。
折線圖分為直線折線圖和曲線折線圖。折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減、增減的速率、增減的規(guī)律（周期性、螺旋性等）、峰值等特征。
特點：
- 橫軸如果不是表示連續(xù)數(shù)值，折線圖的意義不大；
- 數(shù)量一般不少于3條，否則用柱狀圖更合適。
使用建議：
反映事物隨時間或有序類別而變化的趨勢：折線圖看的是趨勢，所有不是有序類別的不適合使用折線圖。
視覺美化：折線圖可以清晰的反映數(shù)據(jù)是遞增還是遞減，不能和面積圖累計的概念混淆，由于折線圖放在界面上的視覺重量很弱，所以我們可以通過添加微漸變加重視覺。
4）面積圖
定義：面積圖又叫區(qū)域圖——它是在折線圖的基礎(chǔ)之上形成的, 它將折線圖中折線與自變量坐標軸之間的區(qū)域使用顏色或者紋理填充，顏色的填充可以更好的突出趨勢信息；需要注意的是顏色要帶有一定的透明度，透明度可以很好地幫助使用者觀察不同序列之間的重疊關(guān)系，沒有透明度的面積會導致不同序列之間相互遮蓋，減少可以被觀察到的信息。
使用建議：
不要超過7個序列：當數(shù)據(jù)系列過多時，往往造成用戶難以觀察的痛苦，所以建議使用堆疊面積圖時數(shù)據(jù)系列最好不要超過7個。
5）分組條形圖
分組條形圖屬于條形圖的一種，又叫簇狀條形圖，是一種以不同分組高度相同的長方形的寬度為變量的統(tǒng)計圖表，每個分組中的柱子使用不同的顏色或者相同顏色不同透明的方式區(qū)別各個分類，各個分組之間需要保持間隔。
特點：
- 適用場景：分組條形圖適用于表達相同分類不同組別的數(shù)據(jù)，或者相同組別不同分類的數(shù)據(jù)，簡而言之，就是根據(jù)一個相同變量的不同分組進行數(shù)據(jù)表達。
- 不適用場景：分組條形圖不適合用于表達分組過多的，數(shù)據(jù)量較大的數(shù)據(jù)，也不適合用于表達趨勢類的數(shù)據(jù)。
6）雙向條形圖
定義：雙向柱狀圖又叫正負條形圖，是使用正向和反向的柱子顯示類別之間的數(shù)值比較，其中分類軸表示需要對比的分類維度，連續(xù)軸代表相應的數(shù)值。
7）玫瑰圖
定義：一種圓形直方圖，使用半徑長短表示數(shù)值大小?？梢栽谝曈X上夸大數(shù)據(jù)之間的差異。
特點：
- 由于面積等于半徑的平方，玫瑰圖會將數(shù)值之間的差異放大；
- 南丁格爾玫瑰圖不能用于表示占比構(gòu)成；
- 數(shù)量：一般不超過30條，否則易帶來視覺和記憶負擔；
8）雷達圖
定義：雷達圖又稱為蜘蛛網(wǎng)圖、網(wǎng)絡圖、蜘蛛圖、星圖，是以在同一點開始的軸上顯示的三個或更多個變量的二維圖表的形式來顯示多元數(shù)據(jù)的方法；所有這些方面都可以類似地量化，常用于排名、評估、評論等數(shù)據(jù)的展示，比如我們玩王者榮耀中英雄的各項性能指標。
特點：
- 指標得分接近圓心，說明處于較差狀態(tài)，應分析改進；指標得分接近外變現(xiàn)，說明處于理想狀態(tài)；
- 數(shù)量控制在5-8個最佳；
9）子彈圖
定義：對比分類數(shù)據(jù)的數(shù)值大小以及是否達標。
特點：
- 可以通過標記刻度區(qū)間，來進行更好的評估；
- 數(shù)量控制在10個以內(nèi)；
10）漏斗圖
定義：由多個梯形從上而下疊加而成。從上到下的項有邏輯上的順序關(guān)系，梯形面積表示某個業(yè)務量與上一個環(huán)節(jié)之間的差異，通過漏斗各環(huán)節(jié)業(yè)務數(shù)據(jù)的比較，能夠直觀地發(fā)現(xiàn)和說明問題所在，為決策者提供一定的參考。
特點：適用于業(yè)務流程比較規(guī)范、周期長、環(huán)節(jié)多的單流程單向分析，不適合表示無邏輯順序的分類對比。
使用建議：
- 漏斗圖不是表示各個分類的占比情況，而是展示數(shù)據(jù)變化的一個邏輯流程，如果數(shù)據(jù)是無邏輯順序的占比比較，建議使用餅圖更合適。
- 可以根據(jù)數(shù)據(jù)選擇使用對比色或同一種顏色的色調(diào)漸變，從最暗到最淺來依照漏斗的尺寸排列。切記，不要添加許多圖層和顏色造成漏斗圖難以閱讀。
二、比較類圖表總結(jié)
1. 構(gòu)成類圖表
1）餅圖
定義：用于表示不同分類的占比情況，通過弧度大小來對比各種分類，將一個圓餅按照分類的占比劃分成多個區(qū)塊，整個圓餅代表數(shù)據(jù)的總量，每個圓弧所在的塊表示該分類占總體的比例大?。凰袌A弧所在的塊組成的圓餅等于 100%，這樣可以很好地幫助用戶快速了解數(shù)據(jù)的占比分配。
特點：
- 可以通過標記刻度區(qū)間，來更好的評估；
- 數(shù)量控制在10個以內(nèi)；
使用建議：
- 餅圖適合用來展示單一維度數(shù)據(jù)的占比，要求其數(shù)值中沒有零或負值，并確保各分塊占比總和為100%；
- 餅圖不適合被用于精確數(shù)據(jù)的比較；
2）環(huán)圖
定義：本質(zhì)是將餅圖中間區(qū)域挖空。
特點：
- 餅圖的整體性太強，我們會將注意力更多集中在扇形的面積上，環(huán)圖則可以很好地避免這個問題；
- 建議分類數(shù)量不超過9個；
使用建議：
餅圖更加集中面積，環(huán)圖會集中在角度和弧長上，所以我們中間的空間利用率還可以更好的利用。
3）旭日圖
定義：旭日圖（Sunburst）由多層的環(huán)形圖組成，在數(shù)據(jù)結(jié)構(gòu)上，內(nèi)圈是外圈的父節(jié)點；因此，它既能像餅圖一樣表現(xiàn)局部和整體的占比，又能像矩形樹圖一樣表現(xiàn)層級關(guān)系。
特點：
- 旭日圖=N張餅圖；
- 離遠心越近，代表層級越高；
- 下一層級的總和構(gòu)成上一層級；
- 可以無限向外擴展；
4）堆疊面積圖
定義：堆積面積圖是一種特殊的面積圖，可以用來比較在一個區(qū)間內(nèi)的多個變量；如果有多個數(shù)據(jù)系列，并想分析每個類別的部分到整體的關(guān)系，并展現(xiàn)部分量對于總量的貢獻時，使用堆積面積圖是非常合適的選擇。
特點：
- 適合表達總量和分量的構(gòu)成情況；
- 分類指標的縱軸起點，并不是從0開始，而是在上一個分類基礎(chǔ)上疊加；
使用建議：
- 圖表有重疊的數(shù)據(jù)時，類別數(shù)量越多，重疊越多，因此可見度越低，所以不建議堆疊面積圖中包含過多數(shù)據(jù)系列；
- 堆積面積圖要展示部分和整體之間的關(guān)系，所以不能用于包含負值的數(shù)據(jù)的展示；
- 建議堆疊面積圖中把變化量較大的數(shù)據(jù)放在上方，變化量較小的數(shù)據(jù)放在下方會獲得更好的展示效果。
5）堆疊柱狀圖
定義：堆疊柱狀圖是柱狀圖的擴展，不同的是，柱狀圖的數(shù)據(jù)值為并行排列，堆疊柱圖則是一個個疊加起來的；它可以展示每一個分類的總量，以及該分類包含的每個小分類的大小及占比，因此非常適合處理部分與整體的關(guān)系。
特點：二級分類并不是按照同一基準對齊的。
使用建議：
大多數(shù)的堆疊柱狀圖都是垂直繪制的，但是如果你的數(shù)據(jù)標簽特別長時，考慮更好地展示效果，可以選擇使用水平堆疊的方式。
6）瀑布圖
定義：通過顯示正值（收入）和負值（支出）對總量的貢獻來顯示結(jié)果累積的過程，因為形似瀑布流水而被稱之為瀑布圖；瀑布圖通過巧妙的設置，使圖表中數(shù)據(jù)的排列形狀（稱為浮動列）看似瀑布懸空，從而反映數(shù)據(jù)在不同時期或受不同因素影響的程度及結(jié)果，還可以直觀反映出數(shù)據(jù)的增減變化，在工作表中非常實用。
特點：
- 過程值為正的時候，向上加；
- 過程值為負的時候，向下減；
三、構(gòu)成類圖標總結(jié)
1. 分布和聯(lián)系類圖表
1）地圖
定義：特殊高亮的形式顯示數(shù)據(jù)集中的區(qū)域和數(shù)據(jù)所在的地理區(qū)域的圖示；使用地圖作為背景，對數(shù)據(jù)的地理分布顯示直觀通過顏色深淺、氣泡大小等容易判斷度量的大小，將數(shù)據(jù)在不同地理位置上的分布通過顏色或者氣泡映射在地圖上。
特點：
- 結(jié)合散點：位置坐標更清晰；
- 結(jié)合飛線圖：表達起始點和目標點的鏈接或流向關(guān)系；
使用建議：
- 必須要有地理位置；
- 展現(xiàn)的通常是以某個地區(qū)為單位的匯總的連續(xù)信息；
- 當你用基于地圖的熱力圖的時候，顏色梯度變化一定是有規(guī)律的，一定根據(jù)數(shù)值遞增遞減來變化的，否則在視覺上產(chǎn)生錯誤引導；
2）散點圖
定義：數(shù)據(jù)點在直角坐標系平面上的分布圖，表示因變量隨自變量而變化的大致趨勢。
3）氣泡圖
定義：氣泡圖是顯示變量之間相關(guān)性的一種圖表。與散點圖類似。在直角坐標系中顯示數(shù)據(jù)的兩個變量（X和Y軸）之間的關(guān)系，數(shù)據(jù)顯示為點的集合；與散點圖不同的是，氣泡圖是一個多變量圖，它增加了第三個數(shù)值即氣泡大小的變量，在氣泡圖中，較大的氣泡表示較大的值；可以通過氣泡的位置分布和大小比例，來分析數(shù)據(jù)的規(guī)律。
特點：有一定的數(shù)據(jù)量是展現(xiàn)三個變量之前的相關(guān)性，數(shù)據(jù)具有3個序列、特征及相關(guān)值。
舉個栗子：
我們回歸到線下場景，我們通常在逛生鮮超市類如盒馬生鮮、沃爾瑪?shù)?，會發(fā)現(xiàn)里面售賣的雞蛋、生鮮類會比外面便宜很多；因為他們?nèi)菀走^期，屬于成本極高的食品，通過限購來讓他們引流，從而吸引更多的顧客來買那些成本低、單品收入高的商品。
三、總結(jié)
最后給大家總結(jié)一下，首先我們拿到數(shù)據(jù)后先明確我們的使用目標，是讓用戶用最短的時間了解到數(shù)據(jù)帶來的信息，結(jié)合每個圖表的優(yōu)缺點，選擇合適的圖表，從需求和目標出發(fā)，切忌盲目的增加和刪減元素，圖表的易用性大于它的美觀度。
以上就是本篇文章的全部內(nèi)容，數(shù)據(jù)可視化是一門龐大系統(tǒng)的科學，關(guān)于可視化相關(guān)的知識還有很多沒有涉及到；例如可視化圖表的構(gòu)成、圖表運用場景、數(shù)據(jù)可視化大屏等等，后續(xù)希望大家持續(xù)關(guān)注。
參考文獻：
- 螞蟻數(shù)據(jù)可視化
- 設計師要了解的數(shù)據(jù)可視化 —— 基礎(chǔ)篇
- ECharts數(shù)據(jù)可視化
本文由@佩奇一只居 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議
非常好的文章！感謝作者分享
感謝分享，對于玫瑰不能用于占比構(gòu)成有一點不理解的。我看到ECharts上圖表（每一塊顯示了百分比）所有的加一起正好100%。
是指不能直觀的表示？
tob首頁首推也有你的這篇哈哈
tob首頁首推也有你的這篇哈哈
太實用了！用了一個小時看完
謝謝認可
期待后續(xù)作品