AXURE-RP案例教程 ue設計技巧 ax原型設計軟件教程

AXURERP案例教程

交互設計師、產(chǎn)品經(jīng)理產(chǎn)品原型利器2021/5/91入門篇第一章介紹以工具欄工具(widgets)繪制示意圖(Wireframe)第二章流程圖（FlowDiagrams）撰寫網(wǎng)頁說明(PageNotes)第三章高級交互設計（RichInteraction）第四章實例2021/5/92第一章介紹第1節(jié)認識AxureRP第2節(jié)線框圖及其注釋第3節(jié)基本交互設計第4節(jié)使用模塊（Master）第5節(jié)HTML原型第6節(jié)輸出規(guī)格說明2021/5/93入門篇第一章軟件介紹第1節(jié)

認識AxureRP1.AxureRPAxure的發(fā)音是“Ack-sure”，RP則是“RapidPrototyping”的縮寫。AxureRPPro是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個快速的原型工具，主要是針對負責定義需求、定義規(guī)格、設計功能、設計界面的專家，包括用戶體驗設計師、交互設計師、業(yè)務分析師、信息架構(gòu)師、可用性專家和產(chǎn)品經(jīng)理。2021/5/94Axure能讓你快速的進行線框圖和原型的設計，讓相關人員對你的設計進行體驗和驗證，向用戶進行演示、溝通交流以確認用戶需求，并能自動生成規(guī)格說明文檔。另外，Axure還能讓團隊成員進行多人協(xié)同設計，并對設計進行方案版本控制管理。Axure使原型設計及和客戶的交流方式發(fā)生了變革：進行更加高效的設計；讓你體驗動態(tài)的原型；更加清晰的交流想法；2.原型的作用和好處

制作Prototype是個有效的簡化文檔編制、吸引使用者參與、早期辨認需求遺漏、將外在需求風險降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動性的可視畫面，如此更能抓住利益相關者與使用者的注意，讓用戶在軟件開始投入編程前就確認需求。快速原型法（RapidPrototyping）是一種有效且高效的以用戶為中心（User-CenteredDesign）的技術(shù)，可以幫助用戶體驗專家、設計師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財富1000大的公司和重要機構(gòu)在使用AxureRP，國內(nèi)的淘寶、雅虎、騰訊、當當?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用。2021/5/953、Axure的工作環(huán)境Axure的工作環(huán)境可進行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡單鏈接和高級交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。以下是對AxureRP工作環(huán)境的簡要說明：2021/5/962021/5/972021/5/98第2節(jié)線框圖及其注釋頁面導航面板（Sitemap）在繪制線框圖(Wireframe)或流程圖（Flow）之前，應該先思考界面框架，決定信息內(nèi)容與層級。明確界面框架后，接下來就可以利用頁面導航面板來定義所要設計的頁面。頁面導航面板是用于管理所設計的頁面，可以添加、刪除及對頁面層次進行重新組織。頁面的添加、刪除和重命名點擊面板工具欄上的“AddChildPage”按鈕可以添加一個頁面，點擊“DeletePage”按鈕可以刪除一個頁面。右鍵單擊選擇“RenamePage”菜單項可對頁面進行重命名。2021/5/99頁面組織排序在頁面導航面板中，通過拖拉頁面或點擊工具欄上的排序按鈕，可以上下移動頁面的位置和重新組織頁面的層次。打開頁面進行設計在頁面導航面板中，鼠標雙擊頁面將會在線框面板中打開頁面以進行線框圖設計。2021/5/9102.

控件（Widgets）控件是用于設計線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。2021/5/911添加控件從控件面板中拖動一個控件到線框圖面板中，就可以添加一個控件。控件可以從一個線框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個線框圖中。操作控件添加控件后，在線框圖中點選該控件，然后可以拖拉移動控件和改變控件的大小，還可以一次同時對多個控件進行選擇、移動、改變尺寸。另外，還可以組合、排序、對齊、分配和鎖定控件。這些操作可通過控件右鍵菜單中進行，也可在Object工具欄上的按鈕進行。編輯控件風格和屬性有多種方法可以編輯控件的風格和屬性：鼠標雙擊：鼠標雙擊某個控件，可以對控件的最常用屬性進行編輯。例如，雙擊一個圖片控件可以導入一張圖片；雙擊一個下拉列表或列表框控件可以編輯列表項。工具欄：點擊工具欄上的按鈕可編輯控件的文本字體、背景色、邊框等。右鍵菜單：控件右鍵菜單上可編輯控件的一些特定屬性，不同控件這些屬性也不同。2021/5/9123.注釋（Annotations）可以為控件添加注釋，以說明控件的功能。添加注釋在線框圖中選擇控件，然后在控件注釋和交互（AnnotationsandInteractions）面板中編輯字段中的值，即可為控件添加注釋。面板頂部的Label字段是為控件添加一個標識符。2021/5/913自定義字段（Fields）通過主菜單Wireframe->CustomizeAnnotationFieldsandViews或點擊面板上Annotations頭部的“CustommizeFieldsandViews”然后在彈出的CustommizeFieldsand，Views對話框中可以添加、刪除、修改、排序注釋字段。2021/5/914腳注（Footnotes）在控件上添加注釋后，控件的右上角會顯示一個黃色方塊，稱為腳注。腳注號碼可以增大和減小，可通過控件右鍵菜單或工具欄上的進行修改。2021/5/9154.頁面?zhèn)渥ⅲ≒ageNotes）頁面?zhèn)渥⒖墒菍撁孢M行描述和說明。添加頁面?zhèn)渥⒃诰€框圖下面的Pagenotes面板中可以添加頁面?zhèn)渥?nèi)容。管理頁面?zhèn)渥⒘硗?，可以自定義頁面?zhèn)渥ⅲ瑸椴煌娜颂峁┎煌膫渥?，以滿足不同需要。比如可以新增“測試用例”“操作說明”等不同類別的頁面?zhèn)渥ⅰ?021/5/916第3節(jié)基本交互設計控件的交互控件交互面板用于定義線框圖中控件的行為，包含定義簡單的鏈接和復雜的RIA行為，所定義的交互都可以在將來生成的原型中進行操作執(zhí)行。在控件交互面板中可以定義控件的交互，交互事件（Events）、場景（Cases）和動作（Actions）組成：用戶操作界面時就會觸發(fā)事件，如鼠標的OnClick、OnMouseEnter和OnMouseOut；每個事件可以包含多個場景，場景也就是事件觸發(fā)后要滿足的條件；每個場景可執(zhí)行多個動作，例如：打開鏈接、顯示面板、隱藏面板、移動面板。2021/5/917以下是AxureRP支持的事件如下：OnClick：鼠標點擊

