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

2、re？,你會(huì)發(fā)現(xiàn)上述工具：制作緩慢、效果粗獷、不易理解、無(wú)交互體現(xiàn)、修改困難,如果你還在使用以下工具表達(dá)想法：,5,2020/6/23,什么是Axure？,Axure RP (ak shr) 快速原型制作軟件，由美國(guó)Axure Software Solutions, Inc.公司開(kāi)發(fā)。 RP 是 Rapid Prototyping (快速原型縮寫(xiě)) 。,3,4,5,2,6,1,網(wǎng)站架構(gòu)圖,示意圖,流程圖,交互設(shè)計(jì),原型設(shè)計(jì),規(guī)格文檔,軟件界面及功能特性：,6,2020/6/23,入門(mén)與提高篇,第一章 介紹以工具欄工具(widgets)繪制示意圖(Wireframe) 第二章 流程圖（Flow

3、Diagrams）撰寫(xiě)網(wǎng)頁(yè)說(shuō)明(Page Notes) 第三章 高級(jí)交互設(shè)計(jì)（Rich Interaction）,7,2020/6/23,第一章 介紹,第0節(jié) 微件的概念 第1節(jié) Axure RP 整體界面 第2節(jié) 線(xiàn)框圖及其注釋 第3節(jié) 基本交互設(shè)計(jì) 第4節(jié) 使用模塊（Master） 第5節(jié) HTML 原型 第6節(jié) 輸出規(guī)格說(shuō)明,8,2020/6/23,第0節(jié) 微件的概念,英文名：widgets,包括framework,flow 原型圖中的所有的設(shè)計(jì)元素，都是由微件組合而成，是最小原型設(shè)計(jì)單元 類(lèi)比：面向?qū)ο笾械摹邦?lèi)”、“對(duì)象” 微件有屬性、狀態(tài)和行為 例子：文本輸入框,9,2020/6/2

4、3,Axure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線(xiàn)框圖。 無(wú)需編程就可以在線(xiàn)框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。 Axure 可一體化生成線(xiàn)框圖、HTML 交互原型、規(guī)格說(shuō)明 Word 文檔。以下是對(duì) Axure RP 工作環(huán)境的簡(jiǎn)要說(shuō)明：,第1節(jié)：Axure 的整體工作界面,10,2020/6/23,11,2020/6/23,12,2020/6/23,第2節(jié) 線(xiàn)框圖及其注釋,頁(yè)面導(dǎo)航面板（Sitemap） 在繪制線(xiàn)框圖(Wireframe)或流程圖（Flow）之前，應(yīng)該先思考界面框架，決定信息內(nèi)容與層級(jí)。 明確界面框架后，接下來(lái)就可以利用頁(yè)面導(dǎo)航面板來(lái)定義所要設(shè)計(jì)的頁(yè)面。

5、 頁(yè)面導(dǎo)航面板是用于管理所設(shè)計(jì)的頁(yè)面，可以添加、刪除及對(duì)頁(yè)面層次進(jìn)行重新組織。 頁(yè)面的添加、刪除和重命名 點(diǎn)擊面板工具欄上的“Add Child Page”按鈕可以添加一個(gè)頁(yè)面，點(diǎn)擊 “Delete Page” 按鈕可以刪除一個(gè)頁(yè)面。 右鍵單擊選擇“Rename Page”菜單項(xiàng)可對(duì)頁(yè)面進(jìn)行重命名。,13,2020/6/23,頁(yè)面組織排序 在頁(yè)面導(dǎo)航面板中，通過(guò)拖拉頁(yè)面或點(diǎn)擊工具欄上的排序按鈕，可以上下移動(dòng)頁(yè)面的位置和重新組織頁(yè)面的層次。 打開(kāi)頁(yè)面進(jìn)行設(shè)計(jì) 在頁(yè)面導(dǎo)航面板中，鼠標(biāo)雙擊頁(yè)面將會(huì)在線(xiàn)框面板中打開(kāi)頁(yè)面以進(jìn)行線(xiàn)框圖設(shè)計(jì)。,14,2020/6/23,2. 微件（Widgets） 微件是用

6、于設(shè)計(jì)線(xiàn)框圖的用戶(hù)界面元素。 在微件面板中包含有常用的微件，如按鈕、圖片、文本框等。,15,2020/6/23,添加微件 從微件面板中拖動(dòng)一個(gè)微件到線(xiàn)框圖面板中， 就可以添加一個(gè)微件。 微件可以從一個(gè)線(xiàn)框圖中被拷貝(Ctrl+C)，然后粘貼(Ctrl+V)到另外一個(gè)線(xiàn)框圖中。 操作微件 添加微件后，在線(xiàn)框圖中點(diǎn)選該微件，然后可以拖拉移動(dòng)微件和改變微件的大小，還可以一次同時(shí)對(duì)多個(gè)微件進(jìn)行選擇、移動(dòng)、改變尺寸。 另外，還可以組合、排序、對(duì)齊、分配和鎖定微件。這些操作可通過(guò)微件右鍵菜單中進(jìn)行，也可在 Object 工具欄上的按鈕進(jìn)行。 編輯微件風(fēng)格和屬性 有多種方法可以編輯微件的風(fēng)格和屬性： 鼠標(biāo)雙

