平面設計?
圖表設計概念
圖表設計是數據可視化的壹個分支,是對數據的二次加工,以統計圖的形式呈現。也是數據可視化的核心表現。圖表設計不僅要保證圖表中的數據本身清晰、準確、直觀、易懂,還要突出用戶適當關註的核心內容,以幫助用戶通過數據進行決策。
下面分析三種常用的視覺圖表設計:
折線圖
折線圖常用來表示數據的變化和趨勢,軸的不同對折線的變化幅度影響很大。
在左側,坐標軸設置得太低,多段線變化得太陡。圖中,數值範圍為(10-34)的數據可視化誇大了折線變化的趨勢。
如果右邊坐標軸的值設置得太高,多段線的變化會太平緩,無法清晰地表達多段線的變化。
合理的折線圖要占據圖表三分之二的位置,圖表x軸的取值範圍要根據折線取值的增減而變化,需要向前端的弟弟妹妹解釋,進行動態計算。
折線圖的折線粗細要合理。太細的折線會降低數據表現,太粗的折線會丟失折線中數據波動的細節,很難直觀準確的找到折線對應的數值!我壹般用兩個像素的線,看起來比較合適!
右側刻度線顏色過重,影響圖表數據的表現。圖表中的零基線和刻度線對比不夠明顯,整體比較混亂。零基線強調起始位置,壹般比圖表中的線條顏色更突出。
條形圖/直方圖
理想很豐滿,現實很骨感。這個案例是我之前工作中遇到的問題。數據進來後,我很害怕。問題的原因是我沒有和前端的小哥哥小姐姐們溝通好。他們把X軸寫死了,導致了這個問題。其實這些圖表的取值範圍應該寫成動態計算。
比如以當前數值範圍為例,數據的最高值是18,X軸的最高值應該是25。當數據上升到壹定高度時,X軸會上升到相應的數值高度,這樣就避免了右圖所示的問題。
坐標軸的標簽文字最好水平排列。當X軸的標簽文字過多時,不建議傾斜排列、上下排列、文字換行,可讀性大打折扣!下圖給出了兩種解決方案,大大提高了標簽文字的可讀性!
解決辦法
如果欄目太分散,數據之間的相關性就會喪失,如果太密集,數據之間就沒有獨立性,不利於舒適閱讀。
當柱為n時,建議柱間直距不要與n相差太大,柱間距離為柱間距離的壹半,視覺上最舒服。
餡餅
左圖1不建議在餅圖中與百分比值壹起顯示。餅狀圖本身的形狀和大小,字太多的時候容易溢出。如果有壹個2%和壹個1%,就很難區分圖形的方向,從而失去了數據可視化的意義。PPT通常會有這樣的設計風格,因為它是壹個死圖。
左圖3,人的閱讀習慣是從左到右,從上到下,所以數據從大到小排列,更有助於閱讀,圖形也更美觀!
當餅狀圖是檢測率,或者壹些重要信息檢測側重於數據時,不建議順時針排列大小數據。這種情況在左邊1圖表中很少見到,因為它側重於檢測到的值,顯示未檢測到的數據其實是雞肋,這可能是極少數情況下的需要!
右圖最適合檢測率相近的數據,直觀明了,沒有無用數據幹擾!
當餅狀圖的標簽維度過長時,不適合顯示餅狀圖周圍的數據,會顯得淩亂,難以閱讀。解決方法如右圖所示!
圖表分類圖
分享壹個圖表分類百科,保存它,設計數據可視化產品,會有重要的參考價值!
這個圖是設計師Abela對圖的各種特性的概括。