1、中國建材家具網(wǎng)絡(luò)商城, 裝潢買家具 先上搜家居 ,中國建材家具網(wǎng)絡(luò)商城, 裝潢買家具 先上搜家居 ,原型圖制作軟件Axure RP使用培訓(xùn),2012-10-13,秦魯川,Page.01,RP界面介紹 RP常用組件 RP簡單交互實(shí)現(xiàn)原理 RP使用心得,內(nèi)容大綱,Page.03,Axure RP軟件界面介紹,工作區(qū),頁面注釋,頁面交互,動(dòng)態(tài)面板管理,控件交互面板,站點(diǎn)地圖,組件,模塊,位置與大小,Page.01,站點(diǎn)地圖,站點(diǎn)地圖是一個(gè)頁面導(dǎo)航面板, 在這里面可以對(duì)所設(shè)計(jì)的頁面進(jìn)行添加、刪除、重命名和組織,Page.01,組件庫,組件面板中有線框圖組件和流程圖組件，用這些組件進(jìn)行線框圖和流程圖的設(shè)

2、計(jì)。這里顯示的是所有的組件,后面的一部分是流程圖組件,Page.01,常用組件,圖片,雙擊,圖片的操作比較簡單，雙擊，選擇一張圖片打開即可。 需要重新添加圖片是，在原來的圖片上雙擊再選擇。,Page.01,常用組件,這幾個(gè)組件的操作都比較簡單，直接拖入到工作區(qū)域使用即可。 可以改變尺寸、顏色、邊框，可以輸入文字。由于Axure對(duì)中文支持不好,所以有時(shí)在矩形、占位符里輸入中文時(shí)會(huì)出現(xiàn)問題。 矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。,矩形、占位符、輸入框、形狀按鈕、按鈕,Page.01,常用組件,Page.01,常用組件,矩形的形狀變化，其中，圓角的大小是可以控制的，使

3、用不同的形狀得到一些組合形狀。,Page.01,模塊面板,模塊是一種可重復(fù)利用的頁面，比如頁面的模板、導(dǎo)航欄、頁首、頁腳等這些類似的元素都可以通過模塊來調(diào)用。 使用模塊的好處是：修改模塊時(shí)，原型中所有使用該模塊的地方都會(huì)跟著一起修改。這樣在設(shè)計(jì)時(shí)可以提高效率并且易于管理。 模塊的面板和站點(diǎn)地圖有點(diǎn)類似?？梢蕴砑?、組織、編輯。,Page.01,模塊面板,模塊的行為有三種： 正常、作為背景、自定義組件,正常：這是默認(rèn)狀態(tài)，就是修改模塊時(shí)，引用到頁面的模塊會(huì)跟著一起修改。 作為背景：當(dāng)把模塊調(diào)用到頁面時(shí)會(huì)放置底層并且鎖定。 自定義：這種模塊可以在頁面中進(jìn)行修改而不會(huì)引起其他模塊變化，類似于復(fù)制。,根

4、據(jù)不同版本不一定有這個(gè)行為,Page.01,簡單交互,Axure里的交互大致有四種： 定義連接 設(shè)置動(dòng)作 多個(gè)條件場景 頁面上的交互,目前Axure RP 6 支持的事件如下： 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: 釋放按鍵,Page.01,簡單交互,事件、場景、動(dòng)作,Page.01,簡單交互,定義鏈接,定義鏈接可以讓一個(gè)組件響應(yīng)一個(gè)動(dòng)

5、作時(shí)（如鼠標(biāo)點(diǎn)擊、飄過）鏈接到其他頁面。 在Axure里提供了四種鏈接方式： 1.鏈接到設(shè)計(jì)中的頁面 2.連接到外部網(wǎng)址或文件 3.重新載入當(dāng)前頁面 4返回上個(gè)頁面,設(shè)計(jì)中的頁面,外部網(wǎng)址,重新載入,返回,Page.01,簡單交互,定義鏈接,方法1,方法2,Page.01,簡單交互,設(shè)置動(dòng)作,除了定義鏈接之外，Axure里還可以設(shè)置豐富的動(dòng)作，在Axure里，任何可以出發(fā)的事件中都可以執(zhí)行這些動(dòng)作。,點(diǎn)擊后打開高級(jí)編輯器,Page.01,簡單交互,設(shè)置動(dòng)作,添加動(dòng)作,編輯動(dòng)作順序,Axure里提供的動(dòng)作在執(zhí)行時(shí)是自上而下順序執(zhí)行的，在基本編輯器里，勾選一些動(dòng)作后，Axure會(huì)按照默認(rèn)的方法生成

