張建淳

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

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

檢 索：www.artdesign.org.cn

中圖分類號：TP393. 09 文獻標(biāo)志碼： A 文章編號：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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.一致性

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

2.權(quán)衡性

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

3.簡潔性

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

4.邏輯性

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

5.可理解性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻：

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

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

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

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

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