Axure_RP7培訓(xùn)簡明教程PPT(共41張)

1、AXURE RP 軟件基本使用介紹 初識 Axure RP Axure RP基本操作 Axure RP高級交互 目 錄 Axure RP生成網(wǎng)頁原型初識Axure RPAxure RP 簡介nAxure RP Pro是美國 Axure Software Solution公司的旗艦產(chǎn)品， 是一個快速的原型工具， 主要是針對負(fù)責(zé)定義需求、 定義規(guī)格、 設(shè)計功能、 設(shè)計界面的專家。nAXURE改變我們的工作方式：-決策層： 直觀的理解系統(tǒng)行為，幫助決策-產(chǎn)品經(jīng)理： 提高了各崗位間的溝通效率，降低溝通成本，保證項(xiàng)目進(jìn)程-需求人員： 更加有效的與用戶溝通，減少誤解，保證需求質(zhì)量-設(shè)計開發(fā)： 更加有效的協(xié)

2、作溝通，降低溝通成本，減少誤解，避免返工-用戶： 更加直觀的感受系統(tǒng)，盡早反饋用戶的需求與系統(tǒng)的不足 初識Axure RP為什么要進(jìn)行原型設(shè)計？n大約66%的軟件開發(fā)失敗或虧損的前三大原因?yàn)椋?缺乏使用者的參與；-需求或規(guī)格不完整；-需求或規(guī)格變更；n將文字性文檔轉(zhuǎn)變?yōu)榛有缘目梢暜嬅?，讓客戶在投入編程之前進(jìn)行需求確認(rèn)。n是一種高效的以用戶為中心的技術(shù)，是個有效的簡化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險降到最低的方法。n全球有1000家的公司在使用Axure RP，淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)纫捕荚谑褂?初識Axure RP Axure RP 功能一、網(wǎng)站構(gòu)架圖：Axure

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

4、： Axure RP可以線框圖輸出成符合InternetExplorer或Firefox等不同瀏覽器的HTML 原型；六、自動輸出word格式規(guī)格文件：Axure RP可以輸出Word的格式的文件，規(guī)格文件包含了目錄、網(wǎng)頁清單、網(wǎng)頁等，規(guī)格的內(nèi)容與格式也可以依據(jù)不同的閱讀對象來變更。 初識Axure RP Axure RP 工作環(huán)境nAxure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。n無需編程就可以在線框圖中定義簡單鏈接和高級交互。 nAxure 可一體化生成線框圖、HTML 交互原型、規(guī)格說明 Word 文檔； 初識Axure RP 站點(diǎn)地圖組件區(qū)域母版區(qū)域工作區(qū)

5、頁面注釋與交互交互面板動態(tài)面板管理Axure RP 工作環(huán)境工具欄 工具欄是頁面進(jìn)行編輯的一些快捷操作，主要有字體設(shè)置、大小設(shè)置、頁面顯示大小和Axure RP本身自帶的一些快捷操作Axure RP基本操作工具欄 站點(diǎn)地圖是項(xiàng)目頁面的導(dǎo)航面板, 呈樹狀結(jié)構(gòu)，以主頁為根節(jié)點(diǎn)，可以方便我們對網(wǎng)站整體模塊和不同欄目、功能劃分有一個很清晰的了解，同時也方便我們對網(wǎng)站整體頁面進(jìn)行管理（添加、刪除、重命名、調(diào)整層級、調(diào)整順序、生成流程圖）Axure RP基本操作站點(diǎn)地圖 組件面板中包括有線框圖組件和流程圖組件兩種類型，用這些組件可以進(jìn)行線框圖和流程圖的相應(yīng)設(shè)計。 這里顯示的是所有的組件，后面的一部分是流程

