AxureRP核心培訓(xùn)教程

目錄基礎(chǔ)知識(shí)軟件介紹工具欄流程圖交互設(shè)計(jì)基礎(chǔ)交互設(shè)計(jì)動(dòng)態(tài)面板高級交互設(shè)計(jì)高級交互設(shè)計(jì)實(shí)例生成文檔生成HTML生成規(guī)格說明書生成CHM文檔AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第1頁。為什么要進(jìn)行原型設(shè)計(jì)？大約66%的軟件開發(fā)失敗或虧損的前三大原因?yàn)椋喝狈κ褂谜叩膮⑴c；需求或規(guī)格不完整；需求或規(guī)格變更；將文字性文檔轉(zhuǎn)變?yōu)榛?dòng)性的可視畫面，讓客戶在投入編程之前進(jìn)行需求確認(rèn)。原型是一種以用戶/市場為中心的技術(shù)，是個(gè)高效的簡化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的有效方法。全球有上萬家公司使用AxureRP做原型，包括淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)取皼]有比制作prototype更易取得使用者界面與特殊功能可用性上的一致性了。prototype不只可確認(rèn)需求，它更可贏得顧客的心?！?/p>

——阿倫M.戴維斯AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第2頁。軟件介紹AxureRPPro是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個(gè)快速的原型工具，主要是針對負(fù)責(zé)定義需求、定義規(guī)格、設(shè)計(jì)功能、設(shè)計(jì)界面的專家。AXURE改變我們的工作方式：決策層：

直觀的理解系統(tǒng)行為，幫助決策產(chǎn)品經(jīng)理：

提高了各崗位間的溝通效率，降低溝通成本，保證項(xiàng)目進(jìn)程需求人員：

更加有效的與用戶溝通，減少誤解，保證需求質(zhì)量設(shè)計(jì)開發(fā)：

更加有效的協(xié)作溝通，降低溝通成本，減少誤解，避免返工用戶：

