信息可視化在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

前言：想要寫出一篇引人入勝的文章？我們特意為您整理了信息可視化在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用范文，希望能給你帶來(lái)靈感和參考，敬請(qǐng)閱讀。

1信息可視化概述

1.1信息可視化的定義

信息可視化是“利用計(jì)算機(jī)支撐的、交互的、對(duì)抽象數(shù)據(jù)的可視化表示，來(lái)增強(qiáng)人們對(duì)這些抽象信息的認(rèn)知”的方法與技術(shù)。信息可視化最早出現(xiàn)于18世紀(jì)，歷史和政治學(xué)家Playfire和數(shù)學(xué)家Lambert為了幫助人們更好地理解數(shù)據(jù)，根據(jù)復(fù)雜的數(shù)據(jù)創(chuàng)建了可視化圖表。隨著人們對(duì)于信息可視化技術(shù)的研究，信息可視化應(yīng)用的領(lǐng)域越來(lái)越廣泛，它不再只是表示數(shù)據(jù)的一種方式，更成為深度挖掘數(shù)據(jù)之間隱藏的特征和關(guān)系的一種手段。隨著計(jì)算機(jī)科學(xué)的發(fā)展和各種移動(dòng)設(shè)備的普及，信息可視化在網(wǎng)頁(yè)設(shè)計(jì)中又引領(lǐng)了新的研究熱潮。

1.2信息可視化的流程

信息可視化的過(guò)程可以分為三個(gè)階段：源數(shù)據(jù)處理。將收集到的海量信息和數(shù)據(jù)進(jìn)行處理和加工，使其簡(jiǎn)化和標(biāo)準(zhǔn)化，以便后期的快速調(diào)度和輸入可視化流程。源數(shù)據(jù)處理是整個(gè)信息可視化過(guò)程的基礎(chǔ)?？梢暬瘓D。這個(gè)過(guò)程完成從數(shù)據(jù)到可視化圖表的轉(zhuǎn)變，通過(guò)各種可視化技術(shù)將抽象的數(shù)據(jù)用易于理解的圖形描述出來(lái)，并表達(dá)出各個(gè)信息的數(shù)量、質(zhì)量和關(guān)系等特征。視圖轉(zhuǎn)換。將抽象的數(shù)據(jù)轉(zhuǎn)換成圖形以后，按照用戶的需求進(jìn)行顯示從而完成信息的輸出。除此之外，還需要將用戶的反饋信息傳送回軟件層而實(shí)現(xiàn)人機(jī)交互。

1.3信息可視化的方法

信息可視化的數(shù)據(jù)種類很多，包括一維數(shù)據(jù)、二維數(shù)據(jù)、三維數(shù)據(jù)、多維數(shù)據(jù)和時(shí)間序列數(shù)據(jù)等。這里著重介紹多維數(shù)據(jù)和時(shí)間序列數(shù)據(jù)的可視化方法。多維數(shù)據(jù)的信息可視化技術(shù)有很多種，其中比較有代表性的有基于幾何的可視化技術(shù)、基于圖標(biāo)的可視化技術(shù)和動(dòng)畫的多維可視化技術(shù)等?；趲缀蔚目梢暬夹g(shù)包括平行坐標(biāo)系方法、Radviz方法、散點(diǎn)圖矩陣方法和Andrews曲線方法。平行坐標(biāo)系方法使用平行的豎直軸線代表維度，在豎直軸線上標(biāo)記多維數(shù)據(jù)并用折線相連相關(guān)坐標(biāo)點(diǎn)來(lái)表示多維數(shù)據(jù)；Radviz方法使用圓形坐標(biāo)系來(lái)實(shí)現(xiàn)多維數(shù)據(jù)的可視化；散點(diǎn)圖矩陣方法就是將多維數(shù)據(jù)的各個(gè)維度兩兩組合繪制成一系列按規(guī)律排列的散點(diǎn)圖來(lái)顯示多維數(shù)據(jù)可視化效果；Andrews曲線方法將多維數(shù)據(jù)的每一數(shù)據(jù)項(xiàng)通過(guò)一個(gè)周期函數(shù)映射到二維坐標(biāo)系中的一條曲線上從而展示可視化結(jié)果?；趫D標(biāo)的可視化方法用具備可視化特征的幾何圖形作為圖標(biāo)來(lái)表示多維數(shù)據(jù)，這些圖標(biāo)的每一個(gè)可視化屬性如大小、形狀、顏色等作為維度，通過(guò)多維數(shù)據(jù)到這些維度的映射來(lái)實(shí)現(xiàn)可視化效果。隨著計(jì)算機(jī)和互聯(lián)網(wǎng)科技的發(fā)展，動(dòng)畫由于其形象、直觀、交互性高和容易被理解等特點(diǎn)已經(jīng)被廣泛應(yīng)用于用戶界面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)中。時(shí)間序列數(shù)據(jù)是指具有時(shí)間屬性的數(shù)據(jù)。時(shí)間序列數(shù)據(jù)的可視化方法包括線形圖、堆積圖、動(dòng)畫、地平線圖和時(shí)間線方法。其中時(shí)間線方法是以時(shí)間軸為水平軸線，將數(shù)據(jù)信息以圖標(biāo)或者圖片的形式按照時(shí)間順序標(biāo)記在時(shí)間軸線上。時(shí)間線的方法最開始被應(yīng)用于歷史事件記錄中，后又發(fā)展用于醫(yī)療記錄和犯罪記錄。由于其完整的記錄體系和系統(tǒng)的記錄方式，時(shí)間線被應(yīng)用于越來(lái)越多的領(lǐng)域。

