如何使用Axure

1、Axure RP基本功能介紹分享: 劉冬源 2010.08.21分享: 劉冬源 2010.08.21目錄界面介紹常用組件簡單交互實(shí)現(xiàn)Axure RP基本功能介紹1分享: 劉冬源 2010.08.212Axure RP基本功能介紹界面介紹工作區(qū)站點(diǎn)地圖組件模塊頁面注釋頁面交互動(dòng)態(tài)面板管理控件交互面板位置與大小分享: 劉冬源 2010.08.213分享: 劉冬源 2010.08.21Axure RP基本功能介紹站點(diǎn)地圖 站點(diǎn)地圖是一個(gè)頁面導(dǎo)航面板, 在這里面可以對(duì)所設(shè)計(jì)的頁面進(jìn)行添加、刪除、重命名和組織分享: 劉冬源 2010.08.214Axure RP基本功能介紹 組件面板中有線框圖組件和流程

2、圖組件，用這些組件進(jìn)行線框圖和流程圖的設(shè)計(jì)。這里顯示的是所有的組件,后面的一部分是流程圖組件 常用組件分享: 劉冬源 2010.08.215Axure RP基本功能介紹 線框圖組件中,常用的有圖片、文本塊、矩形、占位符、形狀按鈕、圖片影射區(qū)域、動(dòng)態(tài)面板。其中，在完成一些交互動(dòng)作時(shí)，動(dòng)態(tài)面板用的最多。組件的使用： 所有的組件都是用鼠標(biāo)單擊選中后拖入到工作區(qū)域.對(duì)組件的編輯除了交互動(dòng)作的設(shè)置之外,還可以對(duì)這些組件進(jìn)行填充顏色或漸變、設(shè)置邊框顏色或粗細(xì)、以及編輯文字。常用組件動(dòng)態(tài)面板分享: 劉冬源 2010.08.216Axure RP基本功能介紹常用組件圖片雙擊 圖片的操作比較簡單，雙擊，選擇一張

3、圖片打開即可。 需要重新添加圖片是，在原來的圖片上雙擊再選擇。分享: 劉冬源 2010.08.217Axure RP基本功能介紹常用組件矩形、占位符、輸入框、形狀按鈕、按鈕 這幾個(gè)組件的操作都比較簡單，直接拖入到工作區(qū)域使用即可。 可以改變尺寸、顏色、邊框，可以輸入文字。由于Axure對(duì)中文支持不好,所以有時(shí)在矩形、占位符里輸入中文時(shí)會(huì)出現(xiàn)問題。 矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。 分享: 劉冬源 2010.08.218Axure RP基本功能介紹常用組件文字編輯組合、順序?qū)R、分布填充、邊框文字分布鎖定控件改變形狀右鍵菜單分享: 劉冬源 2010.08.21

4、9Axure RP基本功能介紹常用組件 矩形的形狀變化，其中，圓角的大小是可以控制的，使用不同的形狀得到一些組合形狀。分享: 劉冬源 2010.08.2110分享: 劉冬源 2010.08.21Axure RP基本功能介紹常用組件 矩形的形狀變化，其中，圓角的大小是可以控制的; 使用不同的形狀進(jìn)行組合可以得到一些組合形狀。分享: 劉冬源 2010.08.21分享: 劉冬源 2010.08.21Axure RP基本功能介紹模塊面板 模塊是一種可重復(fù)利用的頁面，比如頁面的模板、導(dǎo)航欄、頁首、頁腳等這些類似的元素都可以通過模塊來調(diào)用。 使用模塊的好處是：修改模塊時(shí)，原型中所有使用該模塊的地方都會(huì)跟著

