Axure-RP培訓(xùn)教程(PPT34頁(yè))(PPT 35頁(yè))

1、AXURE RP 軟件基本使用培訓(xùn) 第1頁(yè)，共35頁(yè)。 初識(shí) Axure RP Axure RP基本操作 Axure RP高級(jí)交互 目 錄第2頁(yè)，共35頁(yè)。初識(shí)Axure RPAxure RP 簡(jiǎn)介 Axure的正確發(fā)音是“Ack-Sure”，RP則是”Rapid Prototyping”快速原型的縮寫。Axure RP Pro 是美國(guó)Axure Software Solution公司的旗艦產(chǎn)品，是一款快速原型設(shè)計(jì)工具，主要針對(duì)負(fù)責(zé)定義需求、定義規(guī)格、設(shè)計(jì)功能、設(shè)計(jì)界面的專家，包括用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、信息架構(gòu)師、業(yè)務(wù)分析師、可用性專家和產(chǎn)品經(jīng)理。 Axure RP Pro能快速幫助設(shè)計(jì)

2、者設(shè)計(jì)出快捷而簡(jiǎn)便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁(yè)面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁(yè)文件和規(guī)格文件，以提供演示與開發(fā)。 1第3頁(yè)，共35頁(yè)。初識(shí)Axure RPAxure RP 簡(jiǎn)介 Axure的正確發(fā)音是“Ack-Sure”，RP則是”Rapid Prototyping”快速原型的縮寫。Axure RP Pro 是美國(guó)Axure Software Solution公司的旗艦產(chǎn)品，是一款快速原型設(shè)計(jì)工具，主要針對(duì)負(fù)責(zé)定義需求、定義規(guī)格、設(shè)計(jì)功能、設(shè)計(jì)界面的專家，包括用戶體驗(yàn)設(shè)計(jì)師、交互設(shè)計(jì)師、信息架構(gòu)師、業(yè)務(wù)分析師、可用性專家和產(chǎn)品經(jīng)理。 Axure RP Pro能快

3、速幫助設(shè)計(jì)者設(shè)計(jì)出快捷而簡(jiǎn)便的創(chuàng)建基于網(wǎng)站構(gòu)架圖的帶注釋頁(yè)面示意圖、操作流程圖、以及交互設(shè)計(jì)，并可自動(dòng)生成用于演示的網(wǎng)頁(yè)文件和規(guī)格文件，以提供演示與開發(fā)。 1第4頁(yè)，共35頁(yè)。初識(shí)Axure RP為什么要使用Axure RP 大約66%的軟件開發(fā)失敗或虧損的前三大原因?yàn)椋喝狈κ褂谜叩膮⑴c；需求或規(guī)格不完整；需求或規(guī)格變更；將文字性文檔轉(zhuǎn)變?yōu)榛?dòng)性的可視畫面，讓客戶在投入編程之前進(jìn)行需求確認(rèn)。是一種高效的以用戶為中心的技術(shù)，是個(gè)有效的簡(jiǎn)化文檔編制、吸引使用者參與、 早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。全球有1000家的公司在使用Axure RP。 “ 沒有比制作prototype更易

4、取得使用者界面與特殊功能可用性上的一致性了。 prototype不只可確認(rèn)需求，它更可贏得顧客的心?！?1第5頁(yè)，共35頁(yè)。初識(shí)Axure RPAxure RP帶來(lái)什么 AXURE改變我們的工作方式：決策層：直觀的理解系統(tǒng)行為，幫助決策產(chǎn)品經(jīng)理：提高了各崗位間的溝通效率，降低溝通成本，保證項(xiàng)目進(jìn)程需求人員：更加有效的與用戶溝通，減少誤解，保證需求質(zhì)量設(shè)計(jì)開發(fā)：更加有效的協(xié)作溝通，降低溝通成本，減少誤解，避免返工用戶：更加直觀的感受系統(tǒng)，盡早反饋用戶的需求與系統(tǒng)的不足。 1第6頁(yè)，共35頁(yè)。站點(diǎn)地圖初識(shí)Axure RP組件面板模塊面板工作區(qū)頁(yè)面注釋與交互交互面板動(dòng)態(tài)面板管理 2第7頁(yè)，共35頁(yè)。

