基于Axure的軟件原型法的研究與應(yīng)用

董元和，張行文

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

基于Axure的軟件原型法的研究與應(yīng)用

董元和1,2，張行文1

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

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

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

0 引言

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

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

1 Axure原型建模分析

1.1 原型建模[1]

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

圖1 原型法軟件開發(fā)過程

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

1.2 Axure建模價值

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

Axure通過直觀地展示開發(fā)的產(chǎn)品原型，輔以講解，可以讓領(lǐng)域?qū)＜壹翱蛻糁庇^有效地評估該產(chǎn)品的可行性；可以讓項目經(jīng)理和技術(shù)人員快速理解產(chǎn)品的需求和具體功能，指導(dǎo)項目開發(fā)；可以指導(dǎo)測試人員編寫測試用例和進行測試指導(dǎo)；Axure產(chǎn)品原型的模塊齊全、帶有交互效果，初步展示了產(chǎn)品前端的面貌，UE知道該如何改進和優(yōu)化現(xiàn)有的體驗設(shè)計，UI也知道該如何豐富該產(chǎn)品的交互效果；在產(chǎn)品正式推出前，邀請用戶試用產(chǎn)品保真原型，并獲得反饋，可以驗證產(chǎn)品是否滿足用戶需求，從而提高產(chǎn)品開發(fā)的成功率；Axure可以生成特定格式的Word需求文檔，為開發(fā)人員節(jié)省了大量的時間；Axure原型代碼可直接用于后期研發(fā)的表示層的代碼開發(fā)。

2 Axure原型建模的應(yīng)用

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

2.1 項目需求概述

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

圖2 “首頁”線框圖布局

圖3 “首頁”高保真圖

2.2 原型線框圖設(shè)計

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

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

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

表1 首頁中模塊優(yōu)先級

2.3 高保真原型設(shè)計

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

1) 圖片輪播效果實現(xiàn)

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

表2 圖片輪播的基本設(shè)置

頁面載入時的交互動作(實現(xiàn)載入后就動態(tài)循環(huán))，見圖4：

圖4 頁面載入時的動作

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

圖5 面板狀態(tài)改變時的動作

圖6 鼠標移動時的動作

2) 用戶登錄

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

登錄時的交互動作，見圖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可以將頁面高保真原型設(shè)計生成基于HTML代碼和JavaScript(包括各種基于JavaScript框架，如JQuery)代碼的頁面文件，其實質(zhì)就是一套完整的靜態(tài)Web系統(tǒng)，決策者、開發(fā)者和測試人員都可以在普通瀏覽器中瀏覽，并且與頁面進行互動而無需其它支撐軟件。這些Html代碼可以作為后期開發(fā)工作的表示層開發(fā)原碼使用。

2) 部分注釋和說明

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

3) 導(dǎo)出頁面需求文檔

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

2.5 建模原型在項目編碼中的應(yīng)用

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

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

3 結(jié)論

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

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

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

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

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

[5]張曉景. Axure RP 8.0原型設(shè)計完全自學(xué)一本通[M]. 北京:電子工業(yè)出版社, 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

湖北省高等學(xué)校優(yōu)秀中青年科技創(chuàng)新團隊計劃項目(T201430)資助

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