Axure原型PPT.ppt

1、原型設(shè)計(jì)工具Axure RP基本功能介紹,張 駿,目錄,2,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,二、工作環(huán)境及組件的介紹,一、什么是Axure RP,三、簡(jiǎn)單交互,什么是Axure RP,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,3,1 . Axure RP,Axure 的發(fā)音是“Ack-sure”， RP 則是“Rapid Prototyping” 的縮寫。 Axure RP

2、 Pro是美國(guó) Axure Software Solution公司的旗艦產(chǎn)品， 是一個(gè)快速的原型工具， 主要是針對(duì)負(fù)責(zé)定義需求、 定義規(guī)格、 設(shè)計(jì)功能、 設(shè)計(jì)界面的專家， 包括需求分析師、用戶體驗(yàn)設(shè)計(jì)師、 交互設(shè)計(jì)師、 信息架構(gòu)師、 可用性專家和產(chǎn)品經(jīng)理。 Axure能讓你快速的進(jìn)行線框圖和原型的設(shè)計(jì)， 讓相關(guān)人員對(duì)你的設(shè)計(jì)進(jìn)行體驗(yàn)和驗(yàn)證，向用戶進(jìn)行演示、 溝通交流以確認(rèn)用戶需求。,什么是Axure RP,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,4,2 . 原型的作用和好處,制作原型是個(gè)

3、有效的簡(jiǎn)化文檔編制、吸引使用者參與、早期辨認(rèn)需求遺漏、將外在需求風(fēng)險(xiǎn)降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動(dòng)性的可視畫面，如此更能抓住利益相關(guān)者與使用者的注意，讓用戶在軟件開(kāi)始投入編程前就確認(rèn)需求。 目前國(guó)內(nèi)的淘寶、雅虎、騰訊、當(dāng)當(dāng)?shù)裙镜漠a(chǎn)品經(jīng)理也都在使用 Axure RP進(jìn)行原型設(shè)計(jì) 。,目錄,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,5,二、工作環(huán)境及組件的介紹,一、什么是Axure RP,三、簡(jiǎn)單交互,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博

4、微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,6,1、Axure 的工作環(huán)境,Axure 的工作環(huán)境可進(jìn)行可視化拖拉操作，可快速的創(chuàng)建帶有注釋的線框圖。無(wú)需編程就可以在線框圖中定義簡(jiǎn)單鏈接和高級(jí)交互。,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,7,工作區(qū),站點(diǎn)地圖,部件,母版,頁(yè)面交互及注釋,動(dòng)態(tài)面板管理,控件交互面板,（1）整體工作環(huán)境,部件屬性與樣式,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一

5、路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,8,站點(diǎn)地圖是一個(gè)頁(yè)面導(dǎo)航面板, 在這里面可以對(duì)所設(shè)計(jì)的頁(yè)面進(jìn)行添加、刪除、重命名和組織。,（2）站點(diǎn)地圖,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,9,部件面板中有線框圖組件和流程圖組件，用這些組件進(jìn)行線框圖和流程圖的設(shè)計(jì)。,（3）常用部件,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL :0791-

6、8116116 934248481/2/3/4/5 ,10,線框圖組件中,常用的有圖片、文本塊、矩形、占位符、形狀按鈕、圖片影射區(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)面板,常用組件,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,11,這幾個(gè)組件的操作都比較簡(jiǎn)單，直接拖入到工作

7、區(qū)域使用即可。 可以改變尺寸、顏色、邊框，可以輸入文字。 矩形、占位符、自定義形狀都有很多形狀可以變化、彼此之間也可以相互轉(zhuǎn)換。,矩形、占位符、文本框、自定義形狀、按鈕,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,12,（3）部件屬性與樣式,部件屬性與樣式面板中可對(duì)部件的屬性（形狀/狀態(tài)等）與樣式（位置/大小/字體/填充等）進(jìn)行調(diào)整。,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3

8、/4/5 ,13,工具欄及組件屬性,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,14,矩形的形狀變化，其中，圓角的大小是可以控制的; 使用不同的形狀進(jìn)行組合可以得到一些組合形狀。,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,15,母版是一種可重復(fù)利用的頁(yè)面，比如頁(yè)面的模板、導(dǎo)航欄、頁(yè)首、頁(yè)腳等這些類似的元素都可以通過(guò)母版來(lái)調(diào)用。 使用模塊的好處是

9、：修改模塊時(shí)，原型中所有使用該模塊的地方都會(huì)跟著一起修改。這樣在設(shè)計(jì)時(shí)可以提高效率并且易于管理。 模塊的面板和站點(diǎn)地圖有點(diǎn)類似?？梢蕴砑印⒔M織、編輯。,（4）母版面板,工作環(huán)境及組件的介紹,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,16,模塊的行為有三種： 任何位置、鎖定母板位置、從母板脫離,任何位置：可將模版放置任何位置，且修改母版時(shí)，引用到頁(yè)面的模塊會(huì)跟著一起修改。 鎖定模版位置：當(dāng)把模塊調(diào)用到頁(yè)面時(shí)會(huì)放置與母板同樣位置并進(jìn)行鎖定。 從母板脫離：進(jìn)行修改而不會(huì)引起其他模塊變化，類似于復(fù)

