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

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

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

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

瀑布流；網(wǎng)頁；界面；體驗設(shè)計

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

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

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

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

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

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

1．清晰流暢的視覺感官體驗

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

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

2．沉浸感的視覺設(shè)計

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

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

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

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

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

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

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

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

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

1． 基于視覺體驗的網(wǎng)頁界面設(shè)計

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

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

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

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

2． WEB新標準下的網(wǎng)頁界面構(gòu)建技術(shù)

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

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

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

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

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

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

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

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

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

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

三、未來網(wǎng)頁界面設(shè)計的多元化趨勢

[][]

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

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

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

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

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

注釋

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