導(dǎo)讀：如果真的花上幾個(gè)小時(shí)或一整天，誰(shuí)都可從某個(gè)龐大的表格和數(shù)據(jù)庫(kù)中發(fā)現(xiàn)一定的規(guī)律。不過(guò)，人們往往不愿意花費(fèi)這樣的時(shí)間成本來(lái)鉆研細(xì)節(jié)。他們不想看到原始數(shù)據(jù)，只想獲得結(jié)果。所以，數(shù)據(jù)可視化和信息圖走進(jìn)了交互設(shè)計(jì)師的視線。
在這個(gè)信息爆炸的時(shí)代，作為交互設(shè)計(jì)師，我一直鐘愛(ài)數(shù)據(jù)以及它的表現(xiàn)形式，因?yàn)樗硇?，真?shí)。透過(guò)數(shù)據(jù)的各種展示方式，我可以構(gòu)建用戶場(chǎng)景，向用戶傳達(dá)信息，讓以數(shù)據(jù)為載體產(chǎn)品體驗(yàn)更加優(yōu)越。要想了解交互設(shè)計(jì)的數(shù)據(jù)可視化世界，首先要了解下面的問(wèn)題：
為什么我們的大腦偏愛(ài)圖形呢？
“人類(lèi)學(xué)家會(huì)告訴我們：人類(lèi)通過(guò)大腦的視覺(jué)系統(tǒng), 可以迅速的識(shí)別、貯存、回憶起圖形信息,本能地將圖形信息中的理念轉(zhuǎn)化為長(zhǎng)期記憶。”
數(shù)據(jù)可視化的表現(xiàn)形式多種多樣，但萬(wàn)變不離其中，一般定量研究的數(shù)據(jù)比較容易被做成三種類(lèi)型的圖表：折線圖，柱狀圖，餅狀圖。通常折線圖多用來(lái)反應(yīng)數(shù)據(jù)的變化趨勢(shì)，柱狀圖多用來(lái)反應(yīng)數(shù)據(jù)的數(shù)值比較，餅狀圖多用來(lái)反應(yīng)數(shù)據(jù)的組成成分。了解了這些基礎(chǔ)圖表的的特性和用法，才能在此基礎(chǔ)上演變創(chuàng)新。企業(yè)級(jí)產(chǎn)品可以利用數(shù)據(jù)可視化實(shí)現(xiàn)信息高效傳播，能幫助用戶更持久的記住這些信息。我的日常工作處理最多的是人事變動(dòng)和財(cái)務(wù)的數(shù)據(jù)。
現(xiàn)在，我以比較簡(jiǎn)單的柱狀圖為例，和大家一起探討數(shù)據(jù)可視化設(shè)計(jì)的小技巧并分享工作中設(shè)計(jì)的一些案例。
常見(jiàn)柱狀圖有哪些？
柱狀圖的結(jié)構(gòu)是怎樣的?
如果想應(yīng)用一種圖表，就要了解這種圖表是怎樣產(chǎn)生的，由哪些元素構(gòu)成的。柱狀圖的基本架構(gòu)是由兩個(gè)維度變量構(gòu)成，即我們看到的橫軸與縱軸，并且這兩個(gè)維度的變量組中的子集是一一對(duì)應(yīng)的。此外，我們還可以利用柱狀圖的各種元素向用戶傳達(dá)各種信息，例如柱狀圖的高度（相對(duì)高度，絕對(duì)高度），寬度，面積，顏色，填充紋樣等。
柱狀圖適合表現(xiàn)那些數(shù)據(jù)?
一般情況下，柱狀圖多用于反應(yīng)數(shù)值的對(duì)比關(guān)系，具體可以歸納為以下三種：
1.數(shù)據(jù)隨著某一變量的規(guī)律變化或不規(guī)律變化
2.不連續(xù)數(shù)據(jù)間數(shù)值的對(duì)比
3.部分和整體的對(duì)比
通常數(shù)據(jù)可視化并不是由一種圖表構(gòu)成的，而是由多種圖表共同說(shuō)明一個(gè)問(wèn)題的。下面通過(guò)兩個(gè)案例來(lái)詮釋柱狀圖的應(yīng)用與特性。
案例一比例柱狀圖的直接應(yīng)用
例圖1中所示為公司內(nèi)各種角色某一時(shí)間段內(nèi)離職的數(shù)據(jù)。
一般情況下，交互設(shè)計(jì)師得到需求后最先要判斷的是這一組數(shù)據(jù)是定量分析所得還是定性分析所得，這是一個(gè)很關(guān)鍵的環(huán)節(jié)，因?yàn)樗苯記Q定這組數(shù)據(jù)的界面交互方式。根據(jù)需求，我判斷這一組數(shù)據(jù)是定量分析所得結(jié)果，需要展示的信息有以下三點(diǎn)：1.離職總?cè)藬?shù) 2.各種角色的離職人數(shù) 3.各種角色離職占比。可以歸類(lèi)于不同數(shù)據(jù)間的對(duì)比與部分與整體的對(duì)比兩種關(guān)系。
根據(jù)這個(gè)結(jié)論，設(shè)計(jì)師就要思考怎樣將這些信息傳達(dá)給用戶。考慮到用戶的特性和數(shù)據(jù)的樣本，根據(jù)調(diào)研得知用戶最想得到的信息為“各種角色離職占比”，因此選擇了比例柱狀圖。圖中灰色的背景柱狀圖用于展示離職總?cè)藬?shù)，前面帶有顏色的柱狀圖展示各種角色的離職數(shù)據(jù)，并在每個(gè)柱狀圖的頂端直接顯示已經(jīng)計(jì)算好的離職占比。用戶所需信息一覽無(wú)遺。與此同時(shí)，當(dāng)鼠標(biāo)聚焦于每個(gè)柱狀圖時(shí)，彩色柱狀圖呈現(xiàn)從零開(kāi)始的加載過(guò)程，通過(guò)動(dòng)態(tài)的微交互增加產(chǎn)品的趣味性，并向用戶傳達(dá)這些數(shù)據(jù)是實(shí)時(shí)更新的理念。
例圖2為員工在公司內(nèi)部同他人的親密度信息，
上圖所示看起來(lái)和柱狀圖的關(guān)系不大，但實(shí)際確是變形的柱狀圖,利用氣泡這一隱喻設(shè)計(jì)改變了柱狀圖的外觀，可以讓這組柱狀圖樣式更加生動(dòng)，更好的表達(dá)數(shù)據(jù)，并且更容易讓用戶理解。
主要有以下幾個(gè)設(shè)計(jì)點(diǎn):
1.用不同的顏色表現(xiàn)員工的不同種類(lèi)（是否同一部門(mén)）
2.將數(shù)值展現(xiàn)在橫軸上
3.用圖例和顏色承載更多的信息
4.移除縱軸，刻度和網(wǎng)格線，減少不必要的視覺(jué)噪聲元素
以上是數(shù)據(jù)可視化設(shè)計(jì)中的一些小故事，總而言之。對(duì)于企業(yè)級(jí)產(chǎn)品而言，數(shù)據(jù)可視化是很有效的工具，它可以用來(lái)分享信息，說(shuō)明問(wèn)題，智能分析數(shù)據(jù)并提供指導(dǎo)性的結(jié)論。面對(duì)不同的用戶，設(shè)計(jì)師應(yīng)根據(jù)需求的特性來(lái)確認(rèn)數(shù)據(jù)的展現(xiàn)形式與交互方式，并且用數(shù)據(jù)講述一個(gè)讓用戶印象深刻的故事。
