AxureRPPro案例教程

1、AXURE RP 教程AXURE RP案例教程交互設(shè)計師、產(chǎn)品經(jīng)理產(chǎn)品原型利器入門篇第一章 介紹以工具欄工具(wi d g ets)繪制示意圖(Wirefra m e)第二章 流程圖(Flow Diagrams )撰寫網(wǎng)頁說明(Page Notes)第三童 高級交互設(shè)計(Rich Interaction )第四章實例AXURE RP 教程第一章介紹第1節(jié)認(rèn)識Axure RP第2節(jié)線框圖及其注釋基本交互設(shè)計第4節(jié)使用模塊（Master）第5節(jié)HTML原型第6節(jié)輸出規(guī)格說明AXURE RP 教程入門篇第一章軟件介紹第1節(jié)認(rèn)識Axure RP1 Axure RPAxure 的發(fā)音是"Ack

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

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

4、要機構(gòu)在使用Axure RP ;國內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品 經(jīng)理也都在使用。3、Axure的工作環(huán)境Axure的工作環(huán)境可進行可視化拖拉操作z可輕松快速的創(chuàng)建帶有注釋的線 框圖。無需編程就可以在線框圖中定義簡單鏈接和高級交互。Axure可一體化生成 線框圖、HTML交互原型、規(guī)格說明Word文檔。以下是對Axure RP工作 環(huán)境的簡要說明：AXURE RP 教程AXURE RP 教程Y '、T>t R«4W4« "護“ ToVvidgets PanezPage Notes & Interactions1 / MairMenib

5、olbar7r嶺Jr'WA 對""、rjsitemap PaneM m uauT怕(u277 u."b.i.h擬-際i 杞 i -恤.« t A M.Kr . Ig6 interactions Pane IMy Travel SiteT>9kn«CrWlr(hWasters PaneHotoh C°r?/PxkKf 如出丿 Cm $ Fu Fm3< r FBM K<M CatWelcome!Wireframe PaneSUMOTrMhn 1 TAnnotations PaneAXURE RP 教程AXURE

6、RP 教程AXURE RP 教程AXURE RP 教程模塊面板(Masters Pane)模塊是一種可以復(fù)用的特殊頁面，在該面板中可進行模塊的添 加、刪除、重命名和組織。冷 線框圖而板(Wireframe Pane)在線框圖而板中可以進行頁而線框圖的設(shè)計，線框圖而 板也就是進行頁而設(shè)計的工作區(qū)。I控件注釋而板(Annotations Pane)對控件進行注釋定義和對控件的功能進行說明。6 fBWWM第2節(jié)線框圖及其注釋1頁面導(dǎo)航面板(Sitemap )在繪制線框圖(Wireframe)或流程圖(Flow )之前z應(yīng)該先思考界面框架”決定信息內(nèi)容與層級。明確界面框架后,接下來就可以利用頁面導(dǎo)航面

7、板來走義所要設(shè)計的頁面。頁面導(dǎo)航面 板是用于管理所設(shè)計的頁面,可以添加、刪除及對頁面層次進行重新組織。頁面的添加.刪除和重命名 點擊面板工具欄上的“Add Child Page”按鈕可以添加一個頁面，點擊“Delete Page"電侖3¥艮豹Home口 Pwge2按鈕可以刪除一個頁面。右鍵單擊選擇"Rename Page*1菜單項可對頁面進行重命名。AXURE RP 教程頁面組織排序在頁面導(dǎo)航面板中,通過拖拉頁面或點擊工具欄上的排序按鈕,可以上下移動頁面的位置和重新纟崖只頁的層次。AXURE RP 教程AXURE RP 教程打開頁面進行設(shè)計在頁面導(dǎo)航面板中,鼠標(biāo)雙

8、擊頁面將會在線框面板中打開頁面以進AXURE RP 教程AXURE RP 教程行線框圖設(shè)計。包0 0 => 申宜習(xí)b J Hcxne 0結(jié)構(gòu)模板B 一F layout口口口口0 0 0 0_J head_i footmenuflowInfor ：am t i on.Functi onAXURE RP 教程2. 控件（Widgets ）控件是用于設(shè)計線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。添加控件從控件面板中拖動一個控件到線框圖面板中，就可以添加一個控件?？丶梢詮囊粋€線框圖中被拷貝(Ctrl+C),然后粘貼(Ctrl+V)到另夕卜一個線框圖中。操作控件

