1. Axure Pro RP 6 軟體分享
江宛霖 Winnie Chiang
eMail: winniejjw@gmail.com
TEL: 0910-389-190
軟體下載: http://www.axure.com/previous
2012/4/24 1

2. 大綱
• 認識 Axure RP
– 什麼是 Axure RP
– Prototype的效益
– Axure RP可以幫助哪些人
– 案例展示
• Axure基本功能介紹
• Axure實用功能介紹
– 截圖至軟體中
– 嵌入影片
• Axure基本互動設計
– 將元件設置超連結 (Open Link in Current Window)
– 點按連結開啟彈跳視窗 (Open Link in Popup Window)
– 點按元件關閉目前視窗 (Close Current Window)
– 捲動視窗至指定的畫面 (Scroll to Image Map Region)
– 設定點按後延遲時間再進行下一步互動 (Wait Time)
– 快速建立跳顯訊息視窗 (Other)
– 元件動態效果的任意門<Dynamic Panel>
2012/4/24 2

3. 認識 Axure RP
2012/4/24 3

4. 什麼是 Axure RP?
• Axure的發音是『Ack-sure』，RP則是『Rapid Prototyping』
快速原型的縮寫。
• Axure RP是一個快速繪製Wireframe 和Prototyping的工具，
主要用來定義應用程式的需求與規格，以及設計使用者介
面與功能。
• 幫助我們快速且有效地分析需求、驗證設計並傳達給所有
參與者，以確保在有限的專案時間與資源下，開發出有用
和可用的應用程式。
2012/4/24 4

5. Prototyping 工具
相較於利用PowerPoint或Visio軟體，Axure RP 可以
讓應用網站企劃人員或網站功能介面設計師，更快
速且更簡易的建立Web AP和Website的wireframe、
流程圖、prototype和規格。
2012/4/24 5

6. 以Axure RP作為前期規劃的好處?
• 因為Axure的具體化而減少確認規劃構想的次數與時間。
• 因規劃階段的Prototype傳達力及確認度高，節省了後續網站
設計及程式開發的修正次數，進而確保開發時程能如期完成。
• 不只省下了在收集與溝通需求上的時間與成本，同時也降低
了改善需求時的重工。
2012/4/24 6

7. Axure RP可以幫助哪些人?
• 網站企劃人員
• 網站專案經理
• 系統分析師
• 軟體介面設計師
• 互動設計師
• 使用者經驗設計師
• Usability專家
• 產品經理
2012/4/24 7

8. 案例展示
• 學生作品
– file:///D:/大學部Axure期末/一個人的旅行/index.html
– file:///D:/大學部Axure期末/點心食譜/index.html
– file:///C:/Users/acer/Documents/My%20Axure%20RP%20
Prototypes/0123/index.html
• 線上範例
– http://www.axure.com/sample-prototypes
2012/4/24 8

9. Axure RP 基本功能介紹
2012/4/24 9

10. 基本重要功能
1.功能選單(Menu)
2.快捷功能列(Toolbars)
3.網站結構
(Sitemap)
6.設計區 10.元件註解
4.元件庫 11.元件互動設定
(Widgets)
12.元件格式設定
13.動態面板管理
5.組件庫
(Masters) 7.頁註解 8.頁互動設定 9.頁格式設定
(Page Notes) (Page Interactions) (Page Formatting)
2012/4/24 10

11. 1.功能選單(Menu)
2012/4/24 11

12. 從RP資料夾匯入項目
新增共享專案
存取並開啟共享專案
以圖檔格式匯出頁面
備份設定
2012/4/24 12

13. 取代 (自訂搜尋條件並取代欲替換之文字)
2012/4/24 13

14. 顯示/隱藏功能列
恢復面板
原始狀態
2012/4/24 14

15. 自訂元件註解欄位
頁註解管理
清空本頁所有元件註解
重新調整流程圖的連接線
編輯元件預設樣式
編輯頁面格式
設計區網格設定
2012/4/24 15

16. 群組
解散群組
2012/4/24 16

17. 調整元件層級
2012/4/24 17

18. 調整對齊方式
2012/4/24 18

19. 水平均分元件間隔
垂直均分元件間隔
2012/4/24 19

20. 減少元件註腳編號
增加元件註腳編號
2012/4/24 20

21. 鎖定元件座標與尺寸
解除鎖定
2012/4/24 21

