如今應用程式的設計開發越來越多地由數據驅動,因此人們對於高品質的數據可視化需求水漲船高。但是我們發現,實踐中很多圖表並不容易讓人理解,甚至會產生誤導,因此本文列出如下20條優化建議,希望能夠幫助你實現更好的數據可視化。
1. 選擇正確的圖表類型
如果選擇了錯誤的圖表類型,或只是預設使用最常見的圖表類型,可能會使使用者感到困惑,或對數據的意義產生誤解。一個數據集可以用很多種方式來表述,具體採用哪種方式要取決於使用者的需求。所以一定要從檢查數據集和調研使用者需求著手來選擇圖表類型。
2. 根據數據的正負值確定正確的繪圖方向
當使用水平條圖表時,請注意要在基線的左邊繪制負值,在右邊繪制正值。
不要在基線的同一側繪制負值和正值。
3. 柱狀圖的起點要從0基線開始
截斷數據會導致錯誤的表述。在下面的例子中,透過左邊的圖表,你可以很快得出B值是D值的3倍多的結論。而實際上,二者的差距要小得多(見右圖)。
所以,從零基線開始作圖,可以確保得到一個更準確的數據表示。
4. 線形圖可以使用自適應的Y軸刻度
對於折線圖來說,如果總是將Y軸的顯示起點限制在0,可能會使圖表折線顯示上缺少起伏,幾乎是平坦的。由於折線圖主要用來表示趨勢,所以最好能夠根據特定階段的數據集來調整顯示比例,並保持折線圖形顯示在Y軸范圍的三分之二區域內。
5. 使用折線圖時要考慮到數據的時間序列
折線圖是由線條連接的一系列“標記”組成的,通常用於形象地顯示數據在時間間隔(一個特定的時間序列)內的變化趨勢。這有助於說明數值是如何隨時間變化的,在時間間隔較短的情況下效果非常好,但當數據更新不頻繁時,可能會引起混淆。
例如:上圖使用了折線圖來表示每年的收入,如果數值是按月更新的,那麼就需要按月查看圖表。使用者可能會認為連接“標記”的線上的每個點都代表了當時的收入值,而實際上在那個特定時間的真實收入數字是未知的。
在這種情況下,使用垂直條形圖可能是一個更好的選擇。
6. 不要使用“平滑的”折線圖
平滑的折線圖可能在視覺上令人愉悅,但它們歪曲了其背後的實際數據,而且過粗的線條也掩蓋了真正的“標記”的位置。
7. 避免混亂的雙軸形式圖表
有時為了節省圖表空間,你可能會傾向於使用雙軸圖表,即兩個數據系列具有相同的衡量標准,但各自變化幅度不同。這種圖表不僅難以閱讀,而且不能清晰地表示兩個數據序列之間的對比。大多數使用者不會注意顯示比例,他們很可能只是掃一眼圖表,然後得出錯誤的結論。
8. 限制圓餅圖中顯示的區塊數量
圓餅圖是最受歡迎的圖表之一,但也是經常被濫用的圖表。大多數情況下,柱狀圖是一個更好的選擇。但是,如果你決定使用圓餅圖,這里有一些如何使它正確發揮作用的建議:
-
顯示的區塊不要多於5-7個,保持整體視覺簡單清晰。
-
你可以把多出來的幾個最小的區塊統一歸入“其他”區塊里。
9. 直接在圖表上貼標簽
如果沒有適當的標簽,無論你的圖表有多好,它都不會有意義。直接在圖表上貼標簽對所有瀏覽者都有很大幫助。而對照圖例需要把數值和相應的區域一一對應上,會耗費瀏覽者更多時間和精力。
10. 不要直接在圖表區塊里貼標簽
直接把數值標簽放在區塊里可能會降低圖表的可讀性,如果有很小的區塊也不容易顯示完全。正確的做法是,在區塊外部添加黑色的數值標簽,與每個區塊標出明確的聯係指向。
11. 對圓餅圖的區塊按大小進行排序以增強可讀性
在使用圓餅圖時,有幾種常用的方式:
-
把最大的一個區塊放在12點的位置,然後把其餘的區塊按順時針方向降序排列。
-
把最大的一個區塊放在12點鐘的位置,第二大區塊順時針放在後面,第三大區塊放在11點鐘的位置,其餘的區塊按大小依次順時針順序排列。
12. 避免隨機性
同樣的建議也適用於許多其他類型的圖表,不要預設按字母順序排序。把最大的數值放在最上面(對於水平條形圖)或最左邊(對於垂直條形圖),以確保最重要的數值佔據最突出的空間,減少眼睛的移動,縮短閱讀圖表所需的時間。
左邊水平條形圖順序隨機,右邊從最大值到最小值排序
13. 細細的圈狀圖表缺乏可讀性
一般來說,餅狀圖不是可讀性最好的圖表,因為很難直觀對比相似的數值。但當我們把中間的部分去掉,得到一個甜甜圈形狀的圖,這樣的確騰出了空間來顯示額外的訊息,但卻犧牲了清晰度,所以如果處理方式過於極端就會使圖表失去作用。
14. 讓數據自己說話
避免過多不必要的華麗修飾,因為它不僅讓人分心,而且可能導致對數據的誤讀和錯誤認知。製作圖表時應該避免如下情況:
-
使用3D元素
-
使用陰影、漸變和其他顏色變換
-
使用斑馬紋和過多的網格線
-
使用過於裝飾性的、斜體、粗體或襯線字體
15. 選擇與你的數據性質相匹配的配色方案
顏色是數據可視化的重要組成部分,通常配色方案類型有這3種:
-
定性配色方案:最適用於分類顯示變量。選擇的顏色應該是獨特的,以確保區分度。
-
順序性配色方案:最適用於需要按特定順序排列的數字變量。使用色相或明度或兩者的組合,你可以創建一個連續的顏色集。
-
分歧配色方案:是兩個連續調色板的組合,中間有一個中心值(通常是0)。通常,分歧調色板用來描述數據正負值的變化。使用的顏色也需要符合“消極”和“積極”的概念。
有一個方便的工具——ColorBrewer,它可以幫助你生成各種配色方案。
16. 無障礙設計
根據美國國家眼科研究所的數據,大約每12個人中就有一個是色盲。你的圖表需要讓盡可能多的受眾都能夠讀懂,所以也要注意盡量採用無障礙設計。
-
配色方案中使用不同的飽和度和亮度。
-
用黑白兩色列印你的數據可視化圖表,檢查其對比度和可讀性。
17. 注重可讀性
確保排版能夠准確清晰地傳達訊息,幫助使用者關注數據本身,而不是分散他們的注意力。
-
選擇可讀的字體,避免使用襯線字體和高度裝飾性的字體
-
避免使用斜體、粗體和大寫字母
-
確保文字顏色與背景色的高度對比
-
不要旋轉文字
18. 使用水平條形圖而不是旋轉的標簽
這個簡單的技巧將確保使用者能夠更方便地查看圖表(而不至於使他們的脖子緊張)
19. 選擇合適的圖表庫
如果你的任務是在網路和移動項目中添加互動式圖表,你應該問的第一個問題是我們將使用什麼圖表庫?現代的圖表庫已經應用了許多前面提到的規則。基於一個定義好的庫進行設計,可以確保實施的便利性,並為你提供大量的互動想法。
20. 動態可視化報告
數據可視化不僅僅是靜態的圖表,我們有很多方法可以透過改變參數、可視化類型、時間軸來幫助使用者探索和發現更多結論,使數據價值和洞察力最大化。在下面的例子中,你可以看到 iOS 健康應用程式,它使用了各種數據展示的組合進行很好的展示。
- 本文授權轉載自:36kr(36氪)
請注意!留言要自負法律責任,相關案例層出不窮,請慎重發文!