數據在網頁設計中顯示方式設計的基本方法
在當前互聯網,各種數據可視化圖表層出不窮,以下是小編爲大家搜索整理的數據在網頁設計中顯示方式設計的基本方法,歡迎閱讀!更多精彩內容請及時關注我們應屆畢業生考試網!
一般的數據圖表都可以拆分成最基本的兩類元素: 所描述的事物及這個事物的數值,我們暫且將其分別定義爲指標和指標值。比如一個性別分佈中,男性佔比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步法,是基於“數據”層面(區別於信息可視化),梳理思考過程,總結設計方法,爲後續可視化提供可借鑑的思路。
相關文章
-
網頁設計的基本步驟及設計方法
網頁設計通常有哪些基本步驟呢?要想設計出漂亮的頁面。需要熟悉哪些設計方法呢?以下僅供參考!第一步. 收集與歸納素材確定項目設計方案、確定項目創意要點、確定項目表現形式、確定項目文案以及確定項目相關素材。第二步 -
Flash在網頁設計中的應用方式
Flash應該如何應用到網頁設計中呢,下面小編爲大家帶來了Flash在網頁設計中的應用方式,希望對大家有用。 Flash在網頁設計中的應用方式 部分應用網頁這個新媒體最大的吸引力就是能真正的實現動感和交互。目前,只要 -
網頁設計中防止頁面被撐開的方法
在我們設計網頁的時候,總會遇到一些不愉快的事情,最常見的莫過於在後臺添加內容後才發現顯示的頁面被撐開,導致網頁極度不美觀。以前大家基本上都是設計表格,網上自然不少對於的解決方法,如今還有div+css標準設計,很少看到 -
網頁設計中的logo設計方法
很多網頁設計師在進行logo設計時會走很多的彎路,但是想設計出高端大氣上檔次的logo,也只能如此。那麼,如何利用巧妙的方法,進行logo的設計呢?下面小編整理了網頁設計中的logo設計方法,供大家參閱。一、輔助線提升作品檔次 -
網站建設構圖讓網頁設計出彩的技巧和方法
網頁設計整體風格就如同網站上的整個明珠,如果網頁設計無法給人一種最直觀的的感受,那麼網站的頁面框架和架構就如同形同虛設。因此,我們在設計網站過程中,對於網頁設計的追求,就變得孜孜不倦,如果讓網頁設計影響到人的內心 -
筆記本無法顯示網頁的解決方法
一:查明具體原因;1、若有類似“更多”的.鏈接,2、單擊“更多“,3、可查看到詳細說明;4、或者按“WIN+R”,打開【運行】;5、輸入“cmd”,回車,打開【命令提示符】;6、輸入“ping相應域名”,查看域名是否能正常解析;如圖:7、若 -
網頁設計中使用微小文字的方式
網頁設計的最大趨勢之一就是超小。“微小”文本元素已經成爲一個流行的想法,但這是一個設計趨勢,引發了一些爭論。那網頁設計中使用微小文字的方式有哪些?歡迎大家閱讀!更多相關信息請關注相關欄目!毫無疑問,小文本大小可 -
網頁設計中該選哪種佈局方式
別具一格的網頁頁面,是維持網站的重要因素,下面是小編爲大家整理關於網頁設計中的局方式,歡迎大家閱讀! 一、 TABLE方式 優點:1、簡單易用:比較適合入門級的用戶操作,用戶可直接利用Dreamweaver(以下簡寫爲“DW”)工具 -
網頁設計中圖片的排版方法
如何提高產品的質量則體現在項目開發的很多階段,例如產品設計、UI設計和前端開發等。而圖片優化在提高產品質量上也起到了舉足輕重的作用,下面小編整理了網頁設計中圖片的排版方法,供大家參閱。1. 簡約而不簡單Win8和iOS -
網頁中字體排版設計方法
雙魚座…還差兩個就完成星座系列了…主要材料:畫紙所需工具:鉛筆橡皮水筆製作步驟:第1步:底稿…第2步:大概輪廓…第3步:細畫…第4步:繼續…第5步:繼續…第6步:繼續…第7步:繼續…第8步:人物勾圖…第9步:細畫…第10步:清理底稿…加