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

交互設(shè)計(jì)師、產(chǎn)品經(jīng)理產(chǎn)品原型利器

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第1頁。?基礎(chǔ)知識(shí)

?軟件介紹

?工具欄

?流程圖

?交互設(shè)計(jì)

?基礎(chǔ)交互設(shè)計(jì)

?動(dòng)態(tài)面板

?高級(jí)交互設(shè)計(jì)

?高級(jí)交互設(shè)計(jì)實(shí)例

?生成文檔

?生成HTML?生成規(guī)格說明書

?生成CHM文檔

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第2頁。?大約66%的軟件開發(fā)失敗或虧損的前三大原因?yàn)椋?/p>

-缺乏使用者的參與；

-需求或規(guī)格不完整；

-需求或規(guī)格變更；

?將文字性文檔轉(zhuǎn)變?yōu)榛?dòng)性的可視畫面，讓客戶在投入編程之前進(jìn)行需求確認(rèn)。

?原型是一種以用戶/市場(chǎng)為中心的技術(shù)，是個(gè)高效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的有效方法。

?全球有上萬家公司使用AxureRP做原型，包括淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)取?/p>

“沒有比制作prototype更易取得使用者界面與特殊功能可用性上的一致性了。prototype不只可確認(rèn)需求，它更可贏得顧客的心?！?/p>

——阿倫M.戴維斯

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第3頁。?AxureRPPro是美國(guó)AxureSoftwareSolution公司的旗艦產(chǎn)品，

是一個(gè)快速的原型工具，

主要是針對(duì)負(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)教程全文共82頁，當(dāng)前為第4頁。?Axure工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。

?無需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。

?Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔；

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第5頁。站點(diǎn)地圖

主菜單和工具欄

界面

控件（界面工具集

）

頁面注釋與頁面交互

模塊區(qū)域

物件注釋

互動(dòng)設(shè)計(jì)

Axure的工作環(huán)境

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第6頁。?主菜單和工具欄（MainMenu&Toolbar）

：

執(zhí)行常用操作，如文件打開、保存、格式化控件、輸出原型、輸出規(guī)格等操作。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第7頁。?站點(diǎn)地圖（SitemapPane）

-頁面的添加、刪除和重命名

-頁面組織排序

-打開頁面進(jìn)行設(shè)計(jì)

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第8頁。?在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。

?明確界面框架后，接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計(jì)的頁面。

頁面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁面，可以添加、刪除及對(duì)頁面層次進(jìn)行重新組織。

–點(diǎn)擊面板工具欄上的“AddChildPage”按鈕可以添加一個(gè)頁面，點(diǎn)擊

“DeletePage”按鈕可以刪除一個(gè)頁面。

–右鍵單擊選擇“RenamePage”菜單項(xiàng)可對(duì)頁面進(jìn)行重命名。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第9頁。?在頁面導(dǎo)航面板中，通過拖拉頁面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁面的位置和重新組織頁面的層次。

?打開頁面進(jìn)行設(shè)計(jì)

在頁面導(dǎo)航面板中，鼠標(biāo)雙擊頁面將會(huì)在線框面板中打開頁面以進(jìn)行線框圖設(shè)計(jì)。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第10頁。?添加控件

從組件中拖動(dòng)一個(gè)控件到界面中，就可以添加一個(gè)控制?？丶梢詮囊粋€(gè)界面中

拷貝到另外一個(gè)界面中。

?編輯控件

?鼠標(biāo)雙擊：雙擊控件，可以對(duì)控件最常用的屬性進(jìn)行編輯

?工具欄：點(diǎn)擊工具欄上的按鈕可以編輯控件的文本字體、背景色、邊框等；

?右鍵菜單：右擊控件可以選擇編輯控件的一些特定屬性，不同控件屬性也不同。

?控件（WidgetsPane）

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第11頁?？丶怯糜谠O(shè)計(jì)線框圖的用戶界面元素。