7、擊：鼠標(biāo)雙擊某個(gè)微件，可以對(duì)微件的最常用屬性進(jìn)行編輯。 例如，雙擊一 個(gè)圖片微件可以導(dǎo)入一張圖片；雙擊一個(gè)下拉列表或列表框微件可以編輯列表項(xiàng)。 工具欄：點(diǎn)擊工具欄上的按鈕可編輯微件的文本字體、背景色、邊框等。 右鍵菜單：微件右鍵菜單上可編輯微件的一些特定屬性，不同微件這些屬性也不同。,16,2020/6/23,3. 注釋?zhuān)ˋnnotations） 可以為微件添加注釋?zhuān)哉f(shuō)明微件的功能。 添加注釋 在線(xiàn)框圖中選擇微件，然后在微件注釋和交互（Annotations and Interactions）面板中編輯字段中的值，即可為微件添加注釋。面板頂部的 Label 字段是為微件添加一個(gè)標(biāo)識(shí)符。,17

8、,2020/6/23,4. 頁(yè)面?zhèn)渥ⅲ≒age Notes） 頁(yè)面?zhèn)渥⒖墒菍?duì)頁(yè)面進(jìn)行描述和說(shuō)明。 添加頁(yè)面?zhèn)渥?在線(xiàn)框圖下面的 Page notes 面板中可以添加頁(yè)面?zhèn)渥?nèi)容。,管理頁(yè)面?zhèn)渥?另外，可以自定義頁(yè)面?zhèn)渥?，為不同的人提供不同的備注，以滿(mǎn)足不同需要。比如可以新增“測(cè)試用例”“操作說(shuō)明”等不同類(lèi)別的頁(yè)面?zhèn)渥ⅰ?18,2020/6/23,第3節(jié) 基本交互設(shè)計(jì),微件的交互 微件交互面板用于定義線(xiàn)框圖中微件的行為，包含定義簡(jiǎn)單的鏈接和復(fù)雜的 RIA 行為，所定義的交互都可以在將來(lái)生成的原型中進(jìn)行操作執(zhí)行。,在微件交互面板中可以定義微件的交互，交互事件（Events） 、場(chǎng)景（ Cases）

9、和動(dòng)作（Actions）組成： 用戶(hù)操作界面時(shí)就會(huì)觸發(fā)事件，如鼠標(biāo)的 OnClick、OnMouseEnter 和 OnMouseOut； 每個(gè)事件可以包含多個(gè)場(chǎng)景，場(chǎng)景也就是事件觸發(fā)后要滿(mǎn)足的條件； 每個(gè)場(chǎng)景可執(zhí)行多個(gè)動(dòng)作，例如：打開(kāi)鏈接、顯示面板、隱藏面板、移動(dòng)面板。,19,2020/6/23,以下是 Axure RP支持的事件如下： 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)的指針離開(kāi)文字輸入狀態(tài) （失去焦點(diǎn)） OnPageL

10、oad：頁(yè)面或模塊載入 大多對(duì)象只具備常見(jiàn)的三種觸發(fā)事件：OnClick、OnMouseEnter 與 OnMouseOut， 一些特殊的微件可觸發(fā)的事件有些不同： 按鈕微件只有 OnClick 單選框和復(fù)選框則具有 OnFocus、 OnLostFocus 文本框、文本域、下拉框、列表框則具有 OnKeyUp、OnFocus、OnLostFocus 頁(yè)面加載或模塊被載入時(shí)則發(fā)生 OnPageLoad,事件、場(chǎng)景和動(dòng)作的關(guān)系,20,2020/6/23,2、定義鏈接 下列步驟說(shuō)明如何在按鈕微件上定義一個(gè)鏈接： 1. 首先，拖拉一個(gè)按鈕微件到線(xiàn)框圖中，并選擇這個(gè)按鈕； 2. 然后，微件交互面板中鼠

11、標(biāo)雙擊“OnClick”這個(gè)事件，這時(shí)會(huì)出現(xiàn)“Interaction Case Properties”對(duì)話(huà)窗，在這個(gè)對(duì)話(huà)框中可以選擇要執(zhí)行的動(dòng)作； 3. 在“Step 2”中，勾選“Open Link in Current Window”動(dòng)作。 4. 在“Step 3”中，點(diǎn)擊“Link”，在彈出的 Link Properties 對(duì)話(huà)框中可以選擇要鏈接 的頁(yè)面或其它網(wǎng)頁(yè)地址 。,21,2020/6/23,除了上面的步驟， 加入一個(gè)鏈接的最快的方法是單擊微件交互面板頂部的“Quick Link” ，在彈出的 Link Properties 對(duì)話(huà)框中選擇要鏈接的頁(yè)面。,22,2020/6/23,

