謝濤 XIE Tao黃岡師范學(xué)院,湖北 黃岡438000（Huanggang Normal University, 438000 Huanggang, Hubei）

從“瀑布流式布局”談網(wǎng)頁(yè)界面的創(chuàng)新設(shè)計(jì)

謝濤 XIE Tao
黃岡師范學(xué)院,湖北 黃岡438000（Huanggang Normal University, 438000 Huanggang, Hubei）

結(jié)構(gòu)合理有序、信息傳達(dá)準(zhǔn)確且功能性強(qiáng)的網(wǎng)頁(yè)界面設(shè)計(jì)，往往能給用戶帶來(lái)良好的瀏覽體驗(yàn)；而突破傳統(tǒng)、設(shè)計(jì)獨(dú)特并兼顧藝術(shù)性與時(shí)代感的網(wǎng)頁(yè)界面，更能滿足用戶視覺(jué)體驗(yàn)上的審美需求。只有緊隨時(shí)代發(fā)展的步伐來(lái)探索網(wǎng)頁(yè)界面設(shè)計(jì)的創(chuàng)新，才能有力地拓展創(chuàng)造性思維，使網(wǎng)頁(yè)界面的設(shè)計(jì)達(dá)到藝術(shù)與技術(shù)的完美統(tǒng)一。

瀑布流；網(wǎng)頁(yè)；界面；體驗(yàn)設(shè)計(jì)

在互聯(lián)網(wǎng)絡(luò)引導(dǎo)的數(shù)字化傳媒環(huán)境中，網(wǎng)站是信息傳播的承載主體，網(wǎng)頁(yè)界面則是用戶與信息交流的平臺(tái)，實(shí)現(xiàn)著內(nèi)容的傳遞。網(wǎng)頁(yè)作為網(wǎng)站構(gòu)成的最基本元素，主要通過(guò)視覺(jué)呈現(xiàn)來(lái)傳遞信息，而網(wǎng)頁(yè)界面的作用就是將信息轉(zhuǎn)化成更易識(shí)別的視覺(jué)形態(tài)展現(xiàn)出來(lái)。盡管多媒體技術(shù)已經(jīng)使用戶與網(wǎng)頁(yè)界面之間的人機(jī)交流方式，由傳統(tǒng)的單向傳播發(fā)展至雙向甚至多向互動(dòng)傳播的層面，但是網(wǎng)頁(yè)界面設(shè)計(jì)作為信息內(nèi)容的視覺(jué)化過(guò)程，仍歸屬視覺(jué)設(shè)計(jì)的范疇。

技術(shù)的進(jìn)步往往引發(fā)新的設(shè)計(jì)觀念，綜合新的設(shè)計(jì)語(yǔ)言與設(shè)計(jì)形態(tài)可以賦予網(wǎng)頁(yè)界面創(chuàng)造性的視覺(jué)設(shè)計(jì)。對(duì)網(wǎng)頁(yè)界面深刻的第一印象與美好體驗(yàn)，主要源于網(wǎng)頁(yè)界面布局的獨(dú)特形式。隨著網(wǎng)站Pinterest①的“瀑布流式布局”被越來(lái)越多的網(wǎng)站所借鑒，用戶也從潺潺流水般的圖片序列中感受到新鮮的瀏覽體驗(yàn)，以至于業(yè)界一度引發(fā)了瀑布流式布局熱潮。 作為前端的網(wǎng)頁(yè)界面設(shè)計(jì)，在仿效瀑布流式布局的潮流中，能夠積極累積經(jīng)驗(yàn)并勇于探索，激發(fā)出創(chuàng)新思維與靈感，對(duì)于網(wǎng)頁(yè)界面的設(shè)計(jì)創(chuàng)新具有積極與深遠(yuǎn)的指導(dǎo)意義。

一、解讀網(wǎng)頁(yè)界面的“瀑布流式布局”設(shè)計(jì)

瀑布流式布局，簡(jiǎn)稱“瀑布流”，是當(dāng)前比較流行的一種網(wǎng)站頁(yè)面布局形式，具體視覺(jué)表現(xiàn)為參差不齊的多欄布局。隨著頁(yè)面的向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是基于視覺(jué)圖片分享的社交型目錄網(wǎng)站Pinterest.com（見(jiàn)圖1）。

