@王強  圖表設計的過程實則是將資料進行視覺化表達的過程，其研究的物件源頭是資料，然而，資料本身價值不大，所謂的“資料”往往是由一些看起來有用和沒用的“數字”組成，使用者很難從這些散亂的數字中發現有價值的資訊，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

總結

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

文章參考：

• Excel圖表之道
• 資料視覺化
• 從物理邏輯到行為邏輯-辛向陽