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