基于用戶(hù)感觀(guān)體驗(yàn)的網(wǎng)頁(yè)界面設(shè)計(jì)視覺(jué)要素探究

周安琪

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

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

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

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

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

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

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

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

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

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

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

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

體驗(yàn)。

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

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

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

1.3 網(wǎng)頁(yè)界面視覺(jué)要素

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

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

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

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

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

2 用戶(hù)體驗(yàn)中的網(wǎng)頁(yè)界面視覺(jué)要素研究

2.1 網(wǎng)頁(yè)界面設(shè)計(jì)中的用戶(hù)感觀(guān)體驗(yàn)概述

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

2.2 網(wǎng)頁(yè)界面設(shè)計(jì)中感觀(guān)體驗(yàn)的視覺(jué)要素應(yīng)用

分析

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

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

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

3 結(jié)束語(yǔ)

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

參考文獻(xiàn)

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

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

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

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