大數(shù)據(jù)可視化界面設(shè)計(jì)之六:想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

2022-6-14    博博

數(shù)據(jù)可視化的目的,是要對(duì)數(shù)據(jù)進(jìn)行可視化處理,以能夠明確地、有效地傳遞信息?!?——Vitaly Friedman

如何讓人們?cè)诤A康臄?shù)據(jù)中,發(fā)現(xiàn)數(shù)據(jù)的規(guī)律,或者清晰的發(fā)現(xiàn)特異的數(shù)據(jù),那數(shù)據(jù)可視化是一個(gè)有效的表達(dá)方式。

數(shù)據(jù)可視化主要旨在借助于圖形化手段,清晰有效地傳達(dá)與溝通信息。如圖

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

馬克·吐溫有一句名言“世界上有三種謊言:謊言,該死的謊言和統(tǒng)計(jì)數(shù)字?!比藗兘?jīng)常曲解數(shù)字,謊言并不是源于數(shù)字本身,而是錯(cuò)誤或不負(fù)責(zé)任的使用數(shù)字的人,向他人展示數(shù)字的時(shí)候,你有責(zé)任展示出真相?!稊?shù)據(jù)之美》

數(shù)據(jù)真相的展示離不開數(shù)據(jù)圖表的合理選用,那么如何正確的選用呢?就來(lái)聊一聊基礎(chǔ)數(shù)據(jù)圖表類型的選用及辨析。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

常用的基礎(chǔ)圖表類型


第一部分:選用合適的圖表類型


在數(shù)據(jù)可視化設(shè)計(jì)工作中,折柱餅圖表是最常用的,同時(shí)也是最容易混淆的。一組數(shù)據(jù)既可選用折線圖,又可選用柱狀圖的時(shí)候,設(shè)計(jì)師的內(nèi)心往往會(huì)產(chǎn)生“我該選用哪種圖表能更好地將數(shù)據(jù)傳達(dá)給用戶呢”的疑惑中。

基于上述疑問(wèn),下面給大家一些設(shè)計(jì)指引供參考。

1. 柱狀圖 VS 折線圖

折線圖主要表示一段時(shí)間內(nèi)數(shù)據(jù)變化趨勢(shì),柱狀圖用于描述分類數(shù)據(jù)之間的對(duì)比。如果不需要展示數(shù)據(jù)的變化趨勢(shì),建議不要使用折線圖,而選擇柱狀圖。

相較于折線圖,柱狀圖更多的關(guān)注數(shù)據(jù)之間的對(duì)比而非趨勢(shì)。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

2. 柱狀圖 VS 條形圖

在大多數(shù)情況下,折線圖和柱形圖是可以互相替換的。

1)用戶針對(duì)橫向長(zhǎng)短的敏感性高過(guò)豎向,涉及到排行時(shí)最好使用條形圖。

2)標(biāo)簽較長(zhǎng)時(shí),使用條形圖。例如:城市人口流入量的數(shù)據(jù)展示,由于城市名稱文本比較長(zhǎng),建議使用條形圖。

3)當(dāng)圖表畫布高度大于寬度時(shí)使用條形圖,利用高度空間的富余,展現(xiàn)更多的條形。

反之,建議使用柱狀圖。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

3. 柱狀圖 VS 餅環(huán)圖

基于人的認(rèn)知特征,人對(duì)面積、角度的敏感性沒(méi)有對(duì)長(zhǎng)短的敏感性強(qiáng)。當(dāng)類別的值接近時(shí),不建議使用餅環(huán)圖,除非是強(qiáng)調(diào)單個(gè)數(shù)據(jù)在總體中的占比,突出數(shù)據(jù)在群體中的特點(diǎn)。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

4. 折線圖 VS 面積圖

通常情況下,面積圖是折線圖的一種衍生。在面積圖里,數(shù)軸和線之間的區(qū)域通常用顏色或陰影來(lái)增加易讀性。面積圖數(shù)據(jù)集之間差異化部分在視覺(jué)上得到突顯。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

5. 餅圖 VS 環(huán)圖