OnMouseEnter：鼠標的指針移動到對象上OnMouseOut：鼠標的指針移動出對象外OnFocus：鼠標的指針進入文字輸入狀態(tài)（獲得焦點）OnLostFocus：鼠標的指針離開文字輸入狀態(tài)（失去焦點）OnPageLoad：頁面或模塊載入大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter與OnMouseOut，一些特殊的控件可觸發(fā)的事件有些不同：按鈕控件只有OnClick

單選框和復選框則具有OnFocus、OnLostFocus文本框、文本域、下拉框、列表框則具有OnKeyUp、OnFocus、OnLostFocus頁面加載或模塊被載入時則發(fā)生OnPageLoad事件、場景和動作的關系2021/5/9182、定義鏈接下列步驟說明如何在按鈕控件上定義一個鏈接：1.首先，拖拉一個按鈕控件到線框圖中，并選擇這個按鈕；2.然后，控件交互面板中鼠標雙擊“OnClick”這個事件，這時會出現(xiàn)“InteractionCaseProperties”對話窗，在這個對話框中可以選擇要執(zhí)行的動作；3.在“Step2”中，勾選“OpenLinkinCurrentWindow”動作。4.在“Step3”中，點擊“Link”，在彈出的LinkProperties對話框中可以選擇要鏈接的頁面或其它網(wǎng)頁地址。2021/5/919除了上面的步驟，加入一個鏈接的最快的方法是單擊控件交互面板頂部的“QuickLink”

，在彈出的LinkProperties對話框中選擇要鏈接的頁面。2021/5/9203.設置動作除了簡單的鏈接之外，Axure還提供了許多豐富的動作，這些動作可以在任何觸發(fā)事件的場景中執(zhí)行。2021/5/921以下是Axure所支持的動作：OpenLinkinCurrentWindow：在當前窗口打開一個頁面OpenLinkinPopupWindow：在彈出的窗口中打開一個頁面OpenLinkinParentWindow：在父窗口中打開一個頁面CloseCurrentWindow：關閉當前窗口OpenLinkinFrame：在框架中打開一個頁面SetPanelstate(s)toState(s)：為動態(tài)面板設定要顯示的狀態(tài)ShowPanel(s)：顯示動態(tài)面板HidePanel(s)：隱藏動態(tài)面板ToggleVisibilityforPanel(s)：切換動態(tài)面板的顯示狀態(tài)（顯示/隱藏）MovePanel(s)：根據(jù)絕對坐標或相對坐標來移動動態(tài)面板SetVariableandWidgetvalue(s)equaltoValue(s)：設定變量值或控件值OpenLinkinParentFrame：在父頁面的嵌框架中打開一個頁面ScrolltoImageMapRegion：滾動頁面到ImageMap所在位置EnableWidget(s)：把對象狀態(tài)變成可用狀態(tài)DisableWidget(s)：把對象狀態(tài)變成不可用狀態(tài)WaitTime(s)：等待多少毫秒(ms)后再進行這個動作Other：顯示動作的文字說明2021/5/9224.多個場景（條件）一個觸發(fā)事件可以包含有多個場景，根據(jù)條件執(zhí)行流程或互動。2021/5/9235.頁面上的事件:OnPageLoadAxure支持一個頁面層級的觸發(fā)事件：OnPageLoad，這個事件在原型載入頁面時觸發(fā)。頁面OnPageLoad事件在頁面?zhèn)渥⒚姘逯械腎nteractions子面板中定義，OnPageLoad為事件添加場景的方式與控件事件相同2021/5/924實例-打開關閉彈出層點擊打開彈出層彈出層顯示點擊彈出層右上角的關閉，即可關閉彈出層2021/5/925實例—打開關閉層實例描述：打開/關閉設置切換設置區(qū)域顯示與隱藏產(chǎn)品列表位置移動2021/5/926實例—Tab切換標簽點擊Tab標簽進行層切換2021/5/927實例--記住