9、添加控件后，在線框圖中點選該控件,然后可以拖拉移動控件和改變控件的大小，還可以一次同時對多個控件進行選擇、 移動、改變尺寸。另外，還可以組合、排序、對齊、分酉護口鎖定控件。這些操作可通過控件右鍵菜單中進行，也可在Object工具欄上的 按鈕進行。編輯控件風(fēng)格和屬性有多種方法可以編輯控件的風(fēng)格和屬性：鼠標(biāo)雙擊:鼠標(biāo)雙擊某個控件，可以對控件的最常用屬性進行編輯。例如，雙擊一個圖片控件可以導(dǎo)入一張圖片；雙擊一個下拉列表或列表框控件可以編輯列表項。工具欄:點擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。右鍵菜單:控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。3.注釋(Anno

10、tations )可以為控件添加注釋，以說明控件的功能。添加注釋在線框圖中選擇控件，然后在控件注釋和交互(Annotations and Interactions )面板中編輯字 段中的值，即可為控件添加注釋。面板頂部的Label字段是為控件添加一個標(biāo)識符。通過主菜單 Wireframe->Customize Annotation Fields and Views 或點擊面板上 Annotations 頭部的"Custommize Fields and Views"然后在彈出的 Custommize Fields and , Views對話框中可以添加、刪除修改、排序

11、注釋字段。Annotations - All Fields 呼一 ,Clw Ml SpecificationCustomize Fields and ViewsView All Fields (no other views)StatusBenefitEffort腳注(Footnotes )在控件上添加注釋后z控件的右上角會顯示一個黃色方塊,稱為 腳注。腳注號碼可以增大和減小，可通過控件右鍵菜單或工具欄上的丄進行修改。4.頁面?zhèn)渥?Page Notes )頁面?zhèn)渥⒖墒菍撁孢M行描述和說明。添加頁備注在線框圖下面的Page notes面板中可以添加頁面?zhèn)渥?nèi)容。P»ge Notes j-

12、 Default Paqe Interactions點擊這里可以濛加頁面的備注-祖讓DUH. c氣J 0nP<c«L4>a.d管理頁面?zhèn)渥⒘硗?，可以自定義頁面?zhèn)渥ⅲ瑸椴煌娜颂峁┎煌膫渥?，以滿足不同需要。比如可以新 增“測試用例” “操作說明”等不同類別的頁面?zhèn)渥?。?節(jié)基本交互設(shè)計1. 控件的交互控件交互面板用于定義線框圖中控件的行為,包含定義簡單的鏈接和復(fù)雜的RIA行 為,所走義的交互都可以在將來生成的原型中進行操作執(zhí)行。LabelOnClickOnMo use EnterOnMouseOut在控件交互面板中可以定義控件的交互，交互事件(Events)、場景(Cas

13、es)和動作(Actions)組成：用戶操作界而時就會觸發(fā)事件，如鼠標(biāo)的OnClick、OnMouseEnter和OnMouseOut；每個事件可以包含多個場景，場景也就是事件觸發(fā)后耍滿足的條件；A每個場景可執(zhí)行多個動作，例如：打開鏈接、顯示面板、隱藏而板、移動而板。事件、場景和動作的關(guān)系以下是Axure RP支持的事件如下：> OnClick :鼠標(biāo)點擊> OnMouseEnter:鼠標(biāo)的指針移動到對象上> OnMouseOut :鼠標(biāo)的指針移動出對象外> OnFocus :鼠標(biāo)的指針進入文字輸入狀態(tài)（獲得焦點）> OnLostFocus :鼠標(biāo)的指針離開文字輸