12、3. 設(shè)置動(dòng)作,除了簡(jiǎn)單的鏈接之外，Axure 還提供了許多豐富的動(dòng)作，這些動(dòng)作可以在任何觸發(fā)事件的場(chǎng)景中執(zhí)行。,23,2020/6/23,以下是 Axure 所支持的動(dòng)作： Open Link in Current Window：在當(dāng)前窗口打開(kāi)一個(gè)頁(yè)面 Open Link in Popup Window：在彈出的窗口中打開(kāi)一個(gè)頁(yè)面 Open Link in Parent Window：在父窗口中打開(kāi)一個(gè)頁(yè)面 Close Current Window：關(guān)閉當(dāng)前窗口 Open Link in Frame：在框架中打開(kāi)一個(gè)頁(yè)面 Set Panel state(s) to State(s)：為動(dòng)態(tài)面

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

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

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

16、ireframe中即可。,27,2020/6/23,第 5 節(jié) HTML 原型,1. 什么是網(wǎng)站/應(yīng)用程序原型 (HTML Prototype)? Html原型是指在 Axure中設(shè)計(jì)了帶注釋的線(xiàn)框圖并定義了交互之后，就 可以產(chǎn)生的一個(gè)可以基于瀏覽器的、可互動(dòng)的原型。 2. 輸出網(wǎng)站原型/格式設(shè)定,28,2020/6/23,第 6 節(jié) 輸出規(guī)格說(shuō)明,在A(yíng)xure RP 中設(shè)計(jì)完Wireframe之后，我們可以輸出Microsoft Word格式的需求書(shū)或功能性規(guī)格文件(Specification)。,29,2020/6/23,第二章 架構(gòu)圖/流程圖,第1節(jié) 為什么需要流程圖 第2節(jié) 自動(dòng)繪制架

17、構(gòu)圖 第3節(jié) 繪制流程圖,30,2020/6/23,第1節(jié) 為什么需要流程圖,流程圖常被用來(lái)提供一個(gè)高階視角(high level view)來(lái)看網(wǎng)頁(yè)設(shè)計(jì)可以達(dá)成的工作； 流程圖有利于梳理業(yè)務(wù)流程； 流程圖可以用來(lái)表達(dá)各式各樣的流程，包括：Use Case、商業(yè)流程與網(wǎng)頁(yè)流程,31,2020/6/23,第2節(jié) 自動(dòng)繪制架構(gòu)圖,每一個(gè)網(wǎng)站的規(guī)劃，少不了要繪制樹(shù)狀的網(wǎng)站架構(gòu)(sitemap diagram)，架構(gòu)圖能夠以視覺(jué)化的方式呈現(xiàn)網(wǎng)頁(yè)階層。 您在A(yíng)xure RP的sitemap窗格定義好的網(wǎng)站架構(gòu)，只要one-click就可以轉(zhuǎn)成樹(shù)狀架構(gòu)圖。 建議您先開(kāi)啟一個(gè)空白頁(yè)面，命名為”Sitemap

18、”或者其他您覺(jué)得有意義的名稱(chēng)。,32,2020/6/23,33,2020/6/23,第3節(jié) 繪制流程圖,34,2020/6/23,第4節(jié) 關(guān)聯(lián)網(wǎng)頁(yè)并輸出流程圖,Flow Widget可以關(guān)聯(lián)到任意指定的一個(gè)參考網(wǎng)頁(yè)，在Prototype中，這個(gè)Flow Widget與網(wǎng)頁(yè)間會(huì)自動(dòng)建立Hyperlink連結(jié)。,35,2020/6/23,第三章 高級(jí)交互,第1節(jié) 動(dòng)態(tài)面板 第2節(jié) 中繼器,36,2020/6/23,動(dòng)態(tài)面板包含有多個(gè)狀態(tài)（states），每個(gè)狀態(tài)可包含一系列微件（你可以把一個(gè)狀態(tài)理解成一個(gè)獨(dú)立的頁(yè)面）； 任何時(shí)候都只有一個(gè)狀態(tài)（頁(yè)面）是可見(jiàn)的，或整個(gè)動(dòng)態(tài)面板可以被隱藏； 結(jié)合交互動(dòng)作，可以讓動(dòng)態(tài)面板的狀態(tài)進(jìn)行隱藏、顯示和改變。像添加其它微件一樣，可以在微件面板中拖放動(dòng)態(tài)面板微件到線(xiàn)框圖中。,第1節(jié) 動(dòng)態(tài)面板,37,2020/6/23,動(dòng)態(tài)面板的結(jié)構(gòu),第三層內(nèi)容,第二層內(nèi)容,第一層內(nèi)容（最上層）,我們可以把動(dòng)態(tài)面板看成一個(gè)很多層疊在一起 而每一層都能設(shè)定不同內(nèi)容 默認(rèn)看到最上層顯示的,38,2020/6/23,動(dòng)態(tài)面板的交互原理,當(dāng)我們進(jìn)行一些操作(譬如點(diǎn)擊按鈕、點(diǎn)擊超鏈接等) 使動(dòng)態(tài)面板層的順序改變，譬如第二層顯示在最上層（如右