AXURE_RP案例教程全解

1、AXURE RP 案例教程交互設(shè)計(jì)師、產(chǎn)品經(jīng)理產(chǎn)品原型利器AXURE RP 教程入門(mén)篇第一章 介紹以工具欄工具(widgets)繪制示意圖(Wireframe)第二章 流程圖Flow Diagrams撰寫(xiě)網(wǎng)頁(yè)說(shuō)明(Page Notes)第三章 高級(jí)交互設(shè)計(jì)Rich Interaction第四章 實(shí)例AXURE RP 教程第一章 介紹第1節(jié) 認(rèn)識(shí) Axure RP第2節(jié) 線(xiàn)框圖及其注釋第3節(jié) 根本交互設(shè)計(jì)第4節(jié) 使用模塊Master第5節(jié) HTML 原型第6節(jié) 輸出規(guī)格說(shuō)明AXURE RP 教程入門(mén)篇第一章 軟件介紹第1節(jié) 認(rèn)識(shí)Axure RP1 . Axure RP Axure 的發(fā)音是“Ac

2、k-sure， RP 那么是“Rapid Prototyping 的縮寫(xiě)。 Axure RP Pro是美國(guó) Axure Software Solution公司的旗艦產(chǎn)品， 是一個(gè)快速的原型工具， 主要是針對(duì)負(fù)責(zé)定義需求、 定義規(guī)格、 設(shè)計(jì)功能、 設(shè)計(jì)界面的專(zhuān)家， 包括用戶(hù)體驗(yàn)設(shè)計(jì)師、 交互設(shè)計(jì)師、 業(yè)務(wù)分析師、 信息架構(gòu)師、 可用性專(zhuān)家和產(chǎn)品經(jīng)理。 AXURE RP 教程Axure能讓你快速的進(jìn)行線(xiàn)框圖和原型的設(shè)計(jì)， 讓相關(guān)人員對(duì)你的設(shè)計(jì)進(jìn)行體驗(yàn)和驗(yàn)證，向用戶(hù)進(jìn)行演示、 溝通交流以確認(rèn)用戶(hù)需求， 并能自動(dòng)生成規(guī)格說(shuō)明文檔。 另外， Axure還能讓團(tuán)隊(duì)成員進(jìn)行多人協(xié)同設(shè)計(jì)， 并對(duì)設(shè)計(jì)進(jìn)行方案版

3、本控制管理。 Axure使原型設(shè)計(jì)及和客戶(hù)的交流方式發(fā)生了變革： 進(jìn)行更加高效的設(shè)計(jì)； 讓你體驗(yàn)動(dòng)態(tài)的原型； 更加清晰的交流想法； 2 . 原型的作用和好處 制作 Prototype 是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期識(shí)別需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫(huà)面，如此更能抓住利益相關(guān)者與使用者的注意，讓用戶(hù)在軟件開(kāi)始投入編程前就確認(rèn)需求。 快速原型法Rapid Prototyping是一種有效且高效的以用戶(hù)為中心User-Centered Design的技術(shù)，可以幫助用戶(hù)體驗(yàn)專(zhuān)家、設(shè)計(jì)師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。 目前全球有財(cái)富

4、 1000 大的公司和重要機(jī)構(gòu)在使用 Axure RP，國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。AXURE RP 教程 3、Axure 的工作環(huán)境 Axure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)立帶有注釋的線(xiàn)框圖。無(wú)需編程就可以在線(xiàn)框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。 Axure 可一體化生成線(xiàn)框圖、HTML 交互原型、規(guī)格說(shuō)明 Word 文檔。以下是對(duì) Axure RP 工作環(huán)境的簡(jiǎn)要說(shuō)明：AXURE RP 教程 4、理解 Axure 工作環(huán)境的簡(jiǎn)要說(shuō)明Page頁(yè)面Widget控件Master模塊Dynamic Panel動(dòng)態(tài)圖層Dynamic Panel動(dòng)態(tài)圖層Mas

