當前位置:吉日网官网 - 傳統美德 - 大數據可視化大屏圖表設計經驗,教妳!

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

自從和妳分享第壹篇《大數據可視化大屏設計心得》開始,我就教妳!“,很多朋友會問我壹些相關的問題。看了朋友發的視覺稿,整體還不錯,但是發現圖表設計有些問題。妳可能對數據可視化的圖表設計經驗比較少,所以本文就把圖表的細節挖掘出來,分享壹下我遇到的坑和我對圖表設計的理解。

平面設計?

圖表設計概念

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

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

折線圖

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

在左側,坐標軸設置得太低,多段線變化得太陡。圖中,數值範圍為(10-34)的數據可視化誇大了折線變化的趨勢。

如果右邊坐標軸的值設置得太高,多段線的變化會太平緩,無法清晰地表達多段線的變化。

合理的折線圖要占據圖表三分之二的位置,圖表x軸的取值範圍要根據折線取值的增減而變化,需要向前端的弟弟妹妹解釋,進行動態計算。

折線圖的折線粗細要合理。太細的折線會降低數據表現,太粗的折線會丟失折線中數據波動的細節,很難直觀準確的找到折線對應的數值!我壹般用兩個像素的線,看起來比較合適!

右側刻度線顏色過重,影響圖表數據的表現。圖表中的零基線和刻度線對比不夠明顯,整體比較混亂。零基線強調起始位置,壹般比圖表中的線條顏色更突出。

條形圖/直方圖

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

比如以當前數值範圍為例,數據的最高值是18,X軸的最高值應該是25。當數據上升到壹定高度時,X軸會上升到相應的數值高度,這樣就避免了右圖所示的問題。

坐標軸的標簽文字最好水平排列。當X軸的標簽文字過多時,不建議傾斜排列、上下排列、文字換行,可讀性大打折扣!下圖給出了兩種解決方案,大大提高了標簽文字的可讀性!

解決辦法

如果欄目太分散,數據之間的相關性就會喪失,如果太密集,數據之間就沒有獨立性,不利於舒適閱讀。

當柱為n時,建議柱間直距不要與n相差太大,柱間距離為柱間距離的壹半,視覺上最舒服。

餡餅

左圖1不建議在餅圖中與百分比值壹起顯示。餅狀圖本身的形狀和大小,字太多的時候容易溢出。如果有壹個2%和壹個1%,就很難區分圖形的方向,從而失去了數據可視化的意義。PPT通常會有這樣的設計風格,因為它是壹個死圖。

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

當餅狀圖是檢測率,或者壹些重要信息檢測側重於數據時,不建議順時針排列大小數據。這種情況在左邊1圖表中很少見到,因為它側重於檢測到的值,顯示未檢測到的數據其實是雞肋,這可能是極少數情況下的需要!

右圖最適合檢測率相近的數據,直觀明了,沒有無用數據幹擾!

當餅狀圖的標簽維度過長時,不適合顯示餅狀圖周圍的數據,會顯得淩亂,難以閱讀。解決方法如右圖所示!

圖表分類圖

分享壹個圖表分類百科,保存它,設計數據可視化產品,會有重要的參考價值!

這個圖是設計師Abela對圖的各種特性的概括。

  • 上一篇:外貿營銷推廣有哪些值得推薦的方法?
  • 下一篇:天貓店鋪運營有哪些小技巧?
  • copyright 2024吉日网官网