想做熱門資訊圖?得先搞懂資料視覺效果的五虎將

來源:互聯網
上載者:User

 

  因為接下來要做賣家後台資料縱橫的改版,對資料視覺效果這塊兒又進行了研究和心得的整理,跟大家分享下資料視覺效果常用的五種方式,希望能給大家帶來思路的拓展。

  概念

  藉助於圖形化的手段,清晰、快捷有效傳達與溝通訊息。從使用者的角度,資料視覺效果可以讓使用者快速抓住要點資訊,讓關鍵的資料點從人類的眼睛快速通往心靈深處。

  資料視覺效果一般會具備以下幾個特點:準確性、創新性 和 簡潔性。

  常用五種可視化方法

  下面從最常用和實用的維度總結了如下5種資料視覺效果方法,讓我們來一一看一下:

  一、面積&尺寸可視化

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

  Examples:

  a: 天貓的店鋪動態評分

  天貓店鋪動態評分模組右側的條狀圖按精確的比例清晰的表達了不同評分使用者的佔比。從下圖中我們第一眼就可以強烈的感知到5分動態評分的使用者占絕對的比例。

  b: 聯邦預算圖

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

  c: 公司黃頁-企業能力模型蜘蛛圖

  如下圖,通過蜘蛛圖的表現,公司綜合實力與同行平均水平的對比便一目瞭然。

  二、顏色可視化

  通過顏色的深淺來表達指標值的強弱和大小,是資料視覺效果設計的常用方法,使用者一眼看上去便可整體的看出哪一部分指標的資料值更突出。

  Examples:

  a: 點擊頻次熱力圖

  比如下面這張眼球熱力圖,通過顏色的差異,我們可以直觀的看到使用者的關注點。

  b: 2013年美國失業率統計

  在圖中可以看到,通過對美國地圖以州為單位的劃分,用不同的顏色來代表不同的失業率等級範圍,整個的全美失業率狀況便盡收眼底了。

  c: 美國手機使用者城市分布

  圖中紅點是用iPhone的人,綠點是用安卓的人。這兩張在微博上看到的圖,第一張是美國一個城市的一覽,第二張圖特寫了紐約的市中心,尤其是曼哈頓地區。我們可以看到在市中心和主幹道的人用iPhone居多,而用安卓的人都在郊區。這也引起了人們的熱議,有的說在美國富人都住郊區別墅,所以富人愛用安卓手機;有的反駁說曼哈頓地區的人幾乎都用iPhone,說明富人喜歡用iPhone手機。不管結論如何,都足以說明使用者都被這些圖所吸引,所以可視化的方式效果真的很直觀。

  註:科學家統計了2年裡30億條含有地理資料的twitter推文,根據用戶端總結出來的資料。

  三、圖形可視化

  在我們設計指標及資料時,使用有對應實際含義的圖形來結合呈現,會使資料圖表更加生動的被展現,更便於使用者理解圖表要表達的主題。

  Examples:

  a: iOS手機及平板分布

  如下圖所示,當展示使用不同類型的手機和平板使用者佔比時,直接用總的蘋果圖形為背景來劃分使用者比例,讓使用者第一眼就可以直觀的看到這些圖是在描述蘋果裝置的,直觀而清晰。

  b: 人人網使用者的網購調查

  下圖可以看出,該資料視覺效果的設計直接採用男性和女性的圖形,這樣的設計讓分類一目瞭然。再結合了顏色可視化(左面藍色右麵粉色),同時也採用了面積&尺寸可視化,不同的比例用不同長度的條形。這些可視化方法的組合使用,大大加強了資料的可理解性。

  四、地區空間可視化

  當指標資料要表達的主題跟地區有關聯時,我們一般會選擇用地圖為大背景。這樣使用者可以直觀的瞭解整體的資料情況,同時也可以根據地理位置快速的定位到某一地區來查看詳細資料。

  Examples:

  a: 美國最好喝啤酒的產地分布

  下圖中,通過以美國地圖為大背景,清晰的記錄了不同州所產啤酒在1987-2007年間在美國啤酒節中獲得的獎牌累計總數。再輔以顏色可視化的方法,讓使用者清晰的看到美國哪些州更盛產好喝的啤酒。

  五、概念可視化

  通過將抽象的指標資料轉換成我們熟悉的容易感知的資料時,使用者便更容易理解圖形要表達的意義。

  Examples:

  a: 廁所貼士

  下圖是廁所裡貼在牆上的節省紙張的環保貼士,用了概念轉換的方法,讓使用者清晰的感受到員工們一年的用紙量之多。如果只是描述擦手紙的量及堆積可達高度,我們還沒有什麼顯性化概念。但當使用者看到用紙的堆積高度比世界最高建築還高、同時需砍伐500多顆樹時,想必使用者的節省紙張甚至禁用紙張的情懷便油然而生了。所以可見用概念轉換的方法是多麼的重要和有效。

  b: Flickr雲端儲存空間達1TB的可視化描述

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

  注意事項

  在總結了常見維度資料視覺效果方法和範例之後,要再次總體強調下做資料視覺效果設計時的注意事項,總結了三點如下:

  1)設計的方案至少適用於兩個層次:一是能夠整體展示大的圖形輪廓,讓使用者能夠快速的瞭解圖表所要表達的整體概念;之後再以合適的方式對局部的詳細資料加以呈現(如滑鼠hover展示)。

  2)做資料視覺效果時,上述的五個方法經常是混合用的,尤其是做一些複雜圖形和多維度資料的展示時。

  3)做出的可視化圖表一定要易於理解,在顯性化的基礎上越美觀越好,切忌華而不實。

  總結

  作為設計師,除了掌握方法來有針對性的設計之外,還要在平時多留心積累素材,同時培養自己的創造力和專業素養,保持一顆好奇心,才能真正的設計出樣式精美又實用的資料視覺效果圖表。

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。