在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第12頁。?添加控件

-從控件面板中拖動(dòng)一個(gè)控件到線框圖面板中，

就可以添加一個(gè)控件；

-控件可以進(jìn)行拷貝(Ctrl+C)和粘貼(Ctrl+V)。

?操作控件

-選中控件后，可以拖拉移動(dòng)控件和改變控件的大?。?/p>

-可通過控件右鍵菜單進(jìn)行組合、排序、對(duì)齊、分配和鎖定控件。

?編輯控件風(fēng)格和屬性

-鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對(duì)控件的最常用屬性進(jìn)行編輯。

-工具欄：點(diǎn)擊工具欄上的按鈕，編輯控件的文本字體、背景色、邊框等。

-右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。

-

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第13頁。?模塊面板（MasterPane）

-模塊是可以重復(fù)使用的特殊頁面，如頁首(Header)；

-只要修改模塊，引用這個(gè)模塊的所有實(shí)例也會(huì)隨即全部跟著變化；

-模塊面板可利用文件夾來組織模塊，并且可以用拖拉或工具欄的方式排列模塊；

-在頁面中拖入模塊后，模塊對(duì)象回應(yīng)淡紅色遮罩，在頁面中模塊是不可修改的；

-修改模塊中的內(nèi)容只能在模塊頁面修改。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第14頁。3.

?注釋（Annotations）

可以為控件添加注釋，以說明控件的功能。

?添加注釋

在線框圖中選擇控件，然后在控件注釋和交互面板中編輯字段中的值，即可為控件添加注釋。面板頂部的

Label字段是為控件添加一個(gè)標(biāo)識(shí)符。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第15頁。?自定義字段（Fields）

通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點(diǎn)擊面板上Annotations頭部的“CustommizeFieldsandViews”，彈出的CustommizeFieldsandViews對(duì)話框，可以添加、刪除、修改、排序注釋字段。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第16頁。腳注（Footnotes）

在控件上添加注釋后，控件的右上角會(huì)顯示一個(gè)黃色方塊，稱為腳注。腳注號(hào)碼可以增大和減小，可通過控件右鍵菜單或工具欄上的

進(jìn)行修改。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第17頁。管理頁面?zhèn)渥?/p>

另外，可以自定義頁面?zhèn)渥?，為不同的人提供不同的備注，以滿足不同需要。比如可以新增“測(cè)試用例”“操作說明”等不同類別的頁面?zhèn)渥ⅰ?/p>

?頁面?zhèn)渥ⅲ≒ageNotes）

頁面?zhèn)渥⒖墒菍?duì)頁面進(jìn)行描述和說明。

添加頁面?zhèn)渥?/p>

在線框圖下面的Pagenotes面板中可以添加頁面?zhèn)渥?nèi)容

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第18頁。?控件交互

面板（InteractionsPane）

用于定義線框圖中控件的行為，包含定義鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行。

可以定義控件的（Events）

、場(chǎng)景（Cases）和動(dòng)作（Actions）：

?交互事件：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和

OnMouseOut；

?場(chǎng)景：每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿足的條件；

?動(dòng)作每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第19頁。?基礎(chǔ)知識(shí)

?軟件介紹

?工具欄

?流程圖

?交互設(shè)計(jì)

?基礎(chǔ)交互設(shè)計(jì)

?動(dòng)態(tài)面板

?高級(jí)交互設(shè)計(jì)

?高級(jí)交互設(shè)計(jì)實(shí)例

?生成文檔

?生成HTML?生成規(guī)格說明書

?生成CHM文檔

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第20頁。通過定義控件的行為，可以在生成的原型中打開鏈接、彈出頁面、動(dòng)態(tài)顯示和隱藏等。

可以定義控件的（Events）

、場(chǎng)景（Cases）和動(dòng)作（Actions）：

?交互事件：用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和

OnMouseOut；

?場(chǎng)景：每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿足的條件；

