摘要：作為一名交互設計師在進行圖表設計時，就是要把這些寶貴的數據資產變得觸手可及，從而充分發揮數據的力量。圖當坐標軸標簽為連續的年份時，不要墨守成規的寫成，可以用簡寫的式，看起來會簡單清晰很多。

此文已由作者王強授權網易云社區發布。

歡迎訪問網易云社區，了解更多網易技術產品運營經驗~

圖表設計的過程實則是將數據進行可視化表達的過程，其研究的對象源頭是數據，然而，數據本身價值不大，所謂的“數據”往往是由一些看起來有用和沒用的“數字”組成，用戶很難從這些散亂的數字中發現有價值的信息，so，如果把這些“數字”從商業目的、用戶動機進行有機組合、關聯或定義就使得數據變得有意義（價值），圖表只是最終的表現形式。

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

數據可視化

剛才有提到，圖表設計實際上就是數據可視化設計，在談圖表設計之前，我們先理解下數據可視化的概念。

“數據可視化的目的，是要對數據進行可視化處理，以使得能夠明確地、有效地傳遞信息。”

Vitaly Friedman

通俗一點講，無非就是將復雜的數據信息進行圖形化展示，目的就是為了方便用戶從一堆雜亂無章的數據里面更高效的理解或分析，讓花費一個小時才能歸納的數據信息，轉化為一眼就能看懂的數據圖表。

然而，好的可視化設計一定集易讀、突出數據價值、易于分析、美觀為一體的，最終讓數據變得更加簡單，方便交流，反之，不僅讓數據變得更復雜，而且還會帶來錯誤誘導。因此，如何讓數據分析變得輕松、流暢并且易讀，從而提高用戶的工作效率，降低用戶的工作負擔，則成為設計師的重要責任。

圖表由哪些元素構成 ？

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

圖1-1 圖表元素

圖表設計

1.明確數據指標

首先，我們得先搞明白這些數據是怎么來的、干嘛的，如果連這個都不清楚就會很難展開接下來的討論或設計。數據是做好圖表設計的前提，毫無疑問，一連串的數字對于設計師來說是枯燥無味的，幸虧前期的數據收集工作已有人做好，但是作為設計師有必要要求他們給到你的是盡可能精準的數據，否則，會導致接下來的工作前功盡棄。因此，當初步接觸數據時最好能夠解決以下幾點：

理解數據及指標

分析數據

提煉關鍵信息

明確數據關系及主題

如下圖，這份報表比較容易理解，初步分析可以看出這是一份不同品牌的手機每天在全國的銷量情況，進一步分析還可以看出銷量越高，退貨量越少，營收就會越高，投訴越少，評價也會越好，由此得出，省、銷量、退貨量、營收就是關鍵指標，當然，前面這些信息是我們通過表格本身的數據信息分析得到的，但是，我們并不知道用戶關注得是哪些數據指標，有可能關注的是不同省的營收狀況，也有可能是退貨情況，還有可以能是不同手機品牌的銷量對比，所以，需要進入下一步-為誰設計，用戶想要什么信息。

圖1-2 不同品牌手機全國銷量情況

2.為誰設計，用戶想要什么信息

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

用戶群體是誰？有什么特點

從數據中需要提煉的信息是什么

通過圖表想要解決什么問題

關注的重點

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

圖1-3

3.明確設計目的與價值

實際上，圖表設計跟一個產品設計的思路是相似的，定義設計目標這個過程很容易被設計師忽略，設計目標不是一成不變的，但并不意味著一開始就沒有，前期缺少對設計目標的定義會導致設計師往往說不清楚為什么這樣設計，那么，接下來的設計工作就像個無頭蒼蠅一樣亂撞，沒有方向感。有的時候，設計方案被推翻，究其根源往往是由于對源思考不明確導致的，設計目標需要大家共同定義并達成一致的方向，否則，方向不對，努力白費。

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

圖1-4

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

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

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

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

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

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

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

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

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

散點圖 用來反映相關性或分布關系

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

5.細化體驗

前面我們談論了很多圖表設計前期的事，接下來談一談需要注意的幾點細節，Dan Saffer 說過“最好的產品通常會做好兩件事情：功能和細節。功能能夠吸引用戶關注這個產品，而細節則能夠讓關注的用戶留下來”。畢竟細節設計成就卓越產品嘛~

X坐標軸

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

圖1-6 Antv

當X坐標軸標簽為連續的年份時，不要墨守成規的寫成“2015、2016…”，可以用簡寫的式“2015、16、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

總結

圖表設計的過程更像是一系列將用戶和數據建立對話的過程，作為交互設計師考慮的重點在于如何讓復雜、混亂的數據更簡單的呈現給用戶，并且，讓用戶能夠快速、高效的理解分析從而做出正確的反饋，最終將構建一個回合的交互行為。好的圖表設計首先對數據的表達就應該是直接、干脆而又精準的，不要讓讀者去猜測圖表信息，確保信息傳遞的有效性，不會出現誤差的同時又注重美觀與細節。

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

文章來源： 網易云社區