如何將數據進行數據可視化展示？

做爲一名交互設計師在進行數據可視化時，就是要把這些寶貴的數據資產變得觸手可及，從而充分發揮數據的力量。

數據可視化

好的可視化設計必定集易讀、突出數據價值、易於分析、美觀爲一體的，最終讓數據變得更加簡單，方便交流，反之，不只讓數據變得更復雜，並且還會帶來錯誤誘導。所以，如何讓數據分析變得輕鬆、流暢而且易讀，從而提升用戶的工做效率，下降用戶的工做負擔，則成爲設計師的重要責任。

圖表由哪些元素構成 ？

一張標準樣式的圖表基本上是由下圖1-1 中標示的幾種元素組成，除此以外，還有一些特殊的圖表（如：3D類，由背景牆、側面牆、底座等圖表元素），對於圖表自己在此就不在冗述，設計人員都有基礎知識，本文將嘗試從圖表設計動機的角度和你們一塊兒探討如何更好的進行圖表設計，從而達成設計目標。

圖1-1 圖表元素

圖表設計

1.明確數據指標

首先，咱們得先搞明白這些數據是怎麼來的、幹嗎的，若是連這個都不清楚就會很難展開接下來的討論或設計。數據是作好圖表設計的前提，毫無疑問，一連串的數字對於設計師來講是枯燥無味的，幸好前期的數據收集工做已有人作好，可是做爲設計師有必要要求他們給到你的是儘量精準的數據，不然，會致使接下來的工做前功盡棄。所以，當初步接觸數據時最好可以解決如下幾點：

理解數據及指標

分析數據

提煉關鍵信息

明確數據關係及主題

以下圖，這份報表比較容易理解，初步分析能夠看出這是一份不一樣品牌的手機天天在全國的銷量狀況，進一步分析還能夠看出銷量越高，退貨量越少，營收就會越高，投訴越少，評價也會越好，由此得出，省、銷量、退貨量、營收就是關鍵指標，固然，前面這些信息是咱們經過表格自己的數據信息分析獲得的，可是，咱們並不知道用戶關注得是哪些數據指標，有可能關注的是不一樣省的營收情況，也有多是退貨狀況，還有能夠能是不一樣手機品牌的銷量對比，因此，須要進入下一步-爲誰設計，用戶想要什麼信息。

圖1-2 不一樣品牌手機全國銷量狀況

2.爲誰設計，用戶想要什麼信息

須要明確的是，同一組數據在不一樣用戶眼中所看到的信息是不同的，由於，角色、崗位的不一樣就形成了他們所關注的重點、立場不一樣，不一樣人所發現的信息、得出的結論也是不同的，因此，在圖表設計時面對不一樣的使用者所強調的信息及交互方式都是不同的。主要影響因素：

用戶羣體是誰？有什麼特色

從數據中須要提煉的信息是什麼

經過圖表想要解決什麼問題

關注的重點

接着上面的例子，以下圖1-3所示，表現形式雖然都是地圖，可是強調的重點信息和展現邏輯都不一樣，即一個強調的是某個品牌的手機在全國不一樣省的銷量情況，另外一個強調的是不一樣品牌手機在全國不一樣省的銷量對比。

圖1-3

3.明確設計目的與價值

實際上，圖表設計跟一個產品設計的思路是類似的，定義設計目標這個過程很容易被設計師忽略，設計目標不是一成不變的，但並不意味着一開始就沒有，前期缺乏對設計目標的定義會致使設計師每每說不清楚爲何這樣設計，那麼，接下來的設計工做就像個無頭蒼蠅同樣亂撞，沒有方向感。有的時候，設計方案被推翻，究其根源每每是因爲對源思考不明確致使的，設計目標須要你們共同定義並達成一致的方向，不然，方向不對，努力白費。

定義設計目標的過程須要站在用戶的角度和數據的角度進行綜合分析從而進行構建，一方面須要考慮用戶如何更簡單的分析、理解數據從而提升決策效率；一方面須要考慮數據自己如何更加精準、一目瞭然的傳達給用戶。

圖1-4

4.規劃設計方案，選擇合適的圖表類型

在工做中，一些同窗在設計圖表時把大量的時間用在尋找圖表素材上，然而這種都是在表面上尋找解決辦法實際上本末倒置了，解決不了本質問題。數據可視化設計不是單純的圖表樣式設計，雖然瞭解圖表也很重要，可是，僅僅將數據變成漂亮的圖表只是形式的改變而已，遠遠不夠的。

