起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識讓數據更有趣！全面總結圖表設計的思路和方法
編輯導語：數據成為了日常工作的一大重要角色，越來越多的公司以數據驅動產品進行迭代。但令人困惑的是可視化圖表無處不矮，但卻給大家帶來了誤導。作者分享了一些簡單的思路與方法，以此來改善這些問題，希望對你有所幫助。
越來越多的公司以數據驅動產品進行迭代，從中我們能看出數據的重要性。
日常工作中，無論是匯報還是設計，都離不開圖表的使用。但令人困惑的可視化圖表無處不在，往往給人帶來誤導性，通過遵循下面這些簡單的思路和方法可以有效改善這些問題。
一、選擇正確的圖表類型
選擇錯誤的圖表類型，或默認使用最常見的類型，可能會混淆用戶對數據產生誤解。
一組數據可以有多種表示方式，具體類型取決于用戶希望看到的內容。
二、根據正負值確定方向
當數據中出現正負值時，要先確定基線的位置，再確定數據位置，將正值分布在基線上側（X軸）或右側（Y軸），負值分布在下側（X軸）或左側（Y軸）。
避免在基線的同一側同時添加正值和負值，造成用戶對圖表信息理解錯誤。
三、始終從零開始繪制條形圖
單看左側的條形圖，能發現B的值比D的值要多3倍以上，但在右側從零開始的條形圖中，實際差異要小得多。從零開始可確保用戶獲得更準確的數據展示。
四、折線圖使用自適應Y軸
對折線圖來說，如果始終將Y軸的比例限制為從零開始，一旦數據波動幅度很小，那整個折線圖會看起來很平坦，效果不明顯。
折線圖主要用來表現趨勢，根據給定時間的數據調整比例，并保持折線區域能占到Y軸范圍的三分之二。
五、使用折線圖時考慮時間間隔
折線圖是由一條條小線段連接組成，這些線段展示了在短時間內數據是如何變化的。當時間間隔很大或數據更新不頻繁時，就要慎重考慮是否使用折線圖。
例如想表示年收入，左側的兩個折線圖樣式都不太合適，每個月的收入是固定的數字，而折線圖展現的數據更像是收入的變化，相反右側的條形圖更適合來展示每月具體的收入。
六、不要使用平滑的折線
平滑的折線圖可能看著很舒服，但它們歪曲了背后的實際數據，而且過粗的線條掩蓋了真正的節點。
七、謹慎使用雙軸折線圖
當兩組數據出現X軸代表的信息相同但Y軸不同時，為節省空間我們可能會考慮用雙軸圖。
但大部分雙軸圖難以閱讀，只是感覺圖表上有很多數據，但遠遠沒有單個圖表展示的清晰。
八、限制餅圖的切片數量
餅圖是最受歡迎但經常被誤用的圖表之一。在使用餅圖時，首先要注意切片的數量最好保持在5-7片。
如果還有很多占比很小的切片，可以將這些全部歸到“其他”切片中。
九、直接在圖表上標注
如果沒有正確的標注，無論圖表設計的多好看都沒有意義。
直接在圖表上標注數據或信息對使用者來說更直觀，更節省時間和精力。
十、不要在切片上標注
將數值放在切片上雖然很直觀，但可能會導致很多問題，例如左側餅圖數值的可讀性問題、切片太薄無法添加數值等，對比來看，右側餅圖添加標注的方式更合適。
十一、餅圖切片的排序
餅圖切片的排序是一個很容易忽略的問題，將餅圖切片只是一個開始，通過合理的排序保證用戶清晰觀看圖表才是關鍵。
常見的排序方法是將面積最大的切片放在12點鐘位置，然后按順時針降序放置第二大的切片，以此類推。
十二、避免隨機性
同樣的建議適用于其他類型的圖表。盡量不要默認按字母順序排序，將最大值放在頂部(水平條形圖)或左側(對于垂直條形圖)，以確保最重要的值占據最突出的空間，減少視線運動和閱讀圖表所需的時間。
十三、避免極端的環形圖
環形圖，又稱為甜甜圈圖,是餅圖的一種變體,本質是餅圖將中間區域挖空，用在多樣品間的多種數據的比較中。
雖然環形圖騰出中間區域來顯示額外的信息，但犧牲清晰度走極端會讓圖表變得毫無用處。
十四、讓數據自己說話
不必要的設計樣式不僅會分散注意力，還可能導致用戶對數據誤解并產生錯誤印象，圖表在設計上應避免：
- 3D元素、陰影、漸變；
- 斑馬紋、過多的網格線；
- 裝飾性過強的斜體、粗體或襯線字體。
十五、選擇與數據性質匹配的調色板
顏色是保持數據可視化有效的組成部分，在設計時考慮3種調色板類型：
- 分類色板（左）適合顯示分類數據，當你想區別不連續且內在沒有順序關系的數據時可以使用這種類型；
- 連續色板（中）適用于需要按特定順序放置的變量中，使用色調/亮度或兩者組合創建色板。
- 離散色板（右）是兩個連續色板的組合，中間有一個中心值(通常為零)。不同的調色板會傳達正值和負值。
十六、無障礙設計
根據眼科研究中心的數據，大約每12個人中就有1個色盲，圖表只有在廣泛受眾可以訪問的情況下才是成功的：
- 在調色板中使用不同的飽和度、亮度；
- 黑白打印可視化圖表，檢查對比度和可讀性。
十七、注重易讀性
確保圖表排版在傳達信息并幫助用戶專注于數據，而不是分散注意力：
- 選擇字跡清晰的字體，避免使用襯線和裝飾性很強的字體；
- 避免使用斜體、粗體和全部大寫；
- 確保文本與背景形成高對比度；
- 不要旋轉文本。
十八、使用水平條形圖代替旋轉標注
這個簡單的技巧可以確保用戶能夠更有效地瀏覽圖表，而不會使他們感到緊張。
十九、建立圖表庫
如果你的任務是將交互式圖表添加到Web和移動項目中，那么首要考慮問題是將使用什么樣的圖表？
基于定義的庫(Highcharts)進行設計將確保易于實現，并為我們提供大量的交互想法。
二十、超越靜態報告
通過更改參數、可視化類型、時間線幫助用戶進行探索，得出最大價值化的結論。例如IOS Health結合使用了各種數據表示來發揮優勢。
#專欄作家#
作者：Clippp，微信公眾號：Clip設計夾。每周精選設計文章，專注分享關于產品、交互、UI視覺上的設計思考。
本文原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
哇噻，這篇文章簡直是我的夢中情帖了，必需給老師贊一個，寫的太好了，分析講解非常到位。直接解決了我半年多的圖表疑惑，就一直奇怪我的圖表怎么老是土了吧唧的，今年找到原因了，困擾我半年的心病醫治好了，再次感謝??
太棒了。
這篇寫的很棒，受教了
最近正在研究圖表怎么能做到清晰、美觀，作者的這篇文章寫的真棒，讓我知道了在不同情景下運用哪種圖表，怎么用比較好。學到了，謝謝作者。
一起學習！
這些圖表看的好清楚啊，讓觀眾看得懂挺重要的，簡化、簡潔、適合場景的圖表比那種美觀化的圖表要適合給觀眾看。
將信息展示清楚這個本質核心最重要，可惜很多的圖表都是華而不實
用戶能否看得懂是挺重要的，但往往沒有那么簡單能做到唉，還是需要點小技術和心思啊
是的，讓用戶看得懂是首要考慮的事情，在這個基礎上再考慮樣式和呈現方式會更好，更具有針對性！
我做數據圖表最大的挑戰是在不知道具體數據的情況下設計，只能基于預測數據進行設計，但是實際數據偏差較大時就會導致圖表變得不那么好看，但是目前還沒有圖表組件能夠根據數據自適應改變圖表類型和樣式。
動態可視化圖表？
一直想學習數據分析相關知識，收藏了，感謝作者！
有用就好！