更加直觀的感受系統(tǒng)，盡早反饋用戶的需求與系統(tǒng)的不足。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第3頁。Axure工作環(huán)境Axure工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡單鏈接和高級交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔；AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第4頁。站點(diǎn)地圖主菜單和工具欄界面控件（界面工具集）頁面注釋與頁面交互模塊區(qū)域物件注釋互動(dòng)設(shè)計(jì)Axure5.5的工作環(huán)境Axure的工作環(huán)境AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第5頁。站點(diǎn)地圖主菜單和工具欄界面控件（界面工具集）頁面注釋與頁面交互模塊區(qū)域物件注釋互動(dòng)設(shè)計(jì)Axure7的工作環(huán)境Axure的工作環(huán)境AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第6頁。主菜單和工具欄（MainMenu&Toolbar）：執(zhí)行常用操作，如文件打開、保存、格式化控件、輸出原型、輸出規(guī)格等操作。Axure的工作環(huán)境—主菜單和工具欄AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第7頁。站點(diǎn)地圖（SitemapPane）頁面的添加、刪除和重命名頁面組織排序打開頁面進(jìn)行設(shè)計(jì)Axure的工作環(huán)境—站點(diǎn)地圖AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第8頁。在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級。明確界面框架后，接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計(jì)的頁面。頁面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁面，可以添加、刪除及對頁面層次進(jìn)行重新組織。點(diǎn)擊面板工具欄上的“AddChildPage”按鈕可以添加一個(gè)頁面，點(diǎn)擊“DeletePage”按鈕可以刪除一個(gè)頁面。右鍵單擊選擇“RenamePage”菜單項(xiàng)可對頁面進(jìn)行重命名。Axure的工作環(huán)境—站點(diǎn)地圖AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第9頁。Axure的工作環(huán)境—站點(diǎn)地圖在頁面導(dǎo)航面板中，通過拖拉頁面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁面的位置和重新組織頁面的層次。打開頁面進(jìn)行設(shè)計(jì)在頁面導(dǎo)航面板中，鼠標(biāo)雙擊頁面將會(huì)在線框面板中打開頁面以進(jìn)行線框圖設(shè)計(jì)。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第10頁。添加控件從組件中拖動(dòng)一個(gè)控件到界面中，就可以添加一個(gè)控制?？丶梢詮囊粋€(gè)界面中拷貝到另外一個(gè)界面中。編輯控件鼠標(biāo)雙擊：雙擊控件，可以對控件最常用的屬性進(jìn)行編輯工具欄：點(diǎn)擊工具欄上的按鈕可以編輯控件的文本字體、背景色、邊框等；右鍵菜單：右擊控件可以選擇編輯控件的一些特定屬性，不同控件屬性也不同?？丶╓idgetsPane）Axure的工作環(huán)境—控件AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第11頁?？丶怯糜谠O(shè)計(jì)線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。Axure的工作環(huán)境—控件AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第12頁。Axure的工作環(huán)境—控件添加控件從控件面板中拖動(dòng)一個(gè)控件到線框圖面板中，就可以添加一個(gè)控件；控件可以進(jìn)行拷貝(Ctrl+C)和粘貼(Ctrl+V)。操作控件選中控件后，可以拖拉移動(dòng)控件和改變控件的大小；可通過控件右鍵菜單進(jìn)行組合、排序、對齊、分配和鎖定控件。編輯控件風(fēng)格和屬性鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對控件的最常用屬性進(jìn)行編輯。工具欄：點(diǎn)擊工具欄上的按鈕，編輯控件的文本字體、背景色、邊框等。右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第13頁。模塊面板（MasterPane）模塊是可以重復(fù)使用的特殊頁面，如頁首(Header)；只要修改模塊，引用這個(gè)模塊的所有實(shí)例也會(huì)隨即全部跟著變化；模塊面板可利用文件夾來組織模塊，并且可以用拖拉或工具欄的方式排列模塊；在頁面中拖入模塊后，模塊對象回應(yīng)淡紅色遮罩，在頁面中模塊是不可修改的；修改模塊中的內(nèi)容只能在模塊頁面修改。Axure的工作環(huán)境—模塊面板AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第14頁。3.Axure的工作環(huán)境—注釋注釋（Annotations）可以為控件添加注釋，以說明控件的功能。添加注釋在線框圖中選擇控件，然后在控件注釋和交互面板中編輯字段中的值，即可為控件添加注釋。面板頂部的Label字段是為控件添加一個(gè)標(biāo)識(shí)符。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第15頁。Axure的工作環(huán)境—自定義字段自定義字段（Fields）通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點(diǎn)擊面板上Annotations頭部的“CustommizeFieldsandViews”，彈出的CustommizeFieldsand

Views對話框，可以添加、刪除、修改、排序注釋字段。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第16頁。腳注（Footnotes）在控件上添加注釋后，控件的右上角會(huì)顯示一個(gè)黃色方塊，稱為腳注。腳注號(hào)碼可以增大和減小，可通過控件右鍵菜單或工具欄上的進(jìn)行修改。Axure的工作環(huán)境—自定義字段AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第17頁。管理頁面?zhèn)渥⒘硗猓梢宰远x頁面?zhèn)渥?，為不同的人提供不同的備注，以滿足不同需要。比如可以新增“測試用例”“操作說明”等不同類別的頁面?zhèn)渥?。Axure的工作環(huán)境—頁面?zhèn)渥㈨撁鎮(zhèn)渥ⅲ≒ageNotes）頁面?zhèn)渥⒖墒菍撁孢M(jìn)行描述和說明。添加頁面?zhèn)渥⒃诰€框圖下面的Pagenotes面板中可以添加頁面?zhèn)渥?nèi)容AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第18頁。Axure的工作環(huán)境—交互設(shè)計(jì)控件交互面板（InteractionsPane）用于定義線框圖中控件的行為，包含定義鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行?？梢远x控件的（Events）、場景（Cases）和動(dòng)作（Actions）：交互事件：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut；場景：每個(gè)事件可以包含多個(gè)場景，場景也就是事件觸發(fā)后要滿足的條件；動(dòng)作每個(gè)場景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第19頁。目錄基礎(chǔ)知識(shí)軟件介紹工具欄流程圖交互設(shè)計(jì)基礎(chǔ)交互設(shè)計(jì)動(dòng)態(tài)面板高級交互設(shè)計(jì)高級交互設(shè)計(jì)實(shí)例生成文檔生成HTML生成規(guī)格說明書生成CHM文檔AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第20頁。基礎(chǔ)交互設(shè)計(jì)通過定義控件的行為，可以在生成的原型中打開鏈接、彈出頁面、動(dòng)態(tài)顯示和隱藏等?？梢远x控件的（Events）、場景（Cases）和動(dòng)作（Actions）：交互事件：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut；場景：每個(gè)事件可以包含多個(gè)場景，場景也就是事件觸發(fā)后要滿足的條件；動(dòng)作每個(gè)場景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第21頁。AxureRP支持的事件如下：OnClick：鼠標(biāo)點(diǎn)擊

OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對象上OnMouseOut：鼠標(biāo)的指針移動(dòng)出對象外OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)）OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài)（失去焦點(diǎn)）OnPageLoad：頁面或模塊載入大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，頁面加載或模塊被載入時(shí)則發(fā)生OnPageLoad基礎(chǔ)交互設(shè)計(jì)—事件事件、場景和動(dòng)作的關(guān)系A(chǔ)xureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第22頁?；A(chǔ)交互設(shè)計(jì)—定義鏈接下列步驟說明如何在按鈕控件上定義一個(gè)鏈接：Step1：拖拉一個(gè)按鈕控件到線框圖中，鼠標(biāo)雙擊“OnClick”事件，出現(xiàn)“InteractionCaseProperties”對話窗，在這個(gè)對話框中可以選擇要執(zhí)行的動(dòng)作；Step2：勾選“OpenLinkinCurrentWindow”動(dòng)作。Step3：點(diǎn)擊“Link”，在彈出的LinkProperties對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第23頁?；A(chǔ)交互設(shè)計(jì)—?jiǎng)幼鞒撕唵蔚逆溄又猓珹xure還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在觸發(fā)事件的場景中執(zhí)行。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第24頁。OpenLinkinCurrentWindow：在當(dāng)前窗口打開一個(gè)頁面OpenLinkinPopupWindow：在彈出的窗口中打開一個(gè)頁面OpenLinkinParentWindow：在父窗口中打開一個(gè)頁面CloseCurrentWindow：關(guān)閉當(dāng)前窗口OpenLinkinFrame：在框架中打開一個(gè)頁面SetPanelstate(s)toState(s)：為動(dòng)態(tài)面板設(shè)定要顯示的狀態(tài)ShowPanel(s)：顯示動(dòng)態(tài)面板HidePanel(s)：隱藏動(dòng)態(tài)面板ToggleVisibilityforPanel(s)：切換動(dòng)態(tài)面板的顯示狀態(tài)（顯示/隱藏）MovePanel(s)：根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動(dòng)動(dòng)態(tài)面板SetVariableandWidgetvalue(s)equaltoValue(s)：設(shè)定變量值或控件值OpenLinkinParentFrame：在父頁面的嵌框架中打開一個(gè)頁面ScrolltoImageMapRegion：滾動(dòng)頁面到ImageMap所在位置EnableWidget(s)：把對象狀態(tài)變成可用狀態(tài)DisableWidget(s)：把對象狀態(tài)變成不可用狀態(tài)WaitTime(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作Other：顯示動(dòng)作的文字說明基礎(chǔ)交互設(shè)計(jì)—?jiǎng)幼?Axure所支持的動(dòng)作：AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第25頁。動(dòng)態(tài)面板包含多個(gè)狀態(tài)，每個(gè)狀態(tài)可包含一系列控件。任何時(shí)候都只有一個(gè)狀態(tài)時(shí)可見的，一般都是默認(rèn)第一個(gè)狀態(tài)可見；動(dòng)態(tài)面板的狀態(tài)可以隱藏、顯示和改變；將動(dòng)態(tài)面板拖到界面后，可以根據(jù)需要改變面板大小、位置使用動(dòng)態(tài)面板的情況：頁面中存某塊內(nèi)容在開始不顯示后來顯示的情況；在開始頁面加載時(shí)不顯示后來顯示；Tab頁切換；某塊內(nèi)容隨著事件的不同顯示位置不同的情況動(dòng)態(tài)面板動(dòng)態(tài)面板控件可以讓你的原型中實(shí)現(xiàn)高級的動(dòng)態(tài)交互功能。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第26頁。編輯動(dòng)態(tài)面板右擊動(dòng)態(tài)面板，選擇“編輯動(dòng)態(tài)面板”→“管理動(dòng)態(tài)狀態(tài)”在對話框中可以創(chuàng)建、重命名、重新排序、刪除、和編輯動(dòng)態(tài)面板的狀態(tài)動(dòng)態(tài)面板AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第27頁。設(shè)置動(dòng)態(tài)面板標(biāo)簽為“實(shí)例”，并新增三個(gè)狀態(tài)：tab1、tab2、tab3，然后點(diǎn)擊“編輯所有狀態(tài)”動(dòng)態(tài)面板—編輯AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第28頁。在tab1頁面中設(shè)置tab1、tab2、tab3三個(gè)矩形框，并且為了突出效果可以設(shè)置tab1矩形框的顏色為白色（表示選中的是tab1狀態(tài)），其他兩個(gè)為灰色。動(dòng)態(tài)面板—編輯狀態(tài)AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第29頁。設(shè)置tab1、tab2、tab3三個(gè)矩形框的OnClick事件，以tab1為例說明：（1）選擇tab1矩形框，點(diǎn)擊交互中的OnClick事件，再選擇“設(shè)置動(dòng)態(tài)面板的狀態(tài)轉(zhuǎn)換”，然后選擇第三步的“Panelstatetostate”；動(dòng)態(tài)面板—添加事件AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第30頁。（2）選擇第一步中的“設(shè)置實(shí)例的狀態(tài)變化”，然后點(diǎn)擊第二部中的tab1動(dòng)態(tài)面板—添加事件AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第31頁。（3）選擇一個(gè)動(dòng)態(tài)面板tab1，點(diǎn)擊確定完成事件注明：tab2、tab3矩形框事件如同tab1，只是選擇面板狀態(tài)時(shí)選擇對應(yīng)得狀態(tài)，tab2選擇tab2狀態(tài)、tab3選擇tab3狀態(tài)動(dòng)態(tài)面板—添加事件（4）按照以上步驟，完成tab2、tab3狀態(tài)頁面操作AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第32頁。高級交互設(shè)計(jì)但如果需要更強(qiáng)大、更高保真度的原型，就需要邏輯條件。增加條件可以是基于原型中控件上輸入的值，如復(fù)選框的選擇值、文本框中的文本等。條件也可以是基于變量值。一個(gè)觸發(fā)事件可以包含有多個(gè)場景，根據(jù)條件執(zhí)行流程或互動(dòng)。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第33頁。高級交互設(shè)計(jì)Step1：首先要在交互面板中為某個(gè)事件添加一個(gè)場景（case）。在InteractionCaseProperties對話框中的Step1中點(diǎn)擊―AddCondition‖這個(gè)鏈接。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第34頁。高級交互設(shè)計(jì)Step2：這時(shí)會(huì)打開一個(gè)ConditionBuilder對話框，創(chuàng)建邏輯條件。在ConditionBuilder對話框中，可以添加多個(gè)邏輯條件。如果要求所有條件都需要滿足，則在Satisfy下拉列表框中選擇all；如果只要滿足其中一個(gè)條件可選擇為any。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第35頁。高級交互設(shè)計(jì)Step3：下一步需要選擇當(dāng)條件滿足時(shí)要執(zhí)行的動(dòng)作。點(diǎn)擊確定，完成交互設(shè)計(jì)AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第36頁。高級交互設(shè)計(jì)實(shí)例系統(tǒng)登陸界面這是一個(gè)簡單的登陸界面，輸入用戶名、密碼后，點(diǎn)擊登陸按鈕進(jìn)行登陸校驗(yàn)：1.如果未輸入用戶名或密碼，則提示“請輸入用戶名和密碼”，藍(lán)色字體；2.如果用戶名或密碼錯(cuò)誤，則提示“用戶名或密碼錯(cuò)誤”，紅色字體；3.如果用戶名和密碼都匹配，則提示“您好，【用戶名】”，黑色字體。

AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第37頁。高級交互設(shè)計(jì)實(shí)例步驟一、繪制線框圖1、打開Axure軟件，新建一個(gè)RP文件；2、拖動(dòng)控件面板中的控件到線框圖面板中，繪制登陸界面如下圖：所用到的控件清單如下：控件名作用文本內(nèi)容標(biāo)識(shí)符其它屬性Rectangle控件底色

底色：灰色TextPanel顯示信息提示

logInfo

TextPanel用戶名用戶名：

TextPanel密碼密碼：

TextField輸入用戶名

userName

TextField輸入密碼

passWord

Button點(diǎn)擊登錄登陸submitButton

AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第38頁。高級交互設(shè)計(jì)實(shí)例步驟二、設(shè)計(jì)控件交互1、選中登陸按鈕，在控件交互和注釋面板中鼠標(biāo)雙擊onClick事件；AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第39頁。高級交互設(shè)計(jì)實(shí)例2、在彈出的“交互場景屬性”對話框中，點(diǎn)擊“添加場景…”這個(gè)鏈接AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第40頁。高級交互設(shè)計(jì)實(shí)例3、在彈出的“條件創(chuàng)建”對話框中，添加條件如下：AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第41頁。高級交互設(shè)計(jì)實(shí)例4、回到“交互場景屬性”對話框中，Step2中選擇動(dòng)作“SetVariableandWidgetvalueequaltoValue”，并點(diǎn)擊Step3中的鏈接；AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第42頁。高級交互設(shè)計(jì)實(shí)例5、在彈出的“設(shè)置變量和控件值”對話框中，設(shè)置如下：點(diǎn)擊Edittext…鏈接，輸入“請輸入用戶名或密碼”，并設(shè)置為藍(lán)色；AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第43頁。高級交互設(shè)計(jì)實(shí)例6、確定和關(guān)閉所有對話框，這時(shí)控件交互和注釋面板如下：以上我們實(shí)現(xiàn)了第一個(gè)場景：如果未輸入用戶名或密碼，則提示“請輸入用戶名和密碼”，藍(lán)色字體；AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第44頁。高級交互設(shè)計(jì)實(shí)例仿照場景1的操作，實(shí)現(xiàn)第2、3個(gè)場景，最終控件面板上的場景、條件、動(dòng)作如下：完成以上操作，即實(shí)現(xiàn)了系統(tǒng)登錄的設(shè)置。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第45頁。目錄基礎(chǔ)知識(shí)軟件介紹工具欄流程圖交互設(shè)計(jì)基礎(chǔ)交互設(shè)計(jì)動(dòng)態(tài)面板高級交互設(shè)計(jì)高級交互設(shè)計(jì)實(shí)例生成文檔生成HTML生成規(guī)格說明書生成CHM文檔AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第46頁。在Axure中設(shè)計(jì)了線框圖并定義了交互之后，就可以產(chǎn)生一個(gè)可以互動(dòng)的、基于瀏覽器的原型了。Axure原型是一些HTML和JavaScript文件，可以在IE、Chrome、Mozilla、Firefox瀏覽器中執(zhí)行。點(diǎn)擊主菜單“Generate->Prototype”或工具欄上的Prototype按鈕，可以配置和生成原型，在打開的ConfigureHTMLPrototype對話框中，可以對原型進(jìn)行配置。生成HTMLAxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第47頁。HTML原型的界面可分成三個(gè)區(qū)域：左側(cè):是一個(gè)頁面導(dǎo)航列表，以層級形式展示原型中頁面。中間:顯示線框圖和流程圖，線框圖可以按照所設(shè)計(jì)的交互進(jìn)行互動(dòng)。底部:顯示當(dāng)前頁面的備注說明，即頁面?zhèn)渥ⅰg覽和操作HTML原型AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第48頁。設(shè)計(jì)完原型后，就可以輸出Word格式的規(guī)格說明書；生成的規(guī)格說明書，Axure會(huì)自動(dòng)按照線框圖的文字和插圖，按照順序生成到Word文檔中。生成規(guī)格說明書AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第49頁。瀏覽規(guī)格說明書AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第50頁。CHM文件通常表示幫助文檔，現(xiàn)在網(wǎng)絡(luò)上很多電子書籍都被制作成CHM格式。生成CHM文檔在生成HTML原型文件的過程中，點(diǎn)擊“發(fā)布”選項(xiàng)，并選中“創(chuàng)建HTML幫助文件”復(fù)選框，即可生成CHM文檔。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第51頁。謝謝！AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第52頁。入門篇第一章介紹以工具欄工具(widgets)繪制示意圖(Wireframe)第二章流程圖（FlowDiagrams）撰寫網(wǎng)頁說明(PageNotes)第三章高級交互設(shè)計(jì)（RichInteraction）第四章實(shí)例AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第53頁。第一章介紹第1節(jié)認(rèn)識(shí)AxureRP第2節(jié)線框圖及其注釋第3節(jié)基本交互設(shè)計(jì)第4節(jié)使用模塊（Master）第5節(jié)HTML原型第6節(jié)輸出規(guī)格說明AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第54頁。入門篇第一章軟件介紹第1節(jié)

