2021-7-13 ui設(shè)計(jì)分享達(dá)人
本文一句話概括：數(shù)據(jù)可視化中，如何用最簡單的圖表高效地傳遞信息。
看似簡單的 3 類常掛在嘴邊的「折柱餅」，你真的知道怎么使用嗎？
@rubyxrli 在 紐約的Uber數(shù)據(jù)可視化大會上所做演講中提到：
根據(jù)我的經(jīng)驗(yàn)（基于原型研究超過10年）大多數(shù)可視化問題可以通過一些圖表來解決。很少情況下，需要你去想出一個全新的表達(dá)方式。像條形圖、折線圖、散點(diǎn)圖、透視表等「圖形化主力」真的很難被替代！
對于大部分的企業(yè)級產(chǎn)品使用者來說，基本的圖表類型，通?？梢詾榇蠖鄶?shù)當(dāng)前頁面的問題作出解釋，但是我們要做并不是簡單地調(diào)用一個圖表就結(jié)束了，如果想讓你的頁面更有效地傳遞結(jié)論、原因，可以讓使用者探索更多可能性，甚至去發(fā)現(xiàn)新的分析思路，那么首先你需要掌握下面的分析套路：
「對比，細(xì)分，溯源」，給簡單的圖表加點(diǎn)「戲」
在數(shù)據(jù)分析中，分析思路一般可以概括為「對比，細(xì)分，溯源」，這也是《數(shù)據(jù)化管理》中提到六字箴言。首先我們來了解一下這六字箴言的具體含義：
此處引用部分《分析思維 第三篇：數(shù)據(jù)分析的三板斧》內(nèi)容
對比分為橫向?qū)Ρ群涂v向?qū)Ρ取?/em>
· 橫向?qū)Ρ仁侵负汀八恕北容^，比如，兩個網(wǎng)站的用戶流失率；
· 縱向?qū)Ρ仁侵赴凑漳硞€維度，和“自己”比較。比如，這個網(wǎng)站上個月今天和這個月今天的用戶流失率。
細(xì)分是指分維度、降低粒度來分析數(shù)據(jù)。
· 分維度是指增加維度，比如，離職率按照部門維度來分析；
· 降低粒度是指降低數(shù)據(jù)聚合的程度，比如，離職率不按年份，而按照月份來統(tǒng)計(jì)。
溯源是指在對比、細(xì)分鎖定到具體維度和粒度之后，依然沒有結(jié)論，那就需要查看原始數(shù)據(jù)或相關(guān)聯(lián)數(shù)據(jù)，洞察數(shù)據(jù)，從數(shù)據(jù)中尋找靈感。
第一個 3 代表圖表類型；第二個 3 代表分析套路。
了解分析思維的三個套路后，可以嘗試在自己的圖表中檢驗(yàn)打鉤。
通常在一個數(shù)據(jù)概覽頁面，人們都會使用一個折線圖，來表示一個關(guān)鍵指標(biāo)的發(fā)展趨勢，當(dāng)然這么做非常直觀，也非常準(zhǔn)確。當(dāng)我們?yōu)檎劬€圖添加一個對比的維度，就可以使折線圖表達(dá)的內(nèi)容更加豐滿。
可以是橫向?qū)Ρ取昂退吮取薄?
也可以是縱向?qū)Ρ取昂妥约罕取薄?
G2Plot 為圖表提供了很多圖表輔助信息組件：https://g2plot.antv.vision/zh/examples/general/label
例如：
· 參考型組件：參考線、趨勢線、輔助區(qū)域等
· 極值型組件：最高/低點(diǎn)、預(yù)警線等
通過右上角的 TAB 切換，提升和降低數(shù)據(jù)聚合的程度
和別人比。
將維度拆分進(jìn)行分析。
這是使用者在使用柱形圖做對比時(shí)，經(jīng)常遇到的問題：
· X 軸類別數(shù)量過多，柱子非常密集
· 軸文字標(biāo)簽數(shù)量過多，文字在 45%旋轉(zhuǎn)后可讀性降低
這時(shí)，設(shè)計(jì)者應(yīng)該試著旋轉(zhuǎn)柱圖，把它變成一個條形圖。
餅/環(huán)圖天生自帶「縱向?qū)Ρ取沟男再|(zhì)，但是除了用一個餅/環(huán)圖之外，還有什么做法？
第一個 N 可以代表圖表類型，也可以代表頁面，但需要是一個實(shí)體；
第二個 N 代表分析思路，上文中提到的 3 個套路只是眾多分析思路中被總結(jié)出最為常用的，還可以根據(jù)不同業(yè)務(wù)場景的訴求去添加思路。
這個矩陣的表格填出來后，除了可以幫助設(shè)計(jì)者檢驗(yàn)是否高度利用了圖表區(qū)域之外，還可以總結(jié)出一份屬于自己業(yè)務(wù)場景的圖表指引，傳遞給下一個設(shè)計(jì)者使用。
在企業(yè)級產(chǎn)品設(shè)計(jì)的領(lǐng)域中，用可視化的方式表達(dá)信息，讓數(shù)據(jù)不再枯燥難懂，是一種常見的設(shè)計(jì)手法。在真實(shí)的業(yè)務(wù)場景中，大部分用戶青睞 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)用戶的分析目的？ 這對沒有可視化基礎(chǔ)的制作者來說，還是有一定的難度。
通過以下三步，讓用戶更高效地讀取重要信息，驅(qū)動業(yè)務(wù)決策，實(shí)現(xiàn)商業(yè)價(jià)值。
本文用簡單直白的工具方法，為「零基礎(chǔ)」的圖表制作者提供一種簡單易學(xué)的思路，讓你的圖表在 Dashboard 里更全面、更有效地傳遞關(guān)鍵信息。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
文章來源：站酷 作者：Ant_Design
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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://m.yvirxh.cn