人機(jī)交互理念在Axure RP原型設(shè)計(jì)中應(yīng)用研究

李紅玲，張銀釧，田亞平

（江蘇師范大學(xué)科文學(xué)院 江蘇 徐州 221132）

0 引言

隨著現(xiàn)代互聯(lián)網(wǎng)技術(shù)的發(fā)展，計(jì)算機(jī)的功能越來越豐富，應(yīng)用領(lǐng)域越來越廣泛，人們對(duì)于計(jì)算機(jī)的需求范圍也不斷擴(kuò)大[1]。一方面，軟件產(chǎn)品為了實(shí)現(xiàn)更豐富的功能增加操作步驟。另一方面，計(jì)算機(jī)操作步驟變得復(fù)雜，人機(jī)界面功能導(dǎo)向模糊，運(yùn)用便捷性降低。使用者迫切需要?jiǎng)?chuàng)新技術(shù)和手段來緩和這一矛盾。因此，建立人與計(jì)算機(jī)之間友善的交互通道，提升交互過程的用戶體驗(yàn)，具有較高的現(xiàn)實(shí)意義和商業(yè)應(yīng)用價(jià)值[2]。本文以人機(jī)交互理論貫穿于淘寶登錄原型設(shè)計(jì)的全過程，探討了以人機(jī)交互為導(dǎo)向的交互功能實(shí)現(xiàn)的意義，為原型設(shè)計(jì)師及相關(guān)軟件開發(fā)者提供一些可供參考設(shè)計(jì)思路。

1 人機(jī)交互理論

1.1 人機(jī)交互的概述

人機(jī)交互（human-computer interaction，HCI）是一門研究計(jì)算機(jī)系統(tǒng)與用戶之間交互關(guān)系的學(xué)科，是研究人、計(jì)算機(jī)以及它們之間相互影響的技術(shù)，是指用戶與計(jì)算機(jī)之間的交流，通過一定的交互方式，完成各種信息的雙向交換過程。信息交換可以是人向計(jì)算機(jī)輸入信息或是通過計(jì)算機(jī)向用戶反饋信息來完成。信息交換通常是以移動(dòng)鼠標(biāo)、單擊鍵盤、屏幕信息等方式出現(xiàn)。系統(tǒng)通常是指各種各樣的機(jī)器或計(jì)算機(jī)化的系統(tǒng)和軟件[3]，人機(jī)交互界面（HMI）是指用戶視覺能感覺到的部分，是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介。交互界面的好與壞，直接影響到軟件開發(fā)的成敗。友好人機(jī)交互界面的開發(fā)離不開好的交互模型與設(shè)計(jì)方法。一個(gè)好用的用戶界面應(yīng)當(dāng)是簡(jiǎn)潔的、易操作的，用最簡(jiǎn)單的方式告訴用戶每一處設(shè)定的功能和目的，讓用戶通過人機(jī)交互界面與系統(tǒng)操作交流，如圖1所示。

圖1 人機(jī)交互系統(tǒng)模型

1.2 人機(jī)交互的基本要素

在人機(jī)交互系統(tǒng)中，實(shí)現(xiàn)用戶與機(jī)器之間的友好交互，通常需要考慮人、交互設(shè)備及交互軟件三個(gè)要素。用戶與界面之間的關(guān)系是人機(jī)交互研究的主要內(nèi)容，它包括用戶研究、交互設(shè)計(jì)、界面設(shè)計(jì)等。不同的軟件對(duì)應(yīng)不同的交互系統(tǒng)，其都包含基本三要素，只是要素的具體內(nèi)容不同[4]。

人是人機(jī)交互過程中的主體，是人機(jī)交互系統(tǒng)的操作者或使用者，人可以將信息傳遞給系統(tǒng)，與此同時(shí)也會(huì)對(duì)系統(tǒng)反饋回來的信息進(jìn)行分析理解，再做出相應(yīng)的反應(yīng)。不同的人由于技能、性格、經(jīng)驗(yàn)、教育程度等不同，對(duì)產(chǎn)品的需求也是不同的，所以在交互設(shè)計(jì)中要充分考慮人的需求，以便設(shè)計(jì)更友好的用戶界面。

