中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

圖表設(shè)計(jì)應(yīng)該注意哪些問(wèn)題呢？文章為你解讀。

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

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

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

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

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

–?Vitaly Friedman

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

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

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

一張標(biāo)準(zhǔn)樣式的圖表基本上是由下圖1-1 中標(biāo)示的幾種元素組成，除此之外，還有一些特殊的圖表（如：3D類，由背景墻、側(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ì)很難展開接下來(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ó)的銷量情況，進(jìn)一步分析還可以看出銷量越高，退貨量越少，營(yíng)收就會(huì)越高，投訴越少，評(píng)價(jià)也會(huì)越好，由此得出，省、銷量、退貨量、營(yíng)收就是關(guān)鍵指標(biāo)，當(dāng)然，前面這些信息是我們通過(guò)表格本身的數(shù)據(jù)信息分析得到的，但是，我們并不知道用戶關(guān)注得是哪些數(shù)據(jù)指標(biāo)，有可能關(guān)注的是不同省的營(yíng)收狀況，也有可能是退貨情況，還有可以能是不同手機(jī)品牌的銷量對(duì)比，所以，需要進(jìn)入下一步-為誰(shuí)設(shè)計(jì)，用戶想要什么信息。

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

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

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

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

接著上面的例子，如下圖1-2所示，表現(xiàn)形式雖然都是地圖，但是強(qiáng)調(diào)的重點(diǎn)信息和展示邏輯都不同，即一個(gè)強(qiáng)調(diào)的是某個(gè)品牌的手機(jī)在全國(guó)不同省的銷量狀況，另一個(gè)強(qiáng)調(diào)的是不同品牌手機(jī)在全國(guó)不同省的銷量對(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)不是一成不變的，但并不意味著一開始就沒(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ò)程需要站在用戶的角度和數(shù)據(jù)的角度進(jìn)行綜合分析從而進(jìn)行構(gòu)建，一方面需要考慮用戶如何更簡(jiǎn)單的分析、理解數(shù)據(jù)從而提高決策效率；一方面需要考慮數(shù)據(jù)本身如何更加精準(zhǔn)、一目了然的傳達(dá)給用戶。

圖1-4

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

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

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

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

• 曲線圖用來(lái)反映時(shí)間變化趨勢(shì)
• 柱狀圖用來(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ū)域之間的分類比較

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

前面我們談?wù)摿撕芏鄨D表設(shè)計(jì)前期的事，接下來(lái)談一談需要注意的幾點(diǎn)細(xì)節(jié)，Dan Saffer 說(shuō)過(guò)“最好的產(chǎn)品通常會(huì)做好兩件事情：功能和細(xì)節(jié)。功能能夠吸引用戶關(guān)注這個(gè)產(chǎn)品，而細(xì)節(jié)則能夠讓關(guān)注的用戶留下來(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ī)的寫成“2015、2016…”，可以用簡(jiǎn)寫的式“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)行縮寫表示，精確到個(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ī)則

如果沒(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-37

圖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)格線
• 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)

對(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

總結(jié)

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

文章參考：

• Excel圖表之道
• 數(shù)據(jù)可視化
• 從物理邏輯到行為邏輯-辛向陽(yáng)

作者：王強(qiáng)，網(wǎng)易高級(jí)交互設(shè)計(jì)師

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@網(wǎng)易UEDC，作者@王強(qiáng)

題圖來(lái)自 Pixabay，基于 CC0 協(xié)議