1.4可視化變量

對(duì)于可視化變量的研究豐富了信息可視化的研究領(lǐng)域和應(yīng)用領(lǐng)域。傳統(tǒng)意義上的可視化變量包括位置、形狀、方向、色彩、紋理、灰度和尺寸，一些學(xué)者將其中的色彩細(xì)分為色相、亮度和飽和度。近年來(lái)有學(xué)者將嗅覺、觸覺、聽覺等對(duì)于可視化變量的補(bǔ)充在很大意義上豐富了信息的表達(dá)方式?？梢暬兞窟x取的是否恰當(dāng)將直接影響到信息表示的質(zhì)量。

2網(wǎng)頁(yè)設(shè)計(jì)中的信息可視化應(yīng)用分析

2.1網(wǎng)頁(yè)設(shè)計(jì)概述

網(wǎng)頁(yè)界面是指人與計(jì)算機(jī)之間以互聯(lián)網(wǎng)為載體的界面，通過(guò)文字、圖形、圖片等元素傳達(dá)信息內(nèi)容以達(dá)到人機(jī)交互的目的。借助互聯(lián)網(wǎng)強(qiáng)大的存儲(chǔ)和傳播能力，網(wǎng)頁(yè)界面將來(lái)自世界每個(gè)角落的信息以最快的速度傳達(dá)給用戶。網(wǎng)頁(yè)設(shè)計(jì)的工作目標(biāo)，是通過(guò)更合理的顏色、字體、圖片進(jìn)行頁(yè)面設(shè)計(jì)，在功能限定的情況下，盡可能給予用戶完美的視覺體驗(yàn)，高級(jí)的網(wǎng)頁(yè)設(shè)計(jì)甚至?xí)紤]到通過(guò)聲音等來(lái)實(shí)現(xiàn)更好的試聽感受。隨著互聯(lián)網(wǎng)的應(yīng)用越來(lái)越廣泛和平民化，伴隨用戶的接受能力和審美能力的提升，網(wǎng)頁(yè)界面的美觀性和易用性越來(lái)越重要，信息可視化恰好解決了這一問(wèn)題。網(wǎng)頁(yè)中的信息可視化應(yīng)用由來(lái)已久，從開始的視覺圖形設(shè)計(jì)，到現(xiàn)在網(wǎng)絡(luò)中隨處可見的信息圖，通過(guò)信息可視化進(jìn)行的網(wǎng)頁(yè)設(shè)計(jì)讓更多信息更快更好地被用戶接受。

2.2網(wǎng)頁(yè)視覺設(shè)計(jì)與可視化

