數(shù)據(jù)在網(wǎng)頁(yè)設(shè)計(jì)中顯示方式設(shè)計(jì)的基本方法
在當(dāng)前互聯(lián)網(wǎng)，各種數(shù)據(jù)可視化圖表層出不窮，以下是小編為大家搜索整理的數(shù)據(jù)在網(wǎng)頁(yè)設(shè)計(jì)中顯示方式設(shè)計(jì)的基本方法，歡迎閱讀!更多精彩內(nèi)容請(qǐng)及時(shí)關(guān)注我們應(yīng)屆畢業(yè)生考試網(wǎng)!
一般的數(shù)據(jù)圖表都可以拆分成最基本的兩類元素： 所描述的事物及這個(gè)事物的數(shù)值，我們暫且將其分別定義為指標(biāo)和指標(biāo)值。比如一個(gè)性別分布中，男性占比30%，女性占比70%，那么指標(biāo)就是男性、女性，指標(biāo)值對(duì)應(yīng)為30%、70%。
1. 將指標(biāo)值圖形化
一個(gè)指標(biāo)值就是一個(gè)數(shù)據(jù)，將數(shù)據(jù)的大小以圖形的方式表現(xiàn)。比如用柱形圖的長(zhǎng)度或高度表現(xiàn)數(shù)據(jù)大小，這也是最常用的可視化形式。
傳統(tǒng)的柱形圖、餅圖有可能會(huì)帶來(lái)審美疲勞，可嘗試從圖形的視覺樣式上進(jìn)行一些創(chuàng)新，常用的方法就是將圖形與指標(biāo)的含義關(guān)聯(lián)起來(lái)。
比如Google Zeitgeist在展現(xiàn)top10的搜索詞時(shí)，展示的就是“搜索”形狀的柱形，圖形與指標(biāo)的含義相吻合，同時(shí)也做了立體的視覺變化：
2. 將指標(biāo)圖形化
一般用與指標(biāo)含義相近的icon來(lái)表現(xiàn)，使用場(chǎng)景也比較多，如下：
3.將指標(biāo)關(guān)系圖形化
當(dāng)存在多個(gè)指標(biāo)時(shí)，挖掘指標(biāo)之間的關(guān)系，并將其圖形化表達(dá)，可提升圖表的可視化深度。常見有以下兩種方式：
借助已有的場(chǎng)景來(lái)表現(xiàn)
聯(lián)想自然或社會(huì)中有無(wú)場(chǎng)景與指標(biāo)關(guān)系類似，然后借助此場(chǎng)景來(lái)表現(xiàn)。
比如百度統(tǒng)計(jì)流量研究院操作系統(tǒng)的分布，首先分為windows、mac還有其他操作系統(tǒng)，windows又包含xp、2003等多種子系統(tǒng)。
根據(jù)這種關(guān)系聯(lián)想，發(fā)現(xiàn)宇宙星系中也有類似的關(guān)系： 宇宙中有很多星系，我們最為熟悉的是太陽(yáng)系，太陽(yáng)系中又包括各個(gè)行星， 因此整體借用宇宙星系的場(chǎng)景，將熟知的windows比喻成太陽(yáng)系，將xp、window7等比喻成太陽(yáng)系中的行星，將mac和其他系統(tǒng)比喻成其他星系，表現(xiàn)如下：
構(gòu)建場(chǎng)景來(lái)表現(xiàn)
指標(biāo)之間往往具有一些關(guān)聯(lián)特征，如從簡(jiǎn)單到復(fù)雜、從低級(jí)到高級(jí)、從前到后等等。如無(wú)法找到已存在的對(duì)應(yīng)場(chǎng)景，也可構(gòu)建場(chǎng)景。
比如百度統(tǒng)計(jì)流量研究院中的學(xué)歷分布，指標(biāo)分別是小學(xué)、初中、高中、本科等等，它們之間是一種越爬越高，從低等級(jí)到高等級(jí)的關(guān)系，那么，這種關(guān)系可以通過(guò)構(gòu)建一個(gè)臺(tái)階去表現(xiàn)，如下：
支付寶新出的個(gè)人年度賬單中，在描述付款最多的三項(xiàng)時(shí)，構(gòu)建了一個(gè)領(lǐng)獎(jiǎng)臺(tái)的形式：
小結(jié)：
根據(jù)之前3步，可將指標(biāo)、指標(biāo)值和指標(biāo)關(guān)系分別進(jìn)行圖形化處理。
以最簡(jiǎn)單的性別分布為例，可以得到一個(gè)線性的可視化過(guò)程，如下：
以上圖示為供參考的線性化過(guò)程，實(shí)際可視化思考中，將哪類元素進(jìn)行圖形化或者圖形化前后的順序可能均有不同，需根據(jù)具體情況處理。
4.將時(shí)間和空間可視化
時(shí)間
通過(guò)時(shí)間的維度來(lái)查看指標(biāo)值的變化情況，一般通過(guò)增加時(shí)間軸的形式，也就是常見的趨勢(shì)圖。
空間
當(dāng)圖表存在地域信息并且需要突出表現(xiàn)的時(shí)候，可用地圖將空間可視化，地圖作為主背景呈現(xiàn)所有信息點(diǎn)。
Google Zeitgeist在2010和2012年的年度熱門回顧中，都是以地圖為主要載體(同時(shí)也結(jié)合了時(shí)間)，來(lái)呈現(xiàn)熱門事件：
5.將數(shù)據(jù)進(jìn)行概念轉(zhuǎn)換
先看下生活中的概念轉(zhuǎn)換，當(dāng)我們需要喝水時(shí)，通常會(huì)說(shuō)：給我來(lái)一杯水;而不會(huì)說(shuō)：給我來(lái)30ml的水。在這里，30ml是一個(gè)實(shí)際數(shù)據(jù)，但是難以感知，所以用一杯的概念來(lái)轉(zhuǎn)換。
同樣在數(shù)據(jù)可視化，有時(shí)需要對(duì)數(shù)據(jù)進(jìn)行概念轉(zhuǎn)換，可加深用戶對(duì)數(shù)據(jù)的感知。常用方法有對(duì)比和比喻：
對(duì)比：
下圖是一個(gè)介紹中國(guó)煙民數(shù)量的圖表：如果只看左半部分中國(guó)煙民的數(shù)量：32000000，知道數(shù)據(jù)量級(jí)很大，但具體有多大卻很難感知;直到看到右半部分：中國(guó)煙民數(shù)量超過(guò)了美國(guó)人口總和，這樣一對(duì)比，對(duì)數(shù)據(jù)的感知就加深了。
比喻
下圖是一個(gè)介紹雅虎郵箱處理數(shù)據(jù)量的圖表，大意是每小時(shí)處理的電子郵件大小有1.2TB，相當(dāng)于644245094張打印的紙。
這又是一個(gè)很大的數(shù)據(jù)，但到底有多大? 在這里用了一個(gè)比喻的手法：644245094張紙，如果把每一張紙首尾對(duì)接，可以繞地球4圈多。到這里，能較深刻感受到雅虎郵箱處理的數(shù)據(jù)量之大，為地球節(jié)省了很多紙張。
更進(jìn)一步地，還將這個(gè)比喻進(jìn)行了圖形化表現(xiàn)。
6.讓圖表“動(dòng)”起來(lái)
數(shù)據(jù)圖形化完成后，可結(jié)合實(shí)際情況，將其變?yōu)閯?dòng)態(tài)化和可操控性的圖表，用戶在操控過(guò)程中能更好地感知數(shù)據(jù)的變化過(guò)程，提升體驗(yàn)。
實(shí)現(xiàn)動(dòng)態(tài)化通常以下兩種方式： 交互和動(dòng)畫。
交互
交互包括鼠標(biāo)浮動(dòng)、點(diǎn)擊、多圖表時(shí)的聯(lián)動(dòng)響應(yīng)等等，如下是百度統(tǒng)計(jì)流量研究院的時(shí)間分布圖，采用左圖右表的聯(lián)動(dòng)形式，左圖中，鼠標(biāo)浮動(dòng)則顯示對(duì)應(yīng)數(shù)據(jù)，點(diǎn)擊則切換選擇：
動(dòng)畫
包括增加入場(chǎng)動(dòng)畫、交互過(guò)程的動(dòng)畫、播放動(dòng)畫等等。
入場(chǎng)動(dòng)畫：即在頁(yè)面載入后，給圖表一個(gè)“生長(zhǎng)”的過(guò)程，取代“數(shù)據(jù)載入中”這樣的提示文字。
交互動(dòng)畫：用戶發(fā)生交互行為后，通過(guò)動(dòng)畫形式給以及時(shí)反饋。
播放動(dòng)畫：一般來(lái)是提供播放功能，像看視頻一樣，讓用戶能夠完整看到數(shù)據(jù)隨時(shí)間變化的過(guò)程。下圖是Gapminder在描述多維數(shù)據(jù)時(shí)，提供隨時(shí)間播放的功能，可以直觀感受到所有數(shù)據(jù)的變化。
總結(jié)
數(shù)據(jù)可視化形式多樣，思考過(guò)程也不盡相同。以上6步法，是基于“數(shù)據(jù)”層面(區(qū)別于信息可視化)，梳理思考過(guò)程，總結(jié)設(shè)計(jì)方法，為后續(xù)可視化提供可借鑒的思路。
【數(shù)據(jù)在網(wǎng)頁(yè)設(shè)計(jì)中顯示方式設(shè)計(jì)的基本方法】相關(guān)文章：
網(wǎng)頁(yè)設(shè)計(jì)的基本步驟及設(shè)計(jì)方法08-16
網(wǎng)頁(yè)設(shè)計(jì)中的logo設(shè)計(jì)方法10-03
網(wǎng)頁(yè)設(shè)計(jì)中圖片的排版方法09-14
網(wǎng)頁(yè)設(shè)計(jì)中的設(shè)計(jì)09-21
網(wǎng)頁(yè)設(shè)計(jì)中該選哪種布局方式09-08
網(wǎng)頁(yè)設(shè)計(jì)基本步驟10-07
網(wǎng)頁(yè)中字體排版設(shè)計(jì)方法07-12