陳紫燕

摘要：網(wǎng)頁設(shè)計是用戶體驗和藝術(shù)視覺感性印象相結(jié)合的過程，網(wǎng)頁設(shè)計的視覺風(fēng)格取決于網(wǎng)站設(shè)計的主旨和內(nèi)容目標(biāo)。同時，網(wǎng)站信息和內(nèi)容主旨的傳達(dá)取決于網(wǎng)頁設(shè)計人員對設(shè)計風(fēng)格的把握和自身的文化審美情趣。

關(guān)鍵詞：視覺風(fēng)格；審美情趣；用戶體驗

1圖標(biāo)設(shè)計的原則與風(fēng)格

移動終端的大規(guī)模普及讓過量的信息涌向客戶端，受眾產(chǎn)生了對信息的識別失能。所謂信息識別失能是指在信息過量的情況下，受眾不能有效地消化這些信息，信息群轉(zhuǎn)化為無效的信息符號。

為了有效解決信息接收用戶對信息的識別困境，標(biāo)準(zhǔn)化和識別特征明顯的圖標(biāo)設(shè)計成為網(wǎng)頁設(shè)計的重要視覺元素和關(guān)鍵性信息識別標(biāo)志。以下筆者將就網(wǎng)頁設(shè)計的圖標(biāo)風(fēng)格定位和設(shè)計原則進(jìn)行總結(jié)和闡述。

（1）網(wǎng)頁設(shè)計圖標(biāo)使用信息適量原則。網(wǎng)頁指示圖標(biāo)信息表達(dá)不宜過量，如果網(wǎng)頁交互指示圖標(biāo)傳達(dá)的信息超過信息受眾的一般信息接收量，圖標(biāo)信息在傳達(dá)的過程當(dāng)中很容易導(dǎo)致信息受眾的識別失能。并且，由于短時記憶的信息容量很小，信息接收用戶和網(wǎng)絡(luò)程序使用者在選擇圖標(biāo)指示時是調(diào)動自身大腦指揮的短時記憶，因而網(wǎng)頁視覺圖標(biāo)應(yīng)該表達(dá)適量的信息。

（2）網(wǎng)頁設(shè)計圖標(biāo)使用合理性原則。在圖標(biāo)設(shè)計之前，應(yīng)該由相關(guān)設(shè)計人員進(jìn)行實地調(diào)研，重視網(wǎng)站使用者的用戶體驗和感受。充分研究網(wǎng)絡(luò)信息使用者通過“手段目的”解決通用問題的方式的操作行為特性，并考慮使用者在操作上發(fā)生錯誤的各種可能性，研究圖標(biāo)使用的可能性和合理性。

（3）網(wǎng)頁設(shè)計視覺圖標(biāo)的含義清晰明確的原則。盡量不選擇容易造成含義混淆的視覺圖標(biāo)，含義清晰明確的視覺圖標(biāo)便于人明確獲得操作步驟的信息及正確做出選擇判斷，而圖標(biāo)含義的不明確，會讓受眾無法操作對操作行為產(chǎn)生不愉快的知覺感受。簡潔的圖標(biāo)使人對操作的感知更容易被儲存記憶激發(fā)，在轉(zhuǎn)化成愉快操作信息后記憶加深。

（4）網(wǎng)頁設(shè)計視覺圖標(biāo)的目標(biāo)用戶熟悉度原則。盡量使用信息接受者和目標(biāo)用戶更為熟悉的認(rèn)知圖形，或者使用目標(biāo)消費者通過視覺呈現(xiàn)元素的刺激更容易產(chǎn)生聯(lián)想的圖標(biāo)。例如，要表達(dá)“購物商城”這一操作信息，用購物車、購物籃等視覺圖標(biāo)更容易喚起人的聯(lián)想和熟悉度，從而更好地理解圖標(biāo)的含義，以及該圖標(biāo)與其他圖標(biāo)的區(qū)別。

2色彩的渲染與運用

