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