1、AXURE RP從入門到提高,交互設(shè)計(jì)師、產(chǎn)品經(jīng)理產(chǎn)品原型利器,快速原型的介紹,根據(jù)功能，為了指導(dǎo)開發(fā)而畫的草圖 快速原型也叫做交互式原型 一種有效且高效的以用戶為中心（User-Centered Design）的技術(shù) 實(shí)現(xiàn)了功能頁面流程跳轉(zhuǎn) 做到用戶的響應(yīng)都會有反饋 和最后開發(fā)出來的產(chǎn)品基本吻合,快速原型的對產(chǎn)品的意義,團(tuán)隊(duì)了解需求的最佳方式 程序員開發(fā)的最好參考 項(xiàng)目開發(fā)和維護(hù)中所需標(biāo)準(zhǔn)的最好表現(xiàn)形式 驗(yàn)收的依據(jù),快速原型的制作工具,紙和筆，白板和油性筆 Axure UIDesigner PPT,為何選擇Axure？,你會發(fā)現(xiàn)上述工具：制作緩慢、效果粗獷、不易理解、無交互體現(xiàn)、修改困難,如

2、果你還在使用以下工具表達(dá)想法：,什么是Axure？,Axure RP (ak shr) 快速原型制作軟件，由美國Axure Software Solutions, Inc.公司開發(fā)。 RP 是 Rapid Prototyping (快速原型縮寫) 。,3,4,5,2,6,1,網(wǎng)站架構(gòu)圖,示意圖,流程圖,交互設(shè)計(jì),原型設(shè)計(jì),規(guī)格文檔,軟件界面及功能特性：,入門與提高篇,第一章 介紹以工具欄工具(widgets)繪制示意圖(Wireframe) 第二章 流程圖（Flow Diagrams）撰寫網(wǎng)頁說明(Page Notes) 第三章 高級交互設(shè)計(jì)（Rich Interaction）,第一章 介紹,

3、第0節(jié) 微件的概念 第1節(jié) Axure RP 整體界面 第2節(jié) 線框圖及其注釋 第3節(jié) 基本交互設(shè)計(jì) 第4節(jié) 使用模塊（Master） 第5節(jié) HTML 原型 第6節(jié) 輸出規(guī)格說明,第0節(jié) 微件的概念,英文名：widgets,包括framework,flow 原型圖中的所有的設(shè)計(jì)元素，都是由微件組合而成，是最小原型設(shè)計(jì)單元 類比：面向?qū)ο笾械摹邦悺?、“對象?微件有屬性、狀態(tài)和行為 例子：文本輸入框,Axure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。 無需編程就可以在線框圖中定義簡單鏈接和高級交互。 Axure 可一體化生成線框圖、HTML 交互原型、規(guī)格說明 Wo

4、rd 文檔。以下是對 Axure RP 工作環(huán)境的簡要說明：,第1節(jié)：Axure 的整體工作界面,第2節(jié) 線框圖及其注釋,頁面導(dǎo)航面板（Sitemap） 在繪制線框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級。 明確界面框架后，接下來就可以利用頁面導(dǎo)航面板來定義所要設(shè)計(jì)的頁面。 頁面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁面，可以添加、刪除及對頁面層次進(jìn)行重新組織。 頁面的添加、刪除和重命名 點(diǎn)擊面板工具欄上的“Add Child Page”按鈕可以添加一個頁面，點(diǎn)擊 “Delete Page” 按鈕可以刪除一個頁面。 右鍵單擊選擇“Rename Page”菜單

5、項(xiàng)可對頁面進(jìn)行重命名。,頁面組織排序 在頁面導(dǎo)航面板中，通過拖拉頁面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動頁面的位置和重新組織頁面的層次。 打開頁面進(jìn)行設(shè)計(jì) 在頁面導(dǎo)航面板中，鼠標(biāo)雙擊頁面將會在線框面板中打開頁面以進(jìn)行線框圖設(shè)計(jì)。,2. 微件（Widgets） 微件是用于設(shè)計(jì)線框圖的用戶界面元素。 在微件面板中包含有常用的微件，如按鈕、圖片、文本框等。,添加微件 從微件面板中拖動一個微件到線框圖面板中， 就可以添加一個微件。 微件可以從一個線框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個線框圖中。 操作微件 添加微件后，在線框圖中點(diǎn)選該微件，然后可以拖拉移動微件和改變微件的大

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

