折柱餅 +3 個(gè)套路,簡(jiǎn)單圖表你真的會(huì)用嗎?

2021-7-13    ui設(shè)計(jì)分享達(dá)人

本文一句話概括:數(shù)據(jù)可視化中,如何用最簡(jiǎn)單的圖表高效地傳遞信息。


人人熟知的 3 類圖表

看似簡(jiǎn)單的 3 類常掛在嘴邊的「折柱餅」,你真的知道怎么使用嗎?

@rubyxrli 在 紐約的Uber數(shù)據(jù)可視化大會(huì)上所做演講中提到: 
根據(jù)我的經(jīng)驗(yàn)(基于原型研究超過10年)大多數(shù)可視化問題可以通過一些圖表來解決。很少情況下,需要你去想出一個(gè)全新的表達(dá)方式。像條形圖、折線圖、散點(diǎn)圖、透視表等「圖形化主力」真的很難被替代! 


對(duì)于大部分的企業(yè)級(jí)產(chǎn)品使用者來說,基本的圖表類型,通??梢詾榇蠖鄶?shù)當(dāng)前頁面的問題作出解釋,但是我們要做并不是簡(jiǎn)單地調(diào)用一個(gè)圖表就結(jié)束了,如果想讓你的頁面更有效地傳遞結(jié)論、原因,可以讓使用者探索更多可能性,甚至去發(fā)現(xiàn)新的分析思路,那么首先你需要掌握下面的分析套路:


3 個(gè)套路

「對(duì)比,細(xì)分,溯源」,給簡(jiǎn)單的圖表加點(diǎn)「戲」

在數(shù)據(jù)分析中,分析思路一般可以概括為「對(duì)比,細(xì)分,溯源」,這也是《數(shù)據(jù)化管理》中提到六字箴言。首先我們來了解一下這六字箴言的具體含義:

此處引用部分《分析思維 第三篇:數(shù)據(jù)分析的三板斧》內(nèi)容


1、對(duì)比

對(duì)比分為橫向?qū)Ρ群涂v向?qū)Ρ取?/em>

· 橫向?qū)Ρ仁侵负汀八恕北容^,比如,兩個(gè)網(wǎng)站的用戶流失率;

· 縱向?qū)Ρ仁侵赴凑漳硞€(gè)維度,和“自己”比較。比如,這個(gè)網(wǎng)站上個(gè)月今天和這個(gè)月今天的用戶流失率。

2、細(xì)分

細(xì)分是指分維度、降低粒度來分析數(shù)據(jù)。

· 分維度是指增加維度,比如,離職率按照部門維度來分析;

· 降低粒度是指降低數(shù)據(jù)聚合的程度,比如,離職率不按年份,而按照月份來統(tǒng)計(jì)。

3、溯源

溯源是指在對(duì)比、細(xì)分鎖定到具體維度和粒度之后,依然沒有結(jié)論,那就需要查看原始數(shù)據(jù)或相關(guān)聯(lián)數(shù)據(jù),洞察數(shù)據(jù),從數(shù)據(jù)中尋找靈感。


3x3 實(shí)踐

第一個(gè) 3 代表圖表類型;第二個(gè) 3 代表分析套路。

了解分析思維的三個(gè)套路后,可以嘗試在自己的圖表中檢驗(yàn)打鉤。

下面我用幾個(gè)例子來說明一下,如何打開圖表設(shè)計(jì)的腦洞:  


折線圖

通常在一個(gè)數(shù)據(jù)概覽頁面,人們都會(huì)使用一個(gè)折線圖,來表示一個(gè)關(guān)鍵指標(biāo)的發(fā)展趨勢(shì),當(dāng)然這么做非常直觀,也非常準(zhǔn)確。當(dāng)我們?yōu)檎劬€圖添加一個(gè)對(duì)比的維度,就可以使折線圖表達(dá)的內(nèi)容更加豐滿。

橫向?qū)Ρ?

可以是橫向?qū)Ρ取昂退吮取薄?


