Axure Pro RP 6 軟體分享                   江宛霖 Winnie Chiang                 eMail: winniejjw@gmail.com                     TEL...
大綱• 認識 Axure RP      –     什麼是 Axure RP      –     Prototype的效益      –     Axure RP可以幫助哪些人      –     案例展示• Axure基本功能介紹• A...
認識 Axure RP2012/4/24                 3
什麼是 Axure RP?• Axure的發音是『Ack-sure』,RP則是『Rapid Prototyping』  快速原型的縮寫。• Axure RP是一個快速繪製Wireframe 和Prototyping的工具,  主要用來定義應用程...
Prototyping 工具            相較於利用PowerPoint或Visio軟體,Axure RP 可以            讓應用網站企劃人員或網站功能介面設計師,更快            速且更簡易的建立Web AP和...
以Axure RP作為前期規劃的好處?• 因為Axure的具體化而減少確認規劃構想的次數與時間。• 因規劃階段的Prototype傳達力及確認度高,節省了後續網站  設計及程式開發的修正次數,進而確保開發時程能如期完成。• 不只省下了在收集與溝...
Axure RP可以幫助哪些人?•   網站企劃人員•   網站專案經理•   系統分析師•   軟體介面設計師•   互動設計師•   使用者經驗設計師•   Usability專家•   產品經理2012/4/24             ...
案例展示• 學生作品      – file:///D:/大學部Axure期末/一個人的旅行/index.html      – file:///D:/大學部Axure期末/點心食譜/index.html      – file:///C:/U...
Axure RP 基本功能介紹2012/4/24                 9
基本重要功能                                 1.功能選單(Menu)                                                    2.快捷功能列(Toolbars)  ...
1.功能選單(Menu)2012/4/24                  11
從RP資料夾匯入項目            新增共享專案               存取並開啟共享專案            以圖檔格式匯出頁面            備份設定2012/4/24                  12
取代 (自訂搜尋條件並取代欲替換之文字)2012/4/24                          13
顯示/隱藏功能列            恢復面板            原始狀態2012/4/24                     14
自訂元件註解欄位             頁註解管理            清空本頁所有元件註解             重新調整流程圖的連接線            編輯元件預設樣式            編輯頁面格式            ...
群組            解散群組2012/4/24          16
調整元件層級2012/4/24            17
調整對齊方式2012/4/24            18
水平均分元件間隔            垂直均分元件間隔2012/4/24          19
減少元件註腳編號            增加元件註腳編號2012/4/24          20
鎖定元件座標與尺寸              解除鎖定2012/4/24            21
將元件轉為組件            將元件轉為動態控制板2012/4/24                22
產生網站原型                                   產生網站規格文件                                   產生其他格式                               套...
將目前檔案新建為共享專案              存取並開啟共享專案            瀏覽共享專案編輯歷程2012/4/24                 24
歡迎畫面及註冊                        提交意見            線上教學及相關資源2012/4/24                            25
3.網站結構(Sitemap)2012/4/24                     26
調整頁面順位       調整頁面層級   刪除   編輯頁面新增子頁面                                  搜尋頁面                           [於任一頁面上按右鍵跳出選單]      ...
4.元件庫(Widgets)2012/4/24                    28
線框圖元件庫                                 擺放商品、 插入圖片       打文字    超連結    長方形            按鈕     表格    文字輸入框                   ...
流程圖元件庫                                                        網路下載的            新增元件庫                                      ...
5.組件庫(Masters)            將重複套用在較多網頁的相同元件設為組件             新增一個資料夾 調整組件層級 搜尋組件              新增一個空白組件 刪除一個組件                ...
7.頁註解(Page Notes)            利用頁註解欄位輸入規劃構想、設計建議…            等有助於理解的說明文字。2012/4/24                         32
8.頁互動設定(Page Interactions)             設定每當這個頁面被瀏覽器讀取時要產             生何種動作2012/4/24                            33
9.頁格式設定(Page Formatting)                              實用                               ♥設定網頁對齊方式、背景顏色、圖片、線框粗細及手繪風格等2012/4/...
10.元件註解            標示頁面上每一個元件的附註說明                    輸入元件註解                自訂註解欄位數目與名稱                清除本元件所有註解文字2012/4/2...
11.元件互動設定                   賦予元件可識別的命名(很重要!!!!)                    OnClick: 點按元件則產生…互動            OnMouseEnter: 游標移動至元件上則產...
12.元件格式設定            設定元件座標、尺寸、順序、對齊            方式、填入色彩及線框粗細等。2012/4/24                     37
Axure RP 實用功能介紹2012/4/24                 38
如何截圖至頁面中?• 利用螢幕截取工具選取需要的畫面,複製貼至Axure中。• 利用<Slice Image>功能,將不要擷取的部分剪除,留下  需要的部分。                                    39
輕鬆嵌入熱門影片至網頁• 將嵌入碼中<src=“http…”>這一段雙引號中的字串複製或剪  下(不含雙引號)貼至<Inline Frame>即可。    ★ ★ ★ 嵌入Slideshare投影片和Google Maps方法亦同。      ...
Axure RP 基本互動設計2012/4/24                 41
將元件設置超連結            (Open Link in Current Window)    1         選擇元件                     3                                 ...
點按連結開啟彈跳視窗            (Open Link in Popup Window)    1        選擇元件                    3                                 42...
點按元件關閉目前視窗            (Close Current Window)    1       選擇元件                   32選擇元件互動產生方式                          通常應用於...
點按元件開/關內容區塊                    (Toggle Visibility for Panels)     1                   2                 3         Dynamic ...
捲動視窗至指定的畫面                (Scroll to Image Map Region)1   將元件移動至捲軸停止處並賦予元件名稱         2   將索引點置於頁面適當位置並設定動作                ...
如何將成果分享給別人?• http://share.axure.com/                            47
Upcoming SlideShare
Loading in …5
×

