Axure-RP快速入門課件

AxureRP快速入門主講人：鄭曦1AAxureRP快速入門主講人：鄭曦1ARP介紹基本交互原型實例基本用法2ARP介紹基本交互原型實例基本用法2A1.RP介紹

1.1工具概述

1.2操作界面

1.3基本元件

2.基本用法2.1線框圖2.2元件應用3.基本交互3.1控件交互3.2頁面事件3.3文件導出

附：實例3A1.RP介紹

1.1工具概述

1.2操1AxureRP介紹4A1AxureRP介紹4A1.1工具介紹1.AxureRP是什么 Axure的發(fā)音是“Ack-sure”，RP則是“RapidPrototyping”的縮寫。AxureRPPro是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個快速的原型工具，主要是針負責定義需求、定義規(guī)格、設計功能、設計界面的專家，包括用戶體驗設計師、交互設計師、業(yè)務分析師、信息架構師、可用性專家和產(chǎn)品經(jīng)理。5A1.1工具介紹1.AxureRP是什么5A

2.為什么要用RPAxure的工作環(huán)境可進行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡單鏈接和高級交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。Axure能讓產(chǎn)品人員快速的進行線框圖和原型的設計，讓相關人員對你的設計進行體驗和驗證，向用戶進行演示、溝通交流以確認用戶需求，并能自動生成規(guī)格說明文檔。6A 2.為什么要用RP6A3.AxureRP的應用情況 制作Prototype是個有效的簡化文檔編制、吸引使用者參與、早期辨認需求遺漏、將外在需求風險降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動性的可視畫面，如此更能抓住利益相關者與使用者的注意，讓用戶在軟件開始投入編程前就確認需求。快速原型法（RapidPrototyping）是一種有效且高效的以用戶為中心（User-CenteredDesign）的技術，可以幫助用戶體驗專家、設計師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財富1000大的公司和重要機構在使用AxureRP，國內(nèi)大型公司的產(chǎn)品經(jīng)理也都在使用。7A3.AxureRP的應用情況7A5423167主菜單工具欄：大部分類似office軟件站點地圖：文件的存放位置，可調(diào)整順序及頁面間關系axure元件庫：或這里可以執(zhí)行創(chuàng)建、加載、刪除axure元件庫的操作，也可以根據(jù)需求顯示元件。主操作界面：繪制產(chǎn)品原型的操作區(qū)域，所有的用到的元件都拖到該區(qū)域。元件屬性：在此設置選中元件的標簽、樣式，添加與該元件有關的注釋，以及設置頁面加載時觸發(fā)的事件；動態(tài)面板：重要區(qū)域，在此可以動態(tài)面板的狀態(tài)、標簽進行操作，雙擊狀態(tài)進入編輯。母版管理：建立母版，然后加載到需要顯示的頁面，減少工作量。1.2操作界面8A5423167主菜單工具欄：大部分類似office軟件站點地1.3基本元件Axure不像Visio、pd，專業(yè)性較弱，所以極易上手可視化界面使原型的設計直接由元件拖拽至所需區(qū)域完成按需進行屬性設置和重命名。9A1.3基本元件Axure不像Visio、pd，專業(yè)性較弱，2基本用法以拖拉方式建立常用對象，跟PowerPoint/Visio操作方式接近10A2基本用法以拖拉方式建立常用對象，跟PowerPoint2.1線框圖線框圖是產(chǎn)品設計的低保真呈現(xiàn)方式。目標簡單直接：1.呈現(xiàn)主體信息群2.勾勒出結構和布局3.用戶交互界面的主視覺和描述正確的線框圖，類似于產(chǎn)品的骨干框架。能夠完整的表達出軟件的功能、信息架構、用戶體驗、用戶交互流程圖、可用性等所需信息11A2.1線框圖線框圖是產(chǎn)品設計的低保真呈現(xiàn)方式。目標簡單直接12A12A2.1.1基本操作1.頁面的添加、刪除和重命名在要進行操作的頁面上右鍵選擇要添加或者要刪除的頁面機及子頁面右鍵單擊選擇“RenamePage”菜單項可對頁面進行重命名。2.頁面組織排序在頁面導航面板中，通過拖拉頁面或點擊工具欄上的排序按鈕，可以上下移動頁面的位置和重新組織頁面的層次。打開頁面進行設計在頁面導航面板中，鼠標雙擊頁面將會在線框面板中打開頁面以進行線框圖設計。13A2.1.1基本操作1.頁面的添加、刪除和重命名2.頁面組2.2元件應用2.2.1元件（Widgets）控件是用于設計線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。2.2.2元件的基本操作添加控件操作控件編輯控件風格和屬性：鼠標雙擊工具欄右鍵菜單查看搜索控件創(chuàng)建自定義控件庫14A2.2元件應用2.2.1元件（Widgets）14A最基本的五個控件（Widgets）文本控件（textpanel）：作為靜態(tài)文本顯示。圖片控件(image)：拖拽至頁面，右鍵選擇圖片編輯Editimage-->Importimage可以插入具體的圖片。矩形控件：通常用來進行界面分割，但其實際用法相當靈活，比如tab頁面的標簽等文本框：需要輸入內(nèi)容的文本框，最常用的一個控件；按鈕：系統(tǒng)中需要執(zhí)行某些命令時使用，例如提交內(nèi)容，計算等。15A最基本的五個控件（Widgets）文本控件（textpan3基本交互

