Axure RP內(nèi)部培訓核心教程-2013

AxureRP內(nèi)部培訓核心教程_2013

目錄基礎知識軟件介紹工具欄流程圖交互設計基礎交互設計動態(tài)面板高級交互設計高級交互設計實例生成文檔生成HTML生成規(guī)格說明書生成CHM文檔為什么要進行原型設計？大約66%的軟件開發(fā)失敗或虧損的前三大原因為：缺乏使用者的參與；需求或規(guī)格不完整；需求或規(guī)格變更；將文字性文檔轉(zhuǎn)變?yōu)榛有缘目梢暜嬅?，讓客戶在投入編程之前進行需求確認。是一種高效的以用戶為中心的技術，是個有效的簡化文檔編制、吸引使用者參與、早期辨認需求遺漏、將外在需求風險降到最低的方法。全球有>1000家的公司在使用AxureRP，淘寶、雅虎、騰訊、當當?shù)纫捕荚谑褂??！皼]有比制作prototype更易取得使用者界面與特殊功能可用性上的一致性了。rototype不只可確認需求，它更可贏得顧客的心?！?/p>

——阿倫M.戴維斯軟件介紹AxureRPPro是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個快速的原型工具，主要是針對負責定義需求、定義規(guī)格、設計功能、設計界面的專家。AXURE改變我們的工作方式：決策層：

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

提高了各崗位間的溝通效率，降低溝通成本，保證項目進程需求人員：

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

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

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

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

OnMouseEnter：鼠標的指針移動到對象上OnMouseOut：鼠標的指針移動出對象外OnFocus：鼠標的指針進入文字輸入狀態(tài)（獲得焦點）OnLostFocus：鼠標的指針離開文字輸入狀態(tài)（失去焦點）OnPageLoad：頁面或模塊載入大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，頁面加載或模塊被載入時則發(fā)生OnPageLoad基礎交互設計—事件事件、場景和動作的關系基礎交互設計—定義鏈接下列步驟說明如何在按鈕控件上定義一個鏈接：Step1：拖拉一個按鈕控件到線框圖中，鼠標雙擊“OnClick”事件，出現(xiàn)“InteractionCaseProperties”對話窗，在這個對話框中可以選擇要執(zhí)行的動作；Step2：勾選“OpenLinkinCurrentWindow”動作。Step3：點擊“Link”，在彈出的LinkProperties對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址?；A交互設計—動作除了簡單的鏈接之外，Axure還提供了許多豐富的動作，這些動作可以在觸發(fā)事件的場景中執(zhí)行。以下是Axure所支持的動作：OpenLinkinCurrentWindow：在當前窗口打開一個頁面OpenLinkinPopupWindow：在彈出的窗口中打開一個頁面OpenLinkinParentWindow：在父窗口中打開一個頁面CloseCurrentWindow：關閉當前窗口OpenLinkinFrame：在框架中打開一個頁面SetPanelstate(s)toState(s)：為動態(tài)面板設定要顯示的狀態(tài)ShowPanel(s)：顯示動態(tài)面板HidePanel(s)：隱藏動態(tài)面板ToggleVisibilityforPanel(s)：切換動態(tài)面板的顯示狀態(tài)（顯示/隱藏）MovePanel(s)：根據(jù)絕對坐標或相對坐標來移動動態(tài)面板SetVariableandWidgetvalue(s)equaltoValue(s)：設定變量值或控件值OpenLinkinParentFrame：在父頁面的嵌框架中打開一個頁面ScrolltoImageMapRegion：滾動頁面到ImageMap所在位置EnableWidget(s)：把對象狀態(tài)變成可用狀態(tài)DisableWidget(s)：把對象狀態(tài)變成不可用狀態(tài)WaitTime(s)：等待多少毫秒(ms)后再進行這個動作Other：顯示動作的文字說明基礎交互設計—動作動態(tài)面板包含多個狀態(tài)，每個狀態(tài)可包含一系列控件。任何時候都只有一個狀態(tài)時可見的，一般都是默認第一個狀態(tài)可見；動態(tài)面板的狀態(tài)可以隱藏、顯示和改變；將動態(tài)面板拖到界面后，可以根據(jù)需要改變面板大小、位置使用動態(tài)面板的情況：頁面中存某塊內(nèi)容在開始不顯示后來顯示的情況；在開始頁面加載時不顯示后來顯示；Tab頁切換；某塊內(nèi)容隨著事件的不同顯示位置不同的情況動態(tài)面板動態(tài)面板控件可以讓你的原型中實現(xiàn)高級的動態(tài)交互功能。編輯動態(tài)面板右擊動態(tài)面板，選擇“編輯動態(tài)面板”→“管理動態(tài)狀態(tài)”在對話框中可以創(chuàng)建、重命名、重新排序、刪除、和編輯動態(tài)面板的狀態(tài)動態(tài)面板設置動態(tài)面板標簽為“實例”，并新增三個狀態(tài)：tab1、tab2、tab3，然后點擊“編輯所有狀態(tài)”動態(tài)面板—編輯在tab1頁面中設置tab1、tab2、tab3三個矩形框，并且為了突出效果可以設置tab1矩形框的顏色為白色（表示選中的是tab1狀態(tài)），其他兩個為灰色。動態(tài)面板—編輯狀態(tài)設置tab1、tab2、tab3三個矩形框的OnClick事件，以tab1為例說明：（1）選擇tab1矩形框，點擊交互中的OnClick事件，再選擇“設置動態(tài)面板的狀態(tài)轉(zhuǎn)換”，然后選擇第三步的“Panelstatetostate”；動態(tài)面板—添加事件（2）選擇第一步中的“設置實例的狀態(tài)變化”，然后點擊第二部中的tab1動態(tài)面板—添加事件（3）選擇一個動態(tài)面板tab1，點擊確定完成事件注明：tab2、tab3矩形框事件如同tab1，只是選擇面板狀態(tài)時選擇對應得狀態(tài)，tab2選擇tab2狀態(tài)、tab3選擇tab3狀態(tài)動態(tài)面板—添加事件（4）按照以上步驟，完成tab2、tab3狀態(tài)頁面操作高級交互設計但如果需要更強大、更高保真度的原型，就需要邏輯條件。增加條件可以是基于原型中控件上輸入的值，如復選框的選擇值、文本框中的文本等。條件也可以是基于變量值。一個觸發(fā)事件可以包含有多個場景，根據(jù)條件執(zhí)行流程或互動。高級交互設計Step1：首先要在交互面板中為某個事件添加一個場景（case）。在InteractionCaseProperties對話框中的Step1中點擊―AddCondition‖這個鏈接。高級交互設計Step2：這時會打開一個ConditionBuilder對話框，創(chuàng)建邏輯條件。在ConditionBuilder對話框中，可以添加多個邏輯條件。

