網(wǎng)易UEDC – 王強：圖表設(shè)計的過程實則是將數(shù)據(jù)進(jìn)行可視化表達(dá)的過程，其研究的對象源頭是數(shù)據(jù)，然而，數(shù)據(jù)本身價值不大，所謂的“數(shù)據(jù)”往往是由一些看起來有用和沒用的“數(shù)字”組成，用戶很難從這些散亂的數(shù)字中發(fā)現(xiàn)有價值的信息，so，如果把這些“數(shù)字”從商業(yè)目的、用戶動機進(jìn)行有機組合、關(guān)聯(lián)或定義就使得數(shù)據(jù)變得有意義（價值），圖表只是最終的表現(xiàn)形式。

作為一名交互設(shè)計師在進(jìn)行圖表設(shè)計時，就是要把這些寶貴的數(shù)據(jù)資產(chǎn)變得觸手可及，從而充分發(fā)揮數(shù)據(jù)的力量。

數(shù)據(jù)可視化

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

“數(shù)據(jù)可視化的目的，是要對數(shù)據(jù)進(jìn)行可視化處理，以使得能夠明確地、有效地傳遞信息。” ——Vitaly Friedman

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

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

圖表由哪些元素構(gòu)成 ？

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

△ ?圖表元素

圖表設(shè)計

1.明確數(shù)據(jù)指標(biāo)

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

• 理解數(shù)據(jù)及指標(biāo)
• 分析數(shù)據(jù)
• 提煉關(guān)鍵信息
• 明確數(shù)據(jù)關(guān)系及主題

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

△ 不同品牌手機全國銷量情況

2.為誰設(shè)計，用戶想要什么信息

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

• 用戶群體是誰？有什么特點
• 從數(shù)據(jù)中需要提煉的信息是什么
• 通過圖表想要解決什么問題
• 關(guān)注的重點

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

3.明確設(shè)計目的與價值

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

定義設(shè)計目標(biāo)的過程需要站在用戶的角度和數(shù)據(jù)的角度進(jìn)行綜合分析從而進(jìn)行構(gòu)建，一方面需要考慮用戶如何更簡單的分析、理解數(shù)據(jù)從而提高決策效率；一方面需要考慮數(shù)據(jù)本身如何更加精準(zhǔn)、一目了然的傳達(dá)給用戶。

4.規(guī)劃設(shè)計方案，選擇合適的圖表類型

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

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

△ Andrew Abela整理的圖表類型選擇指南

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

• 曲線圖用來反映時間變化趨勢
• 柱狀圖用來反映分類項目之間的比較，也可以用來反映時間趨勢
• 條形圖用來反映項目之間的比較
• 餅圖用來反映構(gòu)成，即部分占總體的比例
• 散點圖用來反映相關(guān)性或分布關(guān)系
• 地圖用來反映區(qū)域之間的分類比較

5.細(xì)化體驗

前面我們談?wù)摿撕芏鄨D表設(shè)計前期的事，接下來談一談需要注意的幾點細(xì)節(jié)，Dan Saffer 說過“最好的產(chǎn)品通常會做好兩件事情：功能和細(xì)節(jié)。功能能夠吸引用戶關(guān)注這個產(chǎn)品，而細(xì)節(jié)則能夠讓關(guān)注的用戶留下來”。畢竟細(xì)節(jié)設(shè)計成就卓越產(chǎn)品！

• X坐標(biāo)軸

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

△ Antv

當(dāng)X坐標(biāo)軸標(biāo)簽為連續(xù)的年份時，不要墨守成規(guī)的寫成“2015、2016…”，可以用簡寫的式“2015、16、17…”，看起來會簡單、清晰很多。

• Y坐標(biāo)軸

下圖所示，當(dāng)Y坐標(biāo)軸的數(shù)字很長時會出現(xiàn)左右空間過于緊湊的情況，這時，如果單位換算是10的倍數(shù)（如1s=1000ms）?？梢钥紤]定義單位換算規(guī)則，即：