圖1 pinterest．com 網(wǎng)站首頁(yè)

Pinterest的瀑布流式布局固定了圖形元素的寬度，而高度卻可以靈活的縱向延展，不均衡不對(duì)稱的布局方式使網(wǎng)頁(yè)的視覺(jué)區(qū)域呈現(xiàn)出錯(cuò)落有致的層級(jí)感。瀑布流式布局區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙地利用了視覺(jué)元素間的落差感來(lái)引導(dǎo)視線的流動(dòng)，營(yíng)造了一種輕松愉悅的瀏覽體驗(yàn)。這種清新簡(jiǎn)約的設(shè)計(jì)風(fēng)格與別具一格的框架結(jié)構(gòu)，使用戶瀏覽網(wǎng)頁(yè)時(shí)使用最少的操作就可以獲得大量信息。Pinterest的成功使得一時(shí)間內(nèi)瀑布流式布局設(shè)計(jì)備受青睞，國(guó)內(nèi)外類似展現(xiàn)界面的網(wǎng)站紛紛涌現(xiàn)。從用戶視覺(jué)體驗(yàn)與交互體驗(yàn)的角度來(lái)看，瀑布流式布局風(fēng)靡的原因有如下幾點(diǎn)。

1．清晰流暢的視覺(jué)感官體驗(yàn)

視覺(jué)焦點(diǎn)、視覺(jué)流程與視覺(jué)區(qū)域作為網(wǎng)頁(yè)界面布局設(shè)計(jì)需要考慮的三大要素，構(gòu)建起了網(wǎng)頁(yè)界面的基本框架。用戶在瀏覽網(wǎng)頁(yè)時(shí)視線通常是處于流動(dòng)的運(yùn)動(dòng)狀態(tài)，整個(gè)視覺(jué)流程的軌跡是一條規(guī)則有序的迂回曲線。這個(gè)視覺(jué)感知的過(guò)程也可以被認(rèn)為是視覺(jué)區(qū)域劃分的形成過(guò)程，用戶的主觀意識(shí)會(huì)將獲取到的內(nèi)容予以價(jià)值評(píng)定并以此劃分出主次區(qū)塊，其中最受關(guān)注的視覺(jué)區(qū)域被稱之為“最佳視域”。在網(wǎng)頁(yè)界面設(shè)計(jì)中，重要的信息內(nèi)容都會(huì)在最佳視域內(nèi)給予展現(xiàn)。

在瀑布流式布局的網(wǎng)頁(yè)界面中，主要的視覺(jué)元素是固定寬度有序排列的圖形或圖像，滾動(dòng)式瀏覽引導(dǎo)用戶視點(diǎn)的流動(dòng)，運(yùn)動(dòng)軌跡呈現(xiàn)出一條不規(guī)則的水平波紋曲線，整個(gè)視覺(jué)流程是左右橫向有序的進(jìn)行而非跳躍式的。流暢的視覺(jué)流程決定了頁(yè)面瀏覽是一個(gè)發(fā)現(xiàn)而非搜索的過(guò)程，沒(méi)有刻板的圖形用戶界面框架，在盡情欣賞無(wú)間斷精美圖畫的愉悅之中尋求感興趣的信息，而為用戶提供了完美的視覺(jué)體驗(yàn)。

2．沉浸感的視覺(jué)設(shè)計(jì)

版式是界面設(shè)計(jì)的骨骼，平面設(shè)計(jì)的版式規(guī)律與網(wǎng)頁(yè)界面設(shè)計(jì)版式有相通之處，但也有明顯的區(qū)別。相對(duì)于普通平面設(shè)計(jì)，網(wǎng)頁(yè)界面的版式設(shè)計(jì)更強(qiáng)調(diào)識(shí)別性、交互性，它不僅指設(shè)計(jì)的具體版式，還包括比例、秩序、均衡、強(qiáng)調(diào)和統(tǒng)一[1]。網(wǎng)頁(yè)界面設(shè)計(jì)除了更強(qiáng)調(diào)識(shí)別性、交互性以及信息傳達(dá)的有效性之外，數(shù)字化的富媒體屬性還賦予了其表現(xiàn)形式上強(qiáng)大的可塑性。

