下面從最經常使用和實用的維度總結了以下5種數據可視化方法,讓咱們來一一看一下:html
1、面積&尺寸可視化設計
對同一類圖形(例如柱狀、圓環和蜘蛛圖等)的長度、高度或面積加以區別,來清晰的表達不一樣指標對應的指標值之間的對比。這種方法會讓瀏覽者對數據及其之間的對比一目瞭然。製做這類數據可視化圖形時,要用數學公式計算,來表達準確的尺度和比例。htm
a: 天貓的店鋪動態評分圖片
天貓店鋪動態評分模塊右側的條狀圖按精確的比例清晰的表達了不一樣評分用戶的佔比。從下圖中咱們第一眼就能夠強烈的感知到5分動態評分的用戶佔絕對的比例。get
b: 聯邦預算圖數學
以下圖,在美國聯邦預算剖面圖裏,用不一樣高度的貨幣流清晰的表達了資金的來源去向,及每一項所佔金額的比重。產品
2、顏色可視化微博
經過顏色的深淺來表達指標值的強弱和大小,是數據可視化設計的經常使用方法,用戶一眼看上去即可總體的看出哪一部分指標的數據值更突出。數據可視化
a: 點擊頻次熱力圖基礎
好比下面這張眼球熱力圖,經過顏色的差別,咱們能夠直觀的看到用戶的關注點。
b: 2013年美國失業率統計
在圖中能夠看到,經過對美國地圖以州爲單位的劃分,用不一樣的顏色來表明不一樣的失業率等級範圍,整個的全美失業率情況便一覽無餘了。
c: 美國手機用戶城市分佈
圖中紅點是用iPhone的人,綠點是用安卓的人。這兩張在微博上看到的圖,第一張是美國一個城市的一覽,第二張圖特寫了紐約的市中心,尤爲是曼哈頓地區。咱們能夠看到在市中心和主幹道的人用iPhone居多,而用安卓的人都在郊區。
這也引發了人們的熱議,有的說在美國富人都住郊區別墅,因此富人愛用安卓手機;有的反駁說曼哈頓地區的人幾乎都用iPhone,說明富人喜歡用iPhone手機。無論結論如何,都足以說明用戶都被這些圖所吸引,因此可視化的方式效果然的很直觀。
3、圖形可視化
在咱們設計指標及數據時,使用有對應實際含義的圖形來結合呈現,會使數據圖表更加生動的被展示,更便於用戶理解圖表要表達的主題。
Examples:
a: iOS手機及平板分佈
以下圖所示,當展現使用不一樣類型的手機和平板用戶佔比時,直接用總的蘋果圖形爲背景來劃分用戶比例,讓用戶第一眼就能夠直觀的看到這些圖是在描述蘋果設備的,直觀而清晰。
b: 人人網用戶的網購調查
下圖能夠看出,該數據可視化的設計直接採用男性和女性的圖形,這樣的設計讓分類一目瞭然。再結合了顏色可視化(左面藍色右面粉色),同時也採用了面積&尺寸可視化,不一樣的比例用不一樣長度的條形。這些可視化方法的組合使用,大大增強了數據的可理解性。
4、地域空間可視化
當指標數據要表達的主題跟地域有關聯時,咱們通常會選擇用地圖爲大背景。這樣用戶能夠直觀的瞭解總體的數據狀況,同時也能夠根據地理位置快速的定位到某一地區來查看詳細數據。
a: 美國最好喝啤酒的產地分佈
下圖中,經過以美國地圖爲大背景,清晰的記錄了不一樣州所產啤酒在1987-2007年間在美國啤酒節中得到的獎牌累計總數。再輔以顏色可視化的方法,讓用戶清晰的看到美國哪些州更盛產好喝的啤酒。
5、概念可視化
經過將抽象的指標數據轉換成咱們熟悉的容易感知的數據時,用戶便更容易理解圖形要表達的意義。
a: 廁所貼士
下圖是廁所裏貼在牆上的節省紙張的環保貼士,用了概念轉換的方法,讓用戶清晰的感覺到員工們一年的用紙量之多。若是隻是描述擦手紙的量及堆積可達高度,咱們尚未什麼顯性化概念。
但當用戶看到用紙的堆積高度比世界最高建築還高、同時需砍伐500多顆樹時,想必用戶的節省紙張甚至禁用紙張的情懷便油然而生了。因此可見用概念轉換的方法是多麼的重要和有效。
b: Flickr雲存儲空間達1TB的可視化描述
Flickr對雲存儲空間升至1TB確實是讓人開心的事情,但相信不少人對這一數量級所表明的含義並不清晰。因此Flickr在宣傳這一新的升級產品時,採用了概念可視化的方案。
從下圖能夠看出,用戶能夠動態的選擇照片的大小,以後Flickr會採用動態交互的方式計算和顯示出1TB能容納多少張對應大小的圖片。這樣一來,用戶便有了清晰的概念,知道這1TB是什麼量級的容量了。
注意事項
在總結了常見維度的數據可視化方法和範例以後,要再次整體強調下作數據可視化設計時的注意事項,總結了三點以下:
做爲設計師,除了掌握方法來有針對性的設計以外,還要在平時多留心積累素材,同時培養本身的創造力和專業素養,保持一顆好奇心,才能真正的設計出樣式精美又實用的數據可視化圖表。