色彩是網(wǎng)頁設(shè)計和用戶體驗當(dāng)中重要的印象元素，它是美麗而豐富的，它能喚起人類的心靈感知。舉例來說，紅色是熱情奔放的顏色，象征蓬勃的生命力和進(jìn)取精神；黃色彰顯活力、華麗、明快；綠色就像廣袤開闊的草原鋪陳出的顏色，意味著純凈、無污染、寧靜和生長，帶給消費者和網(wǎng)站信息受眾安寧、和平與安全的視覺印象。

顏色是光的折射產(chǎn)生的，紅、黃、藍(lán)是三原色，其他的色彩都可以用這三種色彩調(diào)和而成。在網(wǎng)頁設(shè)計的視覺藝術(shù)風(fēng)格呈現(xiàn)和展示的過程當(dāng)中，網(wǎng)頁設(shè)計師可以用顏色的變化來表現(xiàn)光影效果的變化和商品的質(zhì)感，這無疑將使網(wǎng)頁設(shè)計作品更貼近目標(biāo)用戶人群。色彩代表了不同的信息內(nèi)涵和情感指征，給網(wǎng)站目標(biāo)用戶帶來完全不同的視覺印象和信息指示。色彩渲染和光影明暗在網(wǎng)頁設(shè)計中所蘊含的象征含義是網(wǎng)站目標(biāo)用戶所能感知到的信息特征和品牌印象，它因人的年齡、地域、時代、民族、階層、經(jīng)濟(jì)地區(qū)、工作能力、教育水平、風(fēng)俗習(xí)慣、宗教信仰、生活環(huán)境、性別差異而有所不同。

網(wǎng)頁設(shè)計當(dāng)中單純的顏色變化和選擇并沒有重大的視覺意義，而不同顏色的搭配和渲染則能夠帶來有效的視覺用戶體驗，它所表現(xiàn)出來的效果也不同。例如，綠色和金黃、淡白搭配，可以產(chǎn)生優(yōu)雅，舒適的氣氛；藍(lán)色和白色混合，能體現(xiàn)柔順、淡雅、浪漫的氣氛；紅色和黃色、金色搭配能渲染喜慶的氣氛。設(shè)計的任務(wù)不同，配色方案也隨之不同。在進(jìn)行網(wǎng)頁設(shè)計時，應(yīng)當(dāng)充分考慮到網(wǎng)頁視覺體驗的普適性，盡量使用能讓大眾產(chǎn)生共鳴和愉悅感的安全配色方案。

3基于用戶體驗的網(wǎng)頁設(shè)計過程

設(shè)計的實現(xiàn)可以分為兩個部分。第一部分為網(wǎng)頁的版面布局，第二部分為網(wǎng)頁的制作。

基于良好的用戶體驗而進(jìn)行的網(wǎng)頁設(shè)計首先要關(guān)注整個網(wǎng)頁的版面布局。我們可以將網(wǎng)頁看作傳統(tǒng)的報刊雜志來編輯，這里面有文字、圖像乃至動畫，我們要做的工作就是以最適合的方式將圖片和文字排放在頁面的不同位置。

第二個步驟就是網(wǎng)頁設(shè)計師通過相關(guān)的設(shè)計軟件來對視覺元素進(jìn)行組合，將設(shè)計的審美構(gòu)想變?yōu)楝F(xiàn)實。視覺元素包括了顏色的鋪陳和碰撞，介紹文字的字體形態(tài)變形等視覺效果，圖片形狀風(fēng)格的使用，動畫效果的設(shè)計和渲染和布局造型的重疊鋪排。

4網(wǎng)頁設(shè)計元素的有機組合

在網(wǎng)頁設(shè)計中，我們主要通過視覺傳達(dá)來表現(xiàn)主題。在視覺傳達(dá)中，視覺元素的有機組合是交互網(wǎng)頁設(shè)計當(dāng)中很重要的一個設(shè)計環(huán)節(jié)。交互網(wǎng)頁畫面上的圖片、文字、圖標(biāo)、動畫等視覺元素可以統(tǒng)一作為畫面的基本構(gòu)成要素點、線、面來進(jìn)行處理。在一幅成功的作品里，需要點、線、面的有機組合與搭配來呈現(xiàn)一個視覺風(fēng)格獨樹一幟、和諧優(yōu)美的交互界面。

