實(shí)驗(yàn) 快速原型設(shè)計(jì)Axure的使用

1、實(shí)驗(yàn)、Axure快速原型設(shè)計(jì)一、實(shí)驗(yàn)?zāi)康?、掌握軟件開(kāi)發(fā)原型模型的概念。2、練習(xí)Axure的原型設(shè)計(jì)二、實(shí)驗(yàn)器材1計(jì)算機(jī)一臺(tái)。2Axure工具軟件。三、Axure RP軟件介紹1 . Axure RP Axure RP 可以讓桌面應(yīng)用軟件和Web網(wǎng)站的設(shè)計(jì)師創(chuàng)建線框圖、流程圖、原型和規(guī)格說(shuō)明文檔，它比任何當(dāng)前其它創(chuàng)建靜態(tài)原型的工具如Visio, Omnigraffle、Illustrator、 Photoshop、Dreamweaver, Visual Studio、FireWorks、GUI Studio等都要快速、高效，因?yàn)樗攀钦嬲膶?zhuān)門(mén)原型設(shè)計(jì)工具，并且支持多人協(xié)作設(shè)計(jì)和版本控制管理。

2、 設(shè)計(jì)師們渴望有一個(gè)專(zhuān)門(mén)的原型設(shè)計(jì)利器，而Axure正是為此目的而精心打造。Axure RP已經(jīng)被一些財(cái)富1000大公司采用，成為創(chuàng)造成功產(chǎn)品的必備工具。國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。 2. 原型的作用和好處制作 Prototype 是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫(huà)面，如此更能抓住利益相關(guān)者與使用者的注意，讓用戶在軟件開(kāi)始投入編程前就確認(rèn)需求。 快速原型法（Rapid Prototyping）是一種有效且高效的以用戶為中心（User-Centered Design）的

3、技術(shù)，可以幫助用戶體驗(yàn)專(zhuān)家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。 目前全球有財(cái)富 1000 大的公司和重要機(jī)構(gòu)在使用 Axure RP，國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。 3、Axure 的工作環(huán)境 Axure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。 無(wú)需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。 Axure 可一體化生成線框圖、HTML 交互原型、規(guī)格說(shuō)明 Word 文檔。以下是對(duì) Axure RP 工作環(huán)境的簡(jiǎn)要說(shuō)明： 圖4-1 Axure RP 工作環(huán)境1. 主菜單和工具欄 執(zhí)行常用操作，如文件打開(kāi)、保存文件，格式化控件，自動(dòng)生成原

4、型和規(guī)格說(shuō)明書(shū)等操作。 2. 站點(diǎn)地圖面板 對(duì)所設(shè)計(jì)的頁(yè)面（包括線框圖和流程圖）進(jìn)行添加、刪除、重命名和組織頁(yè)面層次，。 3. 控件面板 該面板中包含了線框圖控件和流程圖控件，如按鈕、圖片、文本面板、矩形框等，可用這些控件進(jìn)行線框圖和流程圖的設(shè)計(jì)。 另外，你還可以載入已有的部件庫(kù)（*.rplib文件）和創(chuàng)建自己的部件庫(kù)。 4. 模塊面板 模塊是一種可以復(fù)用的特殊頁(yè)面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織模塊分類(lèi)層次。 5. 線框圖工作區(qū)（或叫頁(yè)面工作區(qū)） 線框圖工作區(qū)是你進(jìn)行原型設(shè)計(jì)的主要區(qū)域，在該區(qū)域中你可以設(shè)計(jì)線框圖、流程圖、自定義部件、模塊。 6. 頁(yè)面注釋和交互區(qū) 添加和管理

5、頁(yè)面級(jí)的注釋和交互。7. 控件交互面板 定義控件的交互，如：鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。 8. 控件注釋面板 對(duì)控件的功能進(jìn)行注釋說(shuō)明。四、登錄界面案例操作1).案例描述實(shí)現(xiàn)一個(gè)較為簡(jiǎn)單的登錄界面，輸入用戶名、密碼后，點(diǎn)擊登錄按鈕進(jìn)行登錄校驗(yàn)： 1. 如果未輸入用戶名或密碼，則提示“請(qǐng)輸入用戶名和密碼”，藍(lán)色字體； 2. 如果用戶名或密碼錯(cuò)誤，則提示“用戶名或密碼錯(cuò)誤”，紅色字體； 3. 如果用戶名和密碼都匹配，則提示“您好，【用戶名】”，黑色字體。 2) 實(shí)現(xiàn)步驟 步驟一、繪制線框圖1、打開(kāi)Axure軟件，新建一個(gè)RP文件； 2、拖動(dòng)控件面板中的控件到線框圖面板中，繪制登錄界面如下圖：圖4