當前期咱們已經清楚了用戶要作什麼，有了明確的設計目標，那麼，選擇圖表的過程就是信手拈來的事。在選擇圖表類型以前，本身內心已經比較清楚了圖表大概的效果（如：呈現不一樣時間段的數據-用折線圖合適；呈現不一樣份額比例-用餅圖合適；某個階段的數據出現頻率-用散點圖合適），具體的圖表選擇你們能夠參考 Andrew Abela 整理的圖表類型選擇指南圖示，有興趣的同窗能夠研究一下。

圖1-5 Andrew Abela整理的圖表類型選擇指南

常見的圖表類型基本上如下六種涵蓋了絕大部分的使用場景:

曲線圖 用來反映時間變化趨勢

柱狀圖 用來反映分類項目之間的比較，也能夠用來反映時間趨勢

條形圖 用來反映項目之間的比較

餅圖 用來反映構成，即部分佔整體的比例

散點圖 用來反映相關性或分佈關係

地圖 用來反映區域之間的分類比較

5.細化體驗

前面咱們談論了不少圖表設計前期的事，接下來談一談須要注意的幾點細節，Dan Saffer 說過「最好的產品一般會作好兩件事情：功能和細節。功能可以吸引用戶關注這個產品，而細節則可以讓關注的用戶留下來」。畢竟細節設計成就卓越產品嘛~

X座標軸

考慮到不一樣屏幕或瀏覽器的適配問題，當X座標軸標籤文字顯示過於擁擠時可將文字打斜放置，既保證了數據的正常閱讀也不影響圖表美觀。

圖1-6 Antv

當X座標軸標籤爲連續的年份時，不要墨守成規的寫成「201五、2016…」，能夠用簡寫的式「201五、1六、17...」，看起來會簡單、清晰不少。

圖1-7

Y座標軸

如圖下圖1-8-1，當Y座標軸的數字很長時會出現左右空間過於緊湊的狀況，這時，若是單位換算是10的倍數（如1s=1000ms），能夠考慮定義單位換算規則，即：

case1：當時間 ≥1000ms 時，計時單位用 s 表示，數據精確到小數點後兩位

case2：當時間 ＜1000ms 時，計時單位用 ms 表示，數據精確到個位

以下面1-8-2

圖1-8-1

圖1-8-2

若是沒有單位換算，以下圖1-9 所示，單位是「次」或「個」，這時能夠考慮用位數換算，即：

case1：當數字 ≤4 位數時，用精確數字表示

case2：當數字 ＞5 位數時，用 K 爲單位進行縮寫表示，精確到個位

case3：當數字 ＞8 位數時，用 M 爲單位進行縮寫表示，精確到個位

case4：當數字 ＞11 位數時，用 M 爲單位進行縮寫表示，精確到個位

case5：當數字 ＞14 位數時，用科學計數法表示，精確到小數點後3位

以下圖1-9所示

圖1-9

數據分佈規則

若是沒有制定明確的數據顯示規則，就會出現下圖2-1-1的展現狀況（後端傳什麼數據，前端就展現什麼數據），致使圖表展現效果和可讀性都不好，若是要解決這個問題就須要定義規則。

圖2-1-1

這裏數據的展現和時間有關，因此，咱們須要考慮的是某個時間段內展現多少個點纔是合適的，而顯示一個點由多長時間的數據聚合（點聚合區間是多少），具體以下圖2-1-2

圖2-1-2

規則定義清楚後，後臺在與前段交互的時候就會按照以上規則進行，最終實現效果以下圖2-1-3

圖2-1-3

遵循設計原則

圖表的設計價值在於精準、高效、簡單的傳遞數據信息，最好可以讓讀者一目瞭然，即便作不到一目瞭然也應該具有自我解釋的能力。因此，就要求在設計時應該加強和突出數據元素，減小和弱化非數據元素，具體應該注意如下原則：

1.刪除

除非特殊場景的考慮，應儘量的刪除和數據非相關的元素:

背景色

漸變色

網格線

3D效果

陰影效果（若是具體操做須要強調的除外，如：鼠標Hover查看具體信息）

2.弱化

即便有必要保留非數據元素，也要弱化或隱藏它們，儘可能使用淡色

座標軸

網格輔助線

表格線

3.組織

把相關的數據元素進行合理的組織分類，不要期望把全部的數據元素都放入圖表內，只要放關鍵的、重要的數據在圖表內。

4.強調

對於已選的數據元素也要考慮優先級，明確哪些數據是須要重點突出的進行突出標識，以便讀者可以快速get到重要信息。

如圖2-2所示，經過上述原則對對圖表進行優化，最終變成了一個簡潔有效的圖表。

圖2-2

網易有數：企業級大數據可視化分析平臺，具備全面的安全保障、強大的大數據計算性能、先進的智能分析、便捷的協做分享等特性，點擊可免費試用。

文章來源： 網易雲社區