5、ter模塊Master模塊Widget控件Widget控件Widget控件Widget控件網(wǎng)站/系統(tǒng)Master模塊Dynamic Panel動(dòng)態(tài)圖層Page頁(yè)面Widget控件AXURE RP 教程AXURE RP 教程主菜單和工具欄（Main Menu & Toolbar） 執(zhí)行常用操作，如文件打開(kāi)、保存、格式化控件、輸出原型、輸出規(guī)格等操作。頁(yè)面導(dǎo)航板（Sitemap Pane） 對(duì)所設(shè)計(jì)的頁(yè)面進(jìn)行添加、刪除、重命名和組織?？丶姘澹╓idgets Pane） 該面板中有線(xiàn)框圖控件和流程圖控件，用這些控件進(jìn)行線(xiàn)框圖和流程圖的設(shè)計(jì)。模塊面板（Masters Pane） 模塊是一種可

6、以復(fù)用的特殊頁(yè)面，在該面板中可進(jìn)行模塊的添加、刪除、重命名和組織。線(xiàn)框圖面板（Wireframe Pane） 在線(xiàn)框圖面板中可以進(jìn)行頁(yè)面線(xiàn)框圖的設(shè)計(jì)，線(xiàn)框圖面板也就是進(jìn)行頁(yè)面設(shè)計(jì)的工作區(qū)。 控件交互面板（Interactions Pane） 定義控件的交互，如：鏈接、彈出、動(dòng)態(tài)顯示和隱藏等。控件注釋面板（Annotations Pane） 對(duì)控件進(jìn)行注釋定義和對(duì)控件的功能進(jìn)行說(shuō)明。頁(yè)面交互和注釋面板（Pages Notes & Page Interactions Pane） 添加和管理頁(yè)面的注釋和交互。AXURE RP 教程第2節(jié) 線(xiàn)框圖及其注釋1.頁(yè)面導(dǎo)航面板Sitemap 在繪制線(xiàn)

7、框圖(Wireframe)或流程圖Flow之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。2.明確界面框架后，接下來(lái)就可以利用頁(yè)面導(dǎo)航面板來(lái)定義所要設(shè)計(jì)的頁(yè)面。 頁(yè)面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁(yè)面，可以添加、刪除及對(duì)頁(yè)面層次進(jìn)行重新組織。 3.頁(yè)面的添加、刪除和重命名 4.點(diǎn)擊面板工具欄上的“Add Child Page按鈕可以添加一個(gè)頁(yè)面，點(diǎn)擊 “Delete Page 按鈕可以刪除一個(gè)頁(yè)面。5.右鍵單擊選擇“Rename Page菜單項(xiàng)可對(duì)頁(yè)面進(jìn)行重命名。 AXURE RP 教程頁(yè)面組織排序 在頁(yè)面導(dǎo)航面板中，通過(guò)拖拉頁(yè)面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁(yè)面的位置和重新組織頁(yè)面的層次。

8、翻開(kāi)頁(yè)面進(jìn)行設(shè)計(jì) 在頁(yè)面導(dǎo)航面板中，鼠標(biāo)雙擊頁(yè)面將會(huì)在線(xiàn)框面板中翻開(kāi)頁(yè)面以進(jìn)行線(xiàn)框圖設(shè)計(jì)。AXURE RP 教程2. 控件Widgets 控件是用于設(shè)計(jì)線(xiàn)框圖的用戶(hù)界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。 AXURE RP 教程添加控件 從控件面板中拖動(dòng)一個(gè)控件到線(xiàn)框圖面板中， 就可以添加一個(gè)控件。控件可以從一個(gè)線(xiàn)框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個(gè)線(xiàn)框圖中。操作控件 添加控件后，在線(xiàn)框圖中點(diǎn)選該控件，然后可以拖拉移動(dòng)控件和改變控件的大小，還可以一次同時(shí)對(duì)多個(gè)控件進(jìn)行選擇、移動(dòng)、改變尺寸。另外，還可以組合、排序、對(duì)齊、分配和鎖定控件。這些操作

