當前位置:編程學習大全網 - 人物素材 - 大數據可視化大屏圖表設計經驗,教給妳!

大數據可視化大屏圖表設計經驗,教給妳!

自從跟大家分享第壹篇 《大數據可視化大屏設計經驗,教給妳!》 ,很多小夥伴都會問我壹些相關的問題,看了小夥伴給我發的視覺稿,整體都還不錯,但是發現圖表的設計都有壹些問題,大家可能對數據可視化的圖表設計經驗少壹些,所以這篇文章就挖掘壹下圖表的細節表現,分享我曾經遇到過的坑和對圖表設計的理解。

圖表設計?

圖表設計概念

圖表設計是數據可視化的壹個分支領域,是對數據進行二次加工,用統計圖表的方式進行呈現,也是數據可視化的核心表現,圖表設計既要保證圖表本身數據清晰準確、直觀易懂,又要在找準用戶關註的核心內容進行適當的突顯,幫助用戶通過數據進行決策。

下面分析三種常用的可視化圖表設計:

折線圖

折線圖常用於表示數據的變化和趨勢,坐標軸的不同對折線的變化幅度有很大的影響。

左圖坐標軸設定的太低,折線變化過於陡峭,圖中數值區間為(10-34)數據可視化的表現過於誇大了折線變化的趨勢。

右圖坐標軸的數值設定的太高,則折線變化過於平緩,無法清晰的表現折線的變化。

合理的折線圖應當占據圖表的三分之二的位置,圖表的X軸數值範圍應根據折線的數值增減變化而變化,這需要跟前端小哥哥小姐姐說明,做成動態計算。

折線圖的折線粗細要合理,過細的折線會降低數據表現,過粗的折線會損失折線中的數據波動細節,視覺上較難精準找到折線點的相應數值!我通常用兩個像素的線,看起來比較合適!

右圖刻度線顏色過重,影響圖表數據的表現,零基線跟圖表內的刻度線對比不夠明顯,整體很亂。零基線是強調起始位置的,壹般要比圖表內的線顏色凸出壹些。

條形圖/柱狀圖

理想很豐滿,現實很骨感。這個案例是我之前在工作中遇到的問題,數據進來後,被嚇到了,問題的原因是沒有跟前端小哥姐溝通好,他們把X軸寫死,導致出現這種問題,其實應該情況要把這些圖表的取值範圍寫成動態計算的。

例如,以現在數值範圍為例,數據的最高值為18,X軸最高數值應該為25,當數據又上升壹定的高度後,X軸再上升到相應的數值高度,這樣避免了如右圖的問題。

坐標軸的標簽文字最好能水平排列, 當X軸標簽文字過多時,不建議傾斜排列、上下排列、換行排列 文字多了這樣的展示大大降低了閱讀性!下圖給出兩個解決方案,大大提高標簽文字的閱讀性!

解決方案

柱子之間過於分散就會失去數據之間的關聯性,過密就會變得數據之間沒有獨立性更不利於舒適閱讀。

當柱子為n時,柱子直接的距離建議與n相差不要太大,柱子靠邊的距離,最好是柱子之間的壹半的距離,這樣視覺上最為舒適。

餅圖

左1圖,不建議在餅圖內與百分比數值壹起顯示,餅圖本身的形狀和大小,文字過多時容易溢出,如果出現壹個2%壹個1%,就很難辨別圖形指向,這樣也就失去了數據可視化的意義,PPT通常有這樣的設計樣式,因為是個死圖。

左3圖,人的閱讀習慣是從左到右,從上到下,所以數據從大到小排列,更有助於閱讀,圖形也更具美感!

當餅圖為檢出率,或者壹些重要信息檢測的重點關註數據,就不建議大小數據順時針排列,左1圖這種情況壹般很少出現,因為關註的是檢出數值,展示未檢出數據實為雞肋,可能是極少情況的需要吧!

右圖對於類似檢出率的數據最為合適,直觀清晰,沒有無用數據幹擾!

當餅圖的標簽維度過多時,就不適合把數據圍繞餅圖壹周展示,會很亂,不易閱讀,解決方案如右圖!

圖表分類圖

分享壹張圖表分類大全,保存起來,設計數據可視化產品,會有重要參考價值!

這張圖由設計師Abela對圖表的各種特征進行了大致的概括總結。

  • 上一篇:講座海報制作軟件-求Adobephotoshopcs3視頻教程全集(從0基礎開始的那種視頻課程)
  • 下一篇:關於鑒賞的論證材料
  • copyright 2024編程學習大全網