Axure pro rp 6 軟體分享

2,525 views

Published on

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,525
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
47
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Axure pro rp 6 軟體分享

  1. 1. Axure Pro RP 6 軟體分享 江宛霖 Winnie Chiang eMail: winniejjw@gmail.com TEL: 0910-389-190 軟體下載: http://www.axure.com/previous2012/4/24 1
  2. 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. 3. 認識 Axure RP2012/4/24 3
  4. 4. 什麼是 Axure RP?• Axure的發音是『Ack-sure』,RP則是『Rapid Prototyping』 快速原型的縮寫。• Axure RP是一個快速繪製Wireframe 和Prototyping的工具, 主要用來定義應用程式的需求與規格,以及設計使用者介 面與功能。• 幫助我們快速且有效地分析需求、驗證設計並傳達給所有 參與者,以確保在有限的專案時間與資源下,開發出有用 和可用的應用程式。2012/4/24 4
  5. 5. Prototyping 工具 相較於利用PowerPoint或Visio軟體,Axure RP 可以 讓應用網站企劃人員或網站功能介面設計師,更快 速且更簡易的建立Web AP和Website的wireframe、 流程圖、prototype和規格。2012/4/24 5
  6. 6. 以Axure RP作為前期規劃的好處?• 因為Axure的具體化而減少確認規劃構想的次數與時間。• 因規劃階段的Prototype傳達力及確認度高,節省了後續網站 設計及程式開發的修正次數,進而確保開發時程能如期完成。• 不只省下了在收集與溝通需求上的時間與成本,同時也降低 了改善需求時的重工。2012/4/24 6
  7. 7. Axure RP可以幫助哪些人?• 網站企劃人員• 網站專案經理• 系統分析師• 軟體介面設計師• 互動設計師• 使用者經驗設計師• Usability專家• 產品經理2012/4/24 7
  8. 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-prototypes2012/4/24 8
  9. 9. Axure RP 基本功能介紹2012/4/24 9
  10. 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. 11. 1.功能選單(Menu)2012/4/24 11
  12. 12. 從RP資料夾匯入項目 新增共享專案 存取並開啟共享專案 以圖檔格式匯出頁面 備份設定2012/4/24 12
  13. 13. 取代 (自訂搜尋條件並取代欲替換之文字)2012/4/24 13
  14. 14. 顯示/隱藏功能列 恢復面板 原始狀態2012/4/24 14
  15. 15. 自訂元件註解欄位 頁註解管理 清空本頁所有元件註解 重新調整流程圖的連接線 編輯元件預設樣式 編輯頁面格式 設計區網格設定2012/4/24 15
  16. 16. 群組 解散群組2012/4/24 16
  17. 17. 調整元件層級2012/4/24 17
  18. 18. 調整對齊方式2012/4/24 18
  19. 19. 水平均分元件間隔 垂直均分元件間隔2012/4/24 19
  20. 20. 減少元件註腳編號 增加元件註腳編號2012/4/24 20
  21. 21. 鎖定元件座標與尺寸 解除鎖定2012/4/24 21
  22. 22. 將元件轉為組件 將元件轉為動態控制板2012/4/24 22
  23. 23. 產生網站原型 產生網站規格文件 產生其他格式 套用目前修改重新產生原型 網站資料夾中有許多檔案,該如何檢視網頁? ->點index進入網站首頁2012/4/24 23
  24. 24. 將目前檔案新建為共享專案 存取並開啟共享專案 瀏覽共享專案編輯歷程2012/4/24 24
  25. 25. 歡迎畫面及註冊 提交意見 線上教學及相關資源2012/4/24 25
  26. 26. 3.網站結構(Sitemap)2012/4/24 26
  27. 27. 調整頁面順位 調整頁面層級 刪除 編輯頁面新增子頁面 搜尋頁面 [於任一頁面上按右鍵跳出選單] 實用喔! ★ 自動產生網站地圖2012/4/24 27
  28. 28. 4.元件庫(Widgets)2012/4/24 28
  29. 29. 線框圖元件庫 擺放商品、 插入圖片 打文字 超連結 長方形 按鈕 表格 文字輸入框 廣告示意圖文字輸入區塊 下拉選單 列表框 核取方塊 圈選按鈕 水平線 垂直線 形狀按鈕 定位標記 嵌入影片 動態面板 垂直選單 水平選單 樹狀選單2012/4/24 29
  30. 30. 流程圖元件庫 網路下載的 新增元件庫 範例檔如何 匯入? ★ ★ ★ 範例檔去哪下載? http://www.axure.com/download-widget-libraries2012/4/24 30
  31. 31. 5.組件庫(Masters) 將重複套用在較多網頁的相同元件設為組件 新增一個資料夾 調整組件層級 搜尋組件 新增一個空白組件 刪除一個組件 調整組件排序 編輯組件2012/4/24 31
  32. 32. 7.頁註解(Page Notes) 利用頁註解欄位輸入規劃構想、設計建議… 等有助於理解的說明文字。2012/4/24 32
  33. 33. 8.頁互動設定(Page Interactions) 設定每當這個頁面被瀏覽器讀取時要產 生何種動作2012/4/24 33
  34. 34. 9.頁格式設定(Page Formatting) 實用 ♥設定網頁對齊方式、背景顏色、圖片、線框粗細及手繪風格等2012/4/24 34
  35. 35. 10.元件註解 標示頁面上每一個元件的附註說明 輸入元件註解 自訂註解欄位數目與名稱 清除本元件所有註解文字2012/4/24 35
  36. 36. 11.元件互動設定 賦予元件可識別的命名(很重要!!!!) OnClick: 點按元件則產生…互動 OnMouseEnter: 游標移動至元件上則產生…互動 OnMouseOut: 游標從元件上移開則產生…互動2012/4/24 36
  37. 37. 12.元件格式設定 設定元件座標、尺寸、順序、對齊 方式、填入色彩及線框粗細等。2012/4/24 37
  38. 38. Axure RP 實用功能介紹2012/4/24 38
  39. 39. 如何截圖至頁面中?• 利用螢幕截取工具選取需要的畫面,複製貼至Axure中。• 利用<Slice Image>功能,將不要擷取的部分剪除,留下 需要的部分。 39
  40. 40. 輕鬆嵌入熱門影片至網頁• 將嵌入碼中<src=“http…”>這一段雙引號中的字串複製或剪 下(不含雙引號)貼至<Inline Frame>即可。 ★ ★ ★ 嵌入Slideshare投影片和Google Maps方法亦同。 40
  41. 41. Axure RP 基本互動設計2012/4/24 41
  42. 42. 將元件設置超連結 (Open Link in Current Window) 1 選擇元件 3 42選擇元件互動產生方式2012/4/24 42
  43. 43. 點按連結開啟彈跳視窗 (Open Link in Popup Window) 1 選擇元件 3 42 5選擇元件互動產生方式2012/4/24 43
  44. 44. 點按元件關閉目前視窗 (Close Current Window) 1 選擇元件 32選擇元件互動產生方式 通常應用於關閉彈跳視窗2012/4/24 44
  45. 45. 點按元件開/關內容區塊 (Toggle Visibility for Panels) 1 2 3 Dynamic Panel 5 42012/4/24 45
  46. 46. 捲動視窗至指定的畫面 (Scroll to Image Map Region)1 將元件移動至捲軸停止處並賦予元件名稱 2 將索引點置於頁面適當位置並設定動作 4 3 2012/4/24 46
  47. 47. 如何將成果分享給別人?• http://share.axure.com/ 47

×