簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ，主要為Axure RP雛型軟體簡易介紹與操作的體驗課程。 本投影片資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用。 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com

1. Axure RP
Prototyping Tool簡介
楊梭逸
2011/5/31於屏科大資管系「網際網路原理」課程

2. • 楊梭逸 Carter Yang
• 現職：
– 凌誠科技（股）經理
• 興趣：
– Capability Maturity Model Integration
– Quality Assurance
– Project Management
– Web Design
– User Center Design
– Usability
• 網絡平台：
– 大頭鼠的部落格，http://www.bhm.idv.tw/blog/
– AboutMe社交名片，http://about.me/bhm
本投影片資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用
悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com
-2-

3. 武林高手
-3-

4. 打坐
練功
積內力
-4-

5. 內功要深厚
第一式-基本功
-5-

6. 如來神掌
易筋經
-6-

7. 秘笈
第二式-方法與步驟
-7-

8. 倚天
屠龍
青冥劍
-8-

9. 絕世好劍
第三式-善用工具
-9-

10. Prototype
位於什麽階段?
-10-

11. 資訊架構, 使用者經驗, 介面設計, 互動設計,
【1】基本功 使用者研究, 使用者測試,
品牌與視覺, 網路行銷, 資訊技術. …
HTML, Flash, Javascript, CSS,
【2】步驟與方法 Visualization, Copy(文案),
研究方法，調查方法，
專案管理, 工作流程, 溝通技巧, …
MS Office, Axure RP, XMind,
Google Search, Google Analytics,
【3】工具 Pencil Project, Cacoo, Photoshop,
Balsaming Mockups, FastStone …
-11-

12. Axure RP
絕世好劍
-12-

13. 基本功
使用性
步驟
工具
方法
-13-

14. http://www.axure.com/
-14-

15. Axure RP HTML 原型範例(1)
• 優點：
– 好操作, 好改好維護, 容易上手, Rich Interaction, 不用學
HTML, Javascript語法, 多人協做, 共用模組(pattern library)
• 網站範例：
– 範例-旅遊網站，http://goo.gl/X954K
• 效果範例：
– 下拉選單(droplist)的互動設計範例，http://goo.gl/CRhCZ
– 模擬Yahoo! YUI TabView， http://goo.gl/Ymu6q
– 模擬Accordion互動介面設計， http://goo.gl/21yIz
– 模擬Auto Complete互動介面設計， http://goo.gl/B1wsB
– 模擬地圖Zoom In/Out互動設計， http://goo.gl/97vn2
-15-

16. Axure RP HTML 原型範例(2)
屏科大機構典藏展覽館
http://npuir.npust.edu.tw/bdweb/index.jsp?orgId=BD
-16-

17. Axure RP HTML 原型範例(3)
台灣原住民族數位典藏知識入口網，http://portal.tacp.gov.tw/
-17-

18. 認識Axure RP Pro
• Axure RP Pro
– 發音 “ack-sure”
– RP = Rapid Prototyping 快速原型工具
• 上課之前
– 安裝Axure RP Pro程式
– 啟動Axure RP Pro
• Axure RP Pro版本
– 最新程式版本 6.0
– 語言版本: 英文/日文介面
– Axure RP Pro 是單機版軟體, 可以直接在windows 環境安裝操作
• Axure RP Pro的project file - 副檔名 .rp
-18-

19. Part 1 基本操作
• 學習定義Sitemap，繪製架構圖
• 學習初級互動設計 (OnClick)
• 學習使用Master (自定共用區塊)
• 學習設計Navigation(導覽列)
• 學習輸出 Prototype (雛形)及
Specification(規格)文件
• 學習使用Widget Libraries
-19-

20. 4.建立link
3.畫wireframe
1.定義
sitemap
1 4
3
2,內建 5
widget
5.Widget
/ Page的
2 註解說明
6.自訂
5
共用template
6
-20-

21. 1.定義Sitemap
-21-

22. 2. 使用Widget
Widget for Wireframe Widget for Flow
-22-

23. 3.畫Wireframe
HEADER
Global Navigation Global Navigation Global Navigation
Breadcrumb
Local Navigation
Local Navigation
Context
Local Navigation
Local Navigation
Local Navigation
FOOTER
-23-

24. 4. 建立link (OnClick Event) 4.建立
link
-24-

25. 5. 加上註解 (Annotation / Page Notes)
5
5.Widget
5 / Page的
註解說明
-25-

26. 6. 自訂 master (共用區塊template)
6.自訂共用區域
template
6
-26-