根據(jù)用戶的視覺(jué)習(xí)慣及展示載體的特點(diǎn)，網(wǎng)頁(yè)界面的布局普遍都有著固定的框架結(jié)構(gòu)，除視覺(jué)元素及信息內(nèi)容區(qū)域之外還有明顯的功能性分區(qū)。優(yōu)良的網(wǎng)頁(yè)界面版式構(gòu)成框架都比較規(guī)范，頁(yè)面布局嚴(yán)謹(jǐn)精確、簡(jiǎn)捷有效，呈現(xiàn)出左右或者上下型的塊狀結(jié)構(gòu)特點(diǎn)。在網(wǎng)頁(yè)的瀏覽過(guò)程中，用戶的視覺(jué)習(xí)慣是從上到下、從左至右的逐塊瀏覽，獲取大量的盡可能完整的信息量，再有目的性的篩選出所需要的內(nèi)容。然而，從用戶認(rèn)知心理的角度分析，這種感知方式在一定程度上增加了視覺(jué)與大腦的負(fù)擔(dān)，讓原本隨意性的網(wǎng)頁(yè)瀏覽變得帶有些許強(qiáng)迫性的意味。

瀑布流式布局的網(wǎng)頁(yè)瀏覽中，信息傳遞與內(nèi)容展示的方式是隨機(jī)的、迅速的，是一種帶有偶然性的掃描式信息獲取，這種流式的隨意瀏覽對(duì)于特定內(nèi)容的傳達(dá)而言具有便利性。作為一種圖像瀏覽與信息獲取的極致方案，瀑布流式布局在一定程度上給用戶營(yíng)造了具有沉浸感的視覺(jué)體驗(yàn)。

3．情感化的交互設(shè)計(jì)

情感，作為人對(duì)外界事物作用于自身時(shí)產(chǎn)生的一種心理與生理的綜合反應(yīng)，在得到滿足時(shí)便會(huì)使人產(chǎn)生愉悅或喜愛(ài)之情。情感化、人性化是人機(jī)交互學(xué)科中很重要的研究領(lǐng)域，具有親和力與獨(dú)特視覺(jué)審美的數(shù)字產(chǎn)品設(shè)計(jì)更能獲得用戶的好感。從某種意義上言，只有情感化的設(shè)計(jì)才能真正滿足人們精神互動(dòng)層面的感性心理需求。

當(dāng)今媒體的高度發(fā)達(dá)，特別是數(shù)字化媒體的出現(xiàn)，更是構(gòu)筑起了視覺(jué)文化的全球化平臺(tái)[2]。視覺(jué)文化符號(hào)傳播體系已經(jīng)成為人們生活環(huán)境中的一個(gè)重要組成部分，我們正處于一個(gè)視覺(jué)呈現(xiàn)的時(shí)代?！白x圖時(shí)代”，人們獲得的是一種視覺(jué)上的快感；而瀑布流對(duì)于圖像的展現(xiàn)，是高效并具有強(qiáng)大吸引力的。在瀑布流式布局的網(wǎng)站中，圖片結(jié)合信息鏈接的方式，簡(jiǎn)化了瀏覽過(guò)程，用戶快速掃視閱讀就可以在短時(shí)間內(nèi)獲得大量清晰的信息。其次，看似散亂無(wú)序的碎片化內(nèi)容，表現(xiàn)出強(qiáng)大的視覺(jué)吸引力。由于圖像隨機(jī)出現(xiàn)的不確定性，更能誘導(dǎo)和激發(fā)用戶主動(dòng)去搜尋自己所感興趣的內(nèi)容。而在交互體驗(yàn)上，用戶無(wú)需進(jìn)行點(diǎn)擊翻頁(yè)操作，隨著鼠標(biāo)的滾動(dòng)就能加載新的內(nèi)容，以最簡(jiǎn)化的操作步驟便可以獲得連續(xù)性的瀏覽體驗(yàn)，讓人沉浸其中卻不被打斷。