認(rèn)識(shí)AxureRP1.AxureRPAxure的發(fā)音是“Ack-sure”，RP則是“RapidPrototyping”的縮寫。AxureRPPro是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個(gè)快速的原型工具，主要是針對負(fù)責(zé)定義需求、定義規(guī)格、設(shè)計(jì)功能、設(shè)計(jì)界面的專家，包括用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、業(yè)務(wù)分析師、信息架構(gòu)師、可用性專家和產(chǎn)品經(jīng)理。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第55頁。Axure使原型設(shè)計(jì)及和客戶的交流方式發(fā)生了變革：進(jìn)行更加高效的設(shè)計(jì)；讓你體驗(yàn)動(dòng)態(tài)的原型；更加清晰的交流想法；Axure能讓你快速的進(jìn)行線框圖和原型的設(shè)計(jì)，讓相關(guān)人員對你的設(shè)計(jì)進(jìn)行體驗(yàn)和驗(yàn)證，向用戶進(jìn)行演示、溝通交流以確認(rèn)用戶需求，并能自動(dòng)生成規(guī)格說明文檔。另外，Axure還能讓團(tuán)隊(duì)成員進(jìn)行多人協(xié)同設(shè)計(jì)，并對設(shè)計(jì)進(jìn)行方案版本控制管理。2.原型的作用和好處