機(jī)是人機(jī)交互過程中的基礎(chǔ)，接收來自人操作輸入的數(shù)據(jù)、命令、聲音等信息，運(yùn)算處理后通過不同的方式輸出人所能理解的處理結(jié)果、信息以及提示。機(jī)器的性能決定了用戶在交互過程中的滿意度與操作效率，所以在人機(jī)交互過程中要不斷地完善機(jī)器的性能設(shè)計(jì)。

交互軟件是人機(jī)交互過程中的載體，在人機(jī)交互過程中，人通常通過人機(jī)界面進(jìn)行人與機(jī)的信息傳遞與交流，進(jìn)而了解產(chǎn)品的功能并使用產(chǎn)品。在一個(gè)優(yōu)良的軟件產(chǎn)品中，人機(jī)界面的實(shí)現(xiàn)一般要占總程序量的30%～50%，且隨著軟件產(chǎn)品的不斷提高，這個(gè)比例不斷增大[5]。友好的人機(jī)交互界面能夠適應(yīng)人的思維模式，是整個(gè)人機(jī)交互過程中必不可少的樞紐。人機(jī)三要素之間相輔相成、缺一不可。它們各自的形成都需要達(dá)到一定的標(biāo)準(zhǔn)，而后相互作用，共同實(shí)現(xiàn)自然、友好、方便的人機(jī)交互方式。

2 Axure原型建模分析

Axure（Axure Rapid Prototyping）是一款基于代碼HTML5的快速原型建模軟件，火狐為默認(rèn)的預(yù)覽器。Axure主要負(fù)責(zé)定義需求和規(guī)格、設(shè)計(jì)功能和界面等，能快速創(chuàng)建應(yīng)用軟件或Wed系統(tǒng)線框圖、原型、規(guī)格說明書，能充分展示系統(tǒng)頁面的功能模塊、人機(jī)交互形式、視覺元素及效果，交互編輯簡(jiǎn)單、易學(xué)、操作快捷，設(shè)計(jì)效率高[6]。

2.1 原型建模

原型是創(chuàng)建于正式開發(fā)產(chǎn)品之前的模型，通過向用戶演示產(chǎn)品原型過程中可以精準(zhǔn)捕捉用戶的真實(shí)需求。在軟件產(chǎn)品設(shè)計(jì)過程中，原型建模工具很多，可用筆、PS、AI 等工具繪畫出產(chǎn)品框架圖，但這些工具只能夠粗簡(jiǎn)地表達(dá)產(chǎn)品原型的基本創(chuàng)意和思想，而用戶真正的實(shí)際需求和人機(jī)互動(dòng)效果是無法展現(xiàn)出來[7]。Axure RP是一款專業(yè)的原型設(shè)計(jì)軟件，不需要寫代碼，只需要編排、設(shè)計(jì)參數(shù)就可以快速創(chuàng)建原型，應(yīng)用于軟件開發(fā)前端和網(wǎng)站頁面，可以初步展示產(chǎn)品前端的面貌，深受交互設(shè)計(jì)師（UI）、產(chǎn)品經(jīng)理（PM）、用戶體驗(yàn)設(shè)計(jì)師（UX）們的喜愛[8]。

2.2 Axure原型設(shè)計(jì)流程

原型設(shè)計(jì)流程簡(jiǎn)分為用戶需求、產(chǎn)品框架、視覺設(shè)計(jì)三大步驟，用戶需求是最重要的基礎(chǔ)工作，用戶需求直接影響了產(chǎn)品框架、視覺設(shè)計(jì)的內(nèi)容。產(chǎn)品框架是產(chǎn)品布局的初始構(gòu)建，交互功能編輯工作主要是這一階段完成。視覺設(shè)計(jì)是將產(chǎn)品方案的最終效果呈現(xiàn)給用戶，以便用戶選擇和修改。

2.2.1 用戶需求分析

