實驗 快速原型設(shè)計Axure的使用

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

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

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

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

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

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

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

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

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

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

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

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

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