瀑布流式布局作為一種新穎的交互體驗(yàn)，完美地解決了圖片信息的展示問(wèn)題，但是同時(shí)也存在著很大的局限性，如表現(xiàn)形式過(guò)于單一，在內(nèi)容信息的完整表述上也有所欠缺等。而且它的采用至少有3個(gè)前提：一是散亂無(wú)序的碎片化內(nèi)容，二是用戶對(duì)信息獲取上的隨機(jī)性與不穩(wěn)定性，三是用戶對(duì)內(nèi)容只做極輕量的互動(dòng)消費(fèi)。因此，對(duì)于目的性強(qiáng)、注重內(nèi)容與互動(dòng)的網(wǎng)站而言，瀑布流式頁(yè)面布局并不適合。

二、網(wǎng)頁(yè)界面創(chuàng)新設(shè)計(jì)的思路與方法

從網(wǎng)頁(yè)界面的瀑布流式布局設(shè)計(jì)中可以看出，網(wǎng)頁(yè)的最終呈現(xiàn)能否獲得滿意的用戶體驗(yàn)，根本在于網(wǎng)頁(yè)界面設(shè)計(jì)的創(chuàng)新。符合時(shí)代審美需求的網(wǎng)頁(yè)界面設(shè)計(jì)應(yīng)該是藝術(shù)、技術(shù)與創(chuàng)新的完美融合，網(wǎng)頁(yè)界面的設(shè)計(jì)不僅是一種傳播形式的表達(dá)，更是設(shè)計(jì)者依照設(shè)計(jì)目的和要求對(duì)視覺(jué)構(gòu)成元素進(jìn)行藝術(shù)規(guī)劃的創(chuàng)造性思維活動(dòng)。只有獨(dú)特的創(chuàng)意、新穎的格調(diào)、創(chuàng)新的表現(xiàn)手法，才能設(shè)計(jì)出匠心獨(dú)運(yùn)并且具有人性情感的網(wǎng)頁(yè)界面。

1． 基于視覺(jué)體驗(yàn)的網(wǎng)頁(yè)界面設(shè)計(jì)

網(wǎng)頁(yè)界面結(jié)構(gòu)的完整清晰、交互操作的簡(jiǎn)潔便利以及視覺(jué)設(shè)計(jì)的情感認(rèn)同，基本上能夠滿足用戶對(duì)網(wǎng)頁(yè)的瀏覽需求。要使用戶在網(wǎng)頁(yè)瀏覽時(shí)始終保持興趣盎然的愉悅感，網(wǎng)頁(yè)界面所表現(xiàn)出的吸引力必須達(dá)到或超越用戶的心理期望值。在符合用戶心理需求的基礎(chǔ)上，同時(shí)考慮更多視覺(jué)設(shè)計(jì)上的細(xì)節(jié)因素才能不斷完善網(wǎng)頁(yè)界面對(duì)瀏覽心理的迎合。

在網(wǎng)頁(yè)界面布局的版式規(guī)劃上，要從整體上把握好視域之間的主次層級(jí)關(guān)系，將所需的各視覺(jué)要素統(tǒng)一協(xié)調(diào)安排、合理劃分并充分利用有限的展示空間?；蛟S是受到慣性定向思維模式的制約，通常訪客在瀏覽網(wǎng)頁(yè)時(shí)，視線往往趨向于從上到下，由左至右的移動(dòng)路徑，在這個(gè)感知過(guò)程中尋求視覺(jué)心理上的平衡感。因此，遵循用戶習(xí)慣性的眼動(dòng)規(guī)律，網(wǎng)頁(yè)界面采用具有平衡感的版式設(shè)計(jì)更能滿足人的心理感受。隨著各種終端設(shè)備屏幕顯示的日趨精細(xì)化，網(wǎng)頁(yè)的基本構(gòu)成要素如文字、圖像、導(dǎo)航條、菜單欄、音頻、視頻、動(dòng)畫等，除了注重視覺(jué)交互效果的呈現(xiàn)，還要從符合視覺(jué)規(guī)范的層面上來(lái)精化設(shè)計(jì)，達(dá)到所謂的“像素級(jí)的完美度”。

