基于Axure的軟件原型法的研究與應用

董元和，張行文

(1．湖北師范大學 計算機科學與技術學院，湖北 黃石 435002 2．湖北師范大學 文理學院，湖北 黃石 435000)

基于Axure的軟件原型法的研究與應用

董元和1,2，張行文1

(1．湖北師范大學 計算機科學與技術學院，湖北 黃石 435002 2．湖北師范大學 文理學院，湖北 黃石 435000)

提出了一種基于Axure的軟件原型開發方法及應用過程，實現了構建基于需求分析的原型建模與表示層代碼開發的高度有機統一，既讓開發團隊直觀地理解項目的需求全貌，又確保了軟件頁面與原型的高度一致性。

軟件原型法；需求分析；高保真；Axure

0 引言

原型法是解決軟件危機的一種行之有效、可操作性強的軟件開發方法。其主要思想是在需求分析階段先行開發一個與需求盡可能匹配的“簡約版”系統，然后通過需求分析溝通，進行多次原型系統迭代和細化，以期準確地表達用戶的真實需求，并最終實現系統的成功開發。

Axure是業內廣泛采用的表示層原型建模工具。它通過制作出逼真的項目高保真原型，使開發團隊在軟件開發前，就能真實地體驗和直觀地展示未來軟件的效果與核心邏輯功能，從而實現精確的需求分析。Axure能便捷地創建基于目錄組織的原型文檔、功能說明等，并自動生成原型的Html文件和頁面的需求與設計的Word文檔。原型Html文件經優化后，可直接用于后期邏輯代碼的開發工作，有機地將需求工作成果應用于后期邏輯編碼工作，使原型建模不只是完成了需求分析工作，而是完成了主要的項目表示層的編碼工作。

1 Axure原型建模分析

1.1 原型建模[1]

原型法軟件開發過程一般大致分為：需求溝通和市場調研、項目評估、原型設計、軟件設計、開發編程、測試和產品交付等6個階段，如圖1所示。

圖1 原型法軟件開發過程

原型設計是原型法項目開發過程中非常關鍵的一步，它承載著客戶的理念和想法，并在原型中得到體現，它直接決定了系統的使用感受和效果。產品原型就是整個產品在研發前的一個框架設計，它高保真地展示了未來軟件的頁面效果、邏輯功能、層次結構、用戶體驗等軟件要素。

1.2 Axure建模價值

Axure主要負責定義需求和規格、設計功能和界面等，它能快速創建應用軟件或Web系統線框圖、原型、規格說明書，能把系統頁面的功能模塊、視覺元素、人機交互的形式和效果完整地展現出來，且操作簡便、快速、易于上手，設計效率高。Axure主要針對包括用戶體驗設計師(UX)、交互設計師(UI)、業務分析師(BA)、信息架構師(IA)、可用性專家(UE)和產品經理(PM)等。

Axure通過直觀地展示開發的產品原型，輔以講解，可以讓領域專家及客戶直觀有效地評估該產品的可行性；可以讓項目經理和技術人員快速理解產品的需求和具體功能，指導項目開發；可以指導測試人員編寫測試用例和進行測試指導；Axure產品原型的模塊齊全、帶有交互效果，初步展示了產品前端的面貌，UE知道該如何改進和優化現有的體驗設計，UI也知道該如何豐富該產品的交互效果；在產品正式推出前，邀請用戶試用產品保真原型，并獲得反饋，可以驗證產品是否滿足用戶需求，從而提高產品開發的成功率；Axure可以生成特定格式的Word需求文檔，為開發人員節省了大量的時間；Axure原型代碼可直接用于后期研發的表示層的代碼開發。

2 Axure原型建模的應用

采用Axure進行原型建模，一般需要先理解項目的需求，然后再把產品的線框圖、保真圖做出來，待確定后再進行下一步的系統研發。這樣不僅讓研發人員更加了解需求，也能使原型更加接近最終的真實項目，減少后面的返工量，為后期的開發提供便利。下面結合具體的軟件開發項目實例，重點介紹利用Axure進行該項目“首頁”的原型建模的應用過程。

2.1 項目需求概述

“糖尿病患者健康管理系統”是一個基于WEB的糖尿病醫療互動平臺。系統具備動態、實時、交互、協作等特點，分設有前臺和后臺，前臺是呈現給網絡用戶的外部UI系統，后臺是平臺的內容管理系統。該系統有三類角色，分別是患者、醫生以及健康管理師。用戶登錄后需要根據不同角色加載不同界面，并完成相應的管理功能。

圖2 “首頁”線框圖布局

圖3 “首頁”高保真圖

2.2 原型線框圖設計

“首頁”頁面是所有角色用戶進入系統的第一個頁面。該頁面主要包括系統Logo、標題、簡介、注冊、登錄、中國糖尿病患者示意圖和健康測試等元素。

因此，初步將首頁分為頭部、系統介紹、用戶登錄、中國糖尿病患者示意圖、健康測試、底部等六個模塊，如圖2所示：

同時，將這六大模塊以表格的形式列出來，并且給出內容組成和重要級別，如表1所示，有利于相關人員對需求的理解。

表1 首頁中模塊優先級

2.3 高保真原型設計