從本質(zhì)上來(lái)看,餅圖與環(huán)圖屬于同一類圖表類型。但二者在數(shù)據(jù)可視化的表現(xiàn)上各有側(cè)重。從圖形映射角度來(lái)說(shuō),弧長(zhǎng)比面積、角度更易被識(shí)別、更有效。因此,相對(duì)餅圖,環(huán)圖讓數(shù)據(jù)更具可讀性,同時(shí),可以將強(qiáng)調(diào)數(shù)據(jù)放置在環(huán)圖中部,引起用戶關(guān)注。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

6. 堆疊柱狀圖 VS 餅圖

如果在餅圖或環(huán)圖的基礎(chǔ)上增加一個(gè)多數(shù)據(jù)的對(duì)比,就需要引入堆疊柱狀圖。相較于餅圖,每一個(gè)單個(gè)堆疊柱狀圖就是一個(gè)餅圖的變形,可滿足用戶的單一數(shù)據(jù)的部分之間的對(duì)比關(guān)系。將堆疊柱狀圖橫向排布,就實(shí)現(xiàn)了整體數(shù)據(jù)之間的對(duì)比,而餅圖是不能進(jìn)行整體數(shù)據(jù)的對(duì)比。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

7. 堆疊面積圖 VS 堆疊柱狀圖

堆疊面積圖強(qiáng)調(diào)數(shù)量追隨一個(gè)數(shù)據(jù)變化而變化的程度,同時(shí)強(qiáng)調(diào)部分和整體的變化趨勢(shì)。

堆疊柱狀圖強(qiáng)調(diào)的是整體的對(duì)比,也可以直觀的看出每個(gè)系列的值,尤其是當(dāng)需要看某一單位的綜合以及各系列值的比重時(shí),最適合。

當(dāng)日期數(shù)據(jù)點(diǎn)較多時(shí),比如展示近50年某一組數(shù)據(jù)趨勢(shì)的變化時(shí),建議使用堆疊面積圖,可動(dòng)態(tài)交互,如X軸放大縮小可較為直觀的展示數(shù)據(jù)。當(dāng)日期跨度較小,如近7天、近3天某一組數(shù)據(jù)的的變化關(guān)系時(shí),建議使用堆疊柱狀圖。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)


第二部分:應(yīng)用中需要注意的細(xì)節(jié)


1. 折線圖

1)為了可讀性,折線圖線的數(shù)量建議不要超過(guò)5條。當(dāng)折線數(shù)量超過(guò)5條時(shí),可在圖表默認(rèn)狀態(tài)中高亮最重要的部分。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

2)為了數(shù)據(jù)的易讀性,建議折線視覺(jué)效果使用實(shí)線

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

3)慎用曲線。單折線圖中線條是唯一的主題,線條的每一個(gè)點(diǎn)都真實(shí)的反應(yīng)數(shù)據(jù)的起伏,一般建議使用折線。

若線條趨勢(shì)不需要非常精確呈現(xiàn),且需要消除個(gè)別差一點(diǎn)和整體的趨勢(shì),可以用平滑曲線

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

4)折線圖可以處理大量數(shù)據(jù),非常適合給用戶一些具有參考價(jià)值的數(shù)值,建議添加比較數(shù)據(jù)

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

2. 面積圖

面積圖作為折線圖的一種衍生,可用來(lái)展示連續(xù)性數(shù)據(jù),可很好地表示趨勢(shì)、累積、減少以及變化。堆疊面積圖更擅于展示部分和整體之間的關(guān)系或趨勢(shì),而不是傳達(dá)特定的值。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

3. 柱狀圖

1)柱子之間的間距不要過(guò)大,增加數(shù)據(jù)易讀性。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

2)使用合理的數(shù)據(jù)油墨比,降低用戶獲取數(shù)據(jù)的認(rèn)知成本

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

4. 堆疊柱狀圖

堆疊柱狀圖的數(shù)值必須能相加,相加無(wú)意義的數(shù)據(jù)不建議使用堆疊柱狀圖。如圖,同一區(qū)域的人員年齡相加,是沒(méi)有數(shù)據(jù)意義的,如果將年齡改為人員數(shù)量,就可以橫向?qū)Ρ炔煌瑓^(qū)域的人員數(shù)量,是具有實(shí)際意義的。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