9、可通過(guò)控件右鍵菜單中進(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)擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。 右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。AXURE RP 教程3. 注釋Annotations 可以為控件添加注釋?zhuān)哉f(shuō)明控件的功能。 添加注釋 在線(xiàn)框圖中選擇控件，然后在控件注釋和交互Annotations and Inte

10、ractions面板中編輯字段中的值，即可為控件添加注釋。面板頂部的 Label 字段是為控件添加一個(gè)標(biāo)識(shí)符。 AXURE RP 教程自定義字段Fields 通過(guò)主菜單 Wireframe-Customize Annotation Fields and Views 或點(diǎn)擊面板上 Annotations 頭部的“Custommize Fields and Views 然后在彈出的 Custommize Fields and ， Views 對(duì)話(huà)框中可以添加、刪除、修改、排序注釋字段。AXURE RP 教程腳注Footnotes 在控件上添加注釋后，控件的右上角會(huì)顯示一個(gè)黃色方塊，稱(chēng)為腳注。腳注號(hào)

11、碼可以增大和減小，可通過(guò)控件右鍵菜單或工具欄上的 進(jìn)行修改。AXURE RP 教程4. 頁(yè)面?zhèn)渥age Notes頁(yè)面?zhèn)渥⒖墒菍?duì)頁(yè)面進(jìn)行描述和說(shuō)明。添加頁(yè)面?zhèn)渥?在線(xiàn)框圖下面的 Page notes 面板中可以添加頁(yè)面?zhèn)渥?nèi)容。 管理頁(yè)面?zhèn)渥⒐芾眄?yè)面?zhèn)渥⒘硗?，可以自定義頁(yè)面?zhèn)渥ⅲ瑸椴煌娜颂峁┎煌膫渥?，以滿(mǎn)足不同需要。比方可以新另外，可以自定義頁(yè)面?zhèn)渥ⅲ瑸椴煌娜颂峁┎煌膫渥?，以滿(mǎn)足不同需要。比方可以新增增“測(cè)試用例測(cè)試用例“操作說(shuō)明等不同類(lèi)別的頁(yè)面?zhèn)渥?。操作說(shuō)明等不同類(lèi)別的頁(yè)面?zhèn)渥ⅰXURE RP 教程第3節(jié) 根本交互設(shè)計(jì)1. 控件的交互 控件交互面板用于定義線(xiàn)框圖中控件的行為，包含

12、定義簡(jiǎn)單的鏈接和復(fù)雜的 RIA 行為，所定義的交互都可以在將來(lái)生成的原型中進(jìn)行操作執(zhí)行。在控件交互面板中可以定義控件的交互，交互事件Events 、場(chǎng)景 Cases和動(dòng)作Actions組成： 用戶(hù)操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的 OnClick、OnMouseEnter 和 OnMouseOut； 每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿(mǎn)足的條件； 每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：翻開(kāi)鏈接、顯示面板、隱藏面板、移動(dòng)面板。AXURE RP 教程以下是 Axure RP支持的事件如下： OnClick：鼠標(biāo)點(diǎn)擊 OnMouseEnter：鼠標(biāo)的指針移動(dòng)到對(duì)象上 OnMouseOut：鼠標(biāo)的

13、指針移動(dòng)出對(duì)象外 OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)獲得焦點(diǎn) OnLostFocus：鼠標(biāo)的指針離開(kāi)文字輸入狀態(tài) 失去焦點(diǎn) OnPageLoad：頁(yè)面或模塊載入 大多對(duì)象只具備常見(jiàn)的三種觸發(fā)事件：OnClick、OnMouseEnter 與 OnMouseOut， 一些特殊的控件可觸發(fā)的事件有些不同： 按鈕控件只有 OnClick 單項(xiàng)選擇框和復(fù)選框那么具有 OnFocus、 OnLostFocus 文本框、文本域、下拉框、列表框那么具有 OnKeyUp、OnFocus、OnLostFocus 頁(yè)面加載或模塊被載入時(shí)那么發(fā)生 OnPageLoad事件、場(chǎng)景和動(dòng)作的關(guān)系A(chǔ)XURE RP

