以用戶為中心的設計

這是UCDChina提前預覽網頁留下的存檔,不包括作者可能更新過的內容。
推薦您進入文章源地址閱讀和發布評論:

數據可視化6步法

作者:duanwei  |   發布: (編輯)kent.zhu   |   時間:2013-01-30 19:04:28 文字大小:- +

在當前互聯網,各種數據可視化圖表層出不窮,本文嘗試對數據可視化的方法進行歸納,整理成6步法。

 

一般的數據圖表都可以拆分成最基本的兩類元素: 所描述的事物及這個事物的數值,我們暫且將其分別定義為指標和指標值。比如一個性別分布中,男性占比30%,女性占比70%,那么指標就是男性、女性,指標值對應為30%、70%。

 

 1.  將指標值圖形化

菲彩国际一個指標值就是一個數據,將數據的大小以圖形的方式表現。比如用柱形圖的長度或高度表現數據大小,這也是最常用的可視化形式。

菲彩国际傳統的柱形圖、餅圖有可能會帶來審美疲勞,可嘗試從圖形的視覺樣式上進行一些創新,常用的方法就是將圖形與指標的含義關聯起來。

比如Google Zeitgeist在展現top10的搜索詞時,展示的就是“搜索”形狀的柱形,圖形與指標的含義相吻合,同時也做了立體的視覺變化:

 

2. 將指標圖形化

一般用與指標含義相近的icon來表現,使用場景也比較多,如下:

 

3.將指標關系圖形化

菲彩国际當存在多個指標時,挖掘指標之間的關系,并將其圖形化表達,可提升圖表的可視化深度。常見有以下兩種方式:

 

借助已有的場景來表現

聯想自然或社會中有無場景與指標關系類似,然后借助此場景來表現。

比如百度統計流量研究院操作系統的分布,首先分為windows、mac還有其他操作系統,windows又包含xp、2003等多種子系統。

菲彩国际根據這種關系聯想,發現宇宙星系中也有類似的關系: 宇宙中有很多星系,我們最為熟悉的是太陽系,太陽系中又包括各個行星, 因此整體借用宇宙星系的場景,將熟知的windows比喻成太陽系,將xp、window7等比喻成太陽系中的行星,將mac和其他系統比喻成其他星系,表現如下:

 

構建場景來表現

菲彩国际指標之間往往具有一些關聯特征,如從簡單到復雜、從低級到高級、從前到后等等。如無法找到已存在的對應場景,也可構建場景。

菲彩国际比如百度統計流量研究院中的學歷分布,指標分別是小學、初中、高中、本科等等,它們之間是一種越爬越高,從低等級到高等級的關系,那么,這種關系可以通過構建一個臺階去表現,如下:

 

菲彩国际支付寶新出的個人年度賬單中,在描述付款最多的三項時,構建了一個領獎臺的形式:

小結

菲彩国际根據之前3步,可將指標、指標值和指標關系分別進行圖形化處理。

菲彩国际以最簡單的性別分布為例,可以得到一個線性的可視化過程,如下:

以上圖示為供參考的線性化過程,實際可視化思考中,將哪類元素進行圖形化或者圖形化前后的順序可能均有不同,需根據具體情況處理。

4. 將時間和空間可視化

時間

菲彩国际通過時間的維度來查看指標值的變化情況,一般通過增加時間軸的形式,也就是常見的趨勢圖。

空間

當圖表存在地域信息并且需要突出表現的時候,可用地圖將空間可視化,地圖作為主背景呈現所有信息點。

Google Zeitgeist在2010和2012年的年度熱門回顧中,都是以地圖為主要載體(同時也結合了時間),來呈現熱門事件:

5. 將數據進行概念轉換

 

菲彩国际先看下生活中的概念轉換,當我們需要喝水時,通常會說:給我來一杯水;而不會說:給我來30ml的水。在這里,30ml是一個實際數據,但是難以感知,所以用一杯的概念來轉換。

 同樣在數據可視化,有時需要對數據進行概念轉換,可加深用戶對數據的感知。常用方法有對比和比喻:

 對比

菲彩国际下圖是一個介紹中國煙民數量的圖表:如果只看左半部分中國煙民的數量:32000000,知道數據量級很大,但具體有多大卻很難感知;直到看到右半部分:中國煙民數量超過了美國人口總和,這樣一對比,對數據的感知就加深了。

比喻

下圖是一個介紹雅虎郵箱處理數據量的圖表,大意是每小時處理的電子郵件大小有1.2TB,相當于644245094張打印的紙。

菲彩国际 這又是一個很大的數據,但到底有多大? 在這里用了一個比喻的手法:644245094張紙,如果把每一張紙首尾對接,可以繞地球4圈多。到這里,能較深刻感受到雅虎郵箱處理的數據量之大,為地球節省了很多紙張。

 更進一步地,還將這個比喻進行了圖形化表現。

6.讓圖表“動”起來

數據圖形化完成后,可結合實際情況,將其變為動態化和可操控性的圖表,用戶在操控過程中能更好地感知數據的變化過程,提升體驗。

菲彩国际 實現動態化通常以下兩種方式: 交互和動畫。

 

交互

菲彩国际交互包括鼠標浮動、點擊、多圖表時的聯動響應等等,如下是百度統計流量研究院的時間分布圖,采用左圖右表的聯動形式,左圖中,鼠標浮動則顯示對應數據,點擊則切換選擇:

動畫

包括增加入場動畫、交互過程的動畫、播放動畫等等。

菲彩国际入場動畫:即在頁面載入后,給圖表一個“生長”的過程,取代“數據載入中”這樣的提示文字。

交互動畫:用戶發生交互行為后,通過動畫形式給以及時反饋。

播放動畫:一般來是提供播放功能,像看視頻一樣,讓用戶能夠完整看到數據隨時間變化的過程。下圖是Gapminder在描述多維數據時,提供隨時間播放的功能,可以直觀感受到所有數據的變化。

 

總結

數據可視化形式多樣,思考過程也不盡相同。以上6步法,是基于“數據”層面(區別于信息可視化),梳理思考過程,總結設計方法,為后續可視化提供可借鑒的思路。

 

更多
打印  |  類別:信息和交互  |  

UCDChina的書


UCDChina編著,定價35元
 

《UCD火花集》封面
UCDChina編著,定價25元
菲彩国际  

《應需而變——設計的力量》封面
UCDChina團隊成員譯,定價29元
菲彩国际  

《網頁設計解析》封面
UCDChina團隊成員著,定價62元
 

《贏在用戶》封面
UCDChina團隊成員Angela譯,定價29元
菲彩国际  

《用戶體驗的要素》封面
UCDChina團隊成員Angela譯,定價25元
 

菲彩国际_菲彩国际官网_Welcome 菲彩国际_菲彩国际官网_Welcome 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网 紫金阁棋牌-紫金阁棋牌官网