方 超（三亞學(xué)院藝術(shù)學(xué)院 572000）

淺析用戶體驗(yàn)視角下的網(wǎng)頁視覺傳達(dá)設(shè)計(jì)

方 超（三亞學(xué)院藝術(shù)學(xué)院 572000）

隨著時(shí)代和科技的發(fā)展，互聯(lián)網(wǎng)用戶的數(shù)量逐漸增多，因此網(wǎng)頁視覺傳達(dá)設(shè)計(jì)顯得尤為重要。本文把提高網(wǎng)站用戶體驗(yàn)作為研究的主線，通過心理學(xué)特性下的一些方面對(duì)視覺傳達(dá)進(jìn)行了切入，分析了當(dāng)前雙向互動(dòng)背景下網(wǎng)站開發(fā)者如何把界面的美觀和用戶的習(xí)慣與審美期望進(jìn)行結(jié)合來減少用戶的思考負(fù)擔(dān)，希望能夠?yàn)橐杂脩舻捏w驗(yàn)為中心的設(shè)計(jì)提供一定的理論依據(jù)。

用戶體驗(yàn)；視覺傳達(dá)；界面設(shè)計(jì)

引言

隨著社會(huì)的進(jìn)步，人們的審美能力也不斷提高，展開了對(duì)美的追逐，因此有些視覺沖擊力強(qiáng)大而且版式新穎的網(wǎng)頁通常會(huì)引起人們更多的關(guān)注。通常情況下這些網(wǎng)頁一味的追求美觀，使得用戶了解其內(nèi)容變得復(fù)雜而不利于用戶的快速查找或者不利于用戶的輕松閱讀，這給用戶造成了很大的思考負(fù)擔(dān)，進(jìn)而給他們帶來了很差的體驗(yàn)。

一、用戶體驗(yàn)

用戶體驗(yàn)是主觀存在的，它是用戶在使用產(chǎn)品的過程中的感受。目的就是通過用戶能夠接受并且喜愛的互動(dòng)方式與之進(jìn)行互動(dòng)。用戶體驗(yàn)這一概念是在二十世紀(jì)九十年代中期廣泛被認(rèn)知的。這其中，以上手的難易程度、產(chǎn)品的可用度、產(chǎn)品自身的吸引力和友好度等幾個(gè)方面為研究對(duì)象的方法被多數(shù)學(xué)者所采用。

廣泛的客戶群眾存在個(gè)體的差異性，為了滿足客戶大眾的多樣化需求，就要在網(wǎng)站的服務(wù)設(shè)計(jì)上下足功夫。舉例來說，瀏覽和使用網(wǎng)購類網(wǎng)站的客戶多半會(huì)選擇自主查找其中意的商品，而在查找遇到問題或者為了節(jié)省時(shí)間時(shí)，客戶會(huì)考慮聯(lián)系客服進(jìn)行付款。因此，針對(duì)這類客戶，要在網(wǎng)站設(shè)計(jì)時(shí)設(shè)計(jì)完整的查找和支付程序，為客戶提供更為便捷的服務(wù)。這僅僅需要網(wǎng)站具有鮮明的層次、強(qiáng)大的數(shù)據(jù)庫、擁有即時(shí)通訊和線上服務(wù)就可以滿足。

二、網(wǎng)頁界面設(shè)計(jì)