5. 條形圖

分類數(shù)目是固定的,空數(shù)據(jù)也要展示。如果省略部分空數(shù)據(jù)節(jié)點(diǎn),會(huì)造成不必要的誤解,同時(shí),數(shù)據(jù)的整體分布狀況也不能完全表達(dá)出來(lái)。同理,柱狀圖也是一樣。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

6. 餅環(huán)圖

1)若計(jì)算百分比,每個(gè)切片的數(shù)值不能為負(fù),餅圖切片的大小與其相應(yīng)的值成比例,所有切片相加必須為100%。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

2)通過(guò)扇形區(qū)塊的面積,弧度和顏色等視覺(jué)標(biāo)記,展現(xiàn)部分與部分之間以及部分與整體的占比關(guān)系。

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)

3)餅環(huán)圖各切片有序排列

想做好數(shù)據(jù)可視化?先掌握常見(jiàn) 5 類圖表的特點(diǎn)和設(shè)計(jì)細(xì)節(jié)


寫在最后


雖然,數(shù)據(jù)可視化通常會(huì)讓人聯(lián)想到商業(yè)的分析師,但它通常比想象的更具創(chuàng)意并且豐富多彩。從業(yè)務(wù)儀表板、公共健康可視化到流行文化趨勢(shì)分析,數(shù)據(jù)可視化涵蓋了廣泛多樣的應(yīng)用情景。

隨著數(shù)據(jù)可視化的發(fā)展,數(shù)據(jù)表現(xiàn)形式也越來(lái)越豐富、多樣,如在Echarts中有近40個(gè)大類的圖標(biāo)樣式介紹。如?;鶊D、雷達(dá)圖、地圖等等。一些之前比較少見(jiàn)的圖表類型,也越來(lái)越常見(jiàn),如玫瑰圖(南丁格爾玫瑰圖),通過(guò)人民網(wǎng)在疫情期間的應(yīng)用,也為大眾所熟知。

一般來(lái)說(shuō),相較于基礎(chǔ)圖表,目前發(fā)展的數(shù)據(jù)可視化圖表,應(yīng)用場(chǎng)景相對(duì)來(lái)說(shuō)比較局限,同時(shí)制作方式也較為復(fù)雜,不同于基礎(chǔ)圖表,通過(guò)Excel就可以實(shí)現(xiàn),復(fù)雜圖表的制作需要比較專業(yè)的工具,或?qū)I(yè)人員來(lái)實(shí)現(xiàn),如需要專業(yè)的數(shù)據(jù)分析師通過(guò)Tableau、Qlikview、FineBI等數(shù)據(jù)分析工具來(lái)實(shí)現(xiàn),有較高的學(xué)習(xí)與應(yīng)用成本。

好的可視化設(shè)計(jì)一定集易讀、突出數(shù)據(jù)價(jià)值、易于分析、美觀為一體的,最終讓數(shù)據(jù)變得更加簡(jiǎn)單,方便交流,反之,不僅讓數(shù)據(jù)變得更復(fù)雜,而且還會(huì)帶來(lái)錯(cuò)誤誘導(dǎo)。因此,如何讓數(shù)據(jù)分析變得輕松、流暢并且易讀,從而提高用戶的工作效率,降低用戶的工作負(fù)擔(dān),則成為設(shè)計(jì)師的重要責(zé)任。

本文只是介紹了部分基礎(chǔ)圖表的應(yīng)用經(jīng)驗(yàn),后續(xù)有機(jī)會(huì)將繼續(xù)完善可視化圖表應(yīng)用經(jīng)驗(yàn)的沉淀及分享。

作者:弘毅

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

藍(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)系。

魏華的微信.png

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

免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wè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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

大數(shù)據(jù)可視化界面設(shè)計(jì)之一:可視化大屏設(shè)計(jì)快速入門指南

大數(shù)據(jù)可視化界面設(shè)計(jì)之九:超全面的數(shù)據(jù)可視化設(shè)計(jì)指南:設(shè)備篇

大數(shù)據(jù)可視化界面設(shè)計(jì)之十:數(shù)據(jù)可視化必修課:表格篇













分享本文至:

日歷

鏈接

個(gè)人資料

存檔