用戶需求直接決定產(chǎn)品原型設(shè)計(jì)的成敗，任何形式的產(chǎn)品研發(fā)都要以用戶為中心[9]。用戶需求獲取的3個(gè)有效途徑；（1）用戶調(diào)研，如調(diào)查報(bào)告、用戶訪談等；（2）競(jìng)品分析，分析相同產(chǎn)品的用戶需求、主要任務(wù)操作流程及界面樣式；（3）分析用戶的反饋和產(chǎn)品的數(shù)據(jù)，找到用戶的需求和痛點(diǎn)，從而使產(chǎn)品能夠滿足用戶的實(shí)際需求。

2.2.2 產(chǎn)品框架設(shè)計(jì)

分析用戶的需求，使用思維導(dǎo)圖軟件來理清用戶的需求以及產(chǎn)品的各個(gè)功能模塊、邏輯關(guān)系等內(nèi)容；通過分析用戶的需求，了解用戶使用產(chǎn)品完成的主要流程任務(wù)及要完成此流程任務(wù)用戶每一步需要的操作方式，形成產(chǎn)品的思維導(dǎo)圖、流程圖設(shè)計(jì)，這樣可以大致規(guī)劃出產(chǎn)品的主要功能點(diǎn)，完成產(chǎn)品的初步信息架構(gòu)。之后，綜合思維導(dǎo)圖的及主要流程圖，進(jìn)行頁面的布局設(shè)計(jì)。頁面內(nèi)容結(jié)構(gòu)的設(shè)計(jì)取決于設(shè)計(jì)師對(duì)內(nèi)容編排的把握，布局方式會(huì)直接影響視覺效果，可以借鑒已成熟產(chǎn)品的布局方式，因?yàn)橐延挟a(chǎn)品經(jīng)有足夠的運(yùn)營(yíng)數(shù)據(jù)支持，具有較多的用戶反饋。

2.2.3 視覺設(shè)計(jì)

通過用戶的需求分析、實(shí)現(xiàn)頁面架構(gòu)設(shè)計(jì)后，利用相關(guān)原型設(shè)計(jì)工具進(jìn)行軟件原型設(shè)計(jì)。原型設(shè)計(jì)是利用一些圖片、色彩、文字或界面布局排版在產(chǎn)品界面上進(jìn)行進(jìn)一步的優(yōu)化，用圖片和文字組成頁面，決定了用戶的對(duì)產(chǎn)品的第一印象。同時(shí)，也可通過改變字體樣式、顏色、大小等設(shè)計(jì)元素去影響用戶感知，目的是吸引用戶對(duì)該產(chǎn)品產(chǎn)生感興趣并愿意去使用產(chǎn)品。視覺設(shè)計(jì)最終呈現(xiàn)的方式有高低保真原型，如圖2所示，低保真原型可以展現(xiàn)軟件的大致結(jié)構(gòu)和基礎(chǔ)交互效果，但是在界面美觀程度和交互效果上不能與真實(shí)軟件相比。高保真原型是在低保真原型設(shè)計(jì)基礎(chǔ)上經(jīng)過視覺設(shè)計(jì)師制圖、切圖制作完成。它能夠更加詳細(xì)地展現(xiàn)產(chǎn)品的功能及業(yè)務(wù)需求，除了沒有真實(shí)的后臺(tái)數(shù)據(jù)進(jìn)行支撐外，幾乎可以模擬前端界面的所有功能。在視覺上接近最終產(chǎn)品的樣式，體驗(yàn)上也幾乎接近真實(shí)軟件[10]。

圖2 App低-高保真原型

3 基于人機(jī)交互的Axure原型設(shè)計(jì)實(shí)踐

采用 Axure進(jìn)行原型建模，需要了解用戶的真實(shí)需求，把產(chǎn)品的流程圖、線框圖做出低保真原型，再進(jìn)行深一步完成高保真原型及軟件系統(tǒng)研發(fā)。下面結(jié)合具體的淘寶首頁開發(fā)項(xiàng)目實(shí)例，從人機(jī)交互的角度出發(fā)，解析Axure進(jìn)行淘寶網(wǎng)站登錄“首頁”的原型建模的交互功能編輯制作過程，為軟件產(chǎn)品研發(fā)提供一些思路。