介紹簡單的交互行為，并解釋基本交互設計的方法16A3基本交互介紹簡單的交互行為，并解釋基本交互設計的方法13.1控件交互控件的交互用到了控件交互面板，如右圖所示：在控件交互面板中可以定義控件的交互，交互事件（Events）、場景（Cases）和動作（Actions）組成：用戶操作界面時就會觸發(fā)事件每個事件可以包含多個場景每個場景可執(zhí)行多個動作17A3.1控件交互控件的交互用到了控件交互面板，如右圖所示：13.1.1交互-事件

☆OnClick：鼠標點擊☆OnMouseEnter：鼠標的指針移動到對象上☆OnMouseOut：鼠標的指針移動出對象外OnFocus：鼠標的指針進入文字輸入狀態(tài)（獲得焦點）OnLostFocus：鼠標的指針離開文字輸入狀態(tài)（失去焦點）OnChange：下拉框或列表框中的選項改變OnPageLoad：頁面或模塊載入OnKeyUp：按下然后松開鍵盤上的鍵18A3.1.1交互-事件

☆OnClick：鼠標點擊18A3.1.2定義鏈接(sc)19A3.1.2定義鏈接(sc)19A3.1.3定義動作20A3.1.3定義動作20A3.1.4定義場景（場景說明）場景說明只能夠?qū)崿F(xiàn)低保真的簡單交互21A3.1.4定義場景（場景說明）場景說明只能夠?qū)崿F(xiàn)低保真的簡3.2頁面事件頁面事件onpageload原型載入頁面時被觸發(fā)。頁面OnPageLoad事件在頁面交互面板中定義，為頁面OnPageLoad事件添加場景的方式與在控件事件中相同。22A3.2頁面事件頁面事件onpageload原型載入頁面時被3.2.1模塊（母版）

普通行為（Normal）背景行為（PlaceinBlackground）自定義控件行為（CustomWidget）23A3.2.1模塊（母版）普通行為（Normal）23A3.3文件導出Axure通常生成的是兩種格式：1.生成html網(wǎng)頁原型，（最為常用，可以演示效果）2.生成word格式文檔，（不常用）演示一般選擇導出或者pc直接按F5演示，mac則是通過Command+Shift+P24A3.3文件導出Axure通常生成的是兩種格式：24A25A25A簡單高保真原型1.邏輯語句2.動態(tài)面板26A簡單高保真原型1.邏輯語句26A附.實例(高保真)1.簡單實例（低保真）2.圖書館借閱系統(tǒng)3.后臺用戶管理系統(tǒng)4.電商網(wǎng)站27A附.實例(高保真)1.簡單實例（低保真）27ATHANKS28ATHANKS28AAxureRP快速入門主講人：鄭曦29AAxureRP快速入門主講人：鄭曦1ARP介紹基本交互原型實例基本用法30ARP介紹基本交互原型實例基本用法2A1.RP介紹

1.1工具概述

1.2操作界面

1.3基本元件

2.基本用法2.1線框圖2.2元件應用3.基本交互3.1控件交互3.2頁面事件3.3文件導出

附：實例31A1.RP介紹

1.1工具概述

1.2操1AxureRP介紹32A1AxureRP介紹4A1.1工具介紹1.AxureRP是什么 Axure的發(fā)音是“Ack-sure”，RP則是“RapidPrototyping”的縮寫。AxureRPPro是美國AxureSoftwareSolution公司的旗艦產(chǎn)品，是一個快速的原型工具，主要是針負責定義需求、定義規(guī)格、設計功能、設計界面的專家，包括用戶體驗設計師、交互設計師、業(yè)務分析師、信息架構師、可用性專家和產(chǎn)品經(jīng)理。33A1.1工具介紹1.AxureRP是什么5A

