可視化圖表設計原則，實在太有用了！

Sponsor

最近幾年以來，大家能看到B端設計趨勢已經越來越火熱，在B端設計中關于圖表的設計算是為數不多的視覺發揮點了。那么怎樣才能做好圖表設計，讓設計出來的圖表高大上，符合業務需求，讓業務方和總監對你贊不絕口，本文就必須看完和收藏了，因為實在是太實用！

之前也分享過一篇關于數據可視化的干貨，《可視化數據色彩搭配指南》，今天的這篇算是更加系統和完善了。

應用設計越來越依賴數據驅動，對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表，但我們其實可以通過遵循一些簡單的規則來改變這個情況。

1. 選擇一個正確的圖表可視化類型

選擇錯誤的圖表類型，或默認為最常見的數據可視化類型，可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容，可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。

2. 根據正負值使用正確的繪圖方向

當使用水平條時，在基線的左側繪制負值，在右側繪制正值。不要在基線的同一側繪制負值和正值。

3. 條形圖總是以0基線開始

刪數據起點會導致曲解。在下面的例子中，看左邊的圖表可以很快的得出結論，值B比D大3倍多，而實際上，兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。

4. 折線圖應該要清晰體現y軸上的趨勢變化

對于折線圖，總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢，因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。

5. 使用折線圖時要考慮時間連貫性

折線圖是由線連接的“標記”組成，通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的，并且對于較短的時間間隔非常有效，但當數據更新不頻繁時，這可能會導致混淆。

例如: 使用折線圖來代表年度收入，如果數據是每月更新的，則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值，而在特定時間實際的收入數字是未知的，所以可能會產生誤會。在這種情況下，使用垂直條形圖可能是一個更好的選擇。

6. 不把折線圖強行”平滑“

平滑的折線圖可能在視覺上很好看，但它們錯誤地反映了背后的實際數據，而且過粗的線會模糊真正的“標記”位置。

7. 避免使用比例不同的雙軸折線圖

通常，為了節省可視化空間，當有兩個具有相同度量但大小不同的數據系列時，可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀，而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例，只是瀏覽圖表，然后就得出了錯誤的結論。

8. 限制餅圖中顯示的切片數量

餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下，條形圖是更好的選擇。但如果你決定做一個餅狀圖，有2個比較好的建議:

1）不要超過5-7片，保持簡單

2）可以將額外的最小段分組到“其他”切片

9. 在圖表上直接標注

如果沒有適當的標簽，無論你的圖表有多好，它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。

10. 不要在切片上貼數據

將數據放在切片上可能會導致多個問題，在可讀性問題上和窄切片上都會有挑戰。相反，添加黑色標簽能清晰的鏈接到每個部分。

11. 保持餅圖切片秩序以提升閱讀效率

在確定餅片秩序時，有幾種常用的方法:

1）將最大的切片放在12點的位置，然后將下一片切片順時針降序排列

2）把最大的切片放在12點的位置，第二大的放在順時針相鄰位置，第三大的放在11點的位置，其余的切片按順時針降序排列

12. 避免隨機排列

同樣的建議也適用于其他許多圖表。不要默認采用字母排序，將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖)，以確保最重要的數值占據最突出的空間，減少眼球運動和閱讀圖表所需的時間。

13. 窄的餅圖是難閱讀的

餅圖通常不是最容易閱讀的圖，因為比較相似的值非常困難。當我們把中間部分去掉，創建一個圓圈圖表時，我們騰出了空間來顯示額外的信息，但這樣犧牲了清晰度，極端情況下，圖表就會變得毫無用處。

14. 視覺效果不要搶了數據風頭

不必要的造型不僅會分散注意力，還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:

1）3D元素，明暗面

2）陰影、漸變和其他扭曲的多彩色

3）斑馬圖案，過多的網格線

4）過度裝飾，斜體，粗體或襯線字體

15. 選擇與數據性質相匹配的調色板

顏色是有效的數據可視化的組成部分，在設計時考慮以下3種顏色類型:

一個定性調色板最適合顯示分類變量。為確保易用性，所分配的顏色應該是不同的。

連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合，可以創建一個連續的顏色集。

發散調色板是兩個連續調色板的組合，中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。

看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3，它可以幫助你生成各種調色板。

16. 設計的可訪問性

根據美國國家眼科研究所(National Eye Institute)的數據，大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

1）在調色板中使用不同的飽和度和亮度

2）把現有配色去色然后檢查對比度和可讀性。

17. 關注易讀性

確保排版能夠準確傳達信息，幫助用戶專注于數據，而不是分散用戶的注意力。

1）選擇易讀的字體，避免襯線和裝飾過度的字體

2）避免使用斜體、粗體和全部大寫

3）確保與背景有高對比度

4）不要旋轉文字

18. 使用水平條形圖代替旋轉標簽

這個簡單的技巧將確保用戶能夠更有效地閱讀圖表，而不會扭傷他們的脖子。

19. 事先選擇合適的圖表庫

如果你的任務是在web和移動項目中添加交互式圖表，你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則?；谝讯x庫的設計將確保易于實現，并能提供大量交互想法。

20. 做成動態圖表

幫助用戶通過改變參數，可視化數據進行探索。然后得出結論，最大化價值和洞察力。在下面的示例中，你可以看到IOS Health應用使用了各種數據表示的組合。

最后
送大家一份可視化數據圖表素材
▽

請點擊鏈接，查看【196】可視化數據圖表素材.zip
下載地址：https://mdl.ink/MXcvnk 密碼：6666

原文：https://uxdesign.cc/20-ideas-for-better-data-visualization-73f7e3c2782d
作者：Taras Bakusevych
譯者：彩云Sky（id:彩云譯設計）

本文翻譯已獲得作者的正式授權（授權截圖如下）

如覺得有幫助，

請分享本文給更多小伙伴們吧!

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。