網(wǎng)頁設(shè)計(jì)風(fēng)格與用戶體驗(yàn)的二元交互

陳紫燕

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

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

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

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

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

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

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

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

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

2色彩的渲染與運(yùn)用

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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