標(biāo)準(zhǔn)化網(wǎng)頁界面的交互設(shè)計(jì)模式研究

張建淳

摘 要：交互設(shè)計(jì)是了解目標(biāo)用戶對(duì)產(chǎn)品的期望，分析用戶對(duì)產(chǎn)品的使用行為，通過一種有效的方式使用戶和產(chǎn)品之間產(chǎn)生愉悅的溝通，這樣的交互行為會(huì)使用戶對(duì)產(chǎn)品產(chǎn)生信任和依賴，文章主要研究的是如何通過標(biāo)準(zhǔn)化的網(wǎng)頁界面增加用戶的使用黏性，以達(dá)到以用戶為中心的交互理念。

關(guān)鍵詞：交互設(shè)計(jì)；網(wǎng)頁界面；標(biāo)準(zhǔn)化

檢 索：www.artdesign.org.cn

中圖分類號(hào)：TP393. 09 文獻(xiàn)標(biāo)志碼： A 文章編號(hào)：1008-2832（2014）07-0047-03

On Interaction Design Patterns of Standardized Web Interface

ZHANG？Jian-chun

（Harbin？Normal？University，？Harbin？150080，？China）

Abstract ：Interaction design is to know the target user expectations of the product，and analysis of the user of the product use behavior， through an effective way to create a pleasant communication between users and products， and such interaction will allow users to trust and rely on products， this paper mainly studies how to through the use of standardized web interface increase user viscosity， to achieve the interaction concept of user-centered.

Key words ：interactive design； web interface； standardization

Internet ：www.artdesign.org.cn

隨著計(jì)算機(jī)技術(shù)的發(fā)展，網(wǎng)頁的經(jīng)營已經(jīng)過了單靠技術(shù)來支撐的年代，人們更加關(guān)注網(wǎng)站的體驗(yàn)感覺、網(wǎng)頁界面的美觀易懂、使用時(shí)的方便快捷， 所以說為了使自己的網(wǎng)站用戶體驗(yàn)更好，設(shè)計(jì)師開始更多的關(guān)注網(wǎng)站界面的交互研究。

網(wǎng)頁界面是一門交叉學(xué)科，它可以算作是心理學(xué)、人機(jī)工程學(xué)、計(jì)算機(jī)科學(xué)等領(lǐng)域的交叉，從用戶的角度來說，好的網(wǎng)頁界能夠讓用戶得到愉悅的體驗(yàn)，提高使用效率。隨著軟件的不斷增加和更新，網(wǎng)頁界面的交互設(shè)計(jì)也越來越多元和復(fù)雜，網(wǎng)頁界面成為時(shí)下沖擊傳統(tǒng)產(chǎn)業(yè)的新寵，隨著大量互聯(lián)網(wǎng)交易網(wǎng)站的不斷上市和互聯(lián)網(wǎng)信息擴(kuò)散方式的轉(zhuǎn)變，界面交互設(shè)計(jì)進(jìn)入全勝時(shí)代，人們更加迫切使用標(biāo)準(zhǔn)化的網(wǎng)頁界面交互設(shè)計(jì)。

一、標(biāo)準(zhǔn)化網(wǎng)頁界面設(shè)計(jì)的目的

網(wǎng)頁是人們認(rèn)識(shí)世界非常重要的一個(gè)途徑，這也就說明了它的用戶群體非常廣泛，不僅包括年齡的差距還包括生活信息等多方面。這賦予了網(wǎng)頁界面使用者環(huán)境復(fù)雜、用戶群體分散不一、瀏覽跳躍大等復(fù)雜特征。

而網(wǎng)頁界面也存在多種多樣的差異性。首先是主流網(wǎng)頁在不同瀏覽器的瀏覽時(shí)會(huì)出現(xiàn)差異，如字體、色彩、頁面布局等。另外由于電腦的操作系統(tǒng)不同，網(wǎng)頁的布局不能適應(yīng)不同的操作系統(tǒng)；由于網(wǎng)頁界面的信息通常存于網(wǎng)絡(luò)服務(wù)器上，如果出現(xiàn)網(wǎng)絡(luò)問題就會(huì)造成頁面訪問效率低。

所以說網(wǎng)頁界面的交互設(shè)計(jì)需要標(biāo)準(zhǔn)化操作，這要求設(shè)計(jì)者需要在結(jié)構(gòu)和表現(xiàn)上解決問題，從界面布局、網(wǎng)頁界面視覺規(guī)范、網(wǎng)站結(jié)構(gòu)等角度出發(fā)。這樣的標(biāo)準(zhǔn)化的交互設(shè)計(jì)模式可以降低用戶的認(rèn)知成本，符合用戶的心智模型規(guī)律，尤其在一些管理層面的系統(tǒng)中，標(biāo)準(zhǔn)化的設(shè)計(jì)非常有效，尤其是在新產(chǎn)品產(chǎn)生的過程中更顯凸顯標(biāo)準(zhǔn)化設(shè)計(jì)的地位，因?yàn)槿绻畴x用戶的習(xí)慣，會(huì)給用戶陌生、困惑感。

