Axure RP（Axure Rapid Prototyping）是一款快速實(shí)現(xiàn)、準(zhǔn)確表達(dá)、帶有交互效果且易于上手的原型設(shè)計(jì)工具。
本人在曾參與某系統(tǒng)需求分析時(shí)開始接觸Axure RP，初步掌握了一定的開發(fā)基礎(chǔ)，成功制作出系統(tǒng)需求原型，對(duì)需求分析工作產(chǎn)生了積極效應(yīng)。在此經(jīng)驗(yàn)的基礎(chǔ)上，后續(xù)又在其他項(xiàng)目中進(jìn)行了較為成功的運(yùn)用，并獲得了良好的效果。
就個(gè)人的經(jīng)驗(yàn)而言，使用Axure RP進(jìn)行原型開發(fā)，一旦掌握了一定的開發(fā)技巧后，加上一個(gè)良好的規(guī)劃，那么很多東西都可以信手拈來。好的東西需要分享并使更多人獲益，給實(shí)際工作帶來效益，這樣才能得以體現(xiàn)其價(jià)值。對(duì)此，本人在此分享使用Axure RP進(jìn)行原型開發(fā)的一些經(jīng)驗(yàn)，與各位一起探討，也希望更多人能夠分享自身使用Axure RP的相關(guān)經(jīng)驗(yàn)。
Axure RP就其本身而言，其實(shí)僅是一個(gè)工具，大部分人都可以很快學(xué)習(xí)并掌握之，但要做出好的原型，會(huì)用只是一個(gè)最基本要求，關(guān)鍵是要有一套良好的原型開發(fā)思想，這套開發(fā)思想除了要有整體規(guī)劃之外，還需要充分結(jié)合實(shí)際業(yè)務(wù)需求，在理解需求的基礎(chǔ)上進(jìn)行開發(fā)。
目前本人使用的Axure RP版本為6.5.0.3012，該版本可以通過互聯(lián)網(wǎng)獲得。關(guān)于Axure RP的安裝及基本使用，有相應(yīng)的教程，例如：Axure_rp_6.5_基礎(chǔ)教程、
Axure.RP.6.Prototyping.Essentials等，大家通過認(rèn)真學(xué)習(xí)這些教程自然可以達(dá)到事半功倍的效果。因此，這些基礎(chǔ)性內(nèi)容不再這里提及，這里要談的是本人在之前的幾個(gè)項(xiàng)目中是如何完成快速原型開發(fā)的。
一、了解原型設(shè)計(jì)開發(fā)的特點(diǎn)。
首先我們需要對(duì)原型開發(fā)工具具有相對(duì)深入的了解，明確原型工具能做什么，不能做什么。其實(shí)只要關(guān)注好部件、母版、動(dòng)態(tài)面板，并學(xué)會(huì)靈活運(yùn)用部件屬性，那么原型的效果就基本出來了。
其次就是要明確我們需要做哪類原型，是網(wǎng)頁(yè)版的，客戶端版的，還是手機(jī)版的，等等，因?yàn)槊恳活愒偷脑O(shè)計(jì)要求都是不一樣的。如果我們是開發(fā)Web版的原型，那么我們都知道網(wǎng)頁(yè)尺寸的設(shè)計(jì)與瀏覽器及操作系統(tǒng)的尺寸是息息相關(guān)的，也許我們需要知道一般情況下Windows XP的任務(wù)欄高度為30px，而Windows 7的任務(wù)欄高度為40px；我們需要知道一些主瀏覽器的界面參數(shù)（狀態(tài)欄、菜單欄、滾動(dòng)條高度等）；我們也需要知道系統(tǒng)分辨率的設(shè)計(jì)對(duì)原型的影響（安全分辨率為1024*768px，可建議的大分辨率為1280*800px）；我們還需要知道網(wǎng)頁(yè)的寬度與首屏高度等等。如果我們是開發(fā)手機(jī)版的原型，也許我們需要知道諸如Android、IOS等的設(shè)計(jì)尺寸。
當(dāng)然，就我們目前所涉及的系統(tǒng)而言，一般的原型開發(fā)都是基于Web版本的，因此我們需要重點(diǎn)關(guān)注這一塊的設(shè)計(jì)即可。
二、做好原型的總體規(guī)劃。
在動(dòng)手進(jìn)行正式的原型開發(fā)之前，一定要結(jié)合實(shí)際需求及已開發(fā)過的類似系統(tǒng)做好原型的框架規(guī)劃，包括原型整體風(fēng)格、色調(diào)、布局、展現(xiàn)形式等。個(gè)人認(rèn)為，至少要做到并做好以下幾個(gè)方面：
（1） 原型設(shè)計(jì)開發(fā)要有統(tǒng)一理念。這個(gè)統(tǒng)一主要是指要有統(tǒng)一的界面布局，例如每一個(gè)子頁(yè)面的風(fēng)格都應(yīng)該是相同或相近的，各類組件（例如文本框、下拉選擇框、表格、消息提示框等）都應(yīng)該是一致的。又例如所有界面的重置按鈕或關(guān)閉按鈕的樣式、事件等都應(yīng)該是一致的。
（2） 原型設(shè)計(jì)開發(fā)要有對(duì)稱思想。這里關(guān)系到原型界面的布局問題，例如頁(yè)面底部擺放的按鈕應(yīng)該是總體居中并向兩邊分散排列的。一個(gè)信息提示框的文字正常情況下應(yīng)該是居中顯示的，諸如此類。
（3） 原型設(shè)計(jì)開發(fā)要注意細(xì)節(jié)。做一個(gè)原型其實(shí)不難，但要做一個(gè)用戶體驗(yàn)好的原型就相對(duì)困難了。這里說的困難其實(shí)很多時(shí)候都不是技術(shù)上的難題，而是跟我們?cè)覆辉敢庾龊媒换ンw驗(yàn)，愿不愿意注意每一個(gè)細(xì)節(jié)等有關(guān)。好的界面原型，很多時(shí)候并不是說其有多花俏，而是每一處細(xì)節(jié)都做到極致，細(xì)到每一個(gè)文字如何描述、控件如何展現(xiàn)、每一個(gè)表格的高度及表頭背景色是否一致等都做得很到位。其實(shí)，這個(gè)對(duì)我們而言還真不是什么難事，難就難在我們?cè)覆辉敢饣〞r(shí)間去處理這些細(xì)節(jié)問題。很多時(shí)候，細(xì)節(jié)問題關(guān)注到了，整體效果就出來了，客戶的滿意度也就提升了。此外，在原型開發(fā)時(shí)，如果可能，一定要給每一個(gè)頁(yè)面、每一個(gè)母版、每一個(gè)動(dòng)態(tài)面板、每一個(gè)部件進(jìn)行適當(dāng)?shù)拿?，這對(duì)于復(fù)雜原型的開發(fā)更是如此，同時(shí)也有利于多人協(xié)作開發(fā)。當(dāng)然這更是一個(gè)良好的習(xí)慣，好的習(xí)慣常常會(huì)幫助我們將事情做好。
（4） 原型設(shè)計(jì)開發(fā)要有產(chǎn)品意識(shí)。做原型開發(fā)也許有時(shí)候僅僅是一個(gè)草圖，但更多時(shí)候是希望能夠做出一個(gè)貼近真實(shí)系統(tǒng)的原型。畢竟，如果僅是為了做一個(gè)草圖，還不如一張紙和一支筆來得方便快捷。因此，做原型的設(shè)計(jì)開發(fā)要時(shí)刻有產(chǎn)品意識(shí)，或許我們可以認(rèn)為我們是在創(chuàng)造產(chǎn)品，而產(chǎn)品是提供給客戶的，應(yīng)該將產(chǎn)品瑕疵降到盡可能低。因此，在時(shí)間許可的情形下，我們應(yīng)該追求精益求精。
（5） 原型設(shè)計(jì)開發(fā)要保持更新。這里有兩層含義，一是項(xiàng)目開發(fā)過程中會(huì)存在需求變更的情形，此時(shí)涉及到變更的原型也應(yīng)隨之更新；二是開發(fā)出來的原型應(yīng)與對(duì)應(yīng)的文檔保持一致性，特別是在數(shù)據(jù)項(xiàng)方面。
對(duì)于原型規(guī)劃，具體到實(shí)操層面，就是要明確整個(gè)原型整個(gè)界面風(fēng)格，大概有多少功能模塊，菜單如何展現(xiàn)，哪些需要做成彈出窗口，哪些需要做成嵌套窗口，哪些需要以頁(yè)面形式開發(fā)，哪些又需要以動(dòng)態(tài)面板進(jìn)行展現(xiàn)，哪些需要做成部件，而哪些又需要做成母版。
三、設(shè)計(jì)并形成原型部件庫(kù)。
一套系統(tǒng)，或者是一系列類似的系統(tǒng)，其原型部件都應(yīng)該有統(tǒng)一的標(biāo)準(zhǔn)。這套標(biāo)準(zhǔn)就包括了表單、文本框、下拉選擇框、復(fù)選框、單選按鈕、按鈕等方方面面。那么這一套的標(biāo)準(zhǔn)其實(shí)風(fēng)格也應(yīng)該是高度統(tǒng)一的。例如，互聯(lián)網(wǎng)行業(yè)有很成熟的開發(fā)框架，往往會(huì)涉及到一些常用的下拉框、選擇框等基礎(chǔ)性元素，類似這些基本元素都可以做成部件，以方便后續(xù)復(fù)用。
我們?cè)谠O(shè)計(jì)制作部件時(shí)，不妨可以多參考一些優(yōu)秀的部件庫(kù)，這些部件庫(kù)可以在Axure官方網(wǎng)站上獲取。下圖所列就是一些常用的部件庫(kù)。
其實(shí)，只要我們用心，自己也可以制作出一套非常實(shí)用的部件。例如，要制作一個(gè)普通按鈕，可以使用矩形即可完成，可以將調(diào)整矩形形狀，可以配置懸停樣式、鼠標(biāo)按下樣式、選中樣式、禁用樣式等，部分示例圖如下：
四、分類設(shè)計(jì)原型母版。
為使得原型開發(fā)真正達(dá)到快速構(gòu)建的目的，在原型開發(fā)過程中盡可能地將公共部分提取并轉(zhuǎn)換為母版，之后在設(shè)計(jì)開發(fā)每一個(gè)原型頁(yè)面時(shí)采用組裝的方式將會(huì)大大提供開發(fā)效率，同時(shí)有利于后續(xù)一些基礎(chǔ)數(shù)據(jù)的修改。
就個(gè)人經(jīng)驗(yàn)而言，母版主要?jiǎng)澐譃閮纱箢?，一類是系統(tǒng)公共組件，另一類是系統(tǒng)業(yè)務(wù)母版。公共組件包括：按鈕、文本框、下拉選擇框、日期選擇框、標(biāo)簽頁(yè)、對(duì)話框、組合框、分頁(yè)控件、各類表格、頁(yè)面標(biāo)題區(qū)域、頁(yè)面底部區(qū)域，等等。其中，每一類組件又可以根據(jù)實(shí)際業(yè)務(wù)場(chǎng)景及相應(yīng)的大小要求而設(shè)計(jì)多套。單拿表格組件來說，就可以設(shè)計(jì)出橫向展現(xiàn)的普通表格、縱向展現(xiàn)的普通表格、帶序號(hào)的橫向表格、帶復(fù)選框的橫向表格、帶單選按鈕的橫向表格，等等。而且這些表格的標(biāo)題、字體大小、背景顏色、線條顏色都應(yīng)該根據(jù)系統(tǒng)整體風(fēng)格配置好。
另外，通常一個(gè)系統(tǒng)里面都有查詢統(tǒng)計(jì)的影子，因此將一些常用的查詢條件母版化也是非?？尚械?。而根據(jù)個(gè)人經(jīng)驗(yàn)，查詢條件的欄目一般為兩欄四列或者三欄六列，這樣整體布局會(huì)相對(duì)合理。
五、靈活運(yùn)用動(dòng)態(tài)面板。
動(dòng)態(tài)面板是展示在頁(yè)面不跳轉(zhuǎn)的情況下所能實(shí)現(xiàn)的各種交互狀態(tài)，通過動(dòng)態(tài)面板可以實(shí)現(xiàn)高級(jí)的交互功能，實(shí)現(xiàn)原型的高保真度。從另一個(gè)角度來看，動(dòng)態(tài)面板的每一種狀態(tài)其實(shí)可以看做是一個(gè)頁(yè)面，我們可以在該狀態(tài)下設(shè)計(jì)所需要的原型效果。通過對(duì)動(dòng)態(tài)面板進(jìn)行隱藏、顯示或切換到不同狀態(tài)從而實(shí)現(xiàn)我們所需要的交互效果。
一般情況下，我們知道動(dòng)態(tài)面板可以實(shí)現(xiàn)諸如Tab頁(yè)簽的切換效果、鼠標(biāo)觸發(fā)式和點(diǎn)擊觸發(fā)式的下拉菜單效果、鼠標(biāo)觸發(fā)式的浮窗效果、JS的鼠標(biāo)點(diǎn)擊彈層效果等等。而很多時(shí)候，為了使得整個(gè)原型做得更為形象逼真，整一個(gè)系統(tǒng)都可以通過動(dòng)態(tài)面板來實(shí)現(xiàn)，特別是對(duì)于制作手機(jī)原型更是如此。
一個(gè)應(yīng)用系統(tǒng)原型網(wǎng)頁(yè)版和手機(jī)版均全部采用動(dòng)態(tài)面板實(shí)現(xiàn)，其目錄布局如下：
采用整個(gè)動(dòng)態(tài)面板來設(shè)計(jì)原型的好處在于交互效果更好、操作更流暢、用戶體驗(yàn)當(dāng)然也會(huì)更好。
總的來說，進(jìn)行原型開發(fā)，應(yīng)有必要的積累，并且在進(jìn)行原型開發(fā)時(shí)應(yīng)在條件許可的條件下做到更加嚴(yán)謹(jǐn)一點(diǎn)、細(xì)心一點(diǎn)、友好一點(diǎn)。除此之外，應(yīng)在平時(shí)進(jìn)行必要的積累，可以多學(xué)習(xí)一些優(yōu)秀的設(shè)計(jì)（例如http://huaban.com/nav8079206363、http://www.uisdc.com/等），然后結(jié)合實(shí)際業(yè)務(wù)需求和系統(tǒng)實(shí)際應(yīng)用，設(shè)計(jì)一套或多套適合于項(xiàng)目甚至行業(yè)的原型，并在后續(xù)其他類似項(xiàng)目的開發(fā)過程中以此為基礎(chǔ)不斷優(yōu)化、不斷完善、不斷提高。
聯(lián)系客服