隨著網(wǎng)絡(luò)的逐漸普及，網(wǎng)絡(luò)界面設(shè)計(jì)應(yīng)運(yùn)而生，其中包括了語言學(xué)、視覺設(shè)計(jì)美學(xué)、消費(fèi)心理學(xué)等諸多學(xué)科的知識(shí)。網(wǎng)頁界面設(shè)計(jì)在心理學(xué)方面可以分為情感和感覺兩個(gè)層次；在技術(shù)上具有多媒體、視覺化和數(shù)字化的特征；在傳播方面它擁有互換性、廣泛性、多元化和個(gè)性化等特征。由于網(wǎng)頁設(shè)計(jì)的媒介具有一定的特殊性，因此它不僅具有平面設(shè)計(jì)的一般特征，而且其自身也有著別具一格的設(shè)計(jì)特性。對(duì)于網(wǎng)頁界面設(shè)計(jì)來說，它是一項(xiàng)系統(tǒng)性的工作，需要結(jié)合各方面的需求來進(jìn)行設(shè)計(jì)，因此考慮的因素也是多方面的，同時(shí)也考驗(yàn)設(shè)計(jì)師的綜合素養(yǎng)，其設(shè)計(jì)要求復(fù)雜而多樣。能做好讓不同群里都滿意的界面效果，是一件很不容易的事情。

三、網(wǎng)頁中的視覺傳達(dá)

1.把握網(wǎng)頁視覺運(yùn)動(dòng)規(guī)律

因?yàn)榭蛻糸喿x習(xí)慣的不同，在進(jìn)行網(wǎng)頁設(shè)計(jì)時(shí)要著重考慮，有的用戶習(xí)慣于從左往右閱讀，而有的用戶習(xí)慣由上到下的順序來進(jìn)行閱讀，或者是由明到暗、由動(dòng)到靜的順序。這些閱讀習(xí)慣與用戶的認(rèn)知過程的心里順序、邏輯思維習(xí)慣和數(shù)學(xué)生理特征有很大的關(guān)系。通過對(duì)特定用戶群體的視覺運(yùn)動(dòng)規(guī)律進(jìn)行研究，可以幫助我們?cè)O(shè)計(jì)更好地規(guī)劃瀏覽頁面的軌跡，以便于形成帶動(dòng)性的視覺導(dǎo)向。

2.尋找視覺的興奮點(diǎn)

瀏覽網(wǎng)頁的興奮點(diǎn)就是能夠讓客戶長時(shí)間停留并足以引起興趣、情感的心理共鳴的內(nèi)容。通常情況下這些興奮點(diǎn)都具有形式獨(dú)特、顏色明快的特點(diǎn)，和周圍的元素能夠形成很大的反差，能給用戶起到暗示的作用。

3.體會(huì)網(wǎng)頁空間布局的視覺變化

一般來說，網(wǎng)頁頁面視覺是否平衡與頁面的區(qū)域顏色、興奮點(diǎn)，線條差異和圖案虛實(shí)有著直接聯(lián)系，給用戶帶來或重或輕的視覺感受。研究發(fā)現(xiàn)同一平面中上側(cè)和左側(cè)給人的感覺比左側(cè)和下側(cè)要好很多，因此最佳的視覺區(qū)域就處于網(wǎng)頁的中心和上側(cè)的位置，通常情況下網(wǎng)頁中的重要信息和視覺的興奮點(diǎn)都會(huì)位于這個(gè)區(qū)域。

4.揣摩網(wǎng)頁色彩應(yīng)用的心理感受

通常情況下任何一種色彩都會(huì)通過聯(lián)想的作用使用戶產(chǎn)生情感和心理上的變化，因?yàn)樯钪袑?shí)踐活動(dòng)的視覺影像的積累，人們往往會(huì)將所認(rèn)知的事物與之前腦海中的視覺影像進(jìn)行對(duì)比，產(chǎn)生聯(lián)想性的效果，使得抽象的事物轉(zhuǎn)為更為生動(dòng)的形象。

四、將視覺傳達(dá)應(yīng)用于網(wǎng)頁界面設(shè)計(jì)中

1.布局網(wǎng)頁界面的策略

（1）布局的基礎(chǔ)元素

細(xì)數(shù)來看，網(wǎng)頁設(shè)計(jì)作為平面設(shè)計(jì)的分支之一，其構(gòu)成元素同樣包含平面設(shè)計(jì)的點(diǎn)、線、面這三個(gè)方面。而為了方便布局網(wǎng)頁頁面，就要處理好這三方面的關(guān)系，保證其能夠通過合理的組合表達(dá)出一定的美感。

