1、,Axure RP基本功能介紹,目錄,界面介紹 常用組件 簡單交互實現(xiàn),Axure RP基本功能介紹,1,2,Axure RP基本功能介紹,界面介紹,工作區(qū),站點地圖,組件,模塊,頁面注釋,頁面交互,動態(tài)面板管理,控件交互面板,位置與大小,3,Axure RP基本功能介紹,站點地圖,站點地圖是一個頁面導航面板, 在這里面可以對所設(shè)計的頁面進行添加、刪除、重命名和組織,4,Axure RP基本功能介紹,組件面板中有線框圖組件和流程圖組件，用這些組件進行線框圖和流程圖的設(shè)計。這里顯示的是所有的組件,后面的一部分是流程圖組件,常用組件,5,Axure RP基本功能介紹,線框圖組件中,常用的有圖片、文

2、本塊、矩形、占位符、形狀按鈕、圖片影射區(qū)域、動態(tài)面板。其中，在完成一些交互動作時，動態(tài)面板用的最多。,組件的使用： 所有的組件都是用鼠標單擊選中后拖入到工作區(qū)域. 對組件的編輯除了交互動作的設(shè)置之外,還可以對這些組件進行填充顏色或漸變、設(shè)置邊框顏色或粗細、以及編輯文字。,常用組件,動態(tài)面板,6,Axure RP基本功能介紹,常用組件,圖片,雙擊,圖片的操作比較簡單，雙擊，選擇一張圖片打開即可。 需要重新添加圖片是，在原來的圖片上雙擊再選擇。,7,Axure RP基本功能介紹,常用組件,矩形、占位符、輸入框、形狀按鈕、按鈕,這幾個組件的操作都比較簡單，直接拖入到工作區(qū)域使用即可。 可以改變尺寸、

3、顏色、邊框，可以輸入文字。由于Axure對中文支持不好,所以有時在矩形、占位符里輸入中文時會出現(xiàn)問題。 矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。,8,Axure RP基本功能介紹,常用組件,9,Axure RP基本功能介紹,常用組件,矩形的形狀變化，其中，圓角的大小是可以控制的，使用不同的形狀得到一些組合形狀。,10,Axure RP基本功能介紹,常用組件,矩形的形狀變化，其中，圓角的大小是可以控制的; 使用不同的形狀進行組合可以得到一些組合形狀。,Axure RP基本功能介紹,模塊面板,模塊是一種可重復利用的頁面，比如頁面的模板、導航欄、頁首、頁腳等這些類似的元素

4、都可以通過模塊來調(diào)用。 使用模塊的好處是：修改模塊時，原型中所有使用該模塊的地方都會跟著一起修改。這樣在設(shè)計時可以提高效率并且易于管理。 模塊的面板和站點地圖有點類似?？梢蕴砑?、組織、編輯。,11,Axure RP基本功能介紹,模塊面板,模塊的行為有三種： 正常、作為背景、自定義組件,12,正常：這是默認狀態(tài)，就是修改模塊時，引用到頁面的模塊會跟著一起修改。 作為背景：當把模塊調(diào)用到頁面時會放置底層并且鎖定。 自定義：這種模塊可以在頁面中進行修改而不會引起其他模塊變化，類似于復制。,根據(jù)不同版本不一定有這個行為,Axure RP基本功能介紹,簡單交互,13,Axure里的交互大致有四種： 定義

5、連接 設(shè)置動作 多個條件場景 頁面上的交互,目前Axure RP 5 支持的事件如下： OnClick：鼠標點擊 OnMouseEnter：鼠標的指針移動到對象上 OnMouseOut：鼠標的指針移動出對象外 OnFocus：鼠標的指針進入文字輸入狀態(tài)（獲得焦點） OnLostFocus：鼠標的指針離開文字輸入狀態(tài) （失去焦點） OnPageLoad：頁面或模塊載入 OnKeyUp: 釋放按鍵,Axure RP基本功能介紹,簡單交互,14,事件、場景、動作,Axure RP基本功能介紹,簡單交互,15,定義鏈接,定義鏈接可以讓一個組件響應(yīng)一個動作時（如鼠標點擊、飄過）鏈接到其他頁面。 在Axu

6、re里提供了四種鏈接方式： 1.鏈接到設(shè)計中的頁面 2.連接到外部網(wǎng)址或文件 3.重新載入當前頁面 4返回上個頁面,設(shè)計中的頁面,外部網(wǎng)址,重新載入,返回,Axure RP基本功能介紹,簡單交互,16,定義鏈接,方法1,方法2,Axure RP基本功能介紹,簡單交互,17,設(shè)置動作,除了定義鏈接之外，Axure里還可以設(shè)置豐富的動作，在Axure里，任何可以出發(fā)的事件中都可以執(zhí)行這些動作。,點擊后打開高級編輯器,Axure RP基本功能介紹,簡單交互,18,設(shè)置動作,Axure里提供的動作在執(zhí)行時是自上而下順序執(zhí)行的，在基本編輯器里，勾選一些動作后，Axure會按照默認的方法生成動作的執(zhí)行順序

