AXURE-RP案例教程 ue設(shè)計(jì)技巧 ax原型設(shè)計(jì)軟件教程

AXURERP案例教程

交互設(shè)計(jì)師、產(chǎn)品經(jīng)理產(chǎn)品原型利器2021/5/91入門篇第一章介紹以工具欄工具(widgets)繪制示意圖(Wireframe)第二章流程圖（FlowDiagrams）撰寫網(wǎng)頁(yè)說(shuō)明(PageNotes)第三章高級(jí)交互設(shè)計(jì)（RichInteraction）第四章實(shí)例2021/5/92第一章介紹第1節(jié)認(rèn)識(shí)AxureRP第2節(jié)線框圖及其注釋第3節(jié)基本交互設(shè)計(jì)第4節(jié)使用模塊（Master）第5節(jié)HTML原型第6節(jié)輸出規(guī)格說(shuō)明2021/5/93入門篇第一章軟件介紹第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)理。2021/5/94Axure能讓你快速的進(jìn)行線框圖和原型的設(shè)計(jì)，讓相關(guān)人員對(duì)你的設(shè)計(jì)進(jìn)行體驗(yàn)和驗(yàn)證，向用戶進(jìn)行演示、溝通交流以確認(rèn)用戶需求，并能自動(dòng)生成規(guī)格說(shuō)明文檔。另外，Axure還能讓團(tuán)隊(duì)成員進(jìn)行多人協(xié)同設(shè)計(jì)，并對(duì)設(shè)計(jì)進(jìn)行方案版本控制管理。Axure使原型設(shè)計(jì)及和客戶的交流方式發(fā)生了變革：進(jìn)行更加高效的設(shè)計(jì)；讓你體驗(yàn)動(dòng)態(tài)的原型；更加清晰的交流想法；2.原型的作用和好處

制作Prototype是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(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，國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。2021/5/953、Axure的工作環(huán)境Axure的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無(wú)需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說(shuō)明Word文檔。以下是對(duì)AxureRP工作環(huán)境的簡(jiǎn)要說(shuō)明：2021/5/962021/5/972021/5/98第2節(jié)線框圖及其注釋頁(yè)面導(dǎo)航面板（Sitemap）在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。明確界面框架后，接下來(lái)就可以利用頁(yè)面導(dǎo)航面板來(lái)定義所要設(shè)計(jì)的頁(yè)面。頁(yè)面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁(yè)面，可以添加、刪除及對(duì)頁(yè)面層次進(jìn)行重新組織。頁(yè)面的添加、刪除和重命名點(diǎn)擊面板工具欄上的“AddChildPage”按鈕可以添加一個(gè)頁(yè)面，點(diǎn)擊“DeletePage”按鈕可以刪除一個(gè)頁(yè)面。右鍵單擊選擇“RenamePage”菜單項(xiàng)可對(duì)頁(yè)面進(jìn)行重命名。2021/5/99頁(yè)面組織排序在頁(yè)面導(dǎo)航面板中，通過拖拉頁(yè)面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁(yè)面的位置和重新組織頁(yè)面的層次。打開頁(yè)面進(jìn)行設(shè)計(jì)在頁(yè)面導(dǎo)航面板中，鼠標(biāo)雙擊頁(yè)面將會(huì)在線框面板中打開頁(yè)面以進(jìn)行線框圖設(shè)計(jì)。2021/5/9102.

控件（Widgets）控件是用于設(shè)計(jì)線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。2021/5/911添加控件從控件面板中拖動(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)擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。2021/5/9123.注釋（Annotations）可以為控件添加注釋，以說(shuō)明控件的功能。添加注釋在線框圖中選擇控件，然后在控件注釋和交互（AnnotationsandInteractions）面板中編輯字段中的值，即可為控件添加注釋。面板頂部的Label字段是為控件添加一個(gè)標(biāo)識(shí)符。2021/5/913自定義字段（Fields）通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點(diǎn)擊面板上Annotations頭部的“CustommizeFieldsandViews”然后在彈出的CustommizeFieldsand，Views對(duì)話框中可以添加、刪除、修改、排序注釋字段。2021/5/914腳注（Footnotes）在控件上添加注釋后，控件的右上角會(huì)顯示一個(gè)黃色方塊，稱為腳注。腳注號(hào)碼可以增大和減小，可通過控件右鍵菜單或工具欄上的進(jìn)行修改。2021/5/9154.頁(yè)面?zhèn)渥ⅲ≒ageNotes）頁(yè)面?zhèn)渥⒖墒菍?duì)頁(yè)面進(jìn)行描述和說(shuō)明。添加頁(yè)面?zhèn)渥⒃诰€框圖下面的Pagenotes面板中可以添加頁(yè)面?zhèn)渥?nèi)容。管理頁(yè)面?zhèn)渥⒘硗猓梢宰远x頁(yè)面?zhèn)渥?，為不同的人提供不同的備注，以滿足不同需要。比如可以新增“測(cè)試用例”“操作說(shuō)明”等不同類別的頁(yè)面?zhèn)渥ⅰ?021/5/916第3節(jié)基本交互設(shè)計(jì)控件的交互控件交互面板用于定義線框圖中控件的行為，包含定義簡(jiǎn)單的鏈接和復(fù)雜的RIA行為，所定義的交互都可以在將來(lái)生成的原型中進(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)面板。2021/5/917以下是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：頁(yè)面或模塊載入大多對(duì)象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，一些特殊的控件可觸發(fā)的事件有些不同：按鈕控件只有OnClick

