- 寫給UI設(shè)計(jì)師看的數(shù)據(jù)可視化設(shè)計(jì)
- 吳星辰
- 1005字
- 2021-05-19 17:46:47
2.1.2 類別比較圖形
類別比較圖形主要用于兩個(gè)或兩個(gè)以上類別數(shù)據(jù)的比較。常見的類別比較圖形有柱狀圖、分組柱狀圖、氣泡圖、平行坐標(biāo)圖、多條折線圖、子彈圖。
1. 柱狀圖
柱狀圖不僅可以用于表示時(shí)間維度的數(shù)據(jù)變化,還可以用于類別的對比。圖2-8所示為店鋪內(nèi)各類商品銷售量的比較,以長度為變量,比較兩個(gè)或多個(gè)不同類別的情況。與隨時(shí)間變化柱狀圖不同,它可以表示類別數(shù)據(jù)的大小。

圖2-8
2. 分組柱狀圖
分組柱狀圖可以在同一數(shù)軸上展示各個(gè)分類下的不同分組數(shù)據(jù)。圖2-9所示為三家企業(yè)產(chǎn)品開發(fā)部門的產(chǎn)品部、設(shè)計(jì)部、技術(shù)部的人數(shù)對比情況,由此可以清晰地看出C企業(yè)設(shè)計(jì)部的人數(shù)最少、技術(shù)部的人數(shù)最多。

圖2-9
3. 氣泡圖
氣泡圖可以輕松駕馭二維到多維的數(shù)據(jù)展示,其中二維氣泡圖類似于柱狀圖中兩個(gè)維度的數(shù)據(jù)展示,3D氣泡圖中氣泡的大小可以表示相對維度的數(shù)據(jù)變量。圖2-10所示為從三個(gè)維度作數(shù)據(jù)的對比分析,即用每個(gè)季度的廣告費(fèi)支出來反映銷售額的變化。
多維氣泡圖則是用不同顏色、大小的氣泡代表不同維度的數(shù)據(jù)。除此之外,氣泡圖還可以用于地圖,表示不同地理位置的數(shù)據(jù)變化。

圖2-10
4. 平行坐標(biāo)圖
平行坐標(biāo)圖常用于克服笛卡兒坐標(biāo)系,但不能多維展示數(shù)據(jù)的分布及關(guān)系。它可以用多個(gè)垂直平行坐標(biāo)軸來展示不同維度的數(shù)據(jù),其中坐標(biāo)軸上的折線變化表示不同維度的對應(yīng)值,以顏色區(qū)分類別。圖2-11所示為某個(gè)企業(yè)的三個(gè)銷售部門在四個(gè)城市的銷售得分,最后根據(jù)得分平均值得出一個(gè)等級結(jié)論。

圖2-11
5. 多條折線圖
多條折線圖不僅可以表示數(shù)據(jù)隨時(shí)間變化的趨勢,還可以展示多組數(shù)據(jù)的對比情況。圖2-12所示為公司在兩個(gè)年份中每月的銷售額變化趨勢。

圖2-12
在設(shè)計(jì)多條折線圖時(shí),要考慮數(shù)據(jù)的主次關(guān)系。在圖2-12中,2019年的數(shù)據(jù)用有顏色的折線重點(diǎn)突出,因?yàn)樗鼈兪亲钚聰?shù)據(jù),也是重點(diǎn)關(guān)注的數(shù)據(jù),而往年的數(shù)據(jù)只是作為參考,在設(shè)計(jì)上可以弱化處理。在設(shè)計(jì)圖形時(shí),很多時(shí)候設(shè)計(jì)師可以通過設(shè)計(jì)手段助力數(shù)據(jù)的表現(xiàn)。
6. 子彈圖
子彈圖,顧名思義,就是樣子很像發(fā)射子彈后帶出的軌道的圖表。子彈圖的數(shù)據(jù)展示類似于儀表盤,它的優(yōu)勢是可以表達(dá)豐富的數(shù)據(jù)信息,并且在UI設(shè)計(jì)中占用的空間相對較小。子彈圖的數(shù)據(jù)值是提前設(shè)定好的,圖2-13中所示的差、良、優(yōu)及目標(biāo)值和實(shí)際值都可以作為動(dòng)態(tài)數(shù)據(jù)呈現(xiàn)。子彈圖是線性表達(dá)方式,相對于圓形,其更能高效地傳遞信息。
圖2-13展示了企業(yè)年度的運(yùn)營情況,如營收、利潤率、新客戶,并將這些數(shù)據(jù)展示得一目了然。不僅如此,子彈圖還可以繼續(xù)向下羅列類別,展示更多維度的信息。

圖2-13
- LaTeX Cookbook
- Java范例大全
- Python數(shù)據(jù)分析入門與實(shí)戰(zhàn)
- Building a Game with Unity and Blender
- Learning Laravel 4 Application Development
- Podman實(shí)戰(zhàn)
- The DevOps 2.4 Toolkit
- 數(shù)據(jù)結(jié)構(gòu)(C語言)
- The HTML and CSS Workshop
- H5頁面設(shè)計(jì):Mugeda版(微課版)
- 單片機(jī)C語言程序設(shè)計(jì)實(shí)訓(xùn)100例
- C語言程序設(shè)計(jì)
- Microsoft Dynamics AX 2012 R3 Financial Management
- Swift語言實(shí)戰(zhàn)晉級
- Java Web從入門到精通(第2版)