周安琪

摘 要 通過網(wǎng)頁界面設(shè)計中視覺要素分析，結(jié)合用戶感觀體驗進(jìn)行應(yīng)用分析研究，旨在為今后網(wǎng)頁界面設(shè)計的設(shè)計師在實際開發(fā)項目中提供理論支撐，為基于用戶感觀體驗的網(wǎng)頁界面設(shè)計研究進(jìn)一步提供理論依據(jù)和實踐的探索。

關(guān)鍵詞 網(wǎng)頁界面設(shè)計；感觀體驗；視覺要素

中圖分類號 G2 文獻(xiàn)標(biāo)識碼 A 文章編號 2096-0360（2017）20-0010-02

1 網(wǎng)頁界面設(shè)計概述

1.1 網(wǎng)頁界面設(shè)計概念

網(wǎng)頁界面設(shè)計是根據(jù)使用者需求，向瀏覽者傳遞所要表達(dá)的內(nèi)容（包括產(chǎn)品、服務(wù)、理念、文化），從而進(jìn)行網(wǎng)站功能板塊劃分，然后進(jìn)行的頁面設(shè)計美化工作。

1.2 網(wǎng)頁界面設(shè)計原則

網(wǎng)頁界面的設(shè)計，既要從創(chuàng)意設(shè)計吸引人眼球，也要根據(jù)版式策劃設(shè)計規(guī)劃、使用者需求，使得網(wǎng)頁界面設(shè)計技術(shù)與藝術(shù)相統(tǒng)一。所以網(wǎng)頁界面設(shè)計應(yīng)遵循以下幾個基本原則。

1）用戶導(dǎo)向原則。網(wǎng)頁界面設(shè)計首先要明確使用者是誰，瀏覽網(wǎng)頁的客戶是哪些人，并且應(yīng)處于使用者的觀點來設(shè)計網(wǎng)頁。如樂齡網(wǎng)，使用者是老年人，所以要站在老年人的立場，針對老年人特征、心理需求等特點來進(jìn)行網(wǎng)頁設(shè)計；小精靈網(wǎng)，則是針對兒童所設(shè)計的網(wǎng)站，所以設(shè)計者應(yīng)站在兒童的角度進(jìn)行網(wǎng)頁設(shè)計，從而以滿足用戶的需要。

2）KISS（Keep It Simple And Stupid）原則。KIS是“Keep It Sample And Stupid”的縮寫，是使網(wǎng)頁設(shè)計變得簡潔化并使操作者更加簡易的使用，這也是網(wǎng)頁界面設(shè)計的重要原則。如設(shè)計者經(jīng)常瀏覽的站酷網(wǎng)站，操作功能版面簡單，使用戶可以容易找到所需內(nèi)容，操作的提示有明確指向，用戶可根據(jù)其指向滿足需求。

3）視覺平衡。視覺平衡原則是根據(jù)用戶視覺習(xí)慣，很好的將圖形、文字、空白等元素排列到一起，使得使用者達(dá)到視覺上的統(tǒng)一。如網(wǎng)頁設(shè)計中，大量圖片配以相關(guān)文字，才可使人視覺平衡，而且根據(jù)使用者閱讀傾向，瀏覽內(nèi)容一般從左到右，自上而下，這也是考慮到視覺平衡所要遵循的原則。

而且適當(dāng)留白給了字體和設(shè)計作品足夠的空間，保持層次感；并且留白區(qū)域可以很好的指引用戶，使用戶盡快尋找到所需要的信息，提高用戶

體驗。

4）色彩的搭配和文字的可閱讀性。在網(wǎng)頁界面設(shè)計中色彩是其重要因素，不同的顏色對人有不同的影響，并考慮到對使用者的影響，就應(yīng)選擇適當(dāng)?shù)念伾渲斜尘?、元素、鏈接?yīng)用什么顏色，都是要考慮的對象，如果一個網(wǎng)頁界面的背景和文字之間的對比不強(qiáng)烈，就像陰郁的天氣會讓人感到壓抑，令人眼花繚亂的純色會給人一種刺激，讓人有強(qiáng)烈的抗議。即使是漂亮的顏色也不能和整體設(shè)計分開，由一個主要的顏色貫穿它，主要的顏色并不是最大的顏色，但卻是網(wǎng)頁界面設(shè)計中最能揭示和反映主題的顏色。猶如一個軍隊的首長，雖然是少數(shù)，但他卻起著主導(dǎo)作用。設(shè)計的不同的顏色在相互搭配上也有著很大的學(xué)問。如京東網(wǎng)頁設(shè)計，在年末時，采用了大紅色主題顏色，不僅突出了過年的喜慶，更引人注目使人感到熱情。

