Axure原型設(shè)計

1、實驗一、Axure快速原型設(shè)計一、實驗?zāi)康?、掌握軟件開發(fā)原型模型的概念。2、練習(xí)Axure的原型設(shè)計二、實驗器材1 .計算機一臺。2 . Axure工具軟件。三、Axure RP軟件介紹1 . Axure RPAxure RP可以讓桌面應(yīng)用軟件和Web的設(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)者與使用者的注意，讓用戶在軟件開始投入編程前就確認需求?？焖僭头≧apid 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)境的簡要說明：圖1 Axure RP工作環(huán)境1 .主菜單和工具欄 執(zhí)行常用操作，如文件打開、保存文件，格式化控件，自動生成原型和規(guī)格說明書等操作。2 . 站點地圖面板

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

5、顯示和隱藏等。8 .控件注釋面板對控件的功能進展注釋說明。四、登錄界面案例操作1) .案例描述實現(xiàn)一個較為簡單的登錄界面，輸入用戶名、密碼后，點擊登錄按鈕進展登錄校驗：1 .如果未輸入用戶名或密碼，如此提示“請輸入用戶名和密碼'，藍色字體；2 .如果用戶名或密碼錯誤，如此提示“用戶名或密碼錯誤''，紅色字體；3 .如果用戶名和密碼都匹配，如此提示“您好，【用戶名】"，黑色字體2）實現(xiàn)步驟步驟一、繪制線框圖1、打開Axure軟件，新建一個 R陟件；2、拖動控件面板中的控件到線框圖面板中，繪制登錄界面如如下圖：圖2 線框圖所用到的控件清單如下:控件名作用文本內(nèi)容標

6、識符其它屬性Rectangle裝飾底板底色：灰色Text Panel信息提示默認：登錄窗口logInfoText Panel信息提示用戶名：Text Panel信息提示密碼：Text Field輸入用戶名userNameText Field輸入密碼passWordButton點擊登錄登錄submitButton步驟二、設(shè)計控件交互1.選中登錄按鈕，在控件交互和注釋面板中鼠標雙擊onClick事件:Add cdH， Q草uuk L1-kOnriiekLabel fiLibmitBLittonIntfraicticiinsAnnotations - All Fields T登錄窗口/nnotaLi

7、ons a Interactions 圖3 線框圖2 .在彈出的一交互場景屬性I對話框中，點擊“添加場景”這個;圖4 添加場景3 .在彈出的一條件創(chuàng)建 取寸話框中，添加條件如下：Condition Builderof th m follow in Clear Alltest on wi dget / us er Mair 巾ttxt g ri ptiIardmi| | equals ralue才 tq.utls- vtlu4EB leseriti。孰£ teKl on widgel merName eQutl! ”or tOKt on wid<«t password&

8、quot;"圖5 創(chuàng)建對話框4,回到一交互場景屬性 時話框中，Step 2中選擇動作 一Set Variable and Widget value equal to Value II,并點擊 Step 3 中的：Interaction Case PropertiesStep 1 ； Description LaseAdd Conditioti (if neceEsary) J EdiL Ccrntdi 七十口史.Cl,電arPanel (s)000000000Step Z： Select ActionsToggle Visibility for (s)Move Panel (s)S吟

9、t Variable 曲d Widgti (s) equ虹 tu Value (s)Dp tn Link in Psrcikt FrsmtScroll to Ima辛 Map Regi onKnabl* Wid£»Ui)Disable Wi d群t(£)W&i t Time GGOtherStep 3： Edit the Actions description (click an underlined value to edit)：If txt on widget QEerNam守 匕quals 1r or tftwt cik widget pAssWor

10、dSet Yariwblc! and Widget value eqiual tsA-aJ口e圖6選擇動作5.在彈出的“設(shè)置變量和控件值對話框中，設(shè)置如下:CIest Alltext on. widget loglufo，電叩社 to f Uue, Ed、pt.Descripti onSet text 力n widget loginfo equal to 登錄窗口"Enter TextEnter and format teKt belww. To insert variables sur * and "|*. For example OnLcuAdVariableL The

