數據可視化

前言

      剛剛吃完元宵，給家裏打完電話，收拾好一切，開始寫個人博客。在這萬家燈火，團圓的日子裏，做爲一名北漂的遊子，此時此刻的心情很複雜的。我想應該有不少人和我同樣，不知道有多少個這樣的節日不能和家人團聚。你們都是漂泊在外，爲了實現本身的夢想，爲了給家人更好的生活，不得不在外打拼。獨在異鄉爲異客，每逢佳節倍思親，一我的在外面再苦再累，看到家人幸福的笑容，一切都是值得的。好了，不扯那麼多了，再也不這裏煽情了，(*^__^*) 嘻嘻……。原本是每週日寫一篇博客的，但是這周有點特殊了，明天要和同事一塊去滑雪，怕玩回來累了晚了，沒有時間寫了。今天就提早一天寫了，由於這段時間作智慧城市項目，接觸了不少東西的，學習瞭解了不少，今天就來給你們分享一下數據可視化，怎樣經過一些圖形圖標來形象直觀的表示數據，經過這些比你們乾巴巴的看一些數據，更加容易理解，更加直觀形象。

1、數據可視化概念

     藉助於圖形的手段，清晰、快捷有效的傳達與溝通訊息。從用戶的角度，數據可視化可讓用戶快速抓住要點信息，讓關鍵的數據點從人類的眼睛快速通往心靈深處。

     數據可視化通常具備如下幾個特色：準確性、創新性和簡潔性。經常使用五種可視化方法：

一、面積&尺寸可視化

     對同一類圖形（例如柱狀、圓環和蜘蛛圖等）的長度、高度或面積加以區別，來清晰的表達不一樣指標對應的指標值之間的對比。這種方法會讓瀏覽者對數據及其之間的對比一目瞭然。製做這類數據可視化圖形時，要用數學公式計算，來表達準確的尺度和比例。

Examples：
a: 天貓的店鋪動態評分
天貓店鋪動態評分模塊右側的條狀圖按精確的比例清晰的表達了不一樣評分用戶的佔比。從下圖中咱們第一眼就能夠強烈的感知到5分動態評分的用戶佔絕對的比例。

b: 聯邦預算圖
以下圖，在美國聯邦預算剖面圖裏，用不一樣高度的貨幣流清晰的表達了資金的來源去向，及每一項所佔金額的比重。

c: 公司黃頁-企業能力模型蜘蛛圖
以下圖，經過蜘蛛圖的表現，公司綜合實力與同行平均水平的對比便一目瞭然。

二、顏色可視化

經過顏色的深淺來表達指標值的強弱和大小，是數據可視化設計的經常使用方法，用戶一眼看上去即可總體的看出哪一部分指標的數據值更突出。

Examples：
a: 點擊頻次熱力圖
好比下面這張眼球熱力圖，經過顏色的差別，咱們能夠直觀的看到用戶的關注點。

b: 2013年美國失業率統計
在圖中能夠看到，經過對美國地圖以州爲單位的劃分，用不一樣的顏色來表明不一樣的失業率等級範圍，整個的全美失業率情況便一覽無餘了。

c: 美國手機用戶城市分佈
圖中紅點是用iPhone的人，綠點是用安卓的人。這兩張在微博上看到的圖，第一張是美國一個城市的一覽，第二張圖特寫了紐約的市中心，尤爲是曼哈頓地區。咱們能夠看到在市中心和主幹道的人用iPhone居多，而用安卓的人都在郊區。這也引發了人們的熱議，有的說在美國富人都住郊區別墅，因此富人愛用安卓手機；有的反駁說曼哈頓地區的人幾乎都用iPhone，說明富人喜歡用iPhone手機。無論結論如何，都足以說明用戶都被這些圖所吸引，因此可視化的方式效果然的很直觀。

三、圖形可視化
在咱們設計指標及數據時，使用有對應實際含義的圖形來結合呈現，會使數據圖表更加生動的被展示，更便於用戶理解圖表要表達的主題。

Examples：
a: iOS手機及平板分佈
以下圖所示，當展現使用不一樣類型的手機和平板用戶佔比時，直接用總的蘋果圖形爲背景來劃分用戶比例，讓用戶第一眼就能夠直觀的看到這些圖是在描述蘋果設備的，直觀而清晰。

 

b: 人人網用戶的網購調查
下圖能夠看出，該數據可視化的設計直接採用男性和女性的圖形，這樣的設計讓分類一目瞭然。再結合了顏色可視化（左面藍色右面粉色），同時也採用了面積&尺寸可視化，不一樣的比例用不一樣長度的條形。這些可視化方法的組合使用，大大增強了數據的可理解性。

 

四、地域空間可視化
當指標數據要表達的主題跟地域有關聯時，咱們通常會選擇用地圖爲大背景。這樣用戶能夠直觀的瞭解總體的數據狀況，同時也能夠根據地理位置快速的定位到某一地區來查看詳細數據。

Examples：
a: 美國最好喝啤酒的產地分佈
下圖中，經過以美國地圖爲大背景，清晰的記錄了不一樣州所產啤酒在1987-2007年間在美國啤酒節中得到的獎牌累計總數。再輔以顏色可視化的方法，讓用戶清晰的看到美國哪些州更盛產好喝的啤酒。

 

五、概念可視化
經過將抽象的指標數據轉換成咱們熟悉的容易感知的數據時，用戶便更容易理解圖形要表達的意義。

Examples：
a: 廁所貼士
下圖是廁所裏貼在牆上的節省紙張的環保貼士，用了概念轉換的方法，讓用戶清晰的感覺到員工們一年的用紙量之多。若是隻是描述擦手紙的量及堆積可達高度，咱們尚未什麼顯性化概念。但當用戶看到用紙的堆積高度比世界最高建築還高、同時需砍伐500多顆樹時，想必用戶的節省紙張甚至禁用紙張的情懷便油然而生了。因此可見用概念轉換的方法是多麼的重要和有效。

 

 

b: Flickr雲存儲空間達1TB的可視化描述
Flickr對雲存儲空間升至1TB確實是讓人開心的事情，但相信不少人對這一數量級所表明的含義並不清晰。因此Flickr在宣傳這一新的升級產品時，採用了概念可視化的方案。從下圖能夠看出，用戶能夠動態的選擇照片的大小，以後Flickr會採用動態交互的方式計算和顯示出1TB能容納多少張對應大小的圖片。這樣一來，用戶便有了清晰的概念，知道這1TB是什麼量級的容量了。

 

 

注意事項
在總結了常見維度的數據可視化方法和範例以後，要再次整體強調下作數據可視化設計時的注意事項，總結了三點以下：

1）設計的方案至少適用於兩個層次：一是可以總體展現大的圖形輪廓，讓用戶可以快速的瞭解圖表所要表達的總體概念；以後再以合適的方式對局部的詳細數據加以呈現（如鼠標hover展現）。

2）作數據可視化時，上述的五個方法常常是混合用的，尤爲是作一些複雜圖形和多維度數據的展現時。

3）作出的可視化圖表必定要易於理解，在顯性化的基礎上越美觀越好，切忌華而不實。

總結

做爲設計師，除了掌握方法來有針對性的設計以外，還要在平時多留心積累素材，同時培養本身的創造力和專業素養，保持一顆好奇心，才能真正的設計出樣式精美又實用的數據可視化圖表。