從根本上來(lái)講，優(yōu)秀的網(wǎng)頁(yè)界面設(shè)計(jì)首先必須創(chuàng)建清晰直觀的版式層次結(jié)構(gòu)，還需要建立明確的視覺(jué)信息指示系統(tǒng)從而引導(dǎo)用戶去完成瀏覽目標(biāo)。與此同時(shí)，視覺(jué)體驗(yàn)設(shè)計(jì)上還要能在一瞬間抓住訪客的目光。在http://www.moovents.com的網(wǎng)頁(yè)界面設(shè)計(jì)中，顯目的強(qiáng)化圖形替代了標(biāo)題文字的功能，用視覺(jué)隱喻來(lái)詮釋晦澀的概念表達(dá)，設(shè)計(jì)細(xì)節(jié)上的微妙漸變強(qiáng)化了網(wǎng)頁(yè)虛擬空間中的三維真實(shí)感，給予了用戶暢快淋漓的瀏覽體驗(yàn)與視覺(jué)感受（見(jiàn)圖2）。

圖2 http://www．moovents．com/網(wǎng)站首頁(yè)

2． WEB新標(biāo)準(zhǔn)下的網(wǎng)頁(yè)界面構(gòu)建技術(shù)

技術(shù)的迅速發(fā)展使得網(wǎng)頁(yè)構(gòu)建代碼的進(jìn)步和升級(jí)比之先前快了很多，新的網(wǎng)頁(yè)規(guī)范與WEB標(biāo)準(zhǔn)也讓網(wǎng)頁(yè)界面的設(shè)計(jì)表現(xiàn)有了更大的渲染空間。HTML5與CSS3作為新一代WEB開發(fā)的標(biāo)準(zhǔn)，無(wú)論是針對(duì)內(nèi)容結(jié)構(gòu)還是媒體，都引入了更多新的元素，大多數(shù)的主流瀏覽器已經(jīng)開始完美支持新的技術(shù)標(biāo)準(zhǔn)與新特性。在HTML5逐步完善的趨勢(shì)下，網(wǎng)頁(yè)界面設(shè)計(jì)技術(shù)也相應(yīng)地提高到一個(gè)新的高度。利用CSS3的屬性優(yōu)勢(shì)，可以輕松創(chuàng)建以前需要圖片處理才能達(dá)到的視覺(jué)效果，如圓角、邊框背景透明化、漸變光暈效果，還有文本的漸變陰影、倒影，以及各種不同凡響的交互動(dòng)畫等動(dòng)態(tài)視覺(jué)效果。

隨著網(wǎng)絡(luò)接入環(huán)境的日漸寬松，智能手機(jī)、平板電腦以及各種移動(dòng)互聯(lián)網(wǎng)終端設(shè)備的普及，移動(dòng)互聯(lián)網(wǎng)時(shí)代呼之欲出。新一代開放的WEB標(biāo)準(zhǔn)使網(wǎng)頁(yè)界面設(shè)計(jì)也表現(xiàn)出了優(yōu)異的兼容性，能夠跨越平臺(tái)使每個(gè)細(xì)節(jié)都能得到完美的演繹。同時(shí)，觸控技術(shù)的應(yīng)用越來(lái)越廣泛，頁(yè)面訪問(wèn)不再僅只依賴鼠標(biāo)進(jìn)行操作，故此，網(wǎng)頁(yè)界面設(shè)計(jì)還必須考慮到適應(yīng)觸屏設(shè)備。如采用能夠適應(yīng)所有分辨率的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)和非固定寬度的流體布局，都可以使用戶獲得與設(shè)備本身和諧的流暢體驗(yàn)。顯示屏幕的精度也越來(lái)越高，比如視網(wǎng)膜（Retina）屏幕的高清分辨率使得用戶從垂直到水平瀏覽網(wǎng)頁(yè)都能獲得清晰絢麗的視覺(jué)體驗(yàn)（見(jiàn)圖3）。面對(duì)技術(shù)的發(fā)展，在網(wǎng)頁(yè)界面設(shè)計(jì)中要使信息的瀏覽與交互操作更具易用性，同時(shí)容納和展示出更多的內(nèi)容。

圖3 蘋果公司采用視網(wǎng)膜（Retina）高清屏幕的new iPad平板電腦

3． 與時(shí)俱進(jìn)的網(wǎng)頁(yè)界面設(shè)計(jì)風(fēng)格

