人機交互理念在Axure RP原型設計中應用研究

李紅玲，張銀釧，田亞平

（江蘇師范大學科文學院 江蘇 徐州 221132）

0 引言

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

1 人機交互理論

1.1 人機交互的概述

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

圖1 人機交互系統模型

1.2 人機交互的基本要素

在人機交互系統中，實現用戶與機器之間的友好交互，通常需要考慮人、交互設備及交互軟件三個要素。用戶與界面之間的關系是人機交互研究的主要內容，它包括用戶研究、交互設計、界面設計等。不同的軟件對應不同的交互系統，其都包含基本三要素，只是要素的具體內容不同[4]。

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

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

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

2 Axure原型建模分析

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

2.1 原型建模

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

2.2 Axure原型設計流程

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

2.2.1 用戶需求分析

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

2.2.2 產品框架設計

分析用戶的需求，使用思維導圖軟件來理清用戶的需求以及產品的各個功能模塊、邏輯關系等內容；通過分析用戶的需求，了解用戶使用產品完成的主要流程任務及要完成此流程任務用戶每一步需要的操作方式，形成產品的思維導圖、流程圖設計，這樣可以大致規劃出產品的主要功能點，完成產品的初步信息架構。之后，綜合思維導圖的及主要流程圖，進行頁面的布局設計。頁面內容結構的設計取決于設計師對內容編排的把握，布局方式會直接影響視覺效果，可以借鑒已成熟產品的布局方式，因為已有產品經有足夠的運營數據支持，具有較多的用戶反饋。

2.2.3 視覺設計

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

圖2 App低-高保真原型

3 基于人機交互的Axure原型設計實踐

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

3.1 原型功能模塊分析

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

表1 淘寶“登錄”頁面

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

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

（1）登錄切換方式交互編輯。如圖3登錄頁簽有兩種方式，單擊快速登錄頁簽，頁面轉跳的快速登錄頁面，單擊賬戶速登錄頁簽，頁面轉跳的賬戶登錄頁面，可判定頁簽為動態面板的兩種狀態。

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

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

圖4 文本框交互編輯

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

圖5 登錄界面鏈接、首頁數據傳遞交互編輯

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

圖6 登錄條件判定

3.3 登錄頁面的主要HTML5代碼

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