標準化網(wǎng)頁界面的交互設計模式研究

張建淳

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

關鍵詞：交互設計；網(wǎng)頁界面；標準化

檢 索：www.artdesign.org.cn

中圖分類號：TP393. 09 文獻標志碼： 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

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

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

一、標準化網(wǎng)頁界面設計的目的

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

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

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

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

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

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

三、網(wǎng)頁交互標準化建設

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

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

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

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

2.心智模型的映射關系指導設計

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

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

1.一致性

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

2.權衡性

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

3.簡潔性

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

4.邏輯性

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

5.可理解性

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

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

1.情感交互設計

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

2.感官交互設計

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

3.行為交互設計

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

4.群體交互設計

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

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

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

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

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

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

參考文獻：

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

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

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

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

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