6、-2 線框圖所用到的控件清單如下： 控件名 作用 文本內(nèi)容 標(biāo)識(shí)符 其它屬性 Rectangle 裝飾底板 底色：灰色 Text Panel 信息提示 默認(rèn)：登錄窗口 logInfo Text Panel 信息提示 用戶名： Text Panel 信息提示 密碼： Text Field 輸入用戶名 userName Text Field 輸入密碼 passWord Button 點(diǎn)擊登錄 登錄 submitButton 步驟二、設(shè)計(jì)控件交互 1. 選中登錄按鈕，在控件交互和注釋面板中鼠標(biāo)雙擊onClick事件:圖4-3 線框圖2. 在彈出的交互場(chǎng)景屬性對(duì)話框中，點(diǎn)擊“添加場(chǎng)景”這個(gè)鏈接； 圖4

7、-4 添加場(chǎng)景3. 在彈出的條件創(chuàng)建對(duì)話框中，添加條件如下： 圖4-5 創(chuàng)建對(duì)話框4. 回到交互場(chǎng)景屬性對(duì)話框中，Step 2中選擇動(dòng)作Set Variable and Widget value equal to Value，并點(diǎn)擊Step 3中的鏈接:圖4-6 選擇動(dòng)作5. 在彈出的“設(shè)置變量和控件值”對(duì)話框中，設(shè)置如下： 圖4-7 設(shè)置變量和控件值 點(diǎn)擊“Edit text”鏈接，輸入“請(qǐng)輸入用戶名或密碼”，并設(shè)置為藍(lán)色； 6、確定和關(guān)閉所有對(duì)話框，這時(shí)控件交互和注釋面板如下：圖4-8 注釋面板以上我們實(shí)現(xiàn)了第一個(gè)場(chǎng)景：如果未輸入用戶名或密碼，則提示“請(qǐng)輸入用戶名和密碼”，藍(lán)色字體； 接下

8、去，我們實(shí)現(xiàn)第2、3個(gè)場(chǎng)景，其步驟和實(shí)現(xiàn)場(chǎng)景1類(lèi)似，只是要注意各個(gè)場(chǎng)景之間是“If else”關(guān)系。最終控件面板上的場(chǎng)景、條件、動(dòng)作如下： 圖4-9 場(chǎng)景、條件、動(dòng)作步驟三、生成原型 1、點(diǎn)擊主菜單“Generate->Prototype(F5)”，選擇要生成的原型地址，確定后就可以在瀏覽器中查看原型了。2、輸入用戶名和密碼，點(diǎn)擊登錄按鈕，進(jìn)行原型體驗(yàn)。 圖4-10 原型體驗(yàn)五、技巧和提示 1、解決中文輸入法問(wèn)題 目前Axure對(duì)中文的一些輸入法支持得不好，搜狗拼音輸入法沒(méi)有辦法使用，用谷歌拼音問(wèn)題不大，但會(huì)強(qiáng)制轉(zhuǎn)為全角，需要人為點(diǎn)擊一下轉(zhuǎn)為半角。 2、超快速移動(dòng)工作區(qū) 當(dāng)設(shè)計(jì)的頁(yè)面畫(huà)面

9、變大時(shí)，為了選取不同位置的對(duì)象，必須經(jīng)常使用垂直與水平的滾動(dòng)條，這會(huì)使得選取對(duì)象的動(dòng)作變慢。請(qǐng)?jiān)囋囘@招：鼠標(biāo)光標(biāo)focus在Wireframe中，按住鍵盤(pán)的空格鍵，此時(shí)鼠標(biāo)光標(biāo)會(huì)切換成手狀，您可以用來(lái)抓著畫(huà)面任意滑動(dòng)，而且不會(huì)打亂任何對(duì)象的位置，輕松愉快。 3、穿透控件選取下層的控件 以鼠標(biāo)左鍵在對(duì)象上按住停留1秒鐘以上，放開(kāi)鼠標(biāo)左鍵再單擊下面的對(duì)象，可以穿透上層對(duì)象，選取到位于下層的對(duì)象 。4、引用Microsoft Office或其他軟件中的對(duì)象： 利用復(fù)制、粘貼功能，將其他應(yīng)用程序中如：PowerPoint, Excel, Visio, Photoshop 與Illustrator中的物

10、件，粘貼到Axure RP中。一般來(lái)說(shuō)，這些粘貼的對(duì)象會(huì)變成Wireframe中的圖形對(duì)象。反之亦然，也可以復(fù)制Axure中的對(duì)象或畫(huà)面，粘貼到其他應(yīng)用程序。 5、單選群組（Radio Button Group） 您可以一次選取多個(gè)Radio Button，按下鼠標(biāo)右鍵，并選擇“Edit Radio Button->Assign Radio Group”來(lái)設(shè)定Radio Button的群組關(guān)系。如此一來(lái)，當(dāng)這些Radio Button輸出到Prototype時(shí)，就會(huì)形成真正的單選用戶接口。 6、解除IE中的Active X 警告訊息 使用IE打開(kāi)在自己計(jì)算機(jī)里頭的HTML原型時(shí)，瀏覽器中

