2018-11-30 資深UI設計者
如果您想訂閱本博客內容，每天自動發(fā)到您的郵箱中， 請點這里
那如何縮短數(shù)據(jù)與用戶的距離？讓用戶一眼抓到重點？讓老板為你的匯報方案鼓掌？
本文通過連環(huán)15關，層層深入，傳你數(shù)據(jù)匹配圖形神功，讓數(shù)據(jù)可視化更。
無論數(shù)據(jù)總量和復雜程度如何，數(shù)據(jù)間的關系大多可分為三類：比較/構成/分布&聯(lián)系。
基于分類/時間的數(shù)據(jù)對比，通常需用到比較型圖表。用戶通過圖表輕松識別最大/最小值，查看當前和過去的數(shù)據(jù)變動情況。
常見場景：哪個地區(qū)的收件量最多？今年的收入和去年相比如何……
1. 條目少 – 柱狀圖
比較條目較少時，如5個地區(qū)收件量的對比，可選用柱狀圖表示。
△ 柱狀圖
2. 條目多 – 條形圖
當條目較多，如大于12條，移動端上的柱狀圖會顯得擁擠不堪，更適合用條形圖。一般數(shù)據(jù)條目不超過30條，否則易帶來視覺和記憶負擔。
△ 條形圖
3. 看趨勢 – 折線圖
當X軸為連續(xù)數(shù)值（如時間）且注重變化趨勢時，則適用折線圖。
△ 折線圖
4. 擴大差異 – 南丁格爾玫瑰圖
除柱狀圖外，有無更新穎的表現(xiàn)方式呢？那就屬南丁格爾玫瑰圖了。
△ 南丁格爾玫瑰圖
由于扇形的半徑和面積是平方的關系，南丁格爾玫瑰圖會將數(shù)值之間的差異放大，適合對比大小相近的數(shù)值。它不適合對比差異較大的數(shù)值，因為數(shù)值過小的類目會難以觀察。
此外，因為圓有周期性，玫瑰圖也適于表示周期/時間概念，比如星期、月份。依然建議數(shù)據(jù)量不超過30條，超出可考慮條形圖。
5. 雙向 – 雙向條形圖
前面的例子都是單維度比較，當比較正反兩類甚至更多維度的數(shù)據(jù)時，可嘗試雙向條形圖，下圖為各大區(qū)的重點地區(qū)的收派件量的對比。
△ 雙向條形圖
用顏色區(qū)分大區(qū)，空心/實心區(qū)分收件量和派件量，既能整體比較大區(qū)，又能詳細對比地區(qū)的情況。
打怪升級，再加點難度。在雙向圖上再增加一個維度，如下表，比較5個地區(qū)的利潤及相應的收入和成本。請先思考一下，再下滑看推薦圖表。
△ 業(yè)務數(shù)據(jù)
△ 雙向條形圖（多維度）
通過圖形一眼就能看出深圳區(qū)的利潤低于廣州區(qū)，即使它的收入高于廣州區(qū)，但成本相對來說高于廣州區(qū)。
6. 目標達成 – 子彈圖
實際業(yè)務中，常要考察指標的達成情況，如收入達標情況及所處區(qū)間（優(yōu)、良、差），如下表，你會怎么可視化呢？動手畫一畫吧！
△ 業(yè)務數(shù)據(jù)
△ 子彈圖
子彈圖，因為像子彈射后帶出的軌道。相較于儀表盤，它能夠在狹小的空間中表達豐富的數(shù)據(jù)信息，在信息傳遞上有更大的效能優(yōu)勢。
若還要比較4個季度的收入情況，只需用不同顏色區(qū)分。如下圖，一眼便知第二季度表現(xiàn)較好，而第一季度則不佳。
△ 子彈圖
7. 性能 – 雷達圖
對于一些多維的性能數(shù)據(jù)，如綜合評價，常用雷達圖表示。指標得分接近圓心，說明處于較差狀態(tài)，應分析改進；指標得分接近外邊線，說明處于理想狀態(tài)。
△ 雷達圖
以上就是「比較」類的常用圖表，可歸納如下。
此表并非一成不變的「鐵表」，相互之間還會串聯(lián)交叉，大家還需靈活應用。
部分相較于整體，一個整體被分成幾個部分。這類情況會用到構成型圖表，如五大區(qū)的收件量占比、公司利潤的來源構成等。
1. 單層 – 餅狀圖
第1關中，對比5個地區(qū)的收件量時用到了柱狀圖。若看占比情況，餅狀圖更合適。
△ 餅狀圖
如果變成17個地區(qū)，會怎樣？
像不像彩色七星瓢蟲？
所以餅圖分類一般不超過9個，超過建議用條形圖展示。
除餅圖外，環(huán)形圖（甜甜圈圖）亦可表示占比，其差異是將餅圖的中間區(qū)域挖空，在空心區(qū)域顯示文本信息，比如標題，優(yōu)勢是其空間利用率更高。
△ 環(huán)形圖
2. 分層 – 環(huán)形圖、旭日圖
對于管理層而言，需先把握大局和重點。比如大區(qū)負責人需一眼看到重點地區(qū)及重點分部的情況（如下圖），如何展示？
△ 環(huán)形圖
△ 旭日圖
這個叫旭日圖，逐層下鉆看數(shù)據(jù)，大區(qū)的重點地區(qū)及相應分部的構成情況一目了然。
3. 累計趨勢 – 堆疊面積圖
接下來，看看數(shù)值構成隨時間變化的案例：第一大區(qū)（包含四個重點地區(qū)）近四年收入構成的趨勢要如何可視化？自己想一想，再下滑看推薦方案。
△ 業(yè)務數(shù)據(jù)
△ 堆疊面積圖
推薦方案是堆疊面積圖，可以展現(xiàn)分量（地區(qū)）對于總量（大區(qū)）的貢獻，并顯示總量（大區(qū)）的變化過程。需要說明的是，地區(qū)收入的起點并非從 y=0 開始，而是在下面的地區(qū)基礎上逐層疊加，最后組成一個整體。
4. 累計比較 – 堆疊柱狀圖
如果將上圖X軸的標簽文字（即年份）和圖例（即地區(qū)）互換（如下圖A），用來看每個地區(qū)近四年的收入構成，用哪個圖更合適？
△ 堆疊柱狀圖
是不是覺得都可以？那圖中 X1 有何含義？堆疊面積圖 A 方案和堆疊柱狀圖 B 方案都可以表現(xiàn)累加值。差別在于，堆疊面積圖的 x 軸是連續(xù)數(shù)據(jù)（如時間），堆疊柱狀圖的 x 軸是分類數(shù)據(jù)。此案例中的 x 軸是非連續(xù)的分類數(shù)據(jù)，因此用 B 方案更適合。
5. 累計增減 – 瀑布圖
若想表達兩個數(shù)據(jù)點間數(shù)量的演變過程，可使用瀑布圖。開始的一個值，在經(jīng)過不斷的加減后，得到一個值。瀑布圖將這個過程圖示化，常用來展現(xiàn)財務分析中的收支情況。
△ 瀑布圖
以上就是「構成」類常用圖表，可歸納如下。
通過分布&聯(lián)系型圖表能看到數(shù)據(jù)的分布情況，進而找到某些聯(lián)系，如相關性、異常值和數(shù)據(jù)集群。
常見使用場景：客戶的年齡段分布？單票成本與收件量的關系？
1. 兩個變量 – 散點圖
仍以業(yè)務為例，下圖為全國網(wǎng)點的單票成本/收入分布情況。
△ 散點圖
單單這樣看，可能看不出什么，如果加兩條平均線就不一樣了。
加了平均線，就知道哪些網(wǎng)點高于平均線，哪些低于平均線。但網(wǎng)點那么多，總不能逐個點擊查看是哪個大區(qū)的，給散點加上顏色后，就很有意義了。
通過此圖，可以看出哪些大區(qū)單票利潤較低，急需提升，比如廣泛聚集于右下角的第四大區(qū)，單票收入低于平均線，單票成本卻高于平均線。
2. 三個變量 – 氣泡圖
大家都知道，網(wǎng)點總利潤除了和單票利潤有關，還和體量（即收件量）有關，用散點的面積大小表示收件量，就變成了氣泡圖。
△ 氣泡圖
3. 結合地圖 – 熱力圖
氣泡圖與地圖結合可演變?yōu)闊崃D。通過熱力圖，能看到哪些網(wǎng)點收派件量較多，需進行資源調配。
△ 熱力圖
以上是 「分布&聯(lián)系」類的常用圖表，可歸納如下：
當我們拿到數(shù)據(jù)后，先提煉關鍵信息，明確數(shù)據(jù)關系及主題，再選擇合適的圖表進行可視化。希望下圖能給各位一些參考（結合可視化專家 Andrew Abela 的圖表選擇指南，進行了簡化調整）。
數(shù)據(jù)可視化設計只要多練習、多總結，總有一天會得心應手。
藍藍設計( www.miumiuwan.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務。