7、功能。 添加注釋 在線框圖中選擇微件，然后在微件注釋和交互（Annotations and Interactions）面板中編輯字段中的值，即可為微件添加注釋。面板頂部的 Label 字段是為微件添加一個標(biāo)識符。,4. 頁面?zhèn)渥ⅲ≒age Notes） 頁面?zhèn)渥⒖墒菍撁孢M(jìn)行描述和說明。 添加頁面?zhèn)渥?在線框圖下面的 Page notes 面板中可以添加頁面?zhèn)渥?nèi)容。,管理頁面?zhèn)渥?另外，可以自定義頁面?zhèn)渥ⅲ瑸椴煌娜颂峁┎煌膫渥?，以滿足不同需要。比如可以新增“測試用例”“操作說明”等不同類別的頁面?zhèn)渥ⅰ?第3節(jié) 基本交互設(shè)計(jì),微件的交互 微件交互面板用于定義線框圖中微件的行為，包含定義簡單

8、的鏈接和復(fù)雜的 RIA 行為，所定義的交互都可以在將來生成的原型中進(jìn)行操作執(zhí)行。,在微件交互面板中可以定義微件的交互，交互事件（Events） 、場景（ Cases）和動作（Actions）組成： 用戶操作界面時就會觸發(fā)事件，如鼠標(biāo)的 OnClick、OnMouseEnter 和 OnMouseOut； 每個事件可以包含多個場景，場景也就是事件觸發(fā)后要滿足的條件； 每個場景可執(zhí)行多個動作，例如：打開鏈接、顯示面板、隱藏面板、移動面板。,以下是 Axure RP支持的事件如下： OnClick：鼠標(biāo)點(diǎn)擊 OnMouseEnter：鼠標(biāo)的指針移動到對象上 OnMouseOut：鼠標(biāo)的指針移動出對象

9、外 OnFocus：鼠標(biāo)的指針進(jìn)入文字輸入狀態(tài)（獲得焦點(diǎn)） OnLostFocus：鼠標(biāo)的指針離開文字輸入狀態(tài) （失去焦點(diǎn)） OnPageLoad：頁面或模塊載入 大多對象只具備常見的三種觸發(fā)事件：OnClick、OnMouseEnter 與 OnMouseOut， 一些特殊的微件可觸發(fā)的事件有些不同： 按鈕微件只有 OnClick 單選框和復(fù)選框則具有 OnFocus、 OnLostFocus 文本框、文本域、下拉框、列表框則具有 OnKeyUp、OnFocus、OnLostFocus 頁面加載或模塊被載入時則發(fā)生 OnPageLoad,事件、場景和動作的關(guān)系,2、定義鏈接 下列步驟說明如何

10、在按鈕微件上定義一個鏈接： 1. 首先，拖拉一個按鈕微件到線框圖中，并選擇這個按鈕； 2. 然后，微件交互面板中鼠標(biāo)雙擊“OnClick”這個事件，這時會出現(xiàn)“Interaction Case Properties”對話窗，在這個對話框中可以選擇要執(zhí)行的動作； 3. 在“Step 2”中，勾選“Open Link in Current Window”動作。 4. 在“Step 3”中，點(diǎn)擊“Link”，在彈出的 Link Properties 對話框中可以選擇要鏈接 的頁面或其它網(wǎng)頁地址 。,除了上面的步驟， 加入一個鏈接的最快的方法是單擊微件交互面板頂部的“Quick Link” ，在彈出的

11、 Link Properties 對話框中選擇要鏈接的頁面。,3. 設(shè)置動作,除了簡單的鏈接之外，Axure 還提供了許多豐富的動作，這些動作可以在任何觸發(fā)事件的場景中執(zhí)行。,以下是 Axure 所支持的動作： Open Link in Current Window：在當(dāng)前窗口打開一個頁面 Open Link in Popup Window：在彈出的窗口中打開一個頁面 Open Link in Parent Window：在父窗口中打開一個頁面 Close Current Window：關(guān)閉當(dāng)前窗口 Open Link in Frame：在框架中打開一個頁面 Set Panel state(s

12、) to State(s)：為動態(tài)面板設(shè)定要顯示的狀態(tài) Show Panel(s)：顯示動態(tài)面板 Hide Panel(s)：隱藏動態(tài)面板 Toggle Visibility for Panel(s)：切換動態(tài)面板的顯示狀態(tài)（顯示/隱藏） Move Panel(s)：根據(jù)絕對坐標(biāo)或相對坐標(biāo)來移動動態(tài)面板 Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或微件值 Open Link in Parent Frame：在父頁面的嵌框架中打開一個頁面 Scroll to Image Map Region：滾動頁面到 Image Map 所