如果要求所有條件都需要滿足，則在Satisfy下拉列表框中選擇all；如果只要滿足其中一個條件可選擇為any。高級交互設計Step3：下一步需要選擇當條件滿足時要執(zhí)行的動作。點擊確定，完成交互設計高級交互設計實例系統(tǒng)登陸界面這是一個簡單的登陸界面，輸入用戶名、密碼后，點擊登陸按鈕進行登陸校驗：1.如果未輸入用戶名或密碼，則提示“請輸入用戶名和密碼”，藍色字體；2.如果用戶名或密碼錯誤，則提示“用戶名或密碼錯誤”，紅色字體；3.如果用戶名和密碼都匹配，則提示“您好，【用戶名】”，黑色字體。

高級交互設計實例步驟一、繪制線框圖1、打開Axure軟件，新建一個RP文件；2、拖動控件面板中的控件到線框圖面板中，繪制登陸界面如下圖：所用到的控件清單如下：控件名作用文本內(nèi)容標識符其它屬性Rectangle控件底色

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

logInfo

TextPanel用戶名用戶名：

TextPanel密碼密碼：

TextField輸入用戶名

userName

TextField輸入密碼

passWord

Button點擊登錄登陸submitButton

高級交互設計實例步驟二、設計控件交互1、選中登陸按鈕，在控件交互和注釋面板中鼠標雙擊onClick事件；高級交互設計實例2、在彈出的“交互場景屬性”對話框中，點擊“添加場景…”這個鏈接高級交互設計實例3、在彈出的“條件創(chuàng)建”對話框中，添加條件如下：高級交互設計實例4、回到“交互場景屬性”對話框中，Step2中選擇動作“SetVariableandWidgetvalueequaltoValue”，并點擊Step3中的鏈接；高級交互設計實例5、在彈出的“設置變量和控件值”對話框中，設置如下：點擊Edittext…鏈接，輸入“請輸入用戶名或密碼”，并設置為藍色；高級交互設計實例6、確定和關閉所有對話框，這時控件交互和注釋面板如下：以上我們實現(xiàn)了第一個場景：如果未輸入用戶名或密碼