二、網(wǎng)頁界面交互的預(yù)先判斷——引入心智模型的概念

心智模型是人感知外部現(xiàn)象的心理預(yù)存，這種現(xiàn)象的形成能夠引導(dǎo)人的思維，潛移默化的影響人的認(rèn)知，甚至影響人對(duì)事物的判斷和評(píng)估。這是因?yàn)檫^去的經(jīng)驗(yàn)存在于人的腦中，不易覺察更不容易改變，這形成了人看問題的“固定”角度。

所以說對(duì)于網(wǎng)頁界面而言，這同樣受到心智模型的影響，引入心智模型進(jìn)行研究等于對(duì)網(wǎng)頁設(shè)計(jì)進(jìn)行了預(yù)先的判斷，找到符合用戶心理預(yù)想的模型，保證用戶對(duì)網(wǎng)頁產(chǎn)生熟悉感并有效減少排斥感。心智模型作用于網(wǎng)頁界面，主要是因?yàn)槿藗冊(cè)谑褂镁W(wǎng)頁的過程中，會(huì)對(duì)界面、行為使用方式、系統(tǒng)反饋方式積累產(chǎn)生信息反饋，由于用戶長(zhǎng)期的使用而產(chǎn)生的記憶使得計(jì)算機(jī)可以模擬，在聯(lián)想的作用下，改善并完善網(wǎng)頁界面設(shè)計(jì)。

三、網(wǎng)頁交互標(biāo)準(zhǔn)化建設(shè)

（一）交互式網(wǎng)頁界面的表現(xiàn)模式

心智模型作用于用戶網(wǎng)頁界面設(shè)計(jì)從表現(xiàn)模式、行為模式兩方面進(jìn)行研究，首先是表現(xiàn)模式——主要是界面元素的組織和結(jié)構(gòu)的表現(xiàn)，包括界面的構(gòu)成和布局，比如符號(hào)運(yùn)用、信息對(duì)比分類、色彩、圖形、背景搭建等。另外是行為模式——用戶活動(dòng)的動(dòng)態(tài)行為和改變方式，本文主要研究網(wǎng)頁交互的表現(xiàn)模式。

1. 細(xì)化交互式網(wǎng)頁界面的表現(xiàn)模式

首先是色彩，色彩在網(wǎng)頁界面設(shè)計(jì)中的地位不可小覷，色彩催化用戶對(duì)網(wǎng)頁界面的認(rèn)知，并對(duì)用戶的情感起到意想外的作用，比如用戶看到藍(lán)色的界面，通過心智模型的調(diào)動(dòng)可能在腦中會(huì)聯(lián)想到海洋、水、宇宙等，而心理上也會(huì)出現(xiàn)廣闊、冷靜、理智等反應(yīng)。這就表明如果一個(gè)網(wǎng)站的界面固化為一個(gè)顏色，很有利于用戶存留相關(guān)色彩信息至認(rèn)知系統(tǒng)中。第二，布局。根據(jù)多部分人的瀏覽網(wǎng)頁的心智模型分析，從元素（LOGO、導(dǎo)航等）位置、區(qū)域形狀等方面入手，有利于設(shè)計(jì)師對(duì)不同重要度信息的布局排版。第三，圖形符號(hào)。圖形符號(hào)是直觀傳達(dá)表象的方式，他在用戶心智模型中主要通過隱喻或者符號(hào)化的方式作用于人的心理，比如隱喻方式，用戶對(duì)網(wǎng)頁界面中的前期心理建設(shè)使得用戶可以很快的對(duì)界面布局特征做相關(guān)的定位。而符號(hào)化的方式則是通過對(duì)符號(hào)的理解而產(chǎn)生，這樣的方式就為設(shè)計(jì)師提供了契機(jī)，設(shè)計(jì)師可以保持或者稍加修改讓用戶產(chǎn)生熟悉感。第四，信息分類。人們通過記憶和思考來閱讀和理解界面上的語言和網(wǎng)站上的信息分類。endprint

2.心智模型的映射關(guān)系指導(dǎo)設(shè)計(jì)