5、初識(shí)Axure RPAxure RP 功能 一、網(wǎng)站構(gòu)架圖：Axure RP可以快速繪制樹狀的網(wǎng)站構(gòu)架圖，而且可以讓構(gòu)架圖中的每一個(gè)頁(yè)面節(jié)點(diǎn)，直接連接到對(duì)應(yīng)網(wǎng)頁(yè)；二、示意圖：Axure RP內(nèi)建了許多會(huì)經(jīng)常使用到的組件，例如：按鈕(Button)、圖片(Image)、文字面板(Text Panel)、選擇鈕(Radio Button)、下拉式菜單(Droplist)；三、流程圖：Axure RP快速建立流程圖就像建立線框圖一樣容易，流程中有設(shè)計(jì)流程圖時(shí)會(huì)經(jīng)常用到的形狀，您可以輕松在流程之間加入連接線并設(shè)定連接的格式；四、交互設(shè)計(jì)：大多數(shù)的組件可以對(duì)一個(gè)或多個(gè)事件產(chǎn)生動(dòng)作，包括OnClick、O

6、nMouseOver 和OnMouseLeave等；五、自動(dòng)輸出網(wǎng)站原型： Axure RP可以線框圖輸出成符合InternetExplorer或Firefox等不同瀏覽器的HTML 原型；六、自動(dòng)輸出word格式規(guī)格文件：Axure RP可以輸出Word的格式的文件，規(guī)格文件包含了目錄、網(wǎng)頁(yè)清單、網(wǎng)頁(yè)等，規(guī)格的內(nèi)容與格式也可以依據(jù)不同的閱讀對(duì)象來(lái)變更。 3第8頁(yè)，共35頁(yè)。 站點(diǎn)地圖是項(xiàng)目頁(yè)面的導(dǎo)航面板, 在這里面可以對(duì)所有設(shè)計(jì)的頁(yè)面進(jìn)行添加、刪除、重命名和組織等。Axure RP基本操作站點(diǎn)地圖 4第9頁(yè)，共35頁(yè)。 組件面板中包括有線框圖組件和流程圖組件兩種類型，用這些組件可以進(jìn)行線框圖

7、和流程圖的相應(yīng)設(shè)計(jì)。 這里顯示的是所有的組件，后面的一部分是流程圖組件 。系統(tǒng)默認(rèn)顯示的線框圖類型的部件。Axure RP基本操作組件面板 5第10頁(yè)，共35頁(yè)。 動(dòng)態(tài)面板 線框圖組件中，常用的有圖片、文本塊、矩形、占位符、形狀按鈕、圖片影射區(qū)域、動(dòng)態(tài)面板。其中，在完成一些交互動(dòng)作時(shí)，動(dòng)態(tài)面板用的最多。使用方法： 在部件庫(kù)內(nèi)選中直接拖到工作區(qū)內(nèi)即可。另外，還可對(duì)組件的顏色、形狀、文字等進(jìn)行編輯操作。Axure RP基本操作動(dòng)態(tài)面板 6第11頁(yè)，共35頁(yè)。雙擊使用方法： 圖片控件的操作比較簡(jiǎn)單，雙擊圖片組件，選擇一張圖片打開即可。 需要重新添加圖片是，在原來(lái)的圖片上雙擊再選擇。Axure RP基

8、本操作圖片控件 7第12頁(yè)，共35頁(yè)。矩形、占位符、輸入框、形狀按鈕、按鈕 使用方法：選中某個(gè)組件后，直接拖入到工作區(qū)域使用即可。另外，可以對(duì)這些組件的尺寸、顏色、邊框、文字進(jìn)行編輯。 注： 矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。 Axure RP基本操作其它控件 8第13頁(yè)，共35頁(yè)。文字編輯組合、順序?qū)R、分布填充、邊框文字分布鎖定控件改變形狀右鍵菜單Axure RP基本操作 9第14頁(yè)，共35頁(yè)。 矩形的形狀變化，其中，圓角的大小是可以控制的，使用不同的形狀得到一些組合形狀。Axure RP基本操作矩形控件 10第15頁(yè)，共35頁(yè)。 模塊是一種可重復(fù)利用的頁(yè)