2.為什么要用RPAxure的工作環(huán)境可進行可視化拖拉操作，可輕松快速的創(chuàng)建帶有注釋的線框圖。無需編程就可以在線框圖中定義簡單鏈接和高級交互。Axure可一體化生成線框圖、HTML交互原型、規(guī)格說明Word文檔。Axure能讓產(chǎn)品人員快速的進行線框圖和原型的設計，讓相關人員對你的設計進行體驗和驗證，向用戶進行演示、溝通交流以確認用戶需求，并能自動生成規(guī)格說明文檔。34A 2.為什么要用RP6A3.AxureRP的應用情況 制作Prototype是個有效的簡化文檔編制、吸引使用者參與、早期辨認需求遺漏、將外在需求風險降到最低的方法。將大量文字性文檔轉(zhuǎn)變?yōu)閹в凶⑨屌c互動性的可視畫面，如此更能抓住利益相關者與使用者的注意，讓用戶在軟件開始投入編程前就確認需求。快速原型法（RapidPrototyping）是一種有效且高效的以用戶為中心（User-CenteredDesign）的技術，可以幫助用戶體驗專家、設計師、工程師創(chuàng)造更加有用、可用的產(chǎn)品。目前全球有財富1000大的公司和重要機構在使用AxureRP，國內(nèi)大型公司的產(chǎn)品經(jīng)理也都在使用。35A3.AxureRP的應用情況7A5423167主菜單工具欄：大部分類似office軟件站點地圖：文件的存放位置，可調(diào)整順序及頁面間關系axure元件庫：或這里可以執(zhí)行創(chuàng)建、加載、刪除axure元件庫的操作，也可以根據(jù)需求顯示元件。主操作界面：繪制產(chǎn)品原型的操作區(qū)域，所有的用到的元件都拖到該區(qū)域。元件屬性：在此設置選中元件的標簽、樣式，添加與該元件有關的注釋，以及設置頁面加載時觸發(fā)的事件；動態(tài)面板：重要區(qū)域，在此可以動態(tài)面板的狀態(tài)、標簽進行操作，雙擊狀態(tài)進入編輯。母版管理：建立母版，然后加載到需要顯示的頁面，減少工作量。1.2操作界面36A5423167主菜單工具欄：大部分類似office軟件站點地1.3基本元件Axure不像Visio、pd，專業(yè)性較弱，所以極易上手可視化界面使原型的設計直接由元件拖拽至所需區(qū)域完成按需進行屬性設置和重命名。37A1.3基本元件Axure不像Visio、pd，專業(yè)性較弱，2基本用法以拖拉方式建立常用對象，跟PowerPoint/Visio操作方式接近38A2基本用法以拖拉方式建立常用對象，跟PowerPoint2.1線框圖線框圖是產(chǎn)品設計的低保真呈現(xiàn)方式。目標簡單直接：1.呈現(xiàn)主體信息群2.勾勒出結構和布局3.用戶交互界面的主視覺和描述正確的線框圖，類似于產(chǎn)品的骨干框架。能夠完整的表達出軟件的功能、信息架構、用戶體驗、用戶交互流程圖、可用性等所需信息39A2.1線框圖線框圖是產(chǎn)品設計的低保真呈現(xiàn)方式。目標簡單直接40A12A2.1.1基本操作1.頁面的添加、刪除和重命名在要進行操作的頁面上右鍵選擇要添加或者要刪除的頁面機及子頁面右鍵單擊選擇“RenamePage”菜單項可對頁面進行重命名。2.頁面組織排序在頁面導航面板中，通過拖拉頁面或點擊工具欄上的排序按鈕，可以上下移動頁面的位置和重新組織頁面的層次。打開頁面進行設計在頁面導航面板中，鼠標雙擊頁面將會在線框面板中打開頁面以進行線框圖設計。41A2.1.1基本操作1.頁面的添加、刪除和重命名2.頁面組2.2元件應用2.2.1元件（Widgets）控件是用于設計線框圖的用戶界面元素。在控件面板中包含有常用的控件，如按鈕、圖片、文本框等。2.2.2元件的基本操作添加控件操作控件編輯控件風格和屬性：鼠標雙擊工具欄右鍵菜單查看搜索控件創(chuàng)建自定義控件庫42A2.2元件應用2.2.1元件（Widgets）14A最基本的五個控件（Widgets）文本控件（textpanel）：作為靜態(tài)文本顯示。圖片控件(image)：拖拽至頁面，右鍵選擇圖片編輯Editimage-->Importimage可以插入具體的圖片。矩形控件：通常用來進行界面分割，但其實際用法相當靈活，比如tab頁面的標簽等文本框：需要輸入內(nèi)容的文本框，最常用的一個控件；按鈕：系統(tǒng)中需要執(zhí)行某些命令時使用，例如提交內(nèi)容，計算等。43A最基本的五個控件（Widgets）文本控件（textpan3基本交互

介紹簡單的交互行為，并解釋基本交互設計的方法44A3基本交互介紹簡單的交互行為，并解釋基本交互設計的方法13.1控件交互控件的交互用到了控件交互面板，如右圖所示：在控件交互面板中可以定義控件的交互，交互事件（Events）、場景（Cases）和動作（Actions）組成：用戶操作界面時就會觸發(fā)事件每個事件可以包含多個場景每個場景可執(zhí)行多個動作45A3.1控件交互控件的交互用到了控件交互面板，如右圖所示：13.1.1交互-事件

☆OnClick：鼠標點擊☆OnMouseEnter：鼠標的指針移動到對象上☆OnMouseOut：鼠標的指針移動出對象外OnFocus：鼠標的指針進入文字輸入狀態(tài)（獲得焦點）OnLostFocus：鼠標的指針離開文字輸入狀態(tài)（失去焦點）OnChange：下拉框或列表框中的選項改變OnPageLoad：頁面或模塊載入OnKeyUp：按下然后松開鍵盤上的鍵46A3.1.1交互-事件