27. 如何定義Sitemap (page list)
• 把已經想好架構, 輸入到sitemap區域
• 自動產生 Page Flow
-27-

28. 輸出Prototype/Spec的預設folder
• 如果輸出Prototype/Spec時, 不特別指定輸出的目錄,
那麼Axure RP會幫你放在 “我的文件”裡頭的目錄
– My Axure RP Prototypes : 放Prototype (html檔案)
– My Axure RP Reports : 放指定輸出的report檔( xls檔案)
– My Axure RP Specifications : 放指定輸出的規格文件 (word檔案)
-28-

29. 畫Wireframe, 並產出 Prototype 及 SPEC文件
HEADER
Global Navigation Global Navigation Global Navigation
Breadcrumb
Local Navigation
Local Navigation
Context
Local Navigation
Local Navigation
Local Navigation
FOOTER
-29-

30. 學習使用Widget Libraries
http://www.axure.com/widgetlibraries
-30-

31. 實機練習-屏科大資管系網頁
-31-

32. Part 2互動設計
• 1. 學習Axure RP 互動設計概念
• 2. 學習各種互動表現的特性與動作描述
• 3. 學習Dynamic Panel的使用
• 4. 學習設計TabView
-32-

33. 觸發事件(Event)、狀況 (Case)、動作型態(Action)
• 當使用者對網頁進行某些人機介面的操作時，就會對網頁觸發一
個事件(Event)。
• 每一個觸發事件都可以有一或多個狀況(Case)
一個按鈕的OnClick 觸發事件可以有兩個狀況：
– Case 1 link到某頁
– Case2 則link至另一頁
• 而每一個狀況 (Case)又可以執行一或多個動作型態(Action)
• 動作型態(Action)，必須進一步定義動作描述(Action
Description)
– 比如「Open Link in Current Window」的Action，就是Hyperlink的表
現，需要定義link到哪一頁
-33-

34. 1 2
3
-34-

35. Axure RP人機介面觸發事件 Event
• 以滑鼠點擊 - OnClick
• 滑鼠的指標移動到物件之上 - OnMouseEnter
• 滑鼠的指標移動出物件之外 - OnMouseOut
• 滑鼠的指標進入文字輸入狀態 - OnFocus
• 滑鼠的指標離開文字輸入狀態 - OnLostFocus
• 敲鍵盤 - OnKeyUp
• 瀏覽器下載網頁 - OnPageLoad
-35-

36. 狀況 (Case) 邏輯判斷(Condition)
指定動作
定義動作
所有可用的動作
-36-

37. 設計基本的AJAX/ RIA 效果
• 使用 Dynamic Panel
• Dynamic Panel – 一種透明的，可以內
含很多層Layer的Widget, 比如
– Dynamic Panel – Panel 1
• State 1
• State 2
• State 3
-37-

38. 設計基本的AJAX/ RIA 效果
• State (of Dynamic Panel)
– 小網頁
– 可隱藏 , 可顯現
– 不同state可以疊在一起, 借著控制State
的順序(order), 來呈現網頁上的資訊
-38-

39. TabView State 1/2/3
-39-

40. 提高效率的技巧
• 善用Hot Key (跟Office軟體Hot Key相同)
– CTRL-A : 全選
– CTRL-C : Copy
– CTRL-X : Cut
– CTRL-V : Paste
• 只要更新一頁Re-generate one page (CTRL-F5)
• Copy Excel的表格內容 Paste as “Image”
Table, Menu (Vertical/Horizontal)
Widgets比較耗效能
-40-

41. 對齊/移動/選擇
• 按住【Shift】鍵拖曳Widget可以水平或垂直
移動Widget
• Hand Tool: 按住空白鍵時滑鼠會切換成手狀
，可以用來滑動畫面。
• 重疊的物件，按住上層物件久一點，放掉後可
選取下層物件
• 以方向鍵移動Widget
-41-

42. Axure RP相關網路資源
• Axure RP英文線上教學
– http://www.axure.com/howto
• Axure RP中文線上教學
– http://userxper.com/axure_tutorial
• Axure RP Design Pattern Library/範例下載
– http://userxper.com
– http://www.axure.com/widgetlibraries
• Axure RP軟體下載 (或升級)
– http://userxper.com/axure_download
上網搜尋 “網站企劃” , 就可以找到 userxper.com
-42-

43. • 問題請貼到這裡來
– Axure RP User's Club
– http://on.fb.me/axure-user-club
• 想收到最新使用性相關
資訊
– 網站企劃
– http://www.facebook.com/web.plan
-43-

44. Q&A
-44-