2024年-AXURERP從入門到提高教程

AXURERP從入門到提高交互設(shè)計(jì)師、產(chǎn)品經(jīng)理產(chǎn)品原型利器1

2快速原型的介紹根據(jù)功能，為了指導(dǎo)開發(fā)而畫的草圖快速原型也叫做交互式原型一種有效且高效的以用戶為中心（User-CenteredDesign）的技術(shù)實(shí)現(xiàn)了功能頁面流程跳轉(zhuǎn)做到用戶的響應(yīng)都會(huì)有反饋和最后開發(fā)出來的產(chǎn)品基本吻合22024/5/5快速原型的對(duì)產(chǎn)品的意義團(tuán)隊(duì)了解需求的最佳方式程序員開發(fā)的最好參考項(xiàng)目開發(fā)和維護(hù)中所需標(biāo)準(zhǔn)的最好表現(xiàn)形式驗(yàn)收的依據(jù)32024/5/5快速原型的制作工具紙和筆，白板和油性筆AxureUIDesignerPPT42024/5/5為何選擇Axure？你會(huì)發(fā)現(xiàn)上述工具：制作緩慢、效果粗獷、不易理解、無交互體現(xiàn)、修改困難···如果你還在使用以下工具表達(dá)想法：52024/5/5什么是Axure？AxureRP(aksh?r)快速原型制作軟件，由美國(guó)AxureSoftwareSolutions,Inc.公司開發(fā)。RP是RapidPrototyping(快速原型縮寫)。345261網(wǎng)站架構(gòu)圖示意圖流程圖交互設(shè)計(jì)原型設(shè)計(jì)規(guī)格文檔軟件界面及功能特性：62024/5/5入門與提高篇第一章介紹以工具欄工具(widgets)繪制示意圖(Wireframe)第二章流程圖（FlowDiagrams）撰寫網(wǎng)頁說明(PageNotes)第三章高級(jí)交互設(shè)計(jì)（RichInteraction）72024/5/5第一章介紹第0節(jié)微件的概念第1節(jié)AxureRP整體界面第2節(jié)線框圖及其注釋第3節(jié)基本交互設(shè)計(jì)第4節(jié)使用模塊（Master）第5節(jié)HTML原型第6節(jié)輸出規(guī)格說明82024/5/5第0節(jié)微件的概念英文名：widgets,包括framework,flow原型圖中的所有的設(shè)計(jì)元素，都是由微件組合而成，是最小原型設(shè)計(jì)單元類比：面向?qū)ο笾械摹邦悺?、“?duì)象”微件有屬性、狀態(tài)和行為例子：文本輸入框92024/5/5Axure的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。以下是對(duì)AxureRP工作環(huán)境的簡(jiǎn)要說明：

第1節(jié)：Axure的整體工作界面102024/5/5112024/5/5主菜單和工具欄（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）添加和管理頁面的注釋和交互。122024/5/5第2節(jié)線框圖及其注釋頁面導(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)行重命名。132024/5/5頁面組織排序在頁面導(dǎo)航面板中，通過拖拉頁面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁面的位置和重新組織頁面的層次。打開頁面進(jìn)行設(shè)計(jì)在頁面導(dǎo)航面板中，鼠標(biāo)雙擊頁面將會(huì)在線框面板中打開頁面以進(jìn)行線框圖設(shè)計(jì)。142024/5/52.