伴隨互聯(lián)網(wǎng)的快速發(fā)展和普及，網(wǎng)頁(yè)設(shè)計(jì)變得越來(lái)越重要和關(guān)鍵。網(wǎng)頁(yè)界面本身就是由文字、顏色、圖片、位置等為基本元素的，而這些元素也都屬于可視化變量的研究范圍，因而在網(wǎng)頁(yè)視覺設(shè)計(jì)中引入信息可視化就非常自然和必要了。隨著各種網(wǎng)站的普及和多樣化，一個(gè)吸引眼球和易用的網(wǎng)站則會(huì)讓你的網(wǎng)站在眾多同類型的網(wǎng)站中脫穎而出。互聯(lián)網(wǎng)的一大重要功能就是傳遞信息，近年來(lái)越來(lái)越多的網(wǎng)站開始將傳統(tǒng)的文字信息轉(zhuǎn)換為信息圖的形式，這樣大大降低了用戶理解信息花費(fèi)的時(shí)間和精力，又提升了網(wǎng)站整體的視覺效果。網(wǎng)易的數(shù)讀中國(guó)網(wǎng)站就是一個(gè)典型的應(yīng)用案例，數(shù)讀中國(guó)將每天的國(guó)際、經(jīng)濟(jì)、正在、民生、社會(huì)等方面的新聞或者話題通過(guò)信息圖的形式表達(dá)和解讀出來(lái)，用戶第一眼看上去就會(huì)直觀了解到話題的內(nèi)容，可以幫助用戶快速瀏覽信息。

2.3網(wǎng)頁(yè)交互設(shè)計(jì)與可視化

交互設(shè)計(jì)就是設(shè)計(jì)師對(duì)產(chǎn)品和用戶之間的互動(dòng)機(jī)制進(jìn)行分析、預(yù)測(cè)、定義和探索的過(guò)程。網(wǎng)頁(yè)的交互設(shè)計(jì)則是通過(guò)網(wǎng)頁(yè)語(yǔ)言表達(dá)出所要告訴用戶的信息，同時(shí)顯示用戶的操作功能。好的交互設(shè)計(jì)可以幫助用戶快速地接受和理解信息，實(shí)現(xiàn)產(chǎn)品的功能。交互設(shè)計(jì)=視覺界面設(shè)計(jì)﹢用戶行為設(shè)計(jì)，界面的意義是為了讓用戶實(shí)現(xiàn)同整個(gè)系統(tǒng)的交互，好的交互設(shè)計(jì)可以讓用戶更加有效率。因此除了應(yīng)用傳統(tǒng)意義的可視化變量實(shí)現(xiàn)視覺上的可視化，還需要對(duì)用戶行為進(jìn)行分析預(yù)測(cè)從而設(shè)計(jì)操作流程等以期獲得更好的用戶體驗(yàn)。以rodania網(wǎng)站為例，網(wǎng)頁(yè)中網(wǎng)站logo放到了主導(dǎo)航正中間的位置，這也是最顯眼的位置，該網(wǎng)站的網(wǎng)站歷史頁(yè)面，以時(shí)間為截點(diǎn)，向用戶展示網(wǎng)站的重要?dú)v史和傳統(tǒng)，由于是時(shí)間序列數(shù)據(jù)，采用了時(shí)間軸的可視化展示方法，用戶點(diǎn)擊年份數(shù)字，即可查看該年份的歷史時(shí)間，或者通過(guò)點(diǎn)擊左/右翻頁(yè)箭頭來(lái)切換上一個(gè)或者下一個(gè)歷史事件。時(shí)間軸最大的意義莫過(guò)于可以系統(tǒng)、完成地記錄某一領(lǐng)域的發(fā)展足跡和詳細(xì)事跡。相比傳統(tǒng)的文字堆砌，rodania通過(guò)時(shí)間軸用最直觀、簡(jiǎn)便的方式將網(wǎng)站歷史展現(xiàn)在用戶面前。

結(jié)語(yǔ)

信息可視化越來(lái)越多地被用于網(wǎng)頁(yè)設(shè)計(jì)中，無(wú)論是網(wǎng)頁(yè)的視覺設(shè)計(jì)還是交互設(shè)計(jì)，其目的都是為了提高網(wǎng)站的易用性，幫助用戶快速獲得和理解信息，提升用戶體驗(yàn)。信息可視化的方法和技術(shù)有很多，隨著互聯(lián)網(wǎng)技術(shù)和設(shè)計(jì)的發(fā)展提升，相信信息可視化可以在網(wǎng)頁(yè)設(shè)計(jì)中發(fā)揮更多的作用。

作者：曹新瑜 郝錕 單位：燕山大學(xué)