?動(dòng)作每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第21頁。AxureRP支持的事件如下：

?OnClick：鼠標(biāo)點(diǎn)擊

?OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對(duì)象上

?OnMouseOut：鼠標(biāo)的指針移動(dòng)出對(duì)象外

?OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)）

?OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài)

（失去焦點(diǎn)）

?OnPageLoad：頁面或模塊載入

大多對(duì)象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，

頁面加載或模塊被載入時(shí)則發(fā)生OnPageLoad事件、場(chǎng)景和動(dòng)作的關(guān)系

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第22頁。下列步驟說明如何在按鈕控件上定義一個(gè)鏈接：

Step1：拖拉一個(gè)按鈕控件到線框圖中，鼠標(biāo)雙擊“OnClick”事件，出現(xiàn)“InteractionCaseProperties”對(duì)話窗，在這個(gè)對(duì)話框中可以選擇要執(zhí)行的動(dòng)作；

Step2：勾選“OpenLinkinCurrentWindow”動(dòng)作。

Step3：點(diǎn)擊“Link”，在彈出的LinkProperties對(duì)話框中可以選擇要鏈接

的頁面或其它網(wǎng)頁地址

。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第23頁。基礎(chǔ)交互設(shè)計(jì)—?jiǎng)幼?/p>

除了簡(jiǎn)單的鏈接之外，Axure還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在觸發(fā)事件的場(chǎng)景中執(zhí)行。