網(wǎng)頁(yè)界面作為視覺(jué)設(shè)計(jì)而言注重的不是單純的形式美感，而更加注重的是功能上的實(shí)用，直觀的版式設(shè)計(jì)、良好的交互性和快速的響應(yīng)速度才能帶給用戶美好的瀏覽體驗(yàn)。隨著人們審美觀念的逐漸提升，網(wǎng)頁(yè)界面設(shè)計(jì)也越來(lái)越重視用戶體驗(yàn)，強(qiáng)調(diào)人性化設(shè)計(jì)。這就要求設(shè)計(jì)者不僅要強(qiáng)化構(gòu)建技術(shù)，還要緊隨時(shí)代的發(fā)展趨勢(shì)進(jìn)行設(shè)計(jì)風(fēng)格的更新。

如視差滾動(dòng)就是現(xiàn)今網(wǎng)頁(yè)界面設(shè)計(jì)中應(yīng)用得比較成功的一個(gè)技巧②，新穎的視覺(jué)特效使其備受設(shè)計(jì)師與用戶的青睞。作為計(jì)算機(jī)圖形學(xué)中一個(gè)特殊的滑動(dòng)特效技巧，視差滾動(dòng)通過(guò)精確控制時(shí)間與計(jì)算合適的位置來(lái)展示出一種動(dòng)態(tài)穿插效果，頁(yè)面中的視覺(jué)元素因其顯示速度、時(shí)間與位置上的差異性造成運(yùn)動(dòng)視差，從而形成深度錯(cuò)覺(jué)的多層運(yùn)動(dòng)圖像。這一技術(shù)應(yīng)用到網(wǎng)頁(yè)界面設(shè)計(jì)中，可以在二維的平面上營(yíng)造出極具動(dòng)感與深度的視覺(jué)空間（見(jiàn)圖4）。

圖4 視差滾動(dòng)效果的網(wǎng)頁(yè)設(shè)計(jì)案例

在繁雜冗長(zhǎng)的互聯(lián)網(wǎng)海量信息中，用戶往往不愿意面對(duì)一個(gè)包含大量信息的復(fù)雜網(wǎng)頁(yè)，而是希望頁(yè)面更加簡(jiǎn)潔，以便能夠快速獲取到所需的資訊，簡(jiǎn)潔型的網(wǎng)頁(yè)界面設(shè)計(jì)正好滿足了用戶這樣的需求。別具一格的單頁(yè)或多頁(yè)式主題性網(wǎng)頁(yè)界面設(shè)計(jì)，可以在有限的頁(yè)面中呈現(xiàn)出必需的內(nèi)容，通過(guò)導(dǎo)航條引導(dǎo)的方式使用戶在同一頁(yè)面的不同視域進(jìn)行跳轉(zhuǎn)，易于閱讀。同時(shí)，在頁(yè)面鏈接層次不深的情況下，固定導(dǎo)航條位置的布局設(shè)計(jì)不僅可以提高網(wǎng)站性能，也更易于將其融入整個(gè)頁(yè)面的布局之中。在這種設(shè)計(jì)形式中，導(dǎo)航條不會(huì)隨著頁(yè)面的滾動(dòng)、切換而改變位置或重新載入，始終懸停在頁(yè)面中的一個(gè)固定位置，使用戶能夠快速通過(guò)導(dǎo)航鏈接訪問(wèn)目的區(qū)域或頁(yè)面。

在圖形與圖像的處理與應(yīng)用上，網(wǎng)絡(luò)環(huán)境的優(yōu)化使得大幅尺寸圖片的使用更具可行性。比如高分辨率的背景圖像與高清圖片能夠產(chǎn)生極具沖擊力的視覺(jué)效果，瞬間吸引住用戶的注意力。而對(duì)于網(wǎng)頁(yè)中文本很難表達(dá)出的邏輯關(guān)系與比例數(shù)值，將其圖形化、圖像化不失為一種高效的溝通方式，直觀的圖表和資訊圖像能夠表達(dá)更多復(fù)雜的信息。而簡(jiǎn)潔、清爽、明晰并略帶透明感的圖像所營(yíng)造的獨(dú)特視覺(jué)效果，使網(wǎng)頁(yè)界面更為動(dòng)人并且富有吸引力。還有類似于“Metro”風(fēng)格的色塊方格元素設(shè)計(jì)、明快直觀的極簡(jiǎn)設(shè)計(jì)、強(qiáng)化視覺(jué)表現(xiàn)的超大LOGO圖形、自定義藝術(shù)字體等，這些都可以讓網(wǎng)頁(yè)界面留給瀏覽者美好的視覺(jué)印象。