14、教程2、定義鏈接以下步驟說(shuō)明如何在按鈕控件上定義一個(gè)鏈接： 1. 首先，拖拉一個(gè)按鈕控件到線(xiàn)框圖中，并選擇這個(gè)按鈕； 2. 然后，控件交互面板中鼠標(biāo)雙擊“OnClick這個(gè)事件，這時(shí)會(huì)出現(xiàn)“Interaction Case Properties對(duì)話(huà)窗，在這個(gè)對(duì)話(huà)框中可以選擇要執(zhí)行的動(dòng)作； 3. 在“Step 2中，勾選“Open Link in Current Window動(dòng)作。 4. 在“Step 3中，點(diǎn)擊“Link，在彈出的 Link Properties 對(duì)話(huà)框中可以選擇要鏈接 的頁(yè)面或其它網(wǎng)頁(yè)地址 。AXURE RP 教程除了上面的步驟， 參加一個(gè)鏈接的最快的方法是單擊控件交互面板頂

15、部的“Quick Link ，在彈出的 Link Properties 對(duì)話(huà)框中選擇要鏈接的頁(yè)面。AXURE RP 教程3. 設(shè)置動(dòng)作除了簡(jiǎn)單的鏈接之外，Axure 還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在任何觸發(fā)事件的場(chǎng)景中執(zhí)行。AXURE RP 教程以下是 Axure 所支持的動(dòng)作： Open Link in Current Window：在當(dāng)前窗口翻開(kāi)一個(gè)頁(yè)面 Open Link in Popup Window：在彈出的窗口中翻開(kāi)一個(gè)頁(yè)面 Open Link in Parent Window：在父窗口中翻開(kāi)一個(gè)頁(yè)面 Close Current Window：關(guān)閉當(dāng)前窗口 Open Link

16、 in Frame：在框架中翻開(kāi)一個(gè)頁(yè)面 Set Panel state(s) to State(s)：為動(dòng)態(tài)面板設(shè)定要顯示的狀態(tài) Show Panel(s)：顯示動(dòng)態(tài)面板 Hide Panel(s)：隱藏動(dòng)態(tài)面板 Toggle Visibility for Panel(s)：切換動(dòng)態(tài)面板的顯示狀態(tài)顯示/隱藏 Move Panel(s)：根據(jù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來(lái)移動(dòng)動(dòng)態(tài)面板 Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open Link in Parent Frame：在父頁(yè)面的嵌框架中翻開(kāi)一個(gè)頁(yè)面 Scroll t

17、o Image Map Region：滾動(dòng)頁(yè)面到 Image Map 所在位置Enable Widget(s)：把對(duì)象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對(duì)象狀態(tài)變成不可用狀態(tài) Wait Time(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作 Other：顯示動(dòng)作的文字說(shuō)明AXURE RP 教程4. 多個(gè)場(chǎng)景條件一個(gè)觸發(fā)事件可以包含有多個(gè)場(chǎng)景，根據(jù)條件執(zhí)行流程或互動(dòng)。AXURE RP 教程5. 頁(yè)面上的事件: OnPageLoadAxure 支持一個(gè)頁(yè)面層級(jí)的觸發(fā)事件：OnPageLoad，這個(gè)事件在原型載入頁(yè)面時(shí)觸發(fā)。頁(yè)面 OnPageLoad 事件在頁(yè)面?zhèn)渥⒚姘逯械?Interactions 子面板中定義， OnPageLoad 為事件添加場(chǎng)景的方式與控件事件相同AXURE RP 教程實(shí)例-翻開(kāi)關(guān)閉彈出層1.點(diǎn)擊翻開(kāi)彈出層彈出層顯示2.點(diǎn)擊彈出層右上角的關(guān)閉，即可關(guān)閉彈出層AXURE RP 教程實(shí)例翻開(kāi)關(guān)閉層實(shí)例描述：翻開(kāi)/關(guān)閉設(shè)置 切換設(shè)置區(qū)域顯示與隱