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