微件（Widgets）微件是用于設(shè)計(jì)線框圖的用戶界面元素。在微件面板中包含有常用的微件，如按鈕、圖片、文本框等。152024/5/5添加微件從微件面板中拖動(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)擊工具欄上的按鈕可編輯微件的文本字體、背景色、邊框等。右鍵菜單：微件右鍵菜單上可編輯微件的一些特定屬性，不同微件這些屬性也不同。162024/5/53.注釋（Annotations）可以為微件添加注釋，以說明微件的功能。添加注釋在線框圖中選擇微件，然后在微件注釋和交互（AnnotationsandInteractions）面板中編輯字段中的值，即可為微件添加注釋。面板頂部的Label字段是為微件添加一個(gè)標(biāo)識(shí)符。172024/5/54.頁面?zhèn)渥ⅲ≒ageNotes）頁面?zhèn)渥⒖墒菍?duì)頁面進(jìn)行描述和說明。添加頁面?zhèn)渥⒃诰€框圖下面的Pagenotes面板中可以添加頁面?zhèn)渥?nèi)容。管理頁面?zhèn)渥⒘硗?，可以自定義頁面?zhèn)渥?，為不同的人提供不同的備注，以滿足不同需要。比如可以新增“測(cè)試用例”“操作說明”等不同類別的頁面?zhèn)渥ⅰ?82024/5/5第3節(jié)基本交互設(shè)計(jì)微件的交互微件交互面板用于定義線框圖中微件的行為，包含定義簡(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)面板。192024/5/5以下是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)系202024/5/52、定義鏈接下列步驟說明如何在按鈕微件上定義一個(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)頁地址。212024/5/5除了上面的步驟，加入一個(gè)鏈接的最快的方法是單擊微件交互面板頂部的“QuickLink”，在彈出的LinkProperties對(duì)話框中選擇要鏈接的頁面。222024/5/53.設(shè)置動(dòng)作除了簡(jiǎn)單的鏈接之外，Axure還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在任何觸發(fā)事件的場(chǎng)景中執(zhí)行。232024/5/5以下是Axure所支持的動(dòng)作：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)作的文字說明242024/5/54.多個(gè)場(chǎng)景（條件）一個(gè)觸發(fā)事件可以包含有多個(gè)場(chǎng)景，根據(jù)條件執(zhí)行流程或互動(dòng)。252024/5/55.頁面上的事件:OnPageLoadAxure支持一個(gè)頁面層級(jí)的觸發(fā)事件：OnPageLoad，這個(gè)事件在原型載入頁面時(shí)觸發(fā)。頁面OnPageLoad事件在頁面?zhèn)渥⒚姘逯械腎nteractions子面板中定義，OnPageLoad為事件添加場(chǎng)景的方式與微件事件相同262024/5/5第4節(jié)使用模塊（Master）認(rèn)識(shí)共享區(qū)塊(Master)共享區(qū)塊(Master)是一組在設(shè)計(jì)過程中可以重復(fù)使用的Widget，一些常用的Master包括了頁首(Header)、頁尾(Footer)與導(dǎo)覽(Navigation)，Master可以被放置在網(wǎng)頁或是其它的Master中，只要Master做了修改，其它使用到這個(gè)Master的地方也會(huì)跟著修改。2.新增、組織與設(shè)計(jì)Master3.套用Master到網(wǎng)頁中想要在網(wǎng)頁或其它Master的Wireframe中套用Master，只要將Master窗格中的Master拖拉到Wireframe中即可。272024/5/5第5節(jié)HTML原型1.什么是網(wǎng)站/應(yīng)用程序原型(HTMLPrototype)?Html原型是指在Axure中設(shè)計(jì)了帶注釋的線框圖并定義了交互之后，就可以產(chǎn)生的一個(gè)可以基于瀏覽器的、可互動(dòng)的原型。2.輸出網(wǎng)站原型/格式設(shè)定282024/5/5第6節(jié)輸出規(guī)格說明在AxureRP中設(shè)計(jì)完Wireframe之后，我們可以輸出MicrosoftWord格式的需求書或功能性規(guī)格文件(Specification)。292024/5/5第二章架構(gòu)圖/流程圖第1節(jié)為什么需要流程圖第2節(jié)自動(dòng)繪制架構(gòu)圖第3節(jié)繪制流程圖302024/5/5第1節(jié)為什么需要流程圖流程圖常被用來提供一個(gè)高階視角(highlevelview)來看網(wǎng)頁設(shè)計(jì)可以達(dá)成的工作；流程圖有利于梳理業(yè)務(wù)流程；流程圖可以用來表達(dá)各式各樣的流程，包括：UseCase、商業(yè)流程與網(wǎng)頁流程312024/5/5第2節(jié)自動(dòng)繪制架構(gòu)圖每一個(gè)網(wǎng)站的規(guī)劃，少不了要繪制樹狀的網(wǎng)站架構(gòu)(sitemapdiagram)，架構(gòu)圖能夠以視覺化的方式呈現(xiàn)網(wǎng)頁階層。您在AxureRP的sitemap窗格定義好的網(wǎng)站架構(gòu)，只要one-click就可以轉(zhuǎn)成樹狀架構(gòu)圖。建議您先開啟一個(gè)空白頁面，命名為”Sitemap”或者其他您覺得有意義的名稱。322024/5/5332024/5/5第3節(jié)繪制流程圖342024/5/5第4節(jié)關(guān)聯(lián)網(wǎng)頁并輸出流程圖FlowWidget可以關(guān)聯(lián)到任意指定的一個(gè)參考網(wǎng)頁，在Prototype中，這個(gè)FlowWidget與網(wǎng)頁間會(huì)自動(dòng)建立Hyperlink連結(jié)。352024/5/5第三章高級(jí)交互第1節(jié)動(dòng)態(tài)面板第2節(jié)中繼器362024/5/5動(dòng)態(tài)面板包含有多個(gè)狀態(tài)（states），每個(gè)狀態(tài)可包