3.1 原型功能模塊分析

淘寶登錄方式有兩種，一種是快速登錄，通過掃描二維碼的方式進(jìn)行登錄，另一種是通過賬戶密碼登錄的方式進(jìn)行登錄，要制作這兩個(gè)頁簽的切換效果，從而制作一版淘寶登錄的高低保真原型。表1展示了登錄頁面中元件的信息及對(duì)應(yīng)交互屬性?？芍?，交互并不是機(jī)械地去完成用戶設(shè)定的任務(wù)，而是需要用戶發(fā)起下一個(gè)動(dòng)作之前做出正確的預(yù)判，利用認(rèn)知心理和人機(jī)工程學(xué)科學(xué)理論，指導(dǎo)完成原型設(shè)計(jì)，一方面防止出錯(cuò)，另一方面引導(dǎo)其正確快捷地使用軟件，從而提高工作效率[11]。

表1 淘寶“登錄”頁面

3.2 淘寶登錄界面交互功能編輯

用Axure RP制作登錄界面原型設(shè)計(jì)。首先，設(shè)置全局與局部變量；其次，按設(shè)計(jì)好的頁面布局方式添加所需要的基本元件和動(dòng)態(tài)面板等控件，如登錄頁簽、輸入文本框、登錄按鈕、錯(cuò)誤信息提示等；最后，完成對(duì)應(yīng)元件的交互功能編輯及發(fā)布與預(yù)覽原型。

（1）登錄切換方式交互編輯。如圖3登錄頁簽有兩種方式，單擊快速登錄頁簽，頁面轉(zhuǎn)跳的快速登錄頁面，單擊賬戶速登錄頁簽，頁面轉(zhuǎn)跳的賬戶登錄頁面，可判定頁簽為動(dòng)態(tài)面板的兩種狀態(tài)。

圖3 登錄頁簽切換交互編輯

（2）文本框交互編輯。圖4用戶名和密碼輸入文本框交互功能編輯，遵循常用用戶習(xí)慣，用戶名文本框設(shè)置提示為文本提示，密碼文本框設(shè)置為密文顯示，用戶名與密碼的最大長(zhǎng)度為8位數(shù)等。

圖4 文本框交互編輯

（3）淘寶登錄、首頁界面交互編輯。圖5登錄按鈕在被單擊時(shí)，用戶名輸入文本框與密碼輸入框數(shù)據(jù)被儲(chǔ)存于全局變量中和設(shè)置“打開鏈接”，選擇新窗口進(jìn)入首頁頁面，當(dāng)首頁載入的同時(shí)全局變量中的數(shù)據(jù)傳遞到首頁指定文本框位置，完成鏈接行為制作和頁面間參數(shù)傳遞交互功能。

圖5 登錄界面鏈接、首頁數(shù)據(jù)傳遞交互編輯

（4）登錄條件判定交互功能。圖6用戶在文本框中輸入用戶名和密碼之后，對(duì)登錄按鈕進(jìn)行交互編輯設(shè)定，添加登錄條件判定，如輸入用戶名和密碼文本框信息同時(shí)正確則頁面跳轉(zhuǎn)進(jìn)入首頁頁面，與此同時(shí)文本框中用戶名在首頁的指定位置顯示，如輸入用戶名或密碼信息有誤則進(jìn)行錯(cuò)誤提示，關(guān)閉提示重新輸入正確信息。

圖6 登錄條件判定

3.3 登錄頁面的主要HTML5代碼

Axure可以將頁面高保真原型設(shè)計(jì)生成基于HTML5代碼的頁面文件，其實(shí)質(zhì)就是一套完整的靜態(tài)Web系統(tǒng)，決策者、開發(fā)者和測(cè)試人員都可以在普通瀏覽器中瀏覽，并且與頁面進(jìn)行互動(dòng)而無須依附其他軟件。Axure原型建模過程中系統(tǒng)自動(dòng)生成的HTML5代碼可以作為后期開發(fā)工作的表示層開發(fā)原碼使用，程序員也可以參照Axure編排出來的原型樣子去開發(fā)軟件產(chǎn)品。