縱向?qū)Ρ?

也可以是縱向?qū)Ρ取昂妥约罕取薄?


添加輔助元素,強(qiáng)化關(guān)鍵信息進(jìn)行對(duì)比

G2Plot 為圖表提供了很多圖表輔助信息組件:https://g2plot.antv.vision/zh/examples/general/label

例如:

· 參考型組件:參考線、趨勢(shì)線、輔助區(qū)域等

· 極值型組件:最高/低點(diǎn)、預(yù)警線等

undefined


細(xì)分維度

通過右上角的 TAB 切換,提升和降低數(shù)據(jù)聚合的程度


柱 / 條形圖

橫向?qū)Ρ?

和別人比。


細(xì)分維度

將維度拆分進(jìn)行分析。


在使用柱狀圖/條形圖時(shí),問問自己「對(duì)比」的呈現(xiàn)效果好嗎?

這是使用者在使用柱形圖做對(duì)比時(shí),經(jīng)常遇到的問題:

· X 軸類別數(shù)量過多,柱子非常密集

· 軸文字標(biāo)簽數(shù)量過多,文字在 45%旋轉(zhuǎn)后可讀性降低

這時(shí),設(shè)計(jì)者應(yīng)該試著旋轉(zhuǎn)柱圖,把它變成一個(gè)條形圖。


對(duì)比是好的,但不要做無用的對(duì)比


餅 / 環(huán)圖

縱向?qū)Ρ?

餅/環(huán)圖天生自帶「縱向?qū)Ρ取沟男再|(zhì),但是除了用一個(gè)餅/環(huán)圖之外,還有什么做法?


細(xì)分維度


溯源,顯示更多詳情幫助用戶定位問題


合并極小值的維度,在有需要的時(shí)候做細(xì)分


拓展:N x N 實(shí)踐

第一個(gè) N 可以代表圖表類型,也可以代表頁面,但需要是一個(gè)實(shí)體;

第二個(gè) N 代表分析思路,上文中提到的 3 個(gè)套路只是眾多分析思路中被總結(jié)出最為常用的,還可以根據(jù)不同業(yè)務(wù)場(chǎng)景的訴求去添加思路。

這個(gè)矩陣的表格填出來后,除了可以幫助設(shè)計(jì)者檢驗(yàn)是否高度利用了圖表區(qū)域之外,還可以總結(jié)出一份屬于自己業(yè)務(wù)場(chǎng)景的圖表指引,傳遞給下一個(gè)設(shè)計(jì)者使用。


結(jié)語

在企業(yè)級(jí)產(chǎn)品設(shè)計(jì)的領(lǐng)域中,用可視化的方式表達(dá)信息,讓數(shù)據(jù)不再枯燥難懂,是一種常見的設(shè)計(jì)手法。在真實(shí)的業(yè)務(wù)場(chǎng)景中,大部分用戶青睞 dashboard(報(bào)表頁面),來呈現(xiàn)「數(shù)據(jù)概覽」、「數(shù)據(jù)監(jiān)控」、「數(shù)據(jù)明細(xì)」等信息,其中的重要組成部分即「統(tǒng)計(jì)型圖表」。如何恰當(dāng)使用「統(tǒng)計(jì)型圖表」來實(shí)現(xiàn)用戶的分析目的? 這對(duì)沒有可視化基礎(chǔ)的制作者來說,還是有一定的難度。

通過以下三步,讓用戶更高效地讀取重要信息,驅(qū)動(dòng)業(yè)務(wù)決策,實(shí)現(xiàn)商業(yè)價(jià)值。

本文用簡(jiǎn)單直白的工具方法,為「零基礎(chǔ)」的圖表制作者提供一種簡(jiǎn)單易學(xué)的思路,讓你的圖表在 Dashboard 里更全面、更有效地傳遞關(guān)鍵信息。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png



文章來源:站酷  作者:Ant_Design

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(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ù)


分享本文至:

日歷

鏈接

個(gè)人資料

存檔