asmr大尺度娇喘在线听_亚洲a在线视频_教室吃奶门在线观看视频_男女做爰猛烈呻吟声想要

當前位置:首頁 > 新聞中心 > 解決方案
柱狀圖,最直接的數據可視化交互設計責任編輯 :李飛    文章來源 :星翼創想(waterplane.cn)    發布時間 :2016-05-10    閱讀次數:4238     專題 :網站設計

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

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

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

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

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

常見柱狀圖有哪些?

柱狀圖的結構是怎樣的?

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

柱狀圖適合表現那些數據?

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

1.數據隨著某一變量的規律變化或不規律變化

2.不連續數據間數值的對比

3.部分和整體的對比

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

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

例圖1中所示為公司內各種角色某一時間段內離職的數據。

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

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

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

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

主要有以下幾個設計點:

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

2.將數值展現在橫軸上

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

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

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


文章轉載請保留網址:http://waterplane.cn/news/solutions/1667.html

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

返回頂部