14、入狀態(tài)（失去焦點）> OnPageLoad :頁面或模塊載入> 大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut,些特殊的控件可觸發(fā)的事件有些不同：>按鈕控件只有0nClick >單選框和復(fù)選框則具有OnFocus、OnLostFocus> 文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus 頁面加載或 模塊被載入時則發(fā)生OnPageLoad2、定義鏈接下列步驟說明如何在按鈕控件上定義一個鏈接：1. 首先”拖拉一個按鈕控件到線框圖中,并選擇這個按鈕;2. 然后，控件交互面板中鼠

15、標(biāo)雙擊OnClick這個事件，這時會出現(xiàn)interaction CaseProperties"對話窗，在這個對話框中可以選擇要執(zhí)行的動作；3. 在"Step 2"中,勾選"Open Link in Current Window"動作。4. 在"Step 3中，點擊"Link",在彈出的Link Properties對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址OAXURE RP 教程AXURE RP 教程除了上而的步驟，加入一個鏈接的最快的方法是單擊控件交互而板頂部的“ Quick Link-,在彈出的Link Pro

16、perties對話框中選擇要鏈接的頁而。AXURE RP 教程3.設(shè)置動作行。除了簡單的鏈接之外，Axu re還提供了許多豐富的動作，這些動作可以在任何觸發(fā)事件的場景中執(zhí)nteractfon Case Pro periledStep 1 D&scriptiori 1Add Ccrdlicn if rec8&5arv) 1 丁 AdiCctidiijaiStep 2 Sei-cl AzrHrniOpen Lii+; inCwfertWrdow0 psn Lirfc in Pcpup Wndow0pen Link in P.vml Window盤b Cu-iertV?ifidcwL

17、pen Lirfc(s) in Fiarnejs)Sc： Panel 8»ai:c(3 to Srate&)Urie PaneJvjT o;gbVi$ibiiy fa Fare(s56? Veiikibie 白"id WiJgd vaurfij eucil tft VJue|4)Step 1 EdHh? Ai：lirn? scppton (clcfc on weaned 旳訂e io ucHJ0|MnCiricrl WimdowAXURE RP 教程以下是Axure所支持的動作：Open Link in Current Window :在當(dāng)前窗口打開一個頁面Open

18、 Link in Popup Window :在彈出的窗口中打開一個頁面Open Link in Parent Window :在父窗口中打開一個頁面Close Current Window :關(guān)閉當(dāng)前窗口 Open Link in Frame:在框架中打開一 頁面Set Panel states) to State(s):為動態(tài)面板設(shè)定要顯示的狀態(tài)Show Panel(s):顯示動態(tài)面板Hide Panel：隱藏動態(tài)面板Toggle Visibility for Panel(s):切換動態(tài)面板的顯示狀態(tài)(顯示/隱藏)Move Panel(s):根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動動態(tài)面板Set Va

19、riable and Widget value(s) equal to Value(s):設(shè)定變量值或控件值Open Link in Parent Frame :在父頁面的嵌框架中打開一頁面Scroll to Image M叩 Region :滾動頁面到Image Map所在位置Enable Widget(s):把對象狀態(tài)變成可用狀態(tài)口Disable Widget(s):把對象狀態(tài)變成不可用狀態(tài)口Wait Time(s):等待多少毫秒(ms)后再進行這個動作Other:顯示動作的文字說明4.多個場景（條件）個觸發(fā)事件可以包含有多個場景,根據(jù)條件執(zhí)行流程或互動。InteractionsAddEd

20、it case. Delete case日甩 OnClick日蓋用Yes孕 Open Account Overview in Current Window兮 Open Registration Overview in Current Window On Mouse EnterOnMouseOutE）為 If NoAXURE RP 教程5.頁面上的事件：OnPageLoadAxu佗支持一個頁面層級的觸發(fā)事件:OnPageLoad ,這個事件在原型載入頁面時觸發(fā)。Page Inter actio n sAdd case. Edit case. Delete caseOnPageLoad頁面OnPageLoad事件在頁面?zhèn)渥⒚姘逯械腎nteractions f面板 中定義，OnPageLoad為事件添加場景的方式與控件事件相同3111st巡刃siE氷fc50俅i dQrLLJHnxvAXURE RP 教程實例一打開關(guān)閉層關(guān)閉設(shè)置 廠顯示圖片廠顯示圖片和文