6、圖組件 。系統(tǒng)默認(rèn)顯示的線框圖類型的部件。Axure RP基本操作組件區(qū)域 動態(tài)面板 線框圖組件中，常用的有圖片、文本塊、矩形、占位符、形狀按鈕、圖片影射區(qū)域、動態(tài)面板。其中，在完成一些交互動作時，動態(tài)面板用的最多。使用方法： 在部門庫內(nèi)選中直接拖到工作區(qū)內(nèi)即可。另外，還可對組件的顏色、形狀、文字等進(jìn)行編輯操作。Axure RP基本操作組件區(qū)域動態(tài)面板 雙擊使用方法： 圖片控件的操作比較簡單，雙擊圖片組件，選擇一張圖片打開即可。 需要重新添加圖片是，在原來的圖片上雙擊再選擇。Axure RP基本操作組件區(qū)域圖片控件 矩形、占位符、輸入框、形狀按鈕、按鈕 使用方法：選中某個組件后，直接拖入到工作

7、區(qū)域使用即可。另外，可以對這些組件的尺寸、顏色、邊框、文字進(jìn)行編輯。 注： 矩形、占位符、形狀按鈕都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。 Axure RP基本操作組件區(qū)域其它控件 文字編輯組合、順序?qū)R、分布填充、邊框文字分布鎖定控件改變形狀右鍵菜單Axure RP基本操作 坐標(biāo)、尺寸 矩形的形狀變化，其中，圓角的大小是可以控制的，使用不同的形狀得到一些組合形狀。Axure RP基本操作組件區(qū)域矩形控件 母版（模版）區(qū)域是一種可重復(fù)利用的頁面，比如頁面的模板、導(dǎo)航欄、頁首、頁腳等這些類似的元素都可以通過模塊來調(diào)用。 使用模塊的好處是：修改模塊時，原型中所有使用該模塊的地方都會跟著一起修

8、改。這樣在設(shè)計時可以提高效率并且易于管理。 模塊的面板和站點(diǎn)地圖有點(diǎn)類似。可以添加、組織、編輯。Axure RP基本操作母版（模板）區(qū)域 模塊的行為包括：任何位置、鎖定母版位置、從母版脫離三種類型。 任何位置：普通的模版，就是一般的復(fù)用母版、是默認(rèn)創(chuàng)建的行為，不能在頁面中進(jìn)行直接修改。 鎖定母版位置：當(dāng)把模版調(diào)用到頁面時會放置底層并且鎖定，經(jīng)常用于創(chuàng)建head、foot等明確定位的復(fù)用模版。 從母版脫離：這種母版類似于自創(chuàng)一個組件，在拖動到頁面后，可以對其編輯修改，獨(dú)立于母版。Axure RP基本操作母版的三種行為 Axure里的交互動作大致包括：定義鏈接、設(shè)置動作、多個條件場景、頁面上的交互

9、四種類型。Axure RP高級交互交互類型 定義鏈接可以讓一個組件響應(yīng)一個動作時（如鼠標(biāo)點(diǎn)擊、飄過）鏈接到其他頁面。在Axure里提供了四種鏈接方式：1、鏈接到設(shè)計中的頁面；2、連接到外部網(wǎng)址或文件；3、重新載入當(dāng)前頁面；4、返回上個頁面。Axure RP高級交互定義鏈接 Axure RP高級交互定義鏈接方法一方法二 除了定義鏈接之外，Axure里還可以設(shè)置豐富的動作，在Axure里，任何可以出發(fā)的事件中都可以執(zhí)行這些動作。Axure RP高級交互設(shè)置動作 Axure里提供的動作在執(zhí)行時是自左向右順序執(zhí)行的，在基本編輯器里，選擇一些動作后，Axure會按照默認(rèn)的方法生成動作的執(zhí)行順序。當(dāng)這些順

10、序不能滿足需求時，可以嘗試使用高級編輯器，可以自定義添加動作、改變執(zhí)行順序。Axure RP高級交互設(shè)置動作 Axure里的動作：Open Link in Current Window：在當(dāng)前窗口打開一個頁面 Open Link in Popup Window：在彈出的窗口中打開一個頁面 Open Link in Parent Window：在父窗口中打開一個頁面 Close Current Window：關(guān)閉當(dāng)前窗口 Open Link in Frame：在框架中打開鏈接Open Link in Parent Frame：在父框架中打開鏈接Set Panel state(s) to Stat