為方便閱讀網(wǎng)站上的信息，使得文字可讀性的提高因素是所選擇的字體，通用的字體（微軟雅黑，華文細(xì)黑，房正標(biāo)宋，Times New Roman，中文宋體）更適合人閱讀習(xí)慣，使得人們在瀏覽時更加舒適。但是如果使用不常用字體（如Cloister，Gothic，Script，Westminster，華文彩云，華文行楷），人們在瀏覽時會花費(fèi)時間進(jìn)行辨別，在閱讀花費(fèi)時間較長，更容易感到疲勞，所以在文字字體選擇上更加注意其文字的可閱讀性。

5）和諧與一致性。網(wǎng)頁設(shè)計美觀性要求和諧統(tǒng)一，通過對網(wǎng)頁設(shè)計的顏色、字體、圖形、空白等元素運(yùn)用統(tǒng)一風(fēng)格化，使得網(wǎng)頁看起來是一體的。但網(wǎng)頁設(shè)計一致性并不是默守成規(guī)、一成不變，而是通過每個專題所采用的不同設(shè)計風(fēng)格，使得保持統(tǒng)一和諧一致感覺后，給用戶新鮮感，例如網(wǎng)頁設(shè)計的每個板塊有各自要表達(dá)的主題，都采用暖色調(diào)，看似和諧統(tǒng)一，但在和諧中還包含新意，使用戶在和諧統(tǒng)一中感受不同。

1.3 網(wǎng)頁界面視覺要素

在界面視覺元素的設(shè)計中，使用者在視覺上的感受是至關(guān)重要的。網(wǎng)頁界面中能夠影響用戶視覺效果的元素有圖形、文字、色彩等。

1）圖形。圖形具有認(rèn)知性，比如，人們普遍用放大境符號當(dāng)作捜索或者放大的圖標(biāo)，就是因為放大鏡具有很高的認(rèn)知性，人們看到放大鏡，腦海里就會想到放大或搜索事物；而且圖形具有普遍性，如公共洗手間中的性別標(biāo)識，無論男女老少，都能認(rèn)出；圖形還具有獨特性，為了人們都能理解圖形設(shè)計，圖形設(shè)計會符合多數(shù)人共同特征，但在形式方面，卻有所不同，所以需要在共同特征下，尋求其圖形的獨特性。

2）文字。文字從古至今是傳遞信息最好的符號，網(wǎng)頁界面中文字傳遞給人們的信息也是最多的，在當(dāng)今社會，文字不只是單純的信息傳達(dá)，更是一種藝術(shù)表現(xiàn)形式以滿足人們的視覺享受。

文字信息要簡明扼要，要抓住內(nèi)容的特點，概括網(wǎng)頁界面的主要內(nèi)容，使瀏覽者看到后就知道自己搜尋的信息之所在。

3）色彩。色彩是藝術(shù)表現(xiàn)形式之一，它憑借自身不可抗拒的魅力可以使原本平淡無奇的東西瞬間賦予生命；在界面設(shè)計中，設(shè)計師通過配色方案使得用戶能夠很快找到所需信息，并進(jìn)行分類歸納，使得使用者更加方便快捷的使用。色彩如果搭配合理可以使用戶更加舒適高效的運(yùn)用，反之，會引起使用者的誤操作。

2 用戶體驗中的網(wǎng)頁界面視覺要素研究

2.1 網(wǎng)頁界面設(shè)計中的用戶感觀體驗概述

感觀體驗指用戶對某產(chǎn)品產(chǎn)生的直接感受，如視覺方面、聽覺方面的感受。感觀體驗的研究貫穿了整個網(wǎng)頁界面設(shè)計過程，包括網(wǎng)頁頁面中的圖形、文字及色彩搭配等，這些可帶給人們直接的感觀刺激。主要是為了滿足使用者精神需求，通過用戶特性分析，設(shè)計出合理的視覺元素，然后不斷深化，使得用戶能舒適的沉浸在交互愉悅之中。endprint

2.2 網(wǎng)頁界面設(shè)計中感觀體驗的視覺要素應(yīng)用

分析