AxureRP核心培訓(xùn)教程全文共82頁，當(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ù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來移動(dòng)動(dòng)態(tài)面板

SetVariableandWidgetvalue(s)equaltoValue(s)：設(shè)定變量值或控件值

OpenLinkinParentFrame：在父頁面的嵌框架中打開一個(gè)頁面

ScrolltoImageMapRegion：滾動(dòng)頁面到

ImageMap所在位置

EnableWidget(s)：把對(duì)象狀態(tài)變成可用狀態(tài)

DisableWidget(s)：把對(duì)象狀態(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)教程全文共82頁，當(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)面板控件可以讓你的原型中實(shí)現(xiàn)高級(jí)的動(dòng)態(tài)交互功能。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第26頁。編輯動(dòng)態(tài)面板

右擊動(dòng)態(tài)面板，選擇“編輯動(dòng)態(tài)面板”

→“管理動(dòng)態(tài)狀態(tài)”

在對(duì)話框中可以創(chuàng)建、重命名、重新排序、刪除、和編輯動(dòng)態(tài)面板的狀態(tài)

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第27頁。設(shè)置動(dòng)態(tài)面板標(biāo)簽為“實(shí)例”，并新增三個(gè)狀態(tài)：tab1、tab2、tab3，然后點(diǎn)擊“編輯所有狀態(tài)”

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第28頁。在tab1頁面中設(shè)置tab1、tab2、tab3三個(gè)矩形框，并且為了突出效果可以設(shè)置tab1矩形框的顏色為白色（表示選中的是tab1狀態(tài)），其他兩個(gè)為灰色。

AxureRP核心培訓(xùn)教程全文共82頁，當(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”；

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第30頁。（2）選擇第一步中的“設(shè)置

實(shí)例

的狀態(tài)變化”，然后點(diǎn)擊第二部中的tab1AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第31頁。（3）選擇一個(gè)動(dòng)態(tài)面板tab1，點(diǎn)擊確定完成事件

注明：tab2、tab3矩形框事件如同tab1，只是選擇面板狀態(tài)時(shí)選擇對(duì)應(yīng)得狀態(tài)，tab2選擇tab2狀態(tài)、tab3選擇tab3狀態(tài)

（4）按照以上步驟，完成tab2、tab3狀態(tài)頁面操作

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第32頁。高級(jí)交互設(shè)計(jì)

?但如果需要更強(qiáng)大、更高保真度的原型，就需要邏輯條件。

?增加條件可以是基于原型中控件上輸入的值，如復(fù)選框的選擇值、文本框中的文本等。

?條件也可以是基于變量值。一個(gè)觸發(fā)事件可以包含有多個(gè)場(chǎng)景，根據(jù)條件執(zhí)行流程或互動(dòng)。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第33頁。高級(jí)交互設(shè)計(jì)

?Step1：首先要在交互面板中為某個(gè)事件添加一個(gè)場(chǎng)景（case）。在InteractionCaseProperties對(duì)話框中的Step1中點(diǎn)擊―AddCondition‖這個(gè)鏈接。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第34頁。高級(jí)交互設(shè)計(jì)

?Step2：這時(shí)會(huì)打開一個(gè)ConditionBuilder對(duì)話框，創(chuàng)建邏輯條件。

?在ConditionBuilder對(duì)話框中，可以添加多個(gè)邏輯條件。

?

如果要求所有條件都需要滿足，則在Satisfy下拉列表框中選擇all；如果只要滿足其中一個(gè)條件可選擇為any。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第35頁。高級(jí)交互設(shè)計(jì)

?Step3：下一步需要選擇當(dāng)條件滿足時(shí)要執(zhí)行的動(dòng)作。

?點(diǎn)擊確定，完成交互設(shè)計(jì)

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第36頁。高級(jí)交互設(shè)計(jì)實(shí)例

系統(tǒng)登陸界面

這是一個(gè)簡(jiǎn)單的登陸界面，輸入用戶名、密碼后，點(diǎn)擊登陸按鈕進(jìn)行登陸校驗(yàn)：

1.如果未輸入用戶名或密碼，則提示“請(qǐng)輸入用戶名和密碼”，藍(lán)色字體；

2.如果用戶名或密碼錯(cuò)誤，則提示“用戶名或密碼錯(cuò)誤”，紅色字體；

3.如果用戶名和密碼都匹配，則提示“您好，【用戶名】”，黑色字體。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第37頁。高級(jí)交互設(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)教程全文共82頁，當(dāng)前為第38頁。高級(jí)交互設(shè)計(jì)實(shí)例

步驟二、設(shè)計(jì)控件交互

1、

選中登陸按鈕，在控件交互和注釋面板中鼠標(biāo)雙擊onClick事件；

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第39頁。高級(jí)交互設(shè)計(jì)實(shí)例

2、

在彈出的“交互場(chǎng)景屬性”對(duì)話框中，點(diǎn)擊“添加場(chǎng)景…”這個(gè)鏈接

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第40頁。高級(jí)交互設(shè)計(jì)實(shí)例

3、

在彈出的“條件創(chuàng)建”對(duì)話框中，添加條件如下：

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第41頁。高級(jí)交互設(shè)計(jì)實(shí)例

4、

回到“交互場(chǎng)景屬性”對(duì)話框中，Step2中選擇動(dòng)作“SetVariableandWidgetvalueequaltoValue”，并點(diǎn)擊Step3中的鏈接；

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第42頁。高級(jí)交互設(shè)計(jì)實(shí)例

5、

在彈出的“設(shè)置變量和控件值”對(duì)話框中，設(shè)置如下：

點(diǎn)擊Edittext…鏈接，輸入“請(qǐng)輸入用戶名或密碼”，并設(shè)置為藍(lán)色；

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第43頁。高級(jí)交互設(shè)計(jì)實(shí)例

6、

確定和關(guān)閉所有對(duì)話框，這時(shí)控件交互和注釋面板如下：

以上我們實(shí)現(xiàn)了第一個(gè)場(chǎng)景：如果未輸入用戶名或密碼，則提示“請(qǐng)輸入用戶名和密碼”，藍(lán)色字體；

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第44頁。高級(jí)交互設(shè)計(jì)實(shí)例

仿照?qǐng)鼍?的操作，實(shí)現(xiàn)第2、3個(gè)場(chǎng)景，最終控件面板上的場(chǎng)景、條件、動(dòng)作如下：

完成以上操作，即實(shí)現(xiàn)了系統(tǒng)登錄的設(shè)置。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第45頁。?基礎(chǔ)知識(shí)

?軟件介紹

?工具欄

?流程圖

?交互設(shè)計(jì)

?基礎(chǔ)交互設(shè)計(jì)

?動(dòng)態(tài)面板

?高級(jí)交互設(shè)計(jì)

?高級(jí)交互設(shè)計(jì)實(shí)例

?生成文檔

?生成HTML?生成規(guī)格說明書

?生成CHM文檔

AxureRP核心培訓(xùn)教程全文共82頁，當(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對(duì)話框中，可以對(duì)原型進(jìn)行配置。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第47頁。?HTML原型的界面可分成三個(gè)區(qū)域：

-左側(cè):是一個(gè)頁面導(dǎo)航列表，以層級(jí)形式展示原型中頁面。

-中間:顯示線框圖和流程圖，線框圖可以按照所設(shè)計(jì)的交互進(jìn)行互動(dòng)。

-底部:顯示當(dāng)前頁面的備注說明，即頁面?zhèn)渥ⅰ?/p>

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第48頁。?設(shè)計(jì)完原型后，就可以輸出Word格式的規(guī)格說明書；

?生成的規(guī)格說明書，Axure會(huì)自動(dòng)按照線框圖的文字和插圖，按照順序生成到

Word文檔中。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第49頁。AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第50頁。?CHM文件通常表示幫助文檔，現(xiàn)在網(wǎng)絡(luò)上很多電子書籍都被制作成CHM格式。

在生成HTML原型文件的過程中，點(diǎn)擊“發(fā)布”選項(xiàng)，并選中“創(chuàng)建HTML幫助文件”復(fù)選框，即可生成CHM文檔。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第51頁。謝謝！

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第52頁。第一章

介紹以工具欄工具(widgets)繪制示意圖(Wireframe)第二章

流程圖（FlowDiagrams）撰寫網(wǎng)頁說明(PageNotes)第三章

高級(jí)交互設(shè)計(jì)（RichInteraction）

第四章

實(shí)例

AxureRP核心培訓(xùn)教程全文共82頁，當(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)教程全文共82頁，當(dāng)前為第54頁。第一章

軟件介紹

第1節(jié)

認(rèn)識(shí)AxureRP1.AxureRPAxure的發(fā)音是“Ack-sure”，RP則是“RapidPrototyping”的縮寫。AxureRPPro是美國(guó)AxureSoftwareSolution公司的旗艦產(chǎn)品，

是一個(gè)快速的原型工具，

主要是針對(duì)負(fù)

責(zé)定義需求、

定義規(guī)格、

設(shè)計(jì)功能、

設(shè)計(jì)界面的專家，

包括用戶體驗(yàn)設(shè)計(jì)師、

交互設(shè)

計(jì)師、

業(yè)務(wù)分析師、

信息架構(gòu)師、

可用性專家和產(chǎn)品經(jīng)理。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第55頁。Axure使原型設(shè)計(jì)及和客戶的交流方式發(fā)生了變革：

進(jìn)行更加高效的設(shè)計(jì)；

讓你體驗(yàn)動(dòng)態(tài)的原型；

更加清晰的交流想法；

Axure能讓你快速的進(jìn)行線框圖和原型的設(shè)計(jì)，

讓相關(guān)人員對(duì)你的設(shè)計(jì)進(jìn)行體驗(yàn)和驗(yàn)證，向用戶進(jìn)行演示、

溝通交流以確認(rèn)用戶需求，

并能自動(dòng)生成規(guī)格說明文檔。

另外，Axure還能讓團(tuán)隊(duì)成員進(jìn)行多人協(xié)同設(shè)計(jì)，

并對(duì)設(shè)計(jì)進(jìn)行方案版本控制管理。

2.原型的作用和好處

制作Prototype是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫面，如此更能抓住利益相關(guān)者與使用者的注意，讓用戶在軟件開始投入編程前就確認(rèn)需求。

快速原型法（RapidPrototyping）是一種有效且高效的以用戶為中心（User-CenteredDesign）的技術(shù)，可以幫助用戶體驗(yàn)專家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。

目前全球有財(cái)富1000大的公司和重要機(jī)構(gòu)在使用AxureRP，國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第56頁。3、Axure的工作環(huán)境

Axure的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。

無需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。

以下是對(duì)AxureRP工作環(huán)境的簡(jiǎn)要說明：

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第57頁。AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第58頁。主菜單和工具欄（MainMenu&Toolbar）

執(zhí)行常用操作，如文件打開、保存、格式化控件、輸出原型、輸出規(guī)格等操作。

頁面導(dǎo)航板（SitemapPane）

對(duì)所設(shè)計(jì)的頁面進(jìn)行添加、刪除、重命名和組織。

控件面板（WidgetsPane）

該面板中有線框圖控件和流程圖控件，用這些控件進(jìn)行線框圖和流程圖的設(shè)計(jì)。

模塊面板（MastersPane）

模塊是一種可以復(fù)用的特殊頁面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織。

線框圖面板（WireframePane）

在線框圖面板中可以進(jìn)行頁面線框圖的設(shè)計(jì)，線框圖面板也就是進(jìn)行頁面設(shè)計(jì)的工作區(qū)。

控件交互面板（InteractionsPane）

定義控件的交互，如：鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。

控件注釋面板（AnnotationsPane）

對(duì)控件進(jìn)行注釋定義和對(duì)控件的功能進(jìn)行說明。

頁面交互和注釋面板（PagesNotes&PageInteractionsPane）

添加和管理頁面的注釋和交互。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第59頁。1.頁面導(dǎo)航面板（Sitemap）

在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。

明確界面框架后，接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計(jì)的頁面。

頁面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁面，可以添加、刪除及對(duì)頁面層次進(jìn)行重新組織。

頁面的添加、刪除和重命名

點(diǎn)擊面板工具欄上的“AddChildPage”按鈕可以添加一個(gè)頁面，點(diǎn)擊

“DeletePage”按鈕可以刪除一個(gè)頁面。

右鍵單擊選擇“RenamePage”菜單項(xiàng)可對(duì)頁面進(jìn)行重命名。

AxureRP核心培訓(xùn)教程全文共82頁，當(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)教程全文共82頁，當(dāng)前為第61頁。2.

控件（Widgets）

控件是用于設(shè)計(jì)線框圖的用戶界面元素。

在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第62頁。添加控件

從控件面板中拖動(dòng)一個(gè)控件到線框圖面板中，

就可以添加一個(gè)控件。

控件可以從一個(gè)線框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個(gè)線框圖中。

操作控件

添加控件后，在線框圖中點(diǎn)選該控件，然后可以拖拉移動(dòng)控件和改變控件的大小，還可以一次同時(shí)對(duì)多個(gè)控件進(jìn)行選擇、移動(dòng)、改變尺寸。

另外，還可以組合、排序、對(duì)齊、分配和鎖定控件。這些操作可通過控件右鍵菜單中進(jìn)行，也可在Object工具欄上的按鈕進(jìn)行。

編輯控件風(fēng)格和屬性

有多種方法可以編輯控件的風(fēng)格和屬性：

?

鼠標(biāo)雙擊：鼠標(biāo)雙擊某個(gè)控件，可以對(duì)控件的最常用屬性進(jìn)行編輯。

例如，雙擊一

個(gè)圖片控件可以導(dǎo)入一張圖片；雙擊一個(gè)下拉列表或列表框控件可以編輯列表項(xiàng)。

?

工具欄：點(diǎn)擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。

?

右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第63頁。3.注釋（Annotations）

可以為控件添加注釋，以說明控件的功能。

添加注釋

在線框圖中選擇控件，然后在控件注釋和交互（AnnotationsandInteractions）面板中編輯字段中的值，即可為控件添加注釋。面板頂部的Label字段是為控件添加一個(gè)標(biāo)識(shí)符。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第64頁。自定義字段（Fields）

通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點(diǎn)擊面板上Annotations頭部的“CustommizeFieldsandViews”然后在彈出的CustommizeFieldsand，Views對(duì)話框中可以添加、刪除、修改、排序注釋字段。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第65頁。腳注（Footnotes）

在控件上添加注釋后，控件的右上角會(huì)顯示一個(gè)黃色方塊，稱為腳注。腳注號(hào)碼可以增大和減小，可通過控件右鍵菜單或工具欄上的

進(jìn)行修改。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第66頁。4.頁面?zhèn)渥ⅲ≒ageNotes）