制作Prototype是個(gè)有效的簡化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫面，如此更能抓住利益相關(guān)者與使用者的注意，讓用戶在軟件開始投入編程前就確認(rèn)需求?？焖僭头ǎ≧apidPrototyping）是一種有效且高效的以用戶為中心（User-CenteredDesign）的技術(shù)，可以幫助用戶體驗(yàn)專家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財(cái)富1000大的公司和重要機(jī)構(gòu)在使用AxureRP，國內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第56頁。3、Axure的工作環(huán)境Axure的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡單鏈接和高級交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。以下是對AxureRP工作環(huán)境的簡要說明：AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第57頁。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第58頁。主菜單和工具欄（MainMenu&Toolbar）執(zhí)行常用操作，如文件打開、保存、格式化控件、輸出原型、輸出規(guī)格等操作。頁面導(dǎo)航板（SitemapPane）對所設(shè)計(jì)的頁面進(jìn)行添加、刪除、重命名和組織。控件面板（WidgetsPane）該面板中有線框圖控件和流程圖控件，用這些控件進(jìn)行線框圖和流程圖的設(shè)計(jì)。模塊面板（MastersPane）模塊是一種可以復(fù)用的特殊頁面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織。線框圖面板（WireframePane）在線框圖面板中可以進(jìn)行頁面線框圖的設(shè)計(jì)，線框圖面板也就是進(jìn)行頁面設(shè)計(jì)的工作區(qū)?？丶换ッ姘澹↖nteractionsPane）定義控件的交互，如：鏈接、彈出、動(dòng)態(tài)顯示和隱藏等?？丶⑨屆姘澹ˋnnotationsPane）對控件進(jìn)行注釋定義和對控件的功能進(jìn)行說明。頁面交互和注釋面板（PagesNotes&PageInteractionsPane）添加和管理頁面的注釋和交互。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第59頁。第2節(jié)線框圖及其注釋頁面導(dǎo)航面板（Sitemap）在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級。明確界面框架后，接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計(jì)的頁面。頁面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁面，可以添加、刪除及對頁面層次進(jìn)行重新組織。頁面的添加、刪除和重命名點(diǎn)擊面板工具欄上的“AddChildPage”按鈕可以添加一個(gè)頁面，點(diǎn)擊“DeletePage”按鈕可以刪除一個(gè)頁面。右鍵單擊選擇“RenamePage”菜單項(xiàng)可對頁面進(jìn)行重命名。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第60頁。頁面組織排序在頁面導(dǎo)航面板中，通過拖拉頁面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁面的位置和重新組織頁面的層次。打開頁面進(jìn)行設(shè)計(jì)在頁面導(dǎo)航面板中，鼠標(biāo)雙擊頁面將會(huì)在線框面板中打開頁面以進(jìn)行線框圖設(shè)計(jì)。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第61頁。2.