5、一起修改。這樣在設(shè)計(jì)時(shí)可以提高效率并且易于管理。 模塊的面板和站點(diǎn)地圖有點(diǎn)類似?？梢蕴砑印⒔M織、編輯。11分享: 劉冬源 2010.08.21分享: 劉冬源 2010.08.21Axure RP基本功能介紹模塊面板模塊的行為有三種：正常、作為背景、自定義組件12 正常：這是默認(rèn)狀態(tài)，就是修改模塊時(shí)，引用到頁面的模塊會(huì)跟著一起修改。 作為背景：當(dāng)把模塊調(diào)用到頁面時(shí)會(huì)放置底層并且鎖定。 自定義：這種模塊可以在頁面中進(jìn)行修改而不會(huì)引起其他模塊變化，類似于復(fù)制。根據(jù)不同版本不一定有這個(gè)行為分享: 劉冬源 2010.08.21分享: 劉冬源 2010.08.21Axure RP基本功能介紹簡單交互13A

6、xure里的交互大致有四種： 定義連接 設(shè)置動(dòng)作 多個(gè)條件場(chǎng)景 頁面上的交互目前Axure RP 5 支持的事件如下： 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：頁面或模塊載入 OnKeyUp: 釋放按鍵分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互14事件、場(chǎng)景、動(dòng)作分享分享: 劉冬源劉冬源

7、 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互15定義鏈接 定義鏈接可以讓一個(gè)組件響應(yīng)一個(gè)動(dòng)作時(shí)（如鼠標(biāo)點(diǎn)擊、飄過）鏈接到其他頁面。在Axure里提供了四種鏈接方式：1.鏈接到設(shè)計(jì)中的頁面2.連接到外部網(wǎng)址或文件3.重新載入當(dāng)前頁面4返回上個(gè)頁面設(shè)計(jì)中的頁面外部網(wǎng)址重新載入返回分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互16定義鏈接方法1方法2分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本

8、功能介紹簡單交互17設(shè)置動(dòng)作 除了定義鏈接之外，Axure里還可以設(shè)置豐富的動(dòng)作，在Axure里，任何可以出發(fā)的事件中都可以執(zhí)行這些動(dòng)作。點(diǎn)擊后打開高級(jí)編輯器分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互18設(shè)置動(dòng)作 Axure里提供的動(dòng)作在執(zhí)行時(shí)是自上而下順序執(zhí)行的，在基本編輯器里，勾選一些動(dòng)作后，Axure會(huì)按照默認(rèn)的方法生成動(dòng)作的執(zhí)行順序。當(dāng)這些順序不能滿足需求時(shí)，可以嘗試使用高級(jí)編輯器，可以自定義添加動(dòng)作、改變執(zhí)行順序。添加動(dòng)作編輯動(dòng)作順序分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉

9、冬源 2010.08.21Axure RP基本功能介紹簡單交互19Axure里的動(dòng)作Open Link in Current Window：在當(dāng)前窗口打開一個(gè)頁面 Open Link in Popup Window：在彈出的窗口中打開一個(gè)頁面 Open Link in Parent Window：在父窗口中打開一個(gè)頁面 Close Current Window：關(guān)閉當(dāng)前窗口 Open Link in Frame：在框架中打開鏈接Open Link in Parent Frame：在父框架中打開鏈接Set Panel state(s) to State(s)：設(shè)置動(dòng)態(tài)面板的狀態(tài)轉(zhuǎn)換Show Pa