（2）界面空白

在網(wǎng)頁界面設(shè)計(jì)中網(wǎng)頁界面的空白也是其中非常重要的一部分，它通常會(huì)對(duì)用戶的視覺軌跡進(jìn)行引導(dǎo)，使其能夠根據(jù)設(shè)計(jì)者預(yù)期的視覺移動(dòng)流程來進(jìn)行移動(dòng)。而且充分運(yùn)用空白還能夠使用戶的視線在兩個(gè)要素之間轉(zhuǎn)換時(shí)的界面更具有節(jié)奏感和韻律感，使用戶的閱讀環(huán)境變得更加輕松，防止出現(xiàn)視覺疲勞情況，與此同時(shí)也大大提高了網(wǎng)頁的品質(zhì)。

同時(shí)，空白的設(shè)計(jì)又顯得十分奢侈，但是過于追求簡約形象而應(yīng)用空白的話就會(huì)大大降低空白的表現(xiàn)力，這不僅無法達(dá)到預(yù)期的效果，而且還會(huì)造成網(wǎng)頁版面得浪費(fèi)。例如Apple的頁面雖然看起來十分簡約，但是其留白凸顯了產(chǎn)品的奢華。

（3）界面內(nèi)容

如果我們?cè)诎婷嬷屑尤胩辔淖值脑捑蜁?huì)讓人覺得十分枯燥。但是如果我們把內(nèi)容通過細(xì)致的分類輔之以圖片和視頻加以突出，就會(huì)給用戶帶來一種圖文并茂形象生動(dòng)的感覺。所以，設(shè)計(jì)網(wǎng)頁界面的過程中，既要利用清晰明亮的圖片來點(diǎn)綴，也要確保文字的內(nèi)容可以讓用戶直接理解。

（4）界面版式設(shè)計(jì)

對(duì)于界面的版式設(shè)計(jì)來說，可以較多參考傳統(tǒng)的讀物設(shè)計(jì)，因?yàn)槎叽嬖谳^多的共同點(diǎn)，版式都是呈現(xiàn)信息的核心部分，處于關(guān)鍵地位。不同于此，印刷品的設(shè)計(jì)有著統(tǒng)一的規(guī)格和尺寸，而網(wǎng)頁設(shè)計(jì)不必拘泥于此，并且其組織結(jié)構(gòu)方面也與印刷品有著很大的不同，網(wǎng)頁設(shè)計(jì)以流通窗口的形式，在結(jié)合文字、圖片、廣告這三要素的基礎(chǔ)之上進(jìn)行設(shè)計(jì)環(huán)節(jié)。在此設(shè)計(jì)環(huán)節(jié)中，需要遵循以下幾個(gè)原則：

妝點(diǎn)性：采用比喻、夸張和形象的方法，把點(diǎn)、線、面重新排列整合，利用其多樣性變化妝點(diǎn)文字、色彩和圖形，進(jìn)而體現(xiàn)出網(wǎng)頁設(shè)計(jì)的美感。

統(tǒng)一性：這是為了降低信息編碼使用的符號(hào)的復(fù)雜性而需要注意的一點(diǎn)。因?yàn)榉?hào)解讀的難度會(huì)占用客戶較多的時(shí)間，所以單純簡約的網(wǎng)頁版式時(shí)用戶所需要的，在信息排版之前可以先將其濃縮提煉。

趣味性：要想使頁面變得更加誘惑力我們就需要使其具有趣味性，不僅可以使得網(wǎng)頁給用戶帶來更為人性化的體驗(yàn)，也能夠體現(xiàn)網(wǎng)頁令人印象深刻的部分。

2.合理搭配界面的色彩