1）網(wǎng)頁界面設(shè)計中的圖形設(shè)計。圖形設(shè)計既要反映對應(yīng)的信息，還要符合整個網(wǎng)站的風(fēng)格特點，所以要圖文并茂的展示網(wǎng)頁內(nèi)容，使用戶即使還未閱讀文字，通過圖形設(shè)計便可了解其主題。如淘寶服裝界面，沒有圖片無法辨別其網(wǎng)頁界面的內(nèi)容，但因通過設(shè)計的上衣、褲子、外套、裙子等相關(guān)圖形，使得使用者觀看圖形，便可第一時間判斷出這是一個與衣服有關(guān)的網(wǎng)頁界面。

2）網(wǎng)頁界面設(shè)計中的文字設(shè)計。文字是網(wǎng)頁中的主要內(nèi)容，并不像圖像能讓人直觀地提取畫面信息。要提高信息傳遞的效率，就必然要確保文字的結(jié)構(gòu)合理、格式整齊、頁面整潔，界面需去繁從簡，使人能以最短的時間獲取最有效的信息。在進(jìn)行字體大小設(shè)置時，應(yīng)考慮到不同年齡人的視力情況，現(xiàn)在大多數(shù)年輕人存在近視，高齡人存在老花等問題，所以字體大小的設(shè)置要滿足大多數(shù)人的需求，才能有效地獲取信息。此外，文字設(shè)計也要與其內(nèi)容相協(xié)調(diào)，如公安部門的網(wǎng)絡(luò)就應(yīng)嚴(yán)肅整齊，字體簡潔，給人一種精干莊重的感覺；娛樂休閑的網(wǎng)站就應(yīng)輕松活潑，給人一種舒暢自由的感覺；公司類的網(wǎng)站則需要結(jié)合公司的特點進(jìn)行定制，但也要給人一種積極向上的感覺；個人網(wǎng)站則可依據(jù)自身的喜好來進(jìn)行設(shè)計，突出自身的特點，使人通過閱覽該主頁即可大致了解你的喜好。無論怎樣的網(wǎng)站，字體的種類要精簡，風(fēng)格統(tǒng)一。

3）網(wǎng)頁界面設(shè)計中的色彩設(shè)計。每個人都是一個獨立個體，對待色彩喜好也有所不同。在進(jìn)行網(wǎng)頁界面設(shè)計時，要細(xì)致分析用戶人群特征，如使用者是兒童，就不能選擇單調(diào)深沉的色彩，而需要搭配一些鮮艷明快的顏色。網(wǎng)頁界面設(shè)計需要滿足用戶需求，這樣才能引人眼球，提高網(wǎng)頁宣傳效果。顏色搭配還應(yīng)符合主題，如政府機(jī)關(guān)的網(wǎng)站就比較端莊莊重，一般采用藍(lán)色和紅色，反映出政府機(jī)構(gòu)的莊嚴(yán)肅穆；購物網(wǎng)站要給人親切形象，一般采用暖色調(diào)，這種類型的顏色能夠給人一種溫暖的感覺，可以使消費(fèi)者能更好的進(jìn)行選購。因為人群特征不同，所以在進(jìn)行網(wǎng)頁界面色彩搭配時，需要運(yùn)用合理的顏色進(jìn)行設(shè)計，達(dá)到完美的視覺效果。

3 結(jié)束語

隨著當(dāng)今社會快速發(fā)展，人們越來越重視以人為本，以用戶為中心的設(shè)計，基于感觀體驗的網(wǎng)頁界面設(shè)計也得到很大的關(guān)注。本文分析網(wǎng)頁界面設(shè)計的視覺要素，通過案例驗證了感觀體驗下的網(wǎng)頁界面設(shè)計視覺要素應(yīng)用，即在今后網(wǎng)頁界面設(shè)計中，可給設(shè)計者提供理論支撐，提升用戶滿意度，使得使用者可得到最佳交互體驗。

參考文獻(xiàn)

[1]李洪海.交互界面設(shè)計[M].北京：化學(xué)工業(yè)出版巧，2011：37-58.

[2]徐海化.UI群英匯—用戶體驗.交互.視覺設(shè)計方法論[M].北京：清華大學(xué)出版社，2012：32-49.

[3]張曉莉.體驗設(shè)計的應(yīng)用研究仁[D].無錫：江南大學(xué)，2008.

[4]陳燁.面向用戶體驗的網(wǎng)頁界面優(yōu)化設(shè)計方法研究[D].重慶：重慶大學(xué)，2010.endprint