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