色彩對(duì)用戶的視覺沖擊是網(wǎng)頁界面中最關(guān)鍵的部分。通常來說，用戶在瀏覽網(wǎng)頁時(shí)關(guān)注的重點(diǎn)并非版式的設(shè)計(jì)，而是網(wǎng)頁對(duì)色彩的搭配，因?yàn)橹挥写钆浜侠恚湿?dú)特的網(wǎng)頁才會(huì)給用戶留下深刻的印象。但是目前來看，網(wǎng)頁色彩的搭配成為困擾網(wǎng)頁設(shè)計(jì)人員最重要的難題，這是因?yàn)椴季智擅畹木W(wǎng)頁離不開色彩的點(diǎn)綴，而色彩如何合理運(yùn)用是體現(xiàn)網(wǎng)頁觀賞性、有效性和舒適性的重要方面。

（1）細(xì)數(shù)色彩搭配的原則

完整性；網(wǎng)站設(shè)計(jì)的完整性是合理完成頁面布局的關(guān)鍵，統(tǒng)一的色彩會(huì)使得頁面更具層次感和整體感，讓頁面帶給用戶和諧的瀏覽體驗(yàn)。

獨(dú)特性：我們?cè)谶M(jìn)行配色時(shí)不要只局限于那些傳統(tǒng)的網(wǎng)頁配色，而應(yīng)更多考慮時(shí)下最為流行的色彩，并且大膽嘗試使用獨(dú)特的配色，為用戶留下深刻的印象。

（2）巧用色彩搭配的策略

主色調(diào)的突出：因?yàn)橹魃{(diào)有著最為顯著的表現(xiàn)，這在網(wǎng)頁上表現(xiàn)為主色調(diào)占據(jù)最多的頁面面積，而關(guān)于主色調(diào)的選擇，最好是只選擇一種加以突出，防止因?yàn)檫x擇多個(gè)主色調(diào)而使得頁面主次不清和無視覺重點(diǎn)情況的發(fā)生。

輔助色的點(diǎn)綴：我們所說的輔助色就是與主色顏色相似將其用在主色之外頁面的顏色，它不僅可以起到強(qiáng)調(diào)和緩沖的作用，還可以讓界面變得更加和諧。

五、結(jié)語

同傳統(tǒng)媒介相比，網(wǎng)頁媒介中的網(wǎng)頁很容易讓用戶有視覺疲勞的感覺，而且使用網(wǎng)頁時(shí)也會(huì)因?yàn)樵O(shè)計(jì)者的主觀意識(shí)在信息的解讀方面產(chǎn)生一定的偏差。把用戶和信息通過網(wǎng)頁中的視覺傳達(dá)進(jìn)行結(jié)合，可以幫助用戶高效快速地獲取信息，進(jìn)而提高了用戶的體驗(yàn)。在設(shè)計(jì)網(wǎng)頁時(shí)都應(yīng)該圍繞用戶來進(jìn)行，因?yàn)橛脩舻捏w驗(yàn)是帶動(dòng)網(wǎng)頁設(shè)計(jì)進(jìn)步的重要推動(dòng)力。因此，網(wǎng)頁的設(shè)計(jì)者需要采用換位思考的方式，更為考慮用戶的感受，避免出現(xiàn)只注重網(wǎng)頁功能體現(xiàn)或是只注重網(wǎng)頁美感的表達(dá)而讓用戶的思考負(fù)擔(dān)加重的情況。

[1]陳為.用戶體驗(yàn)設(shè)計(jì)要素及其在產(chǎn)品設(shè)計(jì)中的應(yīng)用[J].包裝工程，2011，32（4）：26-28.

[2]吳乃群，史耀軍.網(wǎng)頁界面設(shè)計(jì)中視覺傳達(dá)的解讀[J].藝術(shù)研究，2007（5）：11.

[3]胡蓓.網(wǎng)頁設(shè)計(jì)中的視覺傳達(dá)[J].電腦知識(shí)與技術(shù)，2006.

[4]薛曼君.網(wǎng)頁設(shè)計(jì)中的視覺傳達(dá)應(yīng)用[J].深圳遠(yuǎn)程教育，2010（12）：20- 21.