單選框和復(fù)選框則具有OnFocus、OnLostFocus文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus頁(yè)面加載或模塊被載入時(shí)則發(fā)生OnPageLoad事件、場(chǎng)景和動(dòng)作的關(guān)系2021/5/9182、定義鏈接下列步驟說(shuō)明如何在按鈕控件上定義一個(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ì)話框中可以選擇要鏈接的頁(yè)面或其它網(wǎng)頁(yè)地址。2021/5/919除了上面的步驟，加入一個(gè)鏈接的最快的方法是單擊控件交互面板頂部的“QuickLink”

，在彈出的LinkProperties對(duì)話框中選擇要鏈接的頁(yè)面。2021/5/9203.設(shè)置動(dòng)作除了簡(jiǎn)單的鏈接之外，Axure還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在任何觸發(fā)事件的場(chǎng)景中執(zhí)行。2021/5/921以下是Axure所支持的動(dòng)作：OpenLinkinCurrentWindow：在當(dāng)前窗口打開一個(gè)頁(yè)面OpenLinkinPopupWindow：在彈出的窗口中打開一個(gè)頁(yè)面OpenLinkinParentWindow：在父窗口中打開一個(gè)頁(yè)面CloseCurrentWindow：關(guān)閉當(dāng)前窗口OpenLinkinFrame：在框架中打開一個(gè)頁(yè)面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)來(lái)移動(dòng)動(dòng)態(tài)面板SetVariableandWidgetvalue(s)equaltoValue(s)：設(shè)定變量值或控件值OpenLinkinParentFrame：在父頁(yè)面的嵌框架中打開一個(gè)頁(yè)面ScrolltoImageMapRegion：滾動(dòng)頁(yè)面到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)作的文字說(shuō)明2021/5/9224.多個(gè)場(chǎng)景（條件）一個(gè)觸發(fā)事件可以包含有多個(gè)場(chǎng)景，根據(jù)條件執(zhí)行流程或互動(dòng)。2021/5/9235.頁(yè)面上的事件:OnPageLoadAxure支持一個(gè)頁(yè)面層級(jí)的觸發(fā)事件：OnPageLoad，這個(gè)事件在原型載入頁(yè)面時(shí)觸發(fā)。頁(yè)面OnPageLoad事件在頁(yè)面?zhèn)渥⒚姘逯械腎nteractions子面板中定義，OnPageLoad為事件添加場(chǎng)景的方式與控件事件相同2021/5/924實(shí)例-打開關(guān)閉彈出層點(diǎn)擊打開彈出層彈出層顯示點(diǎn)擊彈出層右上角的關(guān)閉，即可關(guān)閉彈出層2021/5/925實(shí)例—打開關(guān)閉層實(shí)例描述：打開/關(guān)閉設(shè)置切換設(shè)置區(qū)域顯示與隱藏產(chǎn)品列表位置移動(dòng)2021/5/926實(shí)例—Tab切換標(biāo)簽點(diǎn)擊Tab標(biāo)簽進(jìn)行層切換2021/5/927實(shí)例--記住