2021-10-12 資深UI設計者
數據成為了日常工作的一大重要角色，越來越多的公司以數據驅動產品進行迭代。但令人困惑的是可視化圖表無處不矮，但卻給大家帶來了誤導。作者分享了一些簡單的思路與方法，以此來改善這些問題，希望對你有所幫助。
越來越多的公司以數據驅動產品進行迭代，從中我們能看出數據的重要性。
日常工作中，無論是匯報還是設計，都離不開圖表的使用。但令人困惑的可視化圖表無處不在，往往給人帶來誤導性，通過遵循下面這些簡單的思路和方法可以有效改善這些問題。
選擇錯誤的圖表類型，或默認使用最常見的類型，可能會混淆用戶對數據產生誤解。
一組數據可以有多種表示方式，具體類型取決于用戶希望看到的內容。
當數據中出現正負值時，要先確定基線的位置，再確定數據位置，將正值分布在基線上側（X軸）或右側（Y軸），負值分布在下側（X軸）或左側（Y軸）。
避免在基線的同一側同時添加正值和負值，造成用戶對圖表信息理解錯誤。
單看左側的條形圖，能發現B的值比D的值要多3倍以上，但在右側從零開始的條形圖中，實際差異要小得多。從零開始可確保用戶獲得更準確的數據展示。
對折線圖來說，如果始終將Y軸的比例限制為從零開始，一旦數據波動幅度很小，那整個折線圖會看起來很平坦，效果不明顯。
折線圖主要用來表現趨勢，根據給定時間的數據調整比例，并保持折線區域能占到Y軸范圍的三分之二。
折線圖是由一條條小線段連接組成，這些線段展示了在短時間內數據是如何變化的。當時間間隔很大或數據更新不頻繁時，就要慎重考慮是否使用折線圖。
例如想表示年收入，左側的兩個折線圖樣式都不太合適，每個月的收入是固定的數字，而折線圖展現的數據更像是收入的變化，相反右側的條形圖更適合來展示每月具體的收入。
平滑的折線圖可能看著很舒服，但它們歪曲了背后的實際數據，而且過粗的線條掩蓋了真正的節點。
當兩組數據出現X軸代表的信息相同但Y軸不同時，為節省空間我們可能會考慮用雙軸圖。
但大部分雙軸圖難以閱讀，只是感覺圖表上有很多數據，但遠遠沒有單個圖表展示的清晰。
餅圖是最受歡迎但經常被誤用的圖表之一。在使用餅圖時，首先要注意切片的數量最好保持在5-7片。
如果還有很多占比很小的切片，可以將這些全部歸到“其他”切片中。
如果沒有正確的標注，無論圖表設計的多好看都沒有意義。
直接在圖表上標注數據或信息對使用者來說更直觀，更節省時間和精力。
將數值放在切片上雖然很直觀，但可能會導致很多問題，例如左側餅圖數值的可讀性問題、切片太薄無法添加數值等，對比來看，右側餅圖添加標注的方式更合適。
餅圖切片的排序是一個很容易忽略的問題，將餅圖切片只是一個開始，通過合理的排序保證用戶清晰觀看圖表才是關鍵。
常見的排序方法是將面積最大的切片放在12點鐘位置，然后按順時針降序放置第二大的切片，以此類推。
同樣的建議適用于其他類型的圖表。盡量不要默認按字母順序排序，將最大值放在頂部(水平條形圖)或左側(對于垂直條形圖)，以確保最重要的值占據最突出的空間，減少視線運動和閱讀圖表所需的時間。
環形圖，又稱為甜甜圈圖,是餅圖的一種變體,本質是餅圖將中間區域挖空，用在多樣品間的多種數據的比較中。
雖然環形圖騰出中間區域來顯示額外的信息，但犧牲清晰度走極端會讓圖表變得毫無用處。
不必要的設計樣式不僅會分散注意力，還可能導致用戶對數據誤解并產生錯誤印象，圖表在設計上應避免：
顏色是保持數據可視化有效的組成部分，在設計時考慮3種調色板類型：
根據眼科研究中心的數據，大約每12個人中就有1個色盲，圖表只有在廣泛受眾可以訪問的情況下才是成功的：
確保圖表排版在傳達信息并幫助用戶專注于數據，而不是分散注意力：
這個簡單的技巧可以確保用戶能夠更有效地瀏覽圖表，而不會使他們感到緊張。
如果你的任務是將交互式圖表添加到Web和移動項目中，那么首要考慮問題是將使用什么樣的圖表？
基于定義的庫(Highcharts)進行設計將確保易于實現，并為我們提供大量的交互想法。
通過更改參數、可視化類型、時間線幫助用戶進行探索，得出最大價值化的結論。例如IOS Health結合使用了各種數據表示來發揮優勢。
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼ben_lanlan，報下信息，會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務