摘要：作為一名交互設(shè)計(jì)師在進(jìn)行數(shù)據(jù)可視化時(shí)，就是要把這些寶貴的數(shù)據(jù)資產(chǎn)變得觸手可及，從而充分發(fā)揮數(shù)據(jù)的力量。圖網(wǎng)易有數(shù)企業(yè)級大數(shù)據(jù)可視化分析平臺，具有全面的安全保障強(qiáng)大的大數(shù)據(jù)計(jì)算性能先進(jìn)的智能分析便捷的協(xié)作分享等特性，點(diǎn)擊可免費(fèi)試用。

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

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

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

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

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

圖1-1 圖表元素

圖表設(shè)計(jì)

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

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

理解數(shù)據(jù)及指標(biāo)

分析數(shù)據(jù)

提煉關(guān)鍵信息

明確數(shù)據(jù)關(guān)系及主題

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

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

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

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

用戶群體是誰？有什么特點(diǎn)

從數(shù)據(jù)中需要提煉的信息是什么

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

關(guān)注的重點(diǎn)

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

圖1-3

3.明確設(shè)計(jì)目的與價(jià)值

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

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

圖1-4

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

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

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

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

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

曲線圖 用來反映時(shí)間變化趨勢

柱狀圖 用來反映分類項(xiàng)目之間的比較，也可以用來反映時(shí)間趨勢

條形圖 用來反映項(xiàng)目之間的比較

餅圖 用來反映構(gòu)成，即部分占總體的比例

散點(diǎn)圖 用來反映相關(guān)性或分布關(guān)系

地圖 用來反映區(qū)域之間的分類比較

5.細(xì)化體驗(yàn)

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

X坐標(biāo)軸

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

圖1-6 Antv

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

圖1-7

Y坐標(biāo)軸

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

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

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

如下面1-8-2

圖1-8-1

圖1-8-2

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

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

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

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

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

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

如下圖1-9所示

圖1-9

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

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

圖2-1-1

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

圖2-1-2

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

圖2-1-3

遵循設(shè)計(jì)原則

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

1.刪除

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

背景色

漸變色

網(wǎng)格線

3D效果

陰影效果（如果具體操作需要強(qiáng)調(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.強(qiáng)調(diào)

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

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

圖2-2

網(wǎng)易有數(shù)：企業(yè)級大數(shù)據(jù)可視化分析平臺，具有全面的安全保障、強(qiáng)大的大數(shù)據(jù)計(jì)算性能、先進(jìn)的智能分析、便捷的協(xié)作分享等特性，點(diǎn)擊可免費(fèi)試用。

文章來源： 網(wǎng)易云社區(qū)