10、nel(s)：顯示動(dòng)態(tài)面板 Hide Panel(s)：隱藏動(dòng)態(tài)面板 Toggle Visibility for Panel(s)：切換動(dòng)態(tài)面板的可見屬性（顯示/隱藏） Move Panel(s)：根據(jù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來移動(dòng)動(dòng)態(tài)面板 分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互20Axure里的動(dòng)作Bring Panel to Front：將動(dòng)態(tài)面板置為最前端Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open Link in Pa

11、rent Frame：在父頁面的嵌框架中打開一個(gè)頁面 Scroll to Image Map Region：滾動(dòng)頁面到Image Map所在位置 Enable Widget(s)：把對(duì)象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對(duì)象狀態(tài)變成不可用狀態(tài) Set Focus on Widget：設(shè)置焦點(diǎn)Wait Time(s)：等待多少毫秒(ms)后再進(jìn)行這個(gè)動(dòng)作Expand Tree Node：展開樹狀節(jié)點(diǎn)Collapse Tree Node：折疊樹狀節(jié)點(diǎn) Other：顯示動(dòng)作的文字說明 分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21A

12、xure RP基本功能介紹簡單交互21設(shè)置場(chǎng)景 一個(gè)事件的發(fā)生在不同的場(chǎng)景中結(jié)果是不一樣的，比如發(fā)送信息，發(fā)送失敗和發(fā)送成功返回的結(jié)果是不一樣的。 在Axure里，這樣的多個(gè)場(chǎng)景的事件，可以通過條件設(shè)置來編輯，不同的條件會(huì)觸發(fā)不同的場(chǎng)景。添加刪除條件分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互22設(shè)置場(chǎng)景 在發(fā)送信息時(shí)，有“發(fā)送成功”和“發(fā)送失敗”兩個(gè)場(chǎng)景：對(duì)于“發(fā)送成功”來說，有這樣的一連串事件：顯示“正在發(fā)送”、輸入框變?yōu)榭瞻?、等待一段時(shí)間后、顯示“發(fā)送成功”。 類似的，發(fā)送失敗時(shí)也有這樣一串動(dòng)作。 而判斷

13、消息發(fā)送是否成功則是根據(jù)實(shí)際應(yīng)用中發(fā)送的情況而定。分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互23頁面交互 Axure還支持頁面層級(jí)的觸發(fā)事件，當(dāng)載入一個(gè)頁面時(shí)，就會(huì)觸發(fā)OnPageLoad事件。 OnPageLoad事件可以為我們?cè)O(shè)置頁面在載入時(shí)的初始狀態(tài)，并可以觸發(fā)一些我們需要的場(chǎng)景的條件。 例如，一個(gè)導(dǎo)航會(huì)有一個(gè)初始狀態(tài)和一個(gè)選中狀態(tài)，當(dāng)我們從一個(gè)入口進(jìn)入到一個(gè)頁面時(shí)，我們希望那個(gè)對(duì)應(yīng)的導(dǎo)航按鈕時(shí)處于選中狀態(tài)，此時(shí)就需要使用OnPageLoad事件來設(shè)置。分享分享: 劉冬源劉冬源 2010.08.21分享

14、分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互24動(dòng)態(tài)面板動(dòng)態(tài)面板 Axure中很多的交互是由動(dòng)態(tài)面板來實(shí)現(xiàn)的。 動(dòng)態(tài)面板里面可以包含多個(gè)狀態(tài)，所以通過一些事件可以對(duì)動(dòng)態(tài)面板的狀態(tài)進(jìn)行切換，以此來實(shí)現(xiàn)交互效果。但任何時(shí)候都是只有一個(gè)狀態(tài)是可見的，或者整個(gè)動(dòng)態(tài)面板是被隱藏的。分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互25動(dòng)態(tài)面板 雙擊動(dòng)態(tài)面板的線框圖，會(huì)有一個(gè)動(dòng)態(tài)面板狀態(tài)管理的對(duì)話框，在這里可以添加、刪除、重命名、組織動(dòng)態(tài)面板。 動(dòng)態(tài)面板的第一個(gè)狀態(tài)時(shí)它的默認(rèn)狀態(tài)。選擇編輯之后可以對(duì)其進(jìn)行設(shè)計(jì)，像畫線框圖一樣。 動(dòng)態(tài)面板的顯示范圍是在一個(gè)藍(lán)色的虛線框內(nèi)，這個(gè)也是動(dòng)態(tài)面板對(duì)事件的響應(yīng)范圍。分享分享: 劉冬源劉冬源 2010.08.21分享分享: 劉冬源劉冬源 2010.08.21Axure RP基本功能介紹簡單交互26動(dòng)態(tài)面板 動(dòng)態(tài)面板管理面板。在這里也可以對(duì)動(dòng)態(tài)面板進(jìn)行添加、刪除、組織等操作。雙擊可以對(duì)其進(jìn)行編輯。 有時(shí)，動(dòng)態(tài)面板較多時(shí)，在屏幕上的顯