網(wǎng)頁設(shè)計當(dāng)中可以使用的組合手法有秩序、比例、均衡、對稱、連續(xù)、間隔、重疊、反復(fù)、節(jié)奏、韻律、歸納、變異、特寫、反射等等，它們都有各自的特點。在交互網(wǎng)頁設(shè)計當(dāng)中應(yīng)根據(jù)網(wǎng)站宣傳主題和機構(gòu)形象地位，選擇最適合的視覺元素組合方式，這樣有利于網(wǎng)站設(shè)計主題的表現(xiàn)。

交互網(wǎng)頁設(shè)計通過點、線、文字、圖片、光影、顏色等元素的有機組合，可以充分展現(xiàn)交互頁面上的重要元素，突出設(shè)計的主題，增強美感，讓觀者在感受美的過程中領(lǐng)會設(shè)計的主題，從而實現(xiàn)設(shè)計的任務(wù)。造型的巧妙運用不僅能帶來極大的美感，而且能較好地突出網(wǎng)站機構(gòu)的品牌形象。將網(wǎng)頁上的各種元素有機地組織起來，它甚至還可以引導(dǎo)目標(biāo)使用群的視覺注意力和強烈的用戶體驗欲望。

5基于交互體驗的網(wǎng)頁設(shè)計原則

網(wǎng)頁交互設(shè)計是有原則的，無論采用什么樣的設(shè)計手法對畫面中的元素進(jìn)行組合，都應(yīng)當(dāng)遵循以下四大原則：分割、統(tǒng)一、對比及和諧。

分割是指將交互頁面分成若干個小塊，小塊之間有視覺上的明顯區(qū)分，這樣可以使目標(biāo)受眾對交互網(wǎng)站的分類信息設(shè)置一目了然。在交互網(wǎng)頁信息量龐大的情景下，使目標(biāo)受眾能夠清楚觀察并點擊自己需要的信息，這個信息甄別過程離不開對交互頁面進(jìn)行有效的分割。分割不僅是視覺呈現(xiàn)形式的需要，換個角度來講，分割也可以被視為對于頁面內(nèi)容的一種分類歸納。統(tǒng)一是指設(shè)計作品的整體性，一致性。設(shè)計作品的整體效果是至關(guān)重要的，在設(shè)計中切勿將各組成部分孤立分散，那樣會使畫面呈現(xiàn)出一種枝蔓紛雜的凌亂效果。

交互頁面視覺元素的對比就是通過層次參差和顏色碰撞，使網(wǎng)頁設(shè)計風(fēng)格更加富有生氣。對比手法很多，如強與弱、粗與細(xì)、明與暗、長與短、疏與密、虛與實、主與次、黑與白等等。交互網(wǎng)頁設(shè)計當(dāng)中使用對比的設(shè)計手法應(yīng)當(dāng)謹(jǐn)慎，層次參差與視覺元素對比過強容易破壞美感，影響網(wǎng)頁視覺風(fēng)格的統(tǒng)一。和諧是指整個交互頁面設(shè)計風(fēng)格符合美的標(biāo)準(zhǔn)，渾然一體。如果交互網(wǎng)頁設(shè)計師認(rèn)為網(wǎng)頁設(shè)計僅僅是數(shù)字、圖片、動畫等元素的任意混合，那么網(wǎng)頁設(shè)計作品將不但沒有“生動風(fēng)格”，而且也根本無法實現(xiàn)網(wǎng)站主旨的視覺設(shè)計功能。交互設(shè)計和諧不僅要看視覺元素的布局是否和諧，最重要的是網(wǎng)站目標(biāo)用戶的使用體驗和視覺印象，這才是成功的網(wǎng)頁設(shè)計風(fēng)格與用戶體驗的二元交互。