9、面，比如頁(yè)面的模板、導(dǎo)航欄、頁(yè)首、頁(yè)腳等這些類似的元素都可以通過模塊來(lái)調(diào)用。 使用模塊的好處是：修改模塊時(shí)，原型中所有使用該模塊的地方都會(huì)跟著一起修改。這樣在設(shè)計(jì)時(shí)可以提高效率并且易于管理。 模塊的面板和站點(diǎn)地圖有點(diǎn)類似。可以添加、組織、編輯。Axure RP基本操作模塊面板 11第16頁(yè)，共35頁(yè)。 模塊的行為包括：正常、作為背景、自定義組件三種類型。 正常：這是默認(rèn)狀態(tài)，就是修改模塊時(shí)，引用到頁(yè)面的模塊會(huì)跟著一起修改。 作為背景：當(dāng)把模塊調(diào)用到頁(yè)面時(shí)會(huì)放置底層并且鎖定。 自定義：這種模塊可以在頁(yè)面中進(jìn)行修改而不會(huì)引起其他模塊變化，類似于復(fù)制。根據(jù)不同版本不一定有這個(gè)行為Axure RP基本

10、操作模塊面板 12第17頁(yè)，共35頁(yè)。 Axure里的交互動(dòng)作大致包括：定義鏈接、設(shè)置動(dòng)作、多個(gè)條件場(chǎng)景、頁(yè)面上的交互四種類型。Axure RP高級(jí)交互交互類型 13第18頁(yè)，共35頁(yè)。事件場(chǎng)景1場(chǎng)景2動(dòng)作1動(dòng)作2動(dòng)作3動(dòng)作1動(dòng)作3動(dòng)作2Axure RP高級(jí)交互事件、場(chǎng)景、動(dòng)作 14第19頁(yè)，共35頁(yè)。 定義鏈接可以讓一個(gè)組件響應(yīng)一個(gè)動(dòng)作時(shí)（如鼠標(biāo)點(diǎn)擊、飄過）鏈接到其他頁(yè)面。在Axure里提供了四種鏈接方式：1、鏈接到設(shè)計(jì)中的頁(yè)面；2、連接到外部網(wǎng)址或文件；3、重新載入當(dāng)前頁(yè)面；4、返回上個(gè)頁(yè)面。Axure RP高級(jí)交互定義鏈接 15第20頁(yè)，共35頁(yè)。Axure RP高級(jí)交互定義鏈接方法一方

11、法二 16第21頁(yè)，共35頁(yè)。 除了定義鏈接之外，Axure里還可以設(shè)置豐富的動(dòng)作，在Axure里，任何可以出發(fā)的事件中都可以執(zhí)行這些動(dòng)作。Axure RP高級(jí)交互設(shè)置動(dòng)作 17第22頁(yè)，共35頁(yè)。 Axure里提供的動(dòng)作在執(zhí)行時(shí)是自左向右順序執(zhí)行的，在基本編輯器里，選擇一些動(dòng)作后，Axure會(huì)按照默認(rèn)的方法生成動(dòng)作的執(zhí)行順序。當(dāng)這些順序不能滿足需求時(shí)，可以嘗試使用高級(jí)編輯器，可以自定義添加動(dòng)作、改變執(zhí)行順序。Axure RP高級(jí)交互設(shè)置動(dòng)作 18第23頁(yè)，共35頁(yè)。Axure里的動(dòng)作：Open Link in Current Window：在當(dāng)前窗口打開一個(gè)頁(yè)面 Open Link in P