7、。當這些順序不能滿足需求時，可以嘗試使用高級編輯器，可以自定義添加動作、改變執(zhí)行順序。,添加動作,編輯動作順序,Axure RP基本功能介紹,簡單交互,19,Axure里的動作,Open Link in Current Window：在當前窗口打開一個頁面 Open Link in Popup Window：在彈出的窗口中打開一個頁面 Open Link in Parent Window：在父窗口中打開一個頁面 Close Current Window：關(guān)閉當前窗口 Open Link in Frame：在框架中打開鏈接 Open Link in Parent Frame：在父框架中打開鏈接

8、Set Panel state(s) to State(s)：設(shè)置動態(tài)面板的狀態(tài)轉(zhuǎn)換 Show Panel(s)：顯示動態(tài)面板 Hide Panel(s)：隱藏動態(tài)面板 Toggle Visibility for Panel(s)：切換動態(tài)面板的可見屬性（顯示/隱藏） Move Panel(s)：根據(jù)絕對坐標或相對坐標來移動動態(tài)面板,Axure RP基本功能介紹,簡單交互,20,Axure里的動作,Bring Panel to Front：將動態(tài)面板置為最前端 Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open L

9、ink in Parent Frame：在父頁面的嵌框架中打開一個頁面 Scroll to Image Map Region：滾動頁面到Image Map所在位置 Enable Widget(s)：把對象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對象狀態(tài)變成不可用狀態(tài) Set Focus on Widget：設(shè)置焦點 Wait Time(s)：等待多少毫秒(ms)后再進行這個動作 Expand Tree Node：展開樹狀節(jié)點 Collapse Tree Node：折疊樹狀節(jié)點 Other：顯示動作的文字說明,Axure RP基本功能介紹,簡單交互,21,設(shè)置場景,一個事件的發(fā)生

10、在不同的場景中結(jié)果是不一樣的，比如發(fā)送信息，發(fā)送失敗和發(fā)送成功返回的結(jié)果是不一樣的。 在Axure里，這樣的多個場景的事件，可以通過條件設(shè)置來編輯，不同的條件會觸發(fā)不同的場景。,添加刪除條件,Axure RP基本功能介紹,簡單交互,22,設(shè)置場景,在發(fā)送信息時，有“發(fā)送成功”和“發(fā)送失敗”兩個場景：對于“發(fā)送成功”來說，有這樣的一連串事件：顯示“正在發(fā)送”、輸入框變?yōu)榭瞻?、等待一段時間后、顯示“發(fā)送成功”。 類似的，發(fā)送失敗時也有這樣一串動作。 而判斷消息發(fā)送是否成功則是根據(jù)實際應(yīng)用中發(fā)送的情況而定。,Axure RP基本功能介紹,簡單交互,23,頁面交互,Axure還支持頁面層級的觸發(fā)事件，

11、當載入一個頁面時，就會觸發(fā)OnPageLoad事件。 OnPageLoad事件可以為我們設(shè)置頁面在載入時的初始狀態(tài)，并可以觸發(fā)一些我們需要的場景的條件。 例如，一個導航會有一個初始狀態(tài)和一個選中狀態(tài)，當我們從一個入口進入到一個頁面時，我們希望那個對應(yīng)的導航按鈕時處于選中狀態(tài)，此時就需要使用OnPageLoad事件來設(shè)置。,Axure RP基本功能介紹,簡單交互,24,動態(tài)面板,動態(tài)面板,Axure中很多的交互是由動態(tài)面板來實現(xiàn)的。 動態(tài)面板里面可以包含多個狀態(tài)，所以通過一些事件可以對動態(tài)面板的狀態(tài)進行切換，以此來實現(xiàn)交互效果。但任何時候都是只有一個狀態(tài)是可見的，或者整個動態(tài)面板是被隱藏的。,Axure RP基本功能介紹,簡單交互,25,動態(tài)面板,雙擊動態(tài)面板的線框圖，會有一個動態(tài)面板狀態(tài)管理的對話框， 在這里可以添加、刪除、重命名、組織動態(tài)面板。 動態(tài)面板的第一個狀態(tài)時它的默認狀態(tài)。選擇編輯之后可以對其進行設(shè)計，像畫線框圖一樣。 動態(tài)面板的顯示范圍是在一個藍色的虛線框內(nèi)，這個也是動態(tài)面板對事件的響應(yīng)范圍。,Axure RP基本功能介紹,簡單交互,26,動態(tài)面板,動態(tài)面板管理面板。在這里也可以對動態(tài)面板進行添加、刪除、組織等操作。雙擊可以對其進行編輯。 有時，動態(tài)面板較多時，在屏幕上的顯示會讓人覺得不方便，此時可以通過點擊藍色的方塊對其取消顯示（不會改變它