11、 c inserted u,£i“ F&geHune.宋體-io - E E (H) J -請輸入用戶名或密碼圖7設(shè)置變量和控件值點擊“Edit text，輸入”請輸入用戶名或密碼，并設(shè)置為藍色;6、確定和關(guān)閉所有對話框，這時控件交互和注釋面板如下:FwtiHitr «nd L»b«l1 EUtHT*®UttonInWraction*Jkii Idi t Ditlelt cmHh>me j區(qū)£林1仙卜I-*g*】 口1 L«»L da. L Ul-iifu-ii mquaIs " df L

12、電&L dd .上看it 0 f 1年”占此的11 "J s*t t*Kt 皿 loclaf® to .請粕入PS 戶名或強型”Annatstkons - All_Fi>elds- TGe缸 011irrt口i r噎EpMfficationStatus圖8注釋面板以上我們實現(xiàn)了第一個場景：如果未輸入用戶名或密碼，如此提示“請輸入用戶名和密碼'，藍色字體；接下去，我們實現(xiàn)第 2、3個場景，其步驟和實現(xiàn)場景 1類似，只是要注意各個場景之間是“If else"關(guān)系。最終控件面板上的場景、條件、動作如下：圖9場景、條件、動作E包 Variable a

13、nd Widget ValuesSet the following：步驟三、生成原型1、點擊主菜單“Generate->Prototype（F5）,選擇要生成的原型地址，確定后就可以在瀏覽器中查看原型了。2、輸入用戶名和密碼，點擊登錄按鈕，進展原型體驗。- Windows Ertlernet Ejipjorer曲|q CWrsWsgrW的 4flM 、SSP T皿靜網(wǎng)me今* E3 - -圖皿麗圖10 原型體驗五、技巧和提示1、解決中文輸入法問題目前Axure對中文的一些輸入法支持得不好，搜狗拼音輸入法沒有方法使用，用谷歌拼音問題不大，但會強制轉(zhuǎn)為全角，需要人為點擊一下轉(zhuǎn)為半角。2、超快

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

15、llustrator 中的物件，粘貼到 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 警

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

17、der名稱"Pages"改成"軟件規(guī)劃說明"，把" Page Tree"改成"界面列表"；或者把Screenshot格式設(shè)定的 Section Header名稱"User Interface "改成"用戶畫面"。如此一來輸出成規(guī)格文件時，會更方便閱讀這些段落標題。9、撤銷操作有時想對 Axure的某個面板如站點地圖面板或模塊面板中的操作進展恢復(fù)，只要在這個面板中點擊鼠標相當于讓焦點進入這個面板，然后按鍵盤的 一Ctrl+Z犍，就可以對 這個面板中進展的操作進展恢復(fù)。六、實驗內(nèi)

18、容1. 使用Axure軟件設(shè)計一個教學(xué)信息管理系統(tǒng)的原型。原型擁有的根本界面 包括：登錄界面（如圖4-12）、注冊界面（如圖4-13）、系統(tǒng)主界面（如圖4-14）、 信息查詢界面（如圖4-15）、教學(xué)任務(wù)查詢（如圖4-16），教學(xué)任務(wù)列表（如圖4-17, 在Axure的樹形框架的結(jié)構(gòu)如圖4-11所示。圖11總體樹形結(jié)構(gòu)登錄五面logo圖標底部圖標log。圖標用戶名:enter textenter text,空日確認:enter text.圖13注冊界面jmes inrC70i02ftE flwra圖14統(tǒng)主界面花日：Ar Icxl運.*41:MltH tttttm拓,：orrifr 2精時:4fltW tlKt.T回百益圻布F期行市人等法。有強支若M：|口州打4