10、制。,模板的拖放行為,目錄,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,17,二、工作環(huán)境及組件的介紹,一、什么是Axure RP,三、簡(jiǎn)單交互,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,18,1.Axure的交互 控件交互面板用于定義線框圖中控件的行為，所定義的交互都可以在將來(lái)生成的原型中進(jìn)行操作執(zhí)行。,Axure里的交互大致有四種： 定義連接 設(shè)置動(dòng)作 多個(gè)條件場(chǎng)景 頁(yè)面上

11、的交互,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,19,鼠標(biāo)單擊時(shí) 鼠標(biāo)雙擊時(shí) 鼠標(biāo)右鍵單擊時(shí) 鍵盤按鍵按下時(shí) 鍵盤按鍵松開(kāi)時(shí) 鼠標(biāo)移入時(shí) 鼠標(biāo)移出時(shí) 移動(dòng) 顯示 隱藏 獲得焦點(diǎn) 失去焦點(diǎn),Axure RP 6.5 支持的事件,動(dòng)態(tài)面板狀態(tài)改變時(shí) 開(kāi)始拖動(dòng)動(dòng)態(tài)面板時(shí) 拖動(dòng)動(dòng)態(tài)面板時(shí) 結(jié)束拖放動(dòng)態(tài)面板時(shí) 頁(yè)面或模塊載入 鍵盤輸入時(shí) 選項(xiàng)改變時(shí) 向左滑動(dòng)時(shí) 向右滑動(dòng)時(shí) 窗口滾動(dòng)時(shí),簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL :0791-

12、8116116 934248481/2/3/4/5 ,20,事件、場(chǎng)景、動(dòng)作,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,21,定義鏈接可以讓一個(gè)組件響應(yīng)一個(gè)動(dòng)作時(shí)（如鼠標(biāo)點(diǎn)擊、飄過(guò)）鏈接到其他頁(yè)面。 在Axure里提供了四種鏈接方式： 1.鏈接到設(shè)計(jì)中的頁(yè)面 2.連接到外部網(wǎng)址或文件 3.重新載入當(dāng)前頁(yè)面 4.返回上個(gè)頁(yè)面,（1）定義鏈接,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2

13、/3/4/5 ,22,方法1,方法2,定義鏈接,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,23,除了定義鏈接之外，Axure里還可以設(shè)置豐富的動(dòng)作，在Axure里，任何可以觸發(fā)的事件中都可以執(zhí)行這些動(dòng)作。,（2）設(shè)置動(dòng)作,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,24,鏈接類,Axure里的動(dòng)作,部件類,動(dòng)態(tài)面板及變量,中繼器,雜項(xiàng),簡(jiǎn)單交互,ADD:南昌國(guó)家高新技

14、術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,25,一個(gè)事件的發(fā)生在不同的場(chǎng)景中結(jié)果是不一樣的，比如發(fā)送信息，發(fā)送失敗和發(fā)送成功返回的結(jié)果是不一樣的。 在Axure里，這樣的多個(gè)場(chǎng)景的事件，可以通過(guò)條件設(shè)置來(lái)編輯，不同的條件會(huì)觸發(fā)不同的場(chǎng)景。,添加刪除條件,（3）設(shè)置場(chǎng)景,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,26,Axure還支持頁(yè)面層級(jí)的觸發(fā)事件，當(dāng)載入一個(gè)頁(yè)面時(shí)，就會(huì)觸發(fā)OnPageLoad

15、（頁(yè)面載入）事件。 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í)就需要使用OnPageLoad事件來(lái)設(shè)置。,（4）頁(yè)面交互,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,27,Axure中很多的交互是由動(dòng)態(tài)面板來(lái)實(shí)現(xiàn)的。 動(dòng)態(tài)面板里面可以包含多個(gè)狀態(tài)，所以通過(guò)一些事件可以對(duì)動(dòng)態(tài)面板的狀態(tài)進(jìn)行切換，以此來(lái)實(shí)

16、現(xiàn)交互效果。但任何時(shí)候都是只有一個(gè)狀態(tài)是可見(jiàn)的，或者整個(gè)動(dòng)態(tài)面板是被隱藏的。,（5）動(dòng)態(tài)面板,動(dòng)態(tài)面板,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,28,雙擊動(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)范圍。,簡(jiǎn)單交互,ADD:南昌國(guó)家高新技術(shù)開(kāi)發(fā)區(qū)高新一路69號(hào)博微大樓 郵編:330096 TEL 934248481/2/3/4/5 ,29