用戶體驗式網頁編排的視覺設計研究

王曉俊

摘 要：隨著數字技術的發展，人們對網頁的視覺審美也在不斷發生變化，已不僅僅滿足對信息的獲取，更注重對網頁的體驗感追求。本文從用戶體驗的視角出發，闡述用戶體驗式網頁編排設計的視覺特征，分析基于用戶體驗式網頁編排設計的具體表現。希望通過對網頁編排的視覺化設計，提升用戶對網頁的體驗感。

關鍵詞：用戶體驗；網頁編排；視覺設計

當今，人們的生活無處不充斥著數字信息的元素，瀏覽網頁成為生活中必不可少的行為習慣之一。從某種意義上來說網頁編排設計已不僅僅是視覺分享與傳達信息，更是將人們的生活方式、行為習慣、心理變化融為一體的視覺設計。

一、用戶體驗式網頁編排設計

用戶體驗是一種主觀存在的概念，是通過人們使用產品過程中產生的真實感受。它通過人與產品的互動對產品產生不同的感受，從而獲得的不一樣的體驗感。如用戶在瀏覽某購物類的網頁時，絕大部分用戶會自主選擇查找需要購買的產品，但由于某些網頁編排設計的不合理性使得用戶在購買的過程中遇到問題時，用戶很少會選擇自己去解決，總會第一時間向網頁客服求助，往往產生很不愉快的體驗感。在網頁編排設計時信息之間的層次要鮮明，既要注重整體的版式設計，營造個性化的視覺效果，也要給用戶帶來更舒適的服務體驗。

二、用戶體驗式網頁編排設計的特征

網頁版式設計不再是單純的視覺享受，它是將視覺享受與人們的生活習慣、生活方式、心理體驗等進行充分融合的藝術設計。[1]在網頁編排設計中還需要注意以下幾個方面的特征：

（一）注意版面設計的留白

版面留白，即在網頁界面空間中留出一定比例的空白。在網頁編排設計中適度的留白能在心理上讓用戶產生無限的聯想，使網頁界面上的圖形和文字之間產生呼應，給用戶帶來舒適的視覺體驗。增加網頁編排中的留白，能讓網頁界面更具有呼吸感，充滿韻律和節奏，能使用戶快速搜索信息，有效瀏覽網頁內容。同時，也增強了網頁中有效信息的可讀性與易識別性，最終達到文字、圖形、編排之間的協調統一。

（二）注意交互設計的效果

交互式作為用戶體驗的一個方面，動態的效果在網頁編排設計中不只是頁面上簡單出現的FLASH動畫、躍動的文字、動態的圖片等，更主要的是與用戶之間的交互性，試圖將用戶的需求通過形變、移位等方法生動有趣的過渡，利用鼠標的點擊、滾動效果增添在交互式過程中給用戶帶來的生動趣味。

三、用戶體驗式網頁編排設計中的視覺表現

合理安排文字和相關視覺元素，能使瀏覽者感受平衡和穩定的感覺；同時，運用多種文字造型按照獨特的排布規律，使界面產生活躍的動感，具備節奏和韻律，也有利于網頁內容的協調統一[2]。

（一）兩側均衡式結構

網頁編排中視覺設計的兩側均衡式結構一般會將網頁頁面分為左、右兩部分，常見的有左大右小結構、左右對稱結構。心理學家研究表明，人在瀏覽文字的過程中視覺流程是從左至右，從上至下的習慣。這一結構的設計能讓用戶在瀏覽網頁的過程中快速有效地獲取所需要的信息。設計師在設計網頁編排結構時盡可能的將左半部的文字信息與右半部的內容信息通過連接技術，第一時間在導航與內容信息之間進行轉換顯示。這樣的網頁編排設計靈活、簡潔，但由于數據含量較少的緣故，只適用在設計小型網頁編排中使用。

（二）上包圍式結構

上包圍式結構主要將上半部設計為導航菜單，綜合的信息數據內容和二級導航菜單會分布在網頁頁面左右兩側，如：各類鏈接、搜索欄、賬號登錄窗口、用戶注冊端口等。目前，上包圍式結構的網頁編排設計在網頁界面的使用上最為常見，適用性較強。其均衡直觀的特點能讓用戶最快捷的獲取所需信息，獲取的數據信息條理性較強。同時，這種結構編排設計過于程序化，樣式單一。因此，設計師在使用這種結構設計網頁編排時應強調色彩之間的搭配運用，合理利用色彩的視覺效果提升網頁界面的藝術性。

（三）全封閉式結構

全封閉式結構在上包圍結構的基礎上做改進，上包圍式結構是基本，網頁的下半部添加了對應的橫向操作菜單。可以在有限的網頁頁面范圍內充分利用頁面空間。提升頁面有效數據信息的容量，降低不必要的文本數據，提高用戶在預覽網頁界面時對有效數據信息獲取的效率。由于對信息的封閉性太強，這也是此結構網頁編排設計的不足之處。往往容易導致用戶瀏覽網頁信息內容刷新較慢，造成擁堵的重要原因。

（四）左圍合式結構

左部圍合結構是在上包圍式結構的基礎上，設計師對上包圍式結構做相應的修改而形成的一種新的結構形式。在上包圍式結構中將網頁頁面順時針旋轉270度后得到的一種包圍結構，也是將全封閉式結構網頁編排右側信息欄刪減所形成的一種編排結構。此種結構彌補了全封閉式結構過于封閉性的缺點。

（五）樣式各異的結構

網頁編排樣式各異的結構主要是對網頁主體標識、網頁展示的圖片、藝術性的字體、超鏈接等要素進行的編排設計。在頁面導航菜單上則不做重點設計，只結合數據信息的需要在網頁頁面上做裝飾、點綴、優化的效果，以此來協調均衡頁面的空間布局。這一網頁編排結構通常備受時尚界網站的青睞，能給用戶在瀏覽網頁時感到輕松、自由、現代的視覺體驗，從而降低用戶因長時間瀏覽網頁帶來的審美疲倦。

四、結語

在網頁編排中，視覺設計的色彩、編排、交互等安排的是否合理是構成用戶體驗良好反饋的前提。從用戶的視角出發，熟知用戶操作的行為習慣，追求人性化的設計理念，從而更進一步優化網頁編排的視覺設計效果，可以讓用戶在長時間瀏覽網站的同時，能夠更加高效、便捷、精準地獲取所需數據信息，增加用戶對網頁的體驗感。

參考文獻：

[1]胡萍，許睿.淺析用戶體驗式網頁布局及應用.福建電腦，2018（8）.

[2]謝春松.基于網頁界面設計中視覺元素分析與研究[J].福建師范大學，2014.

基金項目：安徽新華學院科研項目《基于用戶體驗的網頁交互性創新研究》，編號：2017rw008；安徽省人文社科重點研究項目《基于感官體驗的兒童視覺導視系統設計研究》編號：SK2018A0645