12、opup Window：在彈出的窗口中打開一個(gè)頁(yè)面 Open Link in Parent Window：在父窗口中打開一個(gè)頁(yè)面 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 Panel(s)：顯示動(dòng)態(tài)面板 Hide Panel(s)：隱藏動(dòng)態(tài)面板 Toggle Visibility for Panel(s)：切換動(dòng)態(tài)面板的可見屬性（顯示/隱藏） Move Panel(

13、s)：根據(jù)絕對(duì)坐標(biāo)或相對(duì)坐標(biāo)來(lái)移動(dòng)動(dòng)態(tài)面板 Axure RP高級(jí)交互 19第24頁(yè)，共35頁(yè)。Bring Panel to Front：將動(dòng)態(tài)面板置為最前端Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open Link in Parent Frame：在父頁(yè)面的嵌框架中打開一個(gè)頁(yè)面 Scroll to Image Map Region：滾動(dòng)頁(yè)面到Image Map所在位置 Enable Widget(s)：把對(duì)象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對(duì)象狀態(tài)變成不可用狀態(tài) Set Focus on

14、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)作的文字說明 Axure里的動(dòng)作：Axure RP高級(jí)交互 20第25頁(yè)，共35頁(yè)。 一個(gè)事件的發(fā)生在不同的場(chǎng)景中產(chǎn)生的結(jié)果是不一樣的，比如發(fā)送信息，發(fā)送失敗和發(fā)送成功返回的結(jié)果是不一樣的。 在Axure里，這樣的多個(gè)場(chǎng)景的事件，可以通過條件設(shè)置來(lái)編輯，不同的條件會(huì)觸發(fā)不同的場(chǎng)景。Axure RP高級(jí)交互設(shè)置場(chǎng)景 21刪除添加第26頁(yè)，共35頁(yè)。 在發(fā)送信息時(shí)，有“發(fā)送成功”和“發(fā)送失敗”兩個(gè)場(chǎng)景

15、：對(duì)于“發(fā)送成功”來(lái)說，有這樣的一連串事件：顯示“正在發(fā)送”、輸入框變?yōu)榭瞻?、等待一段時(shí)間后、顯示“發(fā)送成功”。 類似的，發(fā)送失敗時(shí)也有這樣一串動(dòng)作。 而判斷消息發(fā)送是否成功則是根據(jù)實(shí)際應(yīng)用中發(fā)送的情況而定。Axure RP高級(jí)交互設(shè)置場(chǎng)景 22第27頁(yè)，共35頁(yè)。 Axure還支持頁(yè)面層級(jí)的觸發(fā)事件，當(dāng)載入一個(gè)頁(yè)面時(shí)，就會(huì)觸發(fā)OnPageLoad事件。OnPageLoad事件可以為我們?cè)O(shè)置頁(yè)面在載入時(shí)的初始狀態(tài)，并可以觸發(fā)一些我們需要的場(chǎng)景的條件。 例如：一個(gè)導(dǎo)航會(huì)有一個(gè)初始狀態(tài)和一個(gè)選中狀態(tài)，當(dāng)我們從一個(gè)入口進(jìn)入到一個(gè)頁(yè)面時(shí)，我們希望那個(gè)對(duì)應(yīng)的導(dǎo)航按鈕時(shí)處于選中狀態(tài)，此時(shí)就需要使用OnPa

16、geLoad事件來(lái)設(shè)置。Axure RP高級(jí)交互 23頁(yè)面交互第28頁(yè)，共35頁(yè)。 Axure中很多的交互是由動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)的。 動(dòng)態(tài)面板里面可以包含多個(gè)狀態(tài)，所以通過一些事件可以對(duì)動(dòng)態(tài)面板的狀態(tài)進(jìn)行切換，以此來(lái)實(shí)現(xiàn)交互效果。但任何時(shí)候都是只有一個(gè)狀態(tài)是可見的，或者整個(gè)動(dòng)態(tài)面板是被隱藏的。Axure RP高級(jí)交互 24動(dòng)態(tài)面板 動(dòng)態(tài)面板第29頁(yè)，共35頁(yè)。 雙擊動(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)范圍。Axure RP高級(jí)交互 25動(dòng)態(tài)面板第30頁(yè)，共35頁(yè)。 動(dòng)態(tài)面板管理面板。在這里也可以對(duì)動(dòng)態(tài)面板