手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

大數(shù)據(jù)可視化界面設(shè)計(jì)之七:想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!

2022-6-14    博博

在如今這個(gè)時(shí)代,越來(lái)越多的信息和內(nèi)容呈現(xiàn)開(kāi)始依賴數(shù)據(jù)驅(qū)動(dòng),也開(kāi)始有更多的場(chǎng)合需要信息圖來(lái)輔助呈現(xiàn),對(duì)于可視化數(shù)據(jù),從來(lái)沒(méi)有像現(xiàn)在的要求這般高。但是另一方面,我們周圍充斥著大量錯(cuò)誤的圖表呈現(xiàn),希望這篇文章提供的 20 條建議能夠幫你設(shè)計(jì)出更好的信息圖。


1、選擇正確的圖表類型


不同的圖表類型所承擔(dān)的功能是截然不同的,不合理的數(shù)據(jù)呈現(xiàn)會(huì)容易讓用戶誤讀。同樣的數(shù)據(jù)可以使用不同的圖表呈現(xiàn)出不同方面的特征,因此,在設(shè)計(jì)信息圖之前,先理清需求,再來(lái)選擇使用哪種圖表能夠更好地呈現(xiàn)。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


2、根據(jù)數(shù)據(jù)的正負(fù)值選擇正確的繪圖方向


當(dāng)使用數(shù)據(jù)在0的左右波動(dòng),產(chǎn)生正負(fù)差異的時(shí)候,請(qǐng)使用基線來(lái)正確反應(yīng)正負(fù)關(guān)系,不要在同一側(cè)來(lái)呈現(xiàn)數(shù)據(jù),這樣很容易帶來(lái)誤讀。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


3、始終從0處開(kāi)始繪制條形圖


和折線圖不同,條形圖如果從非 0 的位置開(kāi)始,確實(shí)更容易反應(yīng)趨勢(shì),但是給所體現(xiàn)的數(shù)據(jù)量級(jí)和特征是失真的。比如在下面的案例中,B看起來(lái)是D的3倍以上,但是實(shí)際的情況是,兩者差異并不大。所以需要從座標(biāo) 0 處開(kāi)始呈現(xiàn)數(shù)據(jù),這樣會(huì)更準(zhǔn)確。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


4、折線圖應(yīng)該清晰呈現(xiàn)Y軸上的趨勢(shì)變化


對(duì)于折線圖,需要考慮一下 Y軸上的尺度,因?yàn)槿绻麊挝惶?,那么折線圖所呈現(xiàn)出來(lái)的波動(dòng)幅度不夠大,趨勢(shì)的表達(dá)也不夠清晰。這個(gè)時(shí)候,建議調(diào)整Y軸上的單位大小,確保折線的波動(dòng)幅度大概占整個(gè)Y軸的 2/3 即可。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


5、使用折線圖的時(shí)候注意時(shí)間


折線圖是使用線條連接特定時(shí)間節(jié)點(diǎn)的特定數(shù)據(jù)的一種數(shù)據(jù)呈現(xiàn)形式,它有助于說(shuō)明隨著時(shí)間推移,某些情況的變化,但是當(dāng)間隔時(shí)間頻率不對(duì),參差,缺失,那么折線圖的數(shù)據(jù)可能會(huì)無(wú)法對(duì)應(yīng),這個(gè)時(shí)候使用條形圖其實(shí)是更容易呈現(xiàn)的。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


6、不要使用平滑的折線圖


平滑的「折線」在視覺(jué)上看起來(lái)是愉悅,但是它歪曲了背后的實(shí)際數(shù)據(jù),也很難讀到關(guān)鍵的轉(zhuǎn)折點(diǎn)數(shù)據(jù)。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


7、避免讓雙折線互相交叉


通常,為了為了節(jié)省可視化設(shè)計(jì)的空間,設(shè)計(jì)師會(huì)采用雙折線來(lái)呈現(xiàn)數(shù)據(jù),但是在數(shù)量級(jí)不對(duì)等的情況下,折線圖會(huì)很難讀,甚至容易會(huì)誤導(dǎo)用戶,這個(gè)時(shí)候,建議分開(kāi)使用2個(gè)不同的座標(biāo)系來(lái)呈現(xiàn),更加易讀,同樣可以看的出趨勢(shì),也不會(huì)得出錯(cuò)誤的結(jié)論。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


8、限制餅圖中的扇形的數(shù)量


餅圖是最常用但是也是最容易誤用的圖表之一,在絕大多數(shù)的情況下,條形圖是更好的選擇。如果你決定使用餅圖,那么這里有2個(gè)基本的建議:

不要超過(guò)7個(gè)不同的扇區(qū),讓餅圖盡量簡(jiǎn)單
你可以將額外的片段分組到「其他」的扇區(qū)中

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


9、在餅狀圖中直接標(biāo)注對(duì)應(yīng)的數(shù)據(jù)


沒(méi)有合適的文本標(biāo)簽說(shuō)明的情況下,無(wú)論信息圖設(shè)計(jì)得多好都沒(méi)有意義,直接在圖表上進(jìn)行明確的標(biāo)識(shí),才會(huì)對(duì)觀看者產(chǎn)生價(jià)值,需要觀看者自己去關(guān)聯(lián)的設(shè)計(jì)是失敗的。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


10、不要在扇面上做標(biāo)注


不要將數(shù)值直接放置在餅狀圖的扇區(qū)上,在較小的扇區(qū)塊上數(shù)據(jù)會(huì)非常難讀,相反,使用引線來(lái)指引數(shù)據(jù)對(duì)應(yīng)的區(qū)塊會(huì)是更好的方法。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