高保真意味著原型已經與最終產品的視覺、邏輯、使用方式、感覺功能上保持高度一致，可以直接用于后期的開發與實現。保真圖是在線框圖的基礎上，根據原始需求分析經過完善、細化后，添加交互動作及頁面元件而實現，用以高保真地說明未來系統的真實頁面效果及基本業務邏輯。圖3描述了“首頁”的高保真圖的效果。

1) 圖片輪播效果實現

向頁面中拖入一個動態面板，設置三個state分別為img1，img2，img3，在每個state里面放一張圖片。之后在動態面板的右下方拖入三個小圓給其分別命名為img1，img2，img3，給每個小圓設置一個選中狀態的樣式，如表2是圖片輪播效果中部件的基本設置。

表2 圖片輪播的基本設置

頁面載入時的交互動作(實現載入后就動態循環)，見圖4：

圖4 頁面載入時的動作

動態面板狀態改變時的交互動作，見圖5： 鼠標移入和移出小矩形的交互動作，見圖6：

圖5 面板狀態改變時的動作

圖6 鼠標移動時的動作

2) 用戶登錄

需要設置權限，讓不同的角色用戶登錄后進入不同角色頁面。因為Axure中沒有數據庫，所以將不同的角色用戶存于不同全局變量中。表3是用戶登錄模塊中部件的基本設置。

登錄時的交互動作，見圖7：

圖7 登錄時的動作

部件Name坐標尺寸文本框LoginnameX：204Y：436W：252H：34文本框LoginPasswordX：204Y：499W：252H：34按鈕loginbtnX：360Y：558W：79H：28標簽logintipX：256Y：414W：204H：16

2.4 生成原型頁面文件和需求文檔

1) 生成基于HTML代碼的原型

Axure可以將頁面高保真原型設計生成基于HTML代碼和JavaScript(包括各種基于JavaScript框架，如JQuery)代碼的頁面文件，其實質就是一套完整的靜態Web系統，決策者、開發者和測試人員都可以在普通瀏覽器中瀏覽，并且與頁面進行互動而無需其它支撐軟件。這些Html代碼可以作為后期開發工作的表示層開發原碼使用。

2) 部分注釋和說明

可以對部件和頁面添加說明文字，從而更好地描述背景情況和詳細功能。注釋按照自定義的字段進行組織，以便于更好地管理信息和使用文檔標準化，頁面說明可以針對不同的受眾者分成不同的分類。

3) 導出頁面需求文檔

Axure不僅可以導出所有的部件注釋和說明，還可以將部件的一些值，比如將列表部件或者下拉類別部件的所有供選擇的值導出為Word格式的文檔，形成規范的頁面需求與設計文檔。

2.5 建模原型在項目編碼中的應用

項目最終的頁面效果是源于Axure制作的高保真原型的，因此，開發人員可以直接在原型Html代碼上進行優化、修善、規范化，然后添加后臺邏輯代碼，或者用后臺控件代碼代替Html組件代碼，這不僅節省邏輯代碼的開發成本，大大提高了開發人員的開發效率，而且可以充分保證項目頁面效果與原型設計高度一致。

一般來說，后臺邏輯代碼的開發人員往往對前臺頁面代碼具有天生的不敏感性，這也在很大程度上規避了這一弊端，使后臺代碼開發人員可以專注于后臺邏輯的研究與開發，而無需過多地關注前臺頁面代碼的組織。

3 結論

利用Axure進行軟件原型法開發，使軟件開發的效率和成功率都大幅提高。它不僅構建了基于需求分析的頁面原型，為未來成品系統提供一個直觀的可視藍本，實質上同時也完成了軟件表示層的代碼開發工作，使成品系統的頁面效果與原型保持高度一致，讓業務邏輯代碼程序員不必過多關心表示層的代碼開發，從而使需求分析與表示層代碼開發高度有機地統一起來。

[1]ToddZakiWarfel,沃菲爾,湯海,等. 原型設計:實踐者指南[M]. 北京:清華大學出版社, 2013.

[2]賴定清，林 堅. Axure RP設計交互原型(1)[M]. 北京:機械工業出版社，2010.

[3]陳 曉,李燕龍,王小瓊. 基于項目實例的軟件工程課程改革-以公司網站設計為例[J]. 大眾科技, 2015, 17(8):117～118.

[4]蔡 婷. 如何用Axure做好原型開發[J]. 科教導刊, 2015,(12):155～155.

[5]張曉景. Axure RP 8.0原型設計完全自學一本通[M]. 北京:電子工業出版社, 2016.

ResearchandapplicationofsoftwareprototypingmethodbasedonAxure

DONG Yuan-he1,2, Zhang Xin-wen1

(1.College of Computer Science and Technology, Hubei Normal University, Huangshi 435002, China; 2.College of Arts and Science, Hubei Normal University, Huangshi 435000, China)

This paper presents a software prototype development method and application process based on Axure. This method realizes the highly organic unification of building prototype modeling based on requirement analysis and code development for presentation layer. It not only allows the development team to visually understand the overall requirements of the project, but also ensures a high degree of consistency between the software page and the prototype.

software prototyping; requirement analysis; high-fidelity; Axure

TP393

A

2096-3149(2017)04- 0015-05

10.3969/j.issn.2096-3149.2017.04.004

2017—08—20

湖北省高等學校優秀中青年科技創新團隊計劃項目(T201430)資助

董元和(1973— )， 男，湖北蘄春人，碩士，副教授；研究方向：軟件工程與信息系統集成.