從“瀑布流式布局”談網頁界面的創新設計

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

從“瀑布流式布局”談網頁界面的創新設計

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

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

瀑布流；網頁；界面；體驗設計

在互聯網絡引導的數字化傳媒環境中，網站是信息傳播的承載主體，網頁界面則是用戶與信息交流的平臺，實現著內容的傳遞。網頁作為網站構成的最基本元素，主要通過視覺呈現來傳遞信息，而網頁界面的作用就是將信息轉化成更易識別的視覺形態展現出來。盡管多媒體技術已經使用戶與網頁界面之間的人機交流方式，由傳統的單向傳播發展至雙向甚至多向互動傳播的層面，但是網頁界面設計作為信息內容的視覺化過程，仍歸屬視覺設計的范疇。

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

一、解讀網頁界面的“瀑布流式布局”設計

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

圖1 pinterest．com 網站首頁

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

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

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

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

2．沉浸感的視覺設計

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

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

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

3．情感化的交互設計

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

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

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

二、網頁界面創新設計的思路與方法

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

1． 基于視覺體驗的網頁界面設計

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

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

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

圖2 http://www．moovents．com/網站首頁

2． WEB新標準下的網頁界面構建技術

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

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

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

3． 與時俱進的網頁界面設計風格

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

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

圖4 視差滾動效果的網頁設計案例

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

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

網頁界面設計本身并沒有強制性的固定規則，不論是布局、色彩體系，還是格調與風格。在可用性和易用性得到充分體現的情況下，都應該以用戶體驗為中心，以創新的視覺設計給網頁界面設計注入新的活力。

三、未來網頁界面設計的多元化趨勢

[][]

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

[1]馬福浚.基于視覺體驗理論的WEB界面設計研究[D]．濟南：山東大學，2011:28.

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

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

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

注釋

① pinterest.com創辦于2011年，是基于視覺分享的社交網站，用戶可以將自己喜歡與感興趣的內容通過圖片的形式以瀑布流的瀏覽模式予以展現。

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

謝濤，黃岡師范學院美術學院助教。