當今, 人們的生活無(wú)處不充斥著(zhù)數字信息的元素, 瀏覽網(wǎng)頁(yè)成為生活中必不可少的行為習慣之一。從某種意義上來(lái)說(shuō)網(wǎng)頁(yè)編排設計已不僅僅是視覺(jué)分享與傳達信息, 更是將人們的生活方式、行為習慣、心理變化融為一體的視覺(jué)設計。
一、用戶(hù)體驗式網(wǎng)頁(yè)編排設計
用戶(hù)體驗是一種主觀(guān)存在的概念, 是通過(guò)人們使用產(chǎn)品過(guò)程中產(chǎn)生的真實(shí)感受。它通過(guò)人與產(chǎn)品的互動(dòng)對產(chǎn)品產(chǎn)生不同的感受, 從而獲得的不一樣的體驗感。如用戶(hù)在瀏覽某購物類(lèi)的網(wǎng)頁(yè)時(shí), 絕大部分用戶(hù)會(huì )自主選擇查找需要購買(mǎi)的產(chǎn)品, 但由于某些網(wǎng)頁(yè)編排設計的不合理性使得用戶(hù)在購買(mǎi)的過(guò)程中遇到問(wèn)題時(shí), 用戶(hù)很少會(huì )選擇自己去解決, 總會(huì )第一時(shí)間向網(wǎng)頁(yè)客服求助, 往往產(chǎn)生很不愉快的體驗感。在網(wǎng)頁(yè)編排設計時(shí)信息之間的層次要鮮明, 既要注重整體的版式設計, 營(yíng)造個(gè)性化的視覺(jué)效果, 也要給用戶(hù)帶來(lái)更舒適的服務(wù)體驗。
二、用戶(hù)體驗式網(wǎng)頁(yè)編排設計的特征
網(wǎng)頁(yè)版式設計不再是單純的視覺(jué)享受, 它是將視覺(jué)享受與人們的生活習慣、生活方式、心理體驗等進(jìn)行充分融合的藝術(shù)設計。在網(wǎng)頁(yè)編排設計中還需要注意以下幾個(gè)方面的特征:
(一) 注意版面設計的留白
版面留白, 即在網(wǎng)頁(yè)界面空間中留出一定比例的空白。在網(wǎng)頁(yè)編排設計中適度的留白能在心理上讓用戶(hù)產(chǎn)生無(wú)限的聯(lián)想, 使網(wǎng)頁(yè)界面上的圖形和文字之間產(chǎn)生呼應, 給用戶(hù)帶來(lái)舒適的視覺(jué)體驗。增加網(wǎng)頁(yè)編排中的留白, 能讓網(wǎng)頁(yè)界面更具有呼吸感, 充滿(mǎn)韻律和節奏, 能使用戶(hù)快速搜索信息, 有效瀏覽網(wǎng)頁(yè)內容。同時(shí), 也增強了網(wǎng)頁(yè)中有效信息的可讀性與易識別性, 最終達到文字、圖形、編排之間的協(xié)調統一。
(二) 注意交互設計的效果
交互式作為用戶(hù)體驗的一個(gè)方面, 動(dòng)態(tài)的效果在網(wǎng)頁(yè)編排設計中不只是頁(yè)面上簡(jiǎn)單出現的FLASH動(dòng)畫(huà)、躍動(dòng)的文字、動(dòng)態(tài)的圖片等, 更主要的是與用戶(hù)之間的交互性, 試圖將用戶(hù)的需求通過(guò)形變、移位等方法生動(dòng)有趣的過(guò)渡, 利用鼠標的點(diǎn)擊、滾動(dòng)效果增添在交互式過(guò)程中給用戶(hù)帶來(lái)的生動(dòng)趣味。
三、用戶(hù)體驗式網(wǎng)頁(yè)編排設計中的視覺(jué)表現
合理安排文字和相關(guān)視覺(jué)元素, 能使瀏覽者感受平衡和穩定的感覺(jué);同時(shí), 運用多種文字造型按照獨特的排布規律, 使界面產(chǎn)生活躍的動(dòng)感, 具備節奏和韻律, 也有利于網(wǎng)頁(yè)內容的協(xié)調統一。
(一) 兩側均衡式結構
網(wǎng)頁(yè)編排中視覺(jué)設計的兩側均衡式結構一般會(huì )將網(wǎng)頁(yè)頁(yè)面分為左、右兩部分, 常見(jiàn)的有左大右小結構、左右對稱(chēng)結構。心理學(xué)家研究表明, 人在瀏覽文字的過(guò)程中視覺(jué)流程是從左至右, 從上至下的習慣。這一結構的設計能讓用戶(hù)在瀏覽網(wǎng)頁(yè)的過(guò)程中快速有效地獲取所需要的信息。設計師在設計網(wǎng)頁(yè)編排結構時(shí)盡可能的將左半部的文字信息與右半部的內容信息通過(guò)連接技術(shù), 第一時(shí)間在導航與內容信息之間進(jìn)行轉換顯示。這樣的網(wǎng)頁(yè)編排設計靈活、簡(jiǎn)潔, 但由于數據含量較少的緣故, 只適用在設計小型網(wǎng)頁(yè)編排中使用。
(二) 上包圍式結構
上包圍式結構主要將上半部設計為導航菜單, 綜合的信息數據內容和二級導航菜單會(huì )分布在網(wǎng)頁(yè)頁(yè)面左右兩側, 如:各類(lèi)鏈接、搜索欄、賬號登錄窗口、用戶(hù)注冊端口等。目前, 上包圍式結構的網(wǎng)頁(yè)編排設計在網(wǎng)頁(yè)界面的使用上最為常見(jiàn), 適用性較強。其均衡直觀(guān)的特點(diǎn)能讓用戶(hù)最快捷的獲取所需信息, 獲取的數據信息條理性較強。同時(shí), 這種結構編排設計過(guò)于程序化, 樣式單一。因此, 設計師在使用這種結構設計網(wǎng)頁(yè)編排時(shí)應強調色彩之間的搭配運用, 合理利用色彩的視覺(jué)效果提升網(wǎng)頁(yè)界面的藝術(shù)性。
(三) 全封閉式結構
全封閉式結構在上包圍結構的基礎上做改進(jìn), 上包圍式結構是基本, 網(wǎng)頁(yè)的下半部添加了對應的橫向操作菜單?？梢栽谟邢薜木W(wǎng)頁(yè)頁(yè)面范圍內充分利用頁(yè)面空間。提升頁(yè)面有效數據信息的容量, 降低不必要的文本數據, 提高用戶(hù)在預覽網(wǎng)頁(yè)界面時(shí)對有效數據信息獲取的效率。由于對信息的封閉性太強, 這也是此結構網(wǎng)頁(yè)編排設計的不足之處。往往容易導致用戶(hù)瀏覽網(wǎng)頁(yè)信息內容刷新較慢, 造成擁堵的重要原因。
(四) 左圍合式結構
左部圍合結構是在上包圍式結構的基礎上, 設計師對上包圍式結構做相應的修改而形成的一種新的結構形式。在上包圍式結構中將網(wǎng)頁(yè)頁(yè)面順時(shí)針旋轉270度后得到的一種包圍結構, 也是將全封閉式結構網(wǎng)頁(yè)編排右側信息欄刪減所形成的一種編排結構。此種結構彌補了全封閉式結構過(guò)于封閉性的缺點(diǎn)。
(五) 樣式各異的結構
網(wǎng)頁(yè)編排樣式各異的結構主要是對網(wǎng)頁(yè)主體標識、網(wǎng)頁(yè)展示的圖片、藝術(shù)性的字體、超鏈接等要素進(jìn)行的編排設計。在頁(yè)面導航菜單上則不做重點(diǎn)設計, 只結合數據信息的需要在網(wǎng)頁(yè)頁(yè)面上做裝飾、點(diǎn)綴、優(yōu)化的效果, 以此來(lái)協(xié)調均衡頁(yè)面的空間布局。這一網(wǎng)頁(yè)編排結構通常備受時(shí)尚界網(wǎng)站的青睞, 能給用戶(hù)在瀏覽網(wǎng)頁(yè)時(shí)感到輕松、自由、現代的視覺(jué)體驗, 從而降低用戶(hù)因長(cháng)時(shí)間瀏覽網(wǎng)頁(yè)帶來(lái)的審美疲倦。