網(wǎng)頁(yè)界面設(shè)計(jì)本身并沒(méi)有強(qiáng)制性的固定規(guī)則，不論是布局、色彩體系，還是格調(diào)與風(fēng)格。在可用性和易用性得到充分體現(xiàn)的情況下，都應(yīng)該以用戶體驗(yàn)為中心，以創(chuàng)新的視覺(jué)設(shè)計(jì)給網(wǎng)頁(yè)界面設(shè)計(jì)注入新的活力。

三、未來(lái)網(wǎng)頁(yè)界面設(shè)計(jì)的多元化趨勢(shì)

[][]

② 視差滾動(dòng)（Parallax Scrolling）是一種獨(dú)特的網(wǎng)頁(yè)內(nèi)容表現(xiàn)形式，其基本原理是通過(guò)CSS技巧或jQuery插件來(lái)實(shí)現(xiàn)使多層背景以不同的速度移動(dòng)，形成視覺(jué)上的運(yùn)動(dòng)落差效果。

[1]馬?？?基于視覺(jué)體驗(yàn)理論的WEB界面設(shè)計(jì)研究[D]．濟(jì)南：山東大學(xué)，2011:28.

[2]孟建.視覺(jué)文化傳播:對(duì)一種文化形態(tài)和傳播理念的詮釋[J].現(xiàn)代傳播,2002（3）：1-7.

網(wǎng)頁(yè)界面設(shè)計(jì)不僅是為了滿足用戶感官審美的需求，更是為了有效地傳達(dá)信息。面對(duì)缺乏人性色彩的網(wǎng)絡(luò)與顯示屏幕，用戶更樂(lè)于接受具有美感的、體貼的、有親和力的、情感化的網(wǎng)頁(yè)界面。由現(xiàn)今網(wǎng)頁(yè)界面設(shè)計(jì)技術(shù)的多元化發(fā)展趨勢(shì)可以推斷出，指點(diǎn)觸控的操作方式與多維度的交互式設(shè)計(jì)，將是今后一段時(shí)期內(nèi)網(wǎng)頁(yè)界面設(shè)計(jì)的主要技術(shù)特征。而網(wǎng)頁(yè)界面的視覺(jué)呈現(xiàn)也不會(huì)再局限于傳統(tǒng)的二維平面屏幕，3D立體顯示技術(shù)將成就人們?nèi)碌慕K極視覺(jué)體驗(yàn)。

技術(shù)上的發(fā)展進(jìn)步總是同步帶來(lái)視覺(jué)藝術(shù)上的創(chuàng)新與突破，在網(wǎng)頁(yè)界面設(shè)計(jì)的創(chuàng)新歷程中，只有不斷地深入了解業(yè)界最新發(fā)展趨勢(shì)，具備勇于嘗試新技術(shù)與新方法的超前意識(shí)，才能打破傳統(tǒng)的固化思維，創(chuàng)造出不同凡響的優(yōu)秀作品。未來(lái)的網(wǎng)絡(luò)時(shí)代，網(wǎng)頁(yè)界面設(shè)計(jì)必將肩負(fù)起嶄新的時(shí)代使命，讓用戶與網(wǎng)絡(luò)之間的溝通自然流暢、和諧完美，不再有任何的阻礙。

注釋

① pinterest.com創(chuàng)辦于2011年，是基于視覺(jué)分享的社交網(wǎng)站，用戶可以將自己喜歡與感興趣的內(nèi)容通過(guò)圖片的形式以瀑布流的瀏覽模式予以展現(xiàn)。

Innovative Design of Webpage Interface Based on “Waterfall Flow Layout”

A webpage with functional design, reasonable and orderly structure and accurate information can bring users favorable browsing experience, while web pages which break through traditions or are designed with sense of arts and time can better meet the visual aesthetic needs of users. Only exploring innovative design, along with the trend of times, can effectively expand creative thinking and bring perfect unity of art and technology.

waterfall fl ow；webpage；interface；experience design

J04

A

10.3963/j.issn.2095-0705.2013.02.007（0031-05）

2013-01-27

謝濤，黃岡師范學(xué)院美術(shù)學(xué)院助教。