6、動(dòng)作的執(zhí)行順序。當(dāng)這些順序不能滿足需求時(shí)，可以嘗試使用高級(jí)編輯器，可以自定義添加動(dòng)作、改變執(zhí)行順序。,Page.01,簡單交互,Axure里的動(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

7、(s) to State(s)：設(shè)置動(dòng)態(tài)面板的狀態(tài)轉(zhuǎn)換 Show Panel(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)面板,Page.01,簡單交互,Axure里的動(dòng)作,Bring Panel to Front：將動(dòng)態(tài)面板置為最前端 Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open Link in Parent Frame：在父頁面的

8、嵌框架中打開一個(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)作的文字說明,Page.01,簡單交互,設(shè)置場景,一個(gè)事件的發(fā)生在不同的場景中結(jié)果是不一樣的，比如發(fā)送信息，發(fā)送失敗和發(fā)送成功返回的結(jié)

9、果是不一樣的。 在Axure里，這樣的多個(gè)場景的事件，可以通過條件設(shè)置來編輯，不同的條件會(huì)觸發(fā)不同的場景。,添加刪除條件,Page.01,簡單交互,設(shè)置場景,在發(fā)送信息時(shí)，有“發(fā)送成功”和“發(fā)送失敗”兩個(gè)場景：對(duì)于“發(fā)送成功”來說，有這樣的一連串事件：顯示“正在發(fā)送”、輸入框變?yōu)榭瞻?、等待一段時(shí)間后、顯示“發(fā)送成功”。 類似的，發(fā)送失敗時(shí)也有這樣一串動(dòng)作。 而判斷消息發(fā)送是否成功則是根據(jù)實(shí)際應(yīng)用中發(fā)送的情況而定。,Page.01,簡單交互,頁面交互,Axure還支持頁面層級(jí)的觸發(fā)事件，當(dāng)載入一個(gè)頁面時(shí)，就會(huì)觸發(fā)OnPageLoad事件。 OnPageLoad事件可以為我們設(shè)置頁面在載入時(shí)的初始

10、狀態(tài)，并可以觸發(fā)一些我們需要的場景的條件。 例如，一個(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è)置。,Page.01,簡單交互,動(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)面板是被隱藏的。,Page.01,簡單交互,動(dòng)態(tài)面板,雙擊動(dòng)態(tài)面板的線框圖，會(huì)有一個(gè)動(dòng)態(tài)面板狀態(tài)管理的對(duì)話框， 在這里可以添加、刪除、重命名、組織動(dòng)態(tài)

11、面板。 動(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)范圍。,Page.01,簡單交互,動(dòng)態(tài)面板,動(dòng)態(tài)面板管理面板。在這里也可以對(duì)動(dòng)態(tài)面板進(jìn)行添加、刪除、組織等操作。雙擊可以對(duì)其進(jìn)行編輯。 有時(shí)，動(dòng)態(tài)面板較多時(shí)，在屏幕上的顯示會(huì)讓人覺得不方便，此時(shí)可以通過點(diǎn)擊藍(lán)色的方塊對(duì)其取消顯示（不會(huì)改變它的可見屬性）。,不顯示,顯 示,Page.01,簡單交互,動(dòng)態(tài)面板,動(dòng)態(tài)面板有6種動(dòng)作： 設(shè)置動(dòng)態(tài)面板的轉(zhuǎn)換狀態(tài) 顯示動(dòng)態(tài)面板 隱藏動(dòng)態(tài)面板 切換動(dòng)態(tài)面板可見屬性 移動(dòng)動(dòng)態(tài)面板 將動(dòng)態(tài)面板置為最前

12、其中前3個(gè)用到的最多。第5個(gè)經(jīng)常配合“等待時(shí)間”一起使用?？梢灾谱饕恍﹦?dòng)態(tài)效果。,Page.01,案例介紹,Tab簽 自動(dòng)開關(guān)燈,Page.01,生成,F5鍵生成HTML F6鍵生成規(guī)格說明書doc CHM文檔,Page.01,不足,中文輸入法支持不好 遇到不能輸入時(shí)，請立馬放棄嘗試 表格功能比較弱，不支持合并單元格 控件屬性編輯不方便,Page.01,心得體會(huì),有些交互設(shè)計(jì)師會(huì)對(duì)一些布局細(xì)節(jié)擔(dān)憂，害怕自己會(huì)一直調(diào)整對(duì)齊和細(xì)節(jié)。記住，我們出的是可交互的原型，不是最終產(chǎn)品，不需要考慮太多的視覺細(xì)節(jié)，這些會(huì)由前端開發(fā)去進(jìn)行標(biāo)準(zhǔn)的把控 不執(zhí)著于Axure RP不能實(shí)現(xiàn)的業(yè)務(wù)需求,Page.01,心得體會(huì),Axure RP軟件也在不斷的完善，有不能實(shí)現(xiàn)的效果 一個(gè)不能實(shí)現(xiàn)的效果，只要不影響項(xiàng)目的進(jìn)度，不影響與執(zhí)行人員的溝通，在工作中就不要過分的追求,Page.01,文檔說明,在每一個(gè)文檔首頁寫上文檔說明，包括版本號(hào)、完成的部分、名詞注釋、較上一版更新,