case1：當(dāng)時間 ≥1000ms 時，計時單位用 s 表示，數(shù)據(jù)精確到小數(shù)點后兩位

case2：當(dāng)時間 ＜1000ms 時，計時單位用 ms 表示，數(shù)據(jù)精確到個位

△?case1

△?case2

如果沒有單位換算，如下圖 所示，單位是“次”或“個”。這時可以考慮用位數(shù)換算，即：

case1：當(dāng)數(shù)字 ≤4 位數(shù)時，用精確數(shù)字表示

case2：當(dāng)數(shù)字 ＞5 位數(shù)時，用 K 為單位進(jìn)行縮寫表示，精確到個位

case3：當(dāng)數(shù)字 ＞8 位數(shù)時，用 M 為單位進(jìn)行縮寫表示，精確到個位

case4：當(dāng)數(shù)字 ＞11 位數(shù)時，用 M 為單位進(jìn)行縮寫表示，精確到個位

case5：當(dāng)數(shù)字 ＞14 位數(shù)時，用科學(xué)計數(shù)法表示，精確到小數(shù)點后3位

數(shù)據(jù)分布規(guī)則

如果沒有制定明確的數(shù)據(jù)顯示規(guī)則，就會出現(xiàn)下圖2-1-1的展示情況（后端傳什么數(shù)據(jù)，前端就展示什么數(shù)據(jù)），導(dǎo)致圖表展示效果和可讀性都很差，如果要解決這個問題就需要定義規(guī)則。

如下圖所示，這里數(shù)據(jù)的展示和時間有關(guān)。所以，我們需要考慮的是某個時間段內(nèi)展示多少個點才是合適的，而顯示一個點由多長時間的數(shù)據(jù)聚合（點聚合區(qū)間是多少）。

規(guī)則定義清楚后，后臺在與前段交互的時候就會按照以上規(guī)則進(jìn)行，最終實現(xiàn)效果如下。

遵循設(shè)計原則

圖表的設(shè)計價值在于精準(zhǔn)、高效、簡單的傳遞數(shù)據(jù)信息，最好能夠讓讀者一目了然，即使做不到一目了然也應(yīng)該具備自我解釋的能力。所以，就要求在設(shè)計時應(yīng)該增強和突出數(shù)據(jù)元素，減少和弱化非數(shù)據(jù)元素，具體應(yīng)該注意以下原則：

1.刪除

除非特殊場景的考慮，應(yīng)盡可能的刪除和數(shù)據(jù)非相關(guān)的元素:

• 背景色
• 漸變色
• 網(wǎng)格線
• 3D效果
• 陰影效果（如果具體操作需要強調(diào)的除外，如：鼠標(biāo)Hover查看具體信息）

2.弱化

即使有必要保留非數(shù)據(jù)元素，也要弱化或隱藏它們，盡量使用淡色

• 坐標(biāo)軸
• 網(wǎng)格輔助線
• 表格線

3.組織

把相關(guān)的數(shù)據(jù)元素進(jìn)行合理的組織分類，不要指望把所有的數(shù)據(jù)元素都放入圖表內(nèi)，只要放關(guān)鍵的、重要的數(shù)據(jù)在圖表內(nèi)。

4.強調(diào)

對于已選的數(shù)據(jù)元素也要考慮優(yōu)先級，明確哪些數(shù)據(jù)是需要重點突出的進(jìn)行突出標(biāo)識，以便讀者能夠快速get到重要信息。

如圖所示，通過上述原則對圖表進(jìn)行優(yōu)化，最終變成了一個簡潔有效的圖表。

總結(jié)

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

歡迎關(guān)注作者「網(wǎng)易UEDC」的微信公眾號：

「這些圖標(biāo)設(shè)計的文章不容錯過」

• 小白也能做圖表！幫你免費在線生成精美直方圖的網(wǎng)站
• 超實用！APP數(shù)據(jù)圖表設(shè)計的類型和制作方法全方位總結(jié)
• 這個教程看完就會！如何為一個圖表設(shè)計色彩？

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備：http://hao.uisdc.com