心智模型映射關(guān)系的運(yùn)用方法可以從三個(gè)方面進(jìn)行影響和規(guī)范：首先是信息和布局設(shè)計(jì)，主要是對(duì)網(wǎng)站信息結(jié)構(gòu)和骨架的設(shè)計(jì)，這需要設(shè)計(jì)者查詢心智模型中的信息分類，使用數(shù)據(jù)統(tǒng)計(jì)的方法將有效信息提取出來，然后規(guī)劃頁面所需的模塊，排列位置，在整體框架中不斷進(jìn)行原型和視覺設(shè)計(jì)（圖1）。第二是原型和交互設(shè)計(jì)，這一步驟是最關(guān)鍵的一步，這決定了表達(dá)方式和交互行為的方式，設(shè)計(jì)時(shí)應(yīng)該盡量避免視覺設(shè)計(jì)，給后期美化留出空間，具體的過程參見圖2。第三是視覺和品牌設(shè)計(jì)，這是最常見網(wǎng)頁界面設(shè)計(jì)，在這個(gè)過程中要充分考慮人們的情感因素，色彩和圖形的映射關(guān)系，圖形采用的隱喻功能等，具體的過程參見圖3。

（二）交互式網(wǎng)頁界面設(shè)計(jì)的視覺優(yōu)化

1.一致性

一致性的視覺要求是網(wǎng)站的最低要求，但是這個(gè)設(shè)計(jì)思想要貫穿始終，設(shè)計(jì)時(shí)要把一致性作為一根主線來把握，如標(biāo)題、菜單、導(dǎo)航欄甚至是動(dòng)態(tài)畫面在網(wǎng)頁界面中活動(dòng)時(shí)，如果畫面不能一致，那么用戶的思考時(shí)間就會(huì)大大增加，不能有良好的交互感受，很難增加使用網(wǎng)站的用戶。

2.權(quán)衡性

權(quán)衡性主要是指用戶實(shí)際操作中，網(wǎng)速和界面設(shè)計(jì)的繁瑣程度不能有效協(xié)調(diào)時(shí)出現(xiàn)的一個(gè)衡量標(biāo)準(zhǔn)，當(dāng)設(shè)計(jì)師在進(jìn)行界面設(shè)計(jì)時(shí)用戶需求可能會(huì)跟網(wǎng)速處理要求產(chǎn)生沖突，這要求設(shè)計(jì)師要全局把控，在準(zhǔn)確性、使用方便性、時(shí)間消耗中找到優(yōu)化解決方式，對(duì)于一個(gè)好的設(shè)計(jì)師而言，設(shè)計(jì)華麗美觀的界面而忽略了實(shí)際操作的方便性，可能也是一件得不償失的事情。

3.簡(jiǎn)潔性

針對(duì)目標(biāo)客戶的視覺需求對(duì)界面進(jìn)行設(shè)計(jì)，網(wǎng)頁界面的復(fù)雜度、清晰程度應(yīng)該與目標(biāo)用戶的能力相當(dāng)。不要單純的設(shè)計(jì)復(fù)雜而漂亮的界面吸引用戶，而是在功能、服務(wù)上給用戶以便利，整體把握簡(jiǎn)潔的原則為用戶提供良好的視覺和功能感受。

4.邏輯性

邏輯性是指界面內(nèi)容之間的相互關(guān)系，因?yàn)椴还苁裁搭愋偷木W(wǎng)站，只要建設(shè)都是為內(nèi)容服務(wù)的，所以邏輯性是網(wǎng)站設(shè)計(jì)的一個(gè)重要原則，在網(wǎng)站交互中，邏輯性的表現(xiàn)主要從位置、大小上下功夫，如醒目的內(nèi)容需要在醒目的位置設(shè)置醒目的字號(hào)。善于運(yùn)用金字塔信息結(jié)構(gòu)，用較明顯的字體顯示較高層次的內(nèi)容，用較小的字體表示較低層次的內(nèi)容是一種有效的方法之一。

5.可理解性

網(wǎng)站界面設(shè)計(jì)的需要讓用戶理解和領(lǐng)會(huì)網(wǎng)頁的功能、信息、相應(yīng)、顯示出的內(nèi)容的排列順序，設(shè)計(jì)師模仿使用者常用的行為方式使操作變得更加熟悉，自然靈活。

（三）提高網(wǎng)頁界面設(shè)計(jì)的人文優(yōu)化

1.情感交互設(shè)計(jì)

由于用戶的文化背景、審美能力、生活習(xí)慣等的不同，所以對(duì)網(wǎng)頁界面的設(shè)計(jì)要求也不盡相同，所以設(shè)定網(wǎng)站的目標(biāo)人群，從了解用戶的文化背景、心理需求著手，以便設(shè)計(jì)出的網(wǎng)頁界面能夠真正融入到用戶的生活和使用環(huán)境中。網(wǎng)頁界面的情感寓意越多，用戶在發(fā)現(xiàn)或者體會(huì)時(shí)滿足感越強(qiáng)烈。

2.感官交互設(shè)計(jì)