頁面?zhèn)渥⒖墒菍?duì)頁面進(jìn)行描述和說明。

添加頁面?zhèn)渥?/p>

在線框圖下面的Pagenotes面板中可以添加頁面?zhèn)渥?nèi)容。

管理頁面?zhèn)渥?/p>

另外，可以自定義頁面?zhèn)渥ⅲ瑸椴煌娜颂峁┎煌膫渥?，以滿足不同需要。比如可以新增“測(cè)試用例”“操作說明”等不同類別的頁面?zhèn)渥ⅰ?/p>

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第67頁。1.

控件的交互

控件交互面板用于定義線框圖中控件的行為，包含定義簡(jiǎn)單的鏈接和復(fù)雜的RIA行為，所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行。

在控件交互面板中可以定義控件的交互，交互事件（Events）

、場(chǎng)景（Cases）和動(dòng)作（Actions）組成：

?

用戶操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和

OnMouseOut；

?

每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿足的條件；

?

每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開鏈接、顯示面板、隱藏面板、移動(dòng)面板。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第68頁。以下是AxureRP支持的事件如下：

?OnClick：鼠標(biāo)點(diǎn)擊

?OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對(duì)象上

?OnMouseOut：鼠標(biāo)的指針移動(dòng)出對(duì)象外

?OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)）

?OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài)

（失去焦點(diǎn)）

?OnPageLoad：頁面或模塊載入

?

大多對(duì)象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，

一些特殊的控件可觸發(fā)的事件有些不同：

?

按鈕控件只有OnClick

?

單選框和復(fù)選框則具有OnFocus、OnLostFocus?

文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus

頁面加載或模塊被載入時(shí)則發(fā)生OnPageLoad事件、場(chǎng)景和動(dòng)作的關(guān)系

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第69頁。2、定義鏈接

下列步驟說明如何在按鈕控件上定義一個(gè)鏈接：

1.首先，拖拉一個(gè)按鈕控件到線框圖中，并選擇這個(gè)按鈕；

2.然后，控件交互面板中鼠標(biāo)雙擊“OnClick”這個(gè)事件，這時(shí)會(huì)出現(xiàn)“InteractionCaseProperties”對(duì)話窗，在這個(gè)對(duì)話框中可以選擇要執(zhí)行的動(dòng)作；

3.在“Step2”中，勾選“OpenLinkinCurrentWindow”動(dòng)作。

4.在“Step3”中，點(diǎn)擊“Link”，在彈出的LinkProperties對(duì)話框中可以選擇要鏈接

的頁面或其它網(wǎng)頁地址

。

AxureRP核心培訓(xùn)教程全文共82頁，當(dāng)前為第70頁。除了上面的步驟，

加入一個(gè)鏈接的最快的方法是單擊控件交互面板頂部的“QuickLink”，在彈出的LinkProperties對(duì)話框中選擇要鏈接的頁面。

AxureRP核心培訓(xùn)