11、控制餅圖中扇面的排序讓其方便閱讀


對(duì)于餅狀圖的切分方式,有2種常見(jiàn)的順序:

將最大的一塊置于12點(diǎn)鐘方向,然后順時(shí)針按照大小來(lái)排布所有的塊
將最大的一塊置于12點(diǎn)鐘方向,然后在右邊放次大的塊,右邊放置再次的塊,基本上就是越大的扇區(qū)約靠上。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


12、避免隨機(jī)排列


同樣的建議也適用于其他的圖表,不要使用字母順序來(lái)進(jìn)行排列,不要使用筆畫排序,而是按照數(shù)據(jù)大小來(lái)進(jìn)行排列,水平條形圖就將最大數(shù)據(jù)放在頂部,垂直排布則將最大數(shù)據(jù)的放在左側(cè),減少閱讀的時(shí)候的信息分辨的障礙。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


13、不要犧牲信息圖的可讀性


餅狀圖通常是最不容易讀的圖表,因?yàn)樗茈y對(duì)相似的數(shù)據(jù)進(jìn)行對(duì)比,所以在將它設(shè)計(jì)成環(huán)狀的時(shí)候,我們可以使用輔助的數(shù)據(jù)來(lái)呈現(xiàn),但是一定不要犧牲彩色扇區(qū)的可讀性,這樣看起來(lái)高級(jí)但是并不具備基本的可讀性。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


14、視覺(jué)效果不要影響數(shù)據(jù)的呈現(xiàn)


不要讓不必要的視覺(jué)效果來(lái)分散用戶的注意力,這可能會(huì)導(dǎo)致用戶對(duì)于數(shù)據(jù)產(chǎn)生誤解,通常你應(yīng)該避免使用:

3D元素和陰影
漸變和失真的色彩
斑馬紋或者過(guò)多的網(wǎng)格線
裝飾性過(guò)強(qiáng)的字體

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


15、選擇和數(shù)據(jù)屬性匹配的配色


配色是可視化設(shè)計(jì)當(dāng)中繞不開(kāi)的一個(gè)重要的部分,在設(shè)計(jì)的時(shí)候可以考慮以下三種不同的配色方案:

使用定性的配色方案,不同的色相對(duì)應(yīng)不同的元素,確保在整體配色的可訪問(wèn)性
使用符合一定順序(比如明暗)的近似色的配色,呈現(xiàn)出一種連續(xù)的色彩變化
橫跨冷暖色調(diào)的配色方案,將中性色置于中間,用來(lái)呈現(xiàn)存在正負(fù)關(guān)系的數(shù)據(jù)變化

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


16、使用無(wú)障礙的配色


根據(jù)目前的統(tǒng)計(jì)數(shù)據(jù),大概 12 人當(dāng)中有一個(gè)人存在視覺(jué)障礙,有的是色盲,有的是色弱。你的圖表設(shè)計(jì)需要確保兼顧到這一部分用戶的需求。

在配色方案當(dāng)中使用不同飽和度和明暗的色彩
使用去色效果來(lái)校驗(yàn)?zāi)愕呐渖膶?duì)比度

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


17、關(guān)注內(nèi)容的易讀性


在信息圖的排版易讀性上同樣是有要求的,要避免分散用戶的注意力,不會(huì)制造視覺(jué)障礙:

選擇清晰的非襯線字體,避免使用襯線體和過(guò)度裝飾的字體
避免使用斜體、粗體和全大寫字體
確保和背景之間的信息對(duì)比度
不要旋轉(zhuǎn)文本

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


18、使用水平條形圖來(lái)優(yōu)化傾斜標(biāo)簽


這是一個(gè)非常簡(jiǎn)單的技巧,能夠確保用戶在閱讀的時(shí)候足夠輕松,不會(huì)因?yàn)閮A斜的文本扭傷脖子或者加重落枕的癥狀。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


19、事先選好你的圖表庫(kù)


如果你的設(shè)計(jì)項(xiàng)目是面向 Web 或者移動(dòng)端的交互式圖表,那么你需要考慮的第一個(gè)問(wèn)題就是,要用什么樣的圖標(biāo)庫(kù)。如今不同的圖表庫(kù)在功能模塊和規(guī)則上各不相同,你需要在一開(kāi)始就基于你的需求和設(shè)計(jì)想法,做出選擇。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


20 、不只停留在在數(shù)據(jù)靜態(tài)呈現(xiàn)上


信息圖本質(zhì)上是在對(duì)數(shù)據(jù)進(jìn)行優(yōu)化處理、呈現(xiàn)的基礎(chǔ)上,幫助用戶進(jìn)行探索,最大化地從數(shù)據(jù)中獲得信息洞察,讓數(shù)據(jù)發(fā)揮價(jià)值。在下面的 iOS Health 應(yīng)用就是在最大程度地反映數(shù)據(jù)應(yīng)有的意義和功能。

想把數(shù)據(jù)可視化做好?這 20 個(gè)超實(shí)用的經(jīng)驗(yàn)總結(jié)一定要先看過(guò)!


結(jié)語(yǔ)


對(duì)于所有想要在數(shù)據(jù)的可視化設(shè)計(jì)上有所建樹(shù)的同學(xué)而言,強(qiáng)烈建議閱讀一下 Dona M.Wong 所撰寫的《華爾街日?qǐng)?bào)信息圖設(shè)計(jì)指南:呈現(xiàn)數(shù)據(jù)和事實(shí)的注意事項(xiàng)》,本文中很多內(nèi)容都受到了這本書的啟發(fā)。

作者:陳子木

轉(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.88yangsc.com )是一家專注而深入的界面設(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è)人資料

存檔