11、可能會(huì)出現(xiàn)Active X 警告訊息，想要暫時(shí)解除IE中的警告訊息，請(qǐng)點(diǎn)選IE瀏覽器出現(xiàn)的Active X警示訊息，接著選擇“允許被封鎖的內(nèi)容”，這樣就可以在IE瀏覽器上看到自己計(jì)算機(jī)里頭的HTML 原型了。 7、只要輸出必要的項(xiàng)目到規(guī)格書(shū)中 規(guī)格文件輸出時(shí)如果選擇輸出的項(xiàng)目太細(xì)，很有可能會(huì)產(chǎn)出一份好幾百頁(yè)的Word文件，難以閱讀。因此，輸出之前最好通過(guò)格式的設(shè)定將不需要的項(xiàng)目取消勾選，只保留有意義的部份。 8、默認(rèn)規(guī)格書(shū)標(biāo)題改成中文 將Axure設(shè)置格式的文件標(biāo)題改成中文，比如將Pages格式設(shè)定的 Section Header名稱“Pages”改成“軟件規(guī)劃說(shuō)明”，把“Page Tree”

12、改成 “界面列表”；或者把Screenshot格式設(shè)定的 Section Header名稱“User Interface”改成 “用戶畫(huà)面”。如此一來(lái)輸出成規(guī)格文件時(shí)，會(huì)更方便閱讀這些段落標(biāo)題。 9、撤銷(xiāo)操作 有時(shí)想對(duì)Axure的某個(gè)面板（如站點(diǎn)地圖面板或模塊面板）中的操作進(jìn)行恢復(fù)，只要在這個(gè)面板中點(diǎn)擊鼠標(biāo)（相當(dāng)于讓焦點(diǎn)進(jìn)入這個(gè)面板），然后按鍵盤(pán)的Ctrl+Z鍵，就可以對(duì)這個(gè)面板中進(jìn)行的操作進(jìn)行恢復(fù)。六、實(shí)驗(yàn)內(nèi)容 1. 使用Axure軟件設(shè)計(jì)一個(gè)教學(xué)信息管理系統(tǒng)的原型。原型擁有的基本界面包括：登錄界面(如圖4-12)、注冊(cè)界面(如圖4-13)、系統(tǒng)主界面(如圖4-14)、 信息查詢界面(如圖4

13、-15)、教學(xué)任務(wù)查詢(如圖4-16)，教學(xué)任務(wù)列表(如圖4-17,在Axure 的樹(shù)形框架的結(jié)構(gòu)如圖4-11所示。 圖4-11 總體樹(shù)形結(jié)構(gòu)圖4-12登錄界面 圖4-13注冊(cè)界面圖4-14統(tǒng)主界面圖4-15信息查詢圖4-16教學(xué)任務(wù)查詢圖4-17教學(xué)任務(wù)列表2.登錄頁(yè)面的實(shí)現(xiàn)過(guò)程 2.1使用Rounded Rectangle控件,畫(huà)出矩形框，在軟件的右側(cè)打開(kāi)點(diǎn)Formatting按鈕，設(shè)置矩形框的填充顏色，步驟如下：2.2用Rectangle控件畫(huà)一個(gè)矩形框?qū)懮螸OGO圖標(biāo)，在右側(cè)設(shè)置邊框顏色以及字體顏色2.3然后再用table控件畫(huà)表格，設(shè)置好相應(yīng)的用戶名以及密碼2.4使用Button控件畫(huà)按鈕，并且設(shè)置兩個(gè)控件的On Click方法3. 完成教學(xué)信息管理系統(tǒng)的界面原型設(shè)計(jì)，生成可演示的原型系統(tǒng)。4. 各小組安裝所需要開(kāi)發(fā)的系統(tǒng)為所做的需求分析內(nèi)容設(shè)計(jì)原型系統(tǒng)。原型系統(tǒng)檢查單被檢查系統(tǒng)：小組成員：檢查小組成員：序號(hào)檢查項(xiàng)得分注釋1原型系統(tǒng)的功能是否齊全？2界面功能是否清晰3原型界面系統(tǒng)是否介紹清楚？4原型控制是否合理？5原型系統(tǒng)是否都是可實(shí)現(xiàn)的？6系統(tǒng)功能是否符合邏輯？7是否每個(gè)功能都符合頁(yè)面系統(tǒng)設(shè)計(jì)？8功能連接冗余和