摘要：作為一名交互設(shè)計(jì)師在進(jìn)行數(shù)據(jù)可視化時(shí)，就是要把這些寶貴的數(shù)據(jù)資產(chǎn)變得觸手可及，從而充分發(fā)揮數(shù)據(jù)的力量。圖網(wǎng)易有數(shù)企業(yè)級(jí)大數(shù)據(jù)可視化分析平臺(tái)，具有全面的安全保障強(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ù)變得更加簡(jiǎn)單，方便交流，反之，不僅讓數(shù)據(jù)變得更復(fù)雜，而且還會(huì)帶來(lái)錯(cuò)誤誘導(dǎo)。因此，如何讓數(shù)據(jù)分析變得輕松、流暢并且易讀，從而提高用戶(hù)的工作效率，降低用戶(hù)的工作負(fù)擔(dān)，則成為設(shè)計(jì)師的重要責(zé)任。

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

一張標(biāo)準(zhǔn)樣式的圖表基本上是由下圖1-1 中標(biāo)示的幾種元素組成，除此之外，還有一些特殊的圖表（如：3D類(lèi)，由背景墻、側(cè)面墻、底座等圖表元素），對(duì)于圖表本身在此就不在冗述，設(shè)計(jì)人員都有基礎(chǔ)知識(shí)，本文將嘗試從圖表設(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ù)是怎么來(lái)的、干嘛的，如果連這個(gè)都不清楚就會(huì)很難展開(kāi)接下來(lái)的討論或設(shè)計(jì)。數(shù)據(jù)是做好圖表設(shè)計(jì)的前提，毫無(wú)疑問(wèn)，一連串的數(shù)字對(duì)于設(shè)計(jì)師來(lái)說(shuō)是枯燥無(wú)味的，幸虧前期的數(shù)據(jù)收集工作已有人做好，但是作為設(shè)計(jì)師有必要要求他們給到你的是盡可能精準(zhǔn)的數(shù)據(jù)，否則，會(huì)導(dǎo)致接下來(lái)的工作前功盡棄。因此，當(dāng)初步接觸數(shù)據(jù)時(shí)最好能夠解決以下幾點(diǎn)：

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

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

提煉關(guān)鍵信息

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

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

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

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

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

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

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

通過(guò)圖表想要解決什么問(wèn)題

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

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

圖1-3

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

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

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

圖1-4

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

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

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

圖1-5 Andrew Abela整理的圖表類(lèi)型選擇指南

常見(jiàn)的圖表類(lèi)型基本上以下六種涵蓋了絕大部分的使用場(chǎng)景:

曲線(xiàn)圖 用來(lái)反映時(shí)間變化趨勢(shì)

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

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

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

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

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

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

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

X坐標(biāo)軸

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

圖1-6 Antv

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

圖1-7

Y坐標(biāo)軸

如圖下圖1-8-1，當(dāng)Y坐標(biāo)軸的數(shù)字很長(zhǎng)時(shí)會(huì)出現(xiàn)左右空間過(guò)于緊湊的情況，這時(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

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

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

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

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

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

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

如下圖1-9所示

圖1-9

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

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

圖2-1-1

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

圖2-1-2

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

圖2-1-3

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

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

1.刪除

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

背景色

漸變色

網(wǎng)格線(xiàn)

3D效果

陰影效果（如果具體操作需要強(qiáng)調(diào)的除外，如：鼠標(biāo)Hover查看具體信息）

2.弱化

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

坐標(biāo)軸

網(wǎng)格輔助線(xiàn)

表格線(xiàn)

3.組織

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

4.強(qiáng)調(diào)

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

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

圖2-2

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

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