感官體驗(yàn)往往是人們看事物的第一反應(yīng)，這種體驗(yàn)往往是人最本能的反應(yīng)，而網(wǎng)頁界面的感官交互設(shè)計(jì)是用戶在認(rèn)知階段的本能反應(yīng)。網(wǎng)頁界面的感官交互是用戶在認(rèn)知階段的價(jià)值體現(xiàn)，網(wǎng)站的風(fēng)格、色彩等與視覺相關(guān)的元素是用戶感官交互的參考點(diǎn)，感官交互的設(shè)計(jì)目的能滿足用戶在網(wǎng)站認(rèn)知階段的認(rèn)知價(jià)值，為網(wǎng)站增加特點(diǎn)，增加與其他網(wǎng)站的差異性。

3.行為交互設(shè)計(jì)

行為交互設(shè)計(jì)是對(duì)常用用戶或者是專家級(jí)用戶進(jìn)行的交互設(shè)計(jì)，主要是用戶熟練使用產(chǎn)品后，對(duì)產(chǎn)品有一定的了解和操作能力，能夠了解產(chǎn)品設(shè)計(jì)的符號(hào)語義，與網(wǎng)頁進(jìn)行有效互動(dòng)，行為交互設(shè)計(jì)的重點(diǎn)還是應(yīng)該放在滿足用戶需求上，比如根據(jù)眼球跟蹤儀器進(jìn)行視覺軌跡跟蹤，研究界面設(shè)計(jì)中視覺元素是否合理，不斷找到問題并解決問題。

4.群體交互設(shè)計(jì)

群體交互設(shè)計(jì)是自媒體時(shí)代一個(gè)熱點(diǎn)交互手段，他是指用戶在使用賬號(hào)時(shí)，自己能跟他人進(jìn)行互動(dòng)的一種行為，這種交互方式在微博、微信等網(wǎng)站上最容易體現(xiàn)，這種交互的擴(kuò)張姿態(tài)使得我們不得不加以重視。而大部分用戶在使用的過程中基本經(jīng)歷著幾個(gè)步驟，如了解作為某類成員的體驗(yàn)，一旦這種體驗(yàn)產(chǎn)生好感，則愿意自動(dòng)歸類為這一群體，這就要求設(shè)計(jì)者必須做好歸類和界定，及時(shí)推送相關(guān)頁面進(jìn)行指導(dǎo)。

四、交互式網(wǎng)頁界面設(shè)計(jì)的未來模式展望

（一）網(wǎng)頁界面的多通道自然交互

未來網(wǎng)頁界面的發(fā)展交互模式必定是離不開用戶的現(xiàn)實(shí)需求和計(jì)算機(jī)技術(shù)提供這兩方面，這就決定了界面發(fā)展的趨勢(shì)，所以界面交互設(shè)計(jì)應(yīng)該滿足應(yīng)用領(lǐng)域用戶需求的多樣性，根據(jù)用戶的任務(wù)來完成，而多通道將是未來計(jì)算機(jī)發(fā)展的技術(shù)特征，傳統(tǒng)的交互手段功能逐漸縮減，語音識(shí)別或者手勢(shì)結(jié)合將成為交互的主要手段。

（二）未來網(wǎng)頁的“零界面”

為用戶量身定制網(wǎng)頁界面設(shè)計(jì)是一個(gè)永恒的話題，突出用戶的興趣、愛好、個(gè)性是設(shè)計(jì)師的探索方式，未來的網(wǎng)頁交互界面可能會(huì)取消登錄和密碼，可能會(huì)隨著智能的臉部識(shí)別或者音頻自動(dòng)登錄，這也會(huì)使自己的網(wǎng)絡(luò)虛擬空間更加增大，眼動(dòng)跟蹤器會(huì)幫助打成互動(dòng)效果。這種趨向未來的“零界面”模式，讓用戶與網(wǎng)絡(luò)之間的溝通不再有阻礙。

參考文獻(xiàn)：

[1] （美）唐納德·A.諾曼（DonaldA.Norman）著.設(shè)計(jì)心理學(xué)[M].梅瓊，譯.北京：中信出版社，2003.

[2] 董建明，傅利民.人機(jī)交互：以用戶為中心的設(shè)計(jì)和評(píng)估[M].北京：清華大學(xué)出版社，2003.

[3] 楊若男，肖狄虎.基于用戶體驗(yàn)的使用者行為研究[J].藝術(shù)與設(shè)計(jì)（理論），2007，（4）.

[4] J.J.Garrett 著.用戶體驗(yàn)的要素：以用戶為中心的 Web 的設(shè)計(jì)[M].范曉燕，譯.北京：機(jī)械工業(yè)出版社，2008.

[5] Sandors M S， Mc Comick EJ. Human Factors in Engineering and Design[M]. New York：Mc Graw-Hill，1995.endprint