11、e(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ù)絕對坐標(biāo)或相對坐標(biāo)來移動動態(tài)面板 Axure RP高級交互 Bring Panel to Front：將動態(tài)面板置為最前端Set Variable and Widget value(s) equal to Value(s)：設(shè)定變量值或控件值 Open Link in Parent Frame：在父頁面的嵌框架中打開一個頁面 Scroll to Im

12、age Map Region：滾動頁面到Image Map所在位置 Enable Widget(s)：把對象狀態(tài)變成可用狀態(tài) Disable Widget(s)：把對象狀態(tài)變成不可用狀態(tài) Set Focus on Widget：設(shè)置焦點(diǎn)Wait Time(s)：等待多少毫秒(ms)后再進(jìn)行這個動作Expand Tree Node：展開樹狀節(jié)點(diǎn)Collapse Tree Node：折疊樹狀節(jié)點(diǎn) Other：顯示動作的文字說明 Axure里的動作：Axure RP高級交互 Axure還支持頁面層級的觸發(fā)事件，當(dāng)載入一個頁面時，就會觸發(fā)OnPageLoad事件。OnPageLoad事件可以為我們設(shè)置

13、頁面在載入時的初始狀態(tài)，并可以觸發(fā)一些我們需要的場景的條件。 例如：一個導(dǎo)航會有一個初始狀態(tài)和一個選中狀態(tài)，當(dāng)我們從一個入口進(jìn)入到一個頁面時，我們希望那個對應(yīng)的導(dǎo)航按鈕時處于選中狀態(tài)，此時就需要使用OnPageLoad事件來設(shè)置。Axure RP高級交互 頁面交互 圖片和文字標(biāo)簽是Axure中基本的組成元素。Axure RP高級交互 圖片、文字標(biāo)簽 圖片 文字標(biāo)簽Axure RP高級交互 Axure RP高級交互 矩形和自定義形狀是Axure中經(jīng)常用到的圖形，通過各種組合變化，可以完成基本的原型圖設(shè)計。Axure RP高級交互 矩形、自定義形狀 矩形 自定義形狀A(yù)xure RP高級交互 Axu

14、re RP高級交互 Axure中很多的交互是由動態(tài)面板來實(shí)現(xiàn)的。 動態(tài)面板里面可以包含多個狀態(tài)，所以通過一些事件可以對動態(tài)面板的狀態(tài)進(jìn)行切換，以此來實(shí)現(xiàn)交互效果。但任何時候都是只有一個狀態(tài)是可見的，或者整個動態(tài)面板是被隱藏的。Axure RP高級交互 動態(tài)面板 動態(tài)面板 雙擊動態(tài)面板的線框圖，會有一個動態(tài)面板狀態(tài)管理的對話框，在這里可以添加、刪除、重命名、組織動態(tài)面板。 動態(tài)面板的第一個狀態(tài)時它的默認(rèn)狀態(tài)。選擇編輯之后可以對其進(jìn)行設(shè)計，像畫線框圖一樣。 動態(tài)面板的顯示范圍是在一個藍(lán)色的虛線框內(nèi)，這個也是動態(tài)面板對事件的響應(yīng)范圍。Axure RP高級交互 動態(tài)面板 動態(tài)面板管理面板。在這里也可以對動態(tài)面板進(jìn)行添加、刪除、組織等操作。雙擊可以對其進(jìn)行編輯。 有時，動態(tài)面板較多時，在屏幕上的顯示會讓人覺得不方便，此時可以通過點(diǎn)擊藍(lán)色的方塊對其取消顯示（不會改變它的可見屬性）。Axure RP高級交互 動態(tài)面板動態(tài)面板常用的操作動作有：1.設(shè)置面板狀態(tài)為指定狀態(tài)2.顯示面板3.隱藏面板4.切換面板可見性5.設(shè)置啟用/禁用6.移動面板7.設(shè)置動態(tài)面板大小8.將面板置于頂層9.將面板置于底層10. 面板獲得焦點(diǎn)Axure RP高級交互 動態(tài)面板 Axure RP生成網(wǎng)頁原型 菜單生成法 發(fā)布生成原型文件Axure RP生成網(wǎng)頁原型 工具欄，快速按鈕生成法Axure RP生成網(wǎng)頁原型 快速鍵生