控件（Widgets）控件是用于設(shè)計(jì)線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第62頁。添加控件從控件面板中拖動(dòng)一個(gè)控件到線框圖面板中，就可以添加一個(gè)控件?？丶梢詮囊粋€(gè)線框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個(gè)線框圖中。操作控件添加控件后，在線框圖中點(diǎn)選該控件，然后可以拖拉移動(dòng)控件和改變控件的大小，還可以一次同時(shí)對多個(gè)控件進(jìn)行選擇、移動(dòng)、改變尺寸。另外，還可以組合、排序、對齊、分配和鎖定控件。這些操作可通過控件右鍵菜單中進(jìn)行，也可在Object工具欄上的按鈕進(jìn)行。編輯控件風(fēng)格和屬性有多種方法可以編輯控件的風(fēng)格和屬性：鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對控件的最常用屬性進(jìn)行編輯。例如，雙擊一個(gè)圖片控件可以導(dǎo)入一張圖片；雙擊一個(gè)下拉列表或列表框控件可以編輯列表項(xiàng)。工具欄：點(diǎn)擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第63頁。3.注釋（Annotations）可以為控件添加注釋，以說明控件的功能。添加注釋在線框圖中選擇控件，然后在控件注釋和交互（AnnotationsandInteractions）面板中編輯字段中的值，即可為控件添加注釋。面板頂部的Label字段是為控件添加一個(gè)標(biāo)識(shí)符。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第64頁。自定義字段（Fields）通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點(diǎn)擊面板上Annotations頭部的“CustommizeFieldsandViews”然后在彈出的CustommizeFieldsand，Views對話框中可以添加、刪除、修改、排序注釋字段。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第65頁。腳注（Footnotes）在控件上添加注釋后，控件的右上角會(huì)顯示一個(gè)黃色方塊，稱為腳注。腳注號(hào)碼可以增大和減小，可通過控件右鍵菜單或工具欄上的進(jìn)行修改。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第66頁。4.頁面?zhèn)渥ⅲ≒ageNotes）頁面?zhèn)渥⒖墒菍撁孢M(jìn)行描述和說明。添加頁面?zhèn)渥⒃诰€框圖下面的Pagenotes面板中可以添加頁面?zhèn)渥?nèi)容。管理頁面?zhèn)渥⒘硗?，可以自定義頁面?zhèn)渥?，為不同的人提供不同的備注，以滿足不同需要。比如可以新增“測試用例”“操作說明”等不同類別的頁面?zhèn)渥ⅰxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第67頁。第3節(jié)基本交互設(shè)計(jì)控件的交互控件交互面板用于定義線框圖中控件的行為，包含定義簡單的鏈接和復(fù)雜的RIA行為，所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行。在控件交互面板中可以定義控件的交互，交互事件（Events）、場景（Cases）和動(dòng)作（Actions）組成：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut；每個(gè)事件可以包含多個(gè)場景，場景也就是事件觸發(fā)后要滿足的條件；每個(gè)場景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第68頁。以下是AxureRP支持的事件如下：OnClick：鼠標(biāo)點(diǎn)擊

OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對象上OnMouseOut：鼠標(biāo)的指針移動(dòng)出對象外OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)）OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài)（失去焦點(diǎn)）OnPageLoad：頁面或模塊載入大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，一些特殊的控件可觸發(fā)的事件有些不同：按鈕控件只有OnClick

