當前位置:首頁 > 新聞中心 > 解決方案
柱狀圖,最直接的數(shù)據(jù)可視化交互設計責任編輯 :李飛    文章來源 :星翼創(chuàng)想(www.wedoyun.com)    發(fā)布時間 :2016-05-10    閱讀次數(shù):4269     專題 :網(wǎng)站設計

在這個信息爆炸的時代,作為交互設計師,我一直鐘愛數(shù)據(jù)以及它的表現(xiàn)形式,因為它理性,真實。透過數(shù)據(jù)的各種展示方式,我可以構(gòu)建用戶場景,向用戶傳達信息,讓以數(shù)據(jù)為載體產(chǎn)品體驗更加優(yōu)越。要想了解交互設計的數(shù)據(jù)可視化世界,首先要了解下面的問題:

為什么我們的大腦偏愛圖形呢?

“人類學家會告訴我們:人類通過大腦的視覺系統(tǒng), 可以迅速的識別、貯存、回憶起圖形信息,本能地將圖形信息中的理念轉(zhuǎn)化為長期記憶。”

數(shù)據(jù)可視化的表現(xiàn)形式多種多樣,但萬變不離其中,一般定量研究的數(shù)據(jù)比較容易被做成三種類型的圖表:折線圖,柱狀圖,餅狀圖。通常折線圖多用來反應數(shù)據(jù)的變化趨勢,柱狀圖多用來反應數(shù)據(jù)的數(shù)值比較,餅狀圖多用來反應數(shù)據(jù)的組成成分。了解了這些基礎(chǔ)圖表的的特性和用法,才能在此基礎(chǔ)上演變創(chuàng)新。企業(yè)級產(chǎn)品可以利用數(shù)據(jù)可視化實現(xiàn)信息高效傳播,能幫助用戶更持久的記住這些信息。我的日常工作處理最多的是人事變動和財務的數(shù)據(jù)。

現(xiàn)在,我以比較簡單的柱狀圖為例,和大家一起探討數(shù)據(jù)可視化設計的小技巧并分享工作中設計的一些案例。

常見柱狀圖有哪些?

柱狀圖的結(jié)構(gòu)是怎樣的?

如果想應用一種圖表,就要了解這種圖表是怎樣產(chǎn)生的,由哪些元素構(gòu)成的。柱狀圖的基本架構(gòu)是由兩個維度變量構(gòu)成,即我們看到的橫軸與縱軸,并且這兩個維度的變量組中的子集是一一對應的。此外,我們還可以利用柱狀圖的各種元素向用戶傳達各種信息,例如柱狀圖的高度(相對高度,絕對高度),寬度,面積,顏色,填充紋樣等。

柱狀圖適合表現(xiàn)那些數(shù)據(jù)?

一般情況下,柱狀圖多用于反應數(shù)值的對比關(guān)系,具體可以歸納為以下三種:

1.數(shù)據(jù)隨著某一變量的規(guī)律變化或不規(guī)律變化

2.不連續(xù)數(shù)據(jù)間數(shù)值的對比

3.部分和整體的對比

通常數(shù)據(jù)可視化并不是由一種圖表構(gòu)成的,而是由多種圖表共同說明一個問題的。下面通過兩個案例來詮釋柱狀圖的應用與特性。

案例一比例柱狀圖的直接應用

例圖1中所示為公司內(nèi)各種角色某一時間段內(nèi)離職的數(shù)據(jù)。

一般情況下,交互設計師得到需求后最先要判斷的是這一組數(shù)據(jù)是定量分析所得還是定性分析所得,這是一個很關(guān)鍵的環(huán)節(jié),因為它直接決定這組數(shù)據(jù)的界面交互方式。根據(jù)需求,我判斷這一組數(shù)據(jù)是定量分析所得結(jié)果,需要展示的信息有以下三點:1.離職總?cè)藬?shù)   2.各種角色的離職人數(shù)   3.各種角色離職占比??梢詺w類于不同數(shù)據(jù)間的對比與部分與整體的對比兩種關(guān)系。

根據(jù)這個結(jié)論,設計師就要思考怎樣將這些信息傳達給用戶??紤]到用戶的特性和數(shù)據(jù)的樣本,根據(jù)調(diào)研得知用戶最想得到的信息為“各種角色離職占比”,因此選擇了比例柱狀圖。圖中灰色的背景柱狀圖用于展示離職總?cè)藬?shù),前面帶有顏色的柱狀圖展示各種角色的離職數(shù)據(jù),并在每個柱狀圖的頂端直接顯示已經(jīng)計算好的離職占比。用戶所需信息一覽無遺。與此同時,當鼠標聚焦于每個柱狀圖時,彩色柱狀圖呈現(xiàn)從零開始的加載過程,通過動態(tài)的微交互增加產(chǎn)品的趣味性,并向用戶傳達這些數(shù)據(jù)是實時更新的理念。

例圖2為員工在公司內(nèi)部同他人的親密度信息,

上圖所示看起來和柱狀圖的關(guān)系不大,但實際確是變形的柱狀圖,利用氣泡這一隱喻設計改變了柱狀圖的外觀,可以讓這組柱狀圖樣式更加生動,更好的表達數(shù)據(jù),并且更容易讓用戶理解。

主要有以下幾個設計點:

1.用不同的顏色表現(xiàn)員工的不同種類(是否同一部門)

2.將數(shù)值展現(xiàn)在橫軸上

3.用圖例和顏色承載更多的信息

4.移除縱軸,刻度和網(wǎng)格線,減少不必要的視覺噪聲元素

以上是數(shù)據(jù)可視化設計中的一些小故事,總而言之。對于企業(yè)級產(chǎn)品而言,數(shù)據(jù)可視化是很有效的工具,它可以用來分享信息,說明問題,智能分析數(shù)據(jù)并提供指導性的結(jié)論。面對不同的用戶,設計師應根據(jù)需求的特性來確認數(shù)據(jù)的展現(xiàn)形式與交互方式,并且用數(shù)據(jù)講述一個讓用戶印象深刻的故事。


文章轉(zhuǎn)載請保留網(wǎng)址:http://www.wedoyun.com/news/solutions/1667.html

掃碼添加微信
159 8667 8737
24小時電話

返回頂部