13、在位置 Enable Widget(s)：把對象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對象狀態(tài)變成不可用狀態(tài) Wait Time(s)：等待多少毫秒(ms)后再進(jìn)行這個動作 Other：顯示動作的文字說明,4. 多個場景（條件）,一個觸發(fā)事件可以包含有多個場景，根據(jù)條件執(zhí)行流程或互動。,5. 頁面上的事件: OnPageLoad,Axure 支持一個頁面層級的觸發(fā)事件：OnPageLoad，這個事件在原型載入頁面時觸發(fā)。,頁面 OnPageLoad 事件在頁面?zhèn)渥⒚姘逯械?Interactions 子面板中定義， OnPageLoad 為事件添加場景的方式與微件事件相同,第4

14、節(jié) 使用模塊（Master）,認(rèn)識共享區(qū)塊 (Master) 共享區(qū)塊 (Master) 是一組在設(shè)計(jì)過程中可以重復(fù)使用的Widget，一些常用的Master包括了頁首(Header)、頁尾(Footer)與導(dǎo)覽 (Navigation)， Master 可以被放置在網(wǎng)頁或是其它的Master中，只要Master做了修改，其它使用到這個Master的地方也會跟著修改。 2.新增、組織與設(shè)計(jì)Master 3. 套用 Master到網(wǎng)頁中 想要在網(wǎng)頁或其它Master 的Wireframe 中套用Master，只要將Master窗格中的Master拖拉到Wireframe中即可。,第 5 節(jié) HT

15、ML 原型,1. 什么是網(wǎng)站/應(yīng)用程序原型 (HTML Prototype)? Html原型是指在 Axure中設(shè)計(jì)了帶注釋的線框圖并定義了交互之后，就 可以產(chǎn)生的一個可以基于瀏覽器的、可互動的原型。 2. 輸出網(wǎng)站原型/格式設(shè)定,第 6 節(jié) 輸出規(guī)格說明,在Axure RP 中設(shè)計(jì)完Wireframe之后，我們可以輸出Microsoft Word格式的需求書或功能性規(guī)格文件(Specification)。,第二章 架構(gòu)圖/流程圖,第1節(jié) 為什么需要流程圖 第2節(jié) 自動繪制架構(gòu)圖 第3節(jié) 繪制流程圖,第1節(jié) 為什么需要流程圖,流程圖常被用來提供一個高階視角(high level view)來看

16、網(wǎng)頁設(shè)計(jì)可以達(dá)成的工作； 流程圖有利于梳理業(yè)務(wù)流程； 流程圖可以用來表達(dá)各式各樣的流程，包括：Use Case、商業(yè)流程與網(wǎng)頁流程,第2節(jié) 自動繪制架構(gòu)圖,每一個網(wǎng)站的規(guī)劃，少不了要繪制樹狀的網(wǎng)站架構(gòu)(sitemap diagram)，架構(gòu)圖能夠以視覺化的方式呈現(xiàn)網(wǎng)頁階層。 您在Axure RP的sitemap窗格定義好的網(wǎng)站架構(gòu)，只要one-click就可以轉(zhuǎn)成樹狀架構(gòu)圖。 建議您先開啟一個空白頁面，命名為”Sitemap”或者其他您覺得有意義的名稱。,第3節(jié) 繪制流程圖,第4節(jié) 關(guān)聯(lián)網(wǎng)頁并輸出流程圖,Flow Widget可以關(guān)聯(lián)到任意指定的一個參考網(wǎng)頁，在Prototype中，這個Flo

17、w Widget與網(wǎng)頁間會自動建立Hyperlink連結(jié)。,第三章 高級交互,第1節(jié) 動態(tài)面板 第2節(jié) 中繼器,動態(tài)面板包含有多個狀態(tài)（states），每個狀態(tài)可包含一系列微件（你可以把一個狀態(tài)理解成一個獨(dú)立的頁面）； 任何時候都只有一個狀態(tài)（頁面）是可見的，或整個動態(tài)面板可以被隱藏； 結(jié)合交互動作，可以讓動態(tài)面板的狀態(tài)進(jìn)行隱藏、顯示和改變。像添加其它微件一樣，可以在微件面板中拖放動態(tài)面板微件到線框圖中。,第1節(jié) 動態(tài)面板,動態(tài)面板的結(jié)構(gòu),第三層內(nèi)容,第二層內(nèi)容,第一層內(nèi)容（最上層）,我們可以把動態(tài)面板看成一個很多層疊在一起 而每一層都能設(shè)定不同內(nèi)容 默認(rèn)看到最上層顯示的,動態(tài)面板的交互原理,當(dāng)我們進(jìn)行一些操作(譬如點(diǎn)