單選框和復(fù)選框則具有OnFocus、OnLostFocus文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus頁面加載或模塊被載入時(shí)則發(fā)生OnPageLoad事件、場景和動(dòng)作的關(guān)系A(chǔ)xureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第69頁。2、定義鏈接下列步驟說明如何在按鈕控件上定義一個(gè)鏈接：1.首先，拖拉一個(gè)按鈕控件到線框圖中，并選擇這個(gè)按鈕；2.然后，控件交互面板中鼠標(biāo)雙擊“OnClick”這個(gè)事件，這時(shí)會(huì)出現(xiàn)“InteractionCaseProperties”對話窗，在這個(gè)對話框中可以選擇要執(zhí)行的動(dòng)作；3.在“Step2”中，勾選“OpenLinkinCurrentWindow”動(dòng)作。4.在“Step3”中，點(diǎn)擊“Link”，在彈出的LinkProperties對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第70頁。除了上面的步驟，加入一個(gè)鏈接的最快的方法是單擊控件交互面板頂部的“QuickLink”，在彈出的LinkProperties對話框中選擇要鏈接的頁面。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第71頁。3.設(shè)置動(dòng)作除了簡單的鏈接之外，Axure還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在任何觸發(fā)事件的場景中執(zhí)行。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第72頁。以下是Axure所支持的動(dòng)作：OpenLinkinCurrentWindow：在當(dāng)前窗口打開一個(gè)頁面OpenLinkinPopupWindow：在彈出的窗口中打開一個(gè)頁面OpenLinkinParentWindow：在父窗口中打開一個(gè)頁面CloseCurrentWindow：關(guān)閉當(dāng)前窗口OpenLinkinFrame：在框架中打開一個(gè)頁面SetPanelstate(s)toState(s)：為動(dòng)態(tài)面板設(shè)定要顯示的狀態(tài)ShowPanel(s)：顯示動(dòng)態(tài)面板HidePanel(s)：隱藏動(dòng)態(tài)面板ToggleVisibilityforPanel(s)：切換動(dòng)態(tài)面板的顯示狀態(tài)（顯示/隱藏）MovePanel(s)：根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動(dòng)動(dòng)態(tài)面板SetVariableandWidgetvalue(s)equaltoValue(s)：設(shè)定變量值或控件值OpenLinkinParentFrame：在父頁面的嵌框架中打開一個(gè)頁面ScrolltoImageMapRegion：滾動(dòng)頁面到ImageMap所在位置EnableWidget(s)：把對象狀態(tài)變成可用狀態(tài)DisableWidget(s)：把對象狀態(tài)變成不可用狀態(tài)WaitTime(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作Other：顯示動(dòng)作的文字說明AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第73頁。4.多個(gè)場景（條件）一個(gè)觸發(fā)事件可以包含有多個(gè)場景，根據(jù)條件執(zhí)行流程或互動(dòng)。AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第74頁。5.頁面上的事件:OnPageLoadAxure支持一個(gè)頁面層級的觸發(fā)事件：OnPageLoad，這個(gè)事件在原型載入頁面時(shí)觸發(fā)。頁面OnPageLoad事件在頁面?zhèn)渥⒚姘逯械腎nteractions子面板中定義，OnPageLoad為事件添加場景的方式與控件事件相同AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第75頁。實(shí)例-打開關(guān)閉彈出層點(diǎn)擊打開彈出層彈出層顯示點(diǎn)擊彈出層右上角的關(guān)閉，即可關(guān)閉彈出層AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第76頁。實(shí)例—打開關(guān)閉層實(shí)例描述：打開/關(guān)閉設(shè)置切換設(shè)置區(qū)域顯示與隱藏產(chǎn)品列表位置移動(dòng)AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第77頁。實(shí)例—Tab切換標(biāo)簽點(diǎn)擊Tab標(biāo)簽進(jìn)行層切換AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第78頁。實(shí)例--記住用戶的輸入內(nèi)容并顯示出來實(shí)例描述：不輸入內(nèi)容點(diǎn)提交會(huì)顯示提示語設(shè)置區(qū)域顯示與隱藏輸入內(nèi)容提交會(huì)顯示輸入內(nèi)容AxureRP核心培訓(xùn)教程全文共90頁，當(dāng)前為第79頁。實(shí)例—用戶登錄實(shí)例描述：用戶名或密碼為空，提示用戶輸入用戶名或密碼用戶名或密碼輸入不匹配，提示用戶名或密碼輸入錯(cuò)誤用戶名或密碼輸入正確點(diǎn)擊提交轉(zhuǎn)到登錄成功頁面（測試用