22. 將元件轉為組件
將元件轉為動態控制板
2012/4/24 22

23. 產生網站原型
產生網站規格文件
產生其他格式
套用目前修改重新產生原型
網站資料夾中有許多檔案，該如何檢視網頁?
->點index進入網站首頁
2012/4/24 23

24. 將目前檔案新建為共享專案
存取並開啟共享專案
瀏覽共享專案編輯歷程
2012/4/24 24

25. 歡迎畫面及註冊
提交意見
線上教學及相關資源
2012/4/24 25

26. 3.網站結構(Sitemap)
2012/4/24 26

27. 調整頁面順位 調整頁面層級 刪除 編輯頁面
新增子頁面 搜尋頁面
[於任一頁面上按右鍵跳出選單]
實用喔！
★ 自動產生網站地圖
2012/4/24 27

28. 4.元件庫(Widgets)
2012/4/24 28

29. 線框圖元件庫
擺放商品、
插入圖片 打文字 超連結 長方形 按鈕 表格 文字輸入框
廣告示意圖
文字輸入區塊 下拉選單 列表框 核取方塊 圈選按鈕 水平線 垂直線 形狀按鈕
定位標記 嵌入影片 動態面板 垂直選單 水平選單 樹狀選單
2012/4/24 29

30. 流程圖元件庫
網路下載的
新增元件庫 範例檔如何
匯入?
★ ★ ★ 範例檔去哪下載? http://www.axure.com/download-widget-libraries
2012/4/24 30

31. 5.組件庫(Masters)
將重複套用在較多網頁的相同元件設為組件
新增一個資料夾 調整組件層級 搜尋組件
新增一個空白組件 刪除一個組件
調整組件排序 編輯組件
2012/4/24 31

32. 7.頁註解(Page Notes)
利用頁註解欄位輸入規劃構想、設計建議…
等有助於理解的說明文字。
2012/4/24 32

33. 8.頁互動設定(Page Interactions)
設定每當這個頁面被瀏覽器讀取時要產
生何種動作
2012/4/24 33

34. 9.頁格式設定(Page Formatting)
實用
♥
設定網頁對齊方式、
背景顏色、圖片、線
框粗細及手繪風格等
2012/4/24 34

35. 10.元件註解
標示頁面上每一個元件的附註說明
輸入元件註解
自訂註解欄位數目與名稱
清除本元件所有註解文字
2012/4/24 35

36. 11.元件互動設定
賦予元件可識別的命名(很重要!!!!)
OnClick: 點按元件則產生…互動
OnMouseEnter: 游標移動至元件上則產生…互動
OnMouseOut: 游標從元件上移開則產生…互動
2012/4/24 36

37. 12.元件格式設定
設定元件座標、尺寸、順序、對齊
方式、填入色彩及線框粗細等。
2012/4/24 37

38. Axure RP 實用功能介紹
2012/4/24 38

39. 如何截圖至頁面中?
• 利用螢幕截取工具選取需要的畫面，複製貼至Axure中。
• 利用<Slice Image>功能，將不要擷取的部分剪除，留下
需要的部分。
39

40. 輕鬆嵌入熱門影片至網頁
• 將嵌入碼中<src=“http…”>這一段雙引號中的字串複製或剪
下(不含雙引號)貼至<Inline Frame>即可。
★ ★ ★ 嵌入Slideshare投影片和Google Maps方法亦同。
40

41. Axure RP 基本互動設計
2012/4/24 41

42. 將元件設置超連結
(Open Link in Current Window)
1 選擇元件
3
4
2
選擇元件互動產生方式
2012/4/24 42

43. 點按連結開啟彈跳視窗
(Open Link in Popup Window)
1 選擇元件
3
4
2
5
選擇元件互動產生方式
2012/4/24 43

44. 點按元件關閉目前視窗
(Close Current Window)
1 選擇元件
3
2
選擇元件互動產生方式
通常應用於關閉彈跳視窗
2012/4/24 44

45. 點按元件開/關內容區塊
(Toggle Visibility for Panels)
1 2 3
Dynamic Panel
5
4
2012/4/24 45

46. 捲動視窗至指定的畫面
(Scroll to Image Map Region)
1 將元件移動至捲軸停止處並賦予元件名稱 2 將索引點置於頁面適當位置並設定動作
4
3
2012/4/24 46

47. 如何將成果分享給別人?
• http://share.axure.com/
47