數據在網頁設計中顯示方式設計的基本方法

時間：2025-10-21 23:07:55 網頁設計

數據在網頁設計中顯示方式設計的基本方法

　　在當前互聯網，各種數據可視化圖表層出不窮，以下是小編為大家搜索整理的數據在網頁設計中顯示方式設計的基本方法，歡迎閱讀!更多精彩內容請及時關注我們應屆畢業生考試網!

　　一般的數據圖表都可以拆分成最基本的兩類元素：　所描述的事物及這個事物的數值，我們暫且將其分別定義為指標和指標值。比如一個性別分布中，男性占比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步法，是基于“數據”層面(區別于信息可視化)，梳理思考過程，總結設計方法，為后續可視化提供可借鑒的思路。

【數據在網頁設計中顯示方式設計的基本方法】相關文章：