楊梭逸

Axure RP Prototyping Tool簡介

2011/5/31於屏科大資管系「網際網路原理」課程

•楊梭逸 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

-2-

本投影片資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com

-3-

武林高手

-4-

打坐 練功 積內力

-5-

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

-6-

如來神掌 易筋經

-7-

秘笈 第二式-方法與步驟

-8-

倚天 屠龍 青冥劍

-9-

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

Prototype 位於什麽階段?

-10-

-11-

MS Office, Axure RP, XMind,

Google Search, Google Analytics, Pencil Project, Cacoo, Photoshop, Balsaming Mockups, FastStone …

資訊架構, 使用者經驗, 介面設計, 互動設計, 使用者研究, 使用者測試, 品牌與視覺, 網路行銷, 資訊技術. …

【3】工具

【1】基本功

HTML, Flash, Javascript, CSS, Visualization, Copy(文案), 研究方法，調查方法， 專案管理, 工作流程, 溝通技巧, …

【2】步驟與方法

-12-

Axure RP 絕世好劍

-13-

基本功

步驟 方法 工具

使用性

-14-

http://www.axure.com/

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-

Axure RP HTML 原型範例(2)

-16-

屏科大機構典藏展覽館http://npuir.npust.edu.tw/bdweb/index.jsp?orgId=BD

Axure RP HTML 原型範例(3)

-17-

台灣原住民族數位典藏知識入口網，http://portal.tacp.gov.tw/

認識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-

Part 1 基本操作

• 學習定義Sitemap，繪製架構圖 • 學習初級互動設計 (OnClick) • 學習使用Master (自定共用區塊) • 學習設計Navigation(導覽列) • 學習輸出 Prototype (雛形)及

Specification(規格)文件 • 學習使用Widget Libraries

-19-

-20-

1.定義sitemap

3.畫wireframe

2,內建widget

4.建立link

1

2

6

3

5

4

5

5.Widget / Page的註解說明

6.自訂 共用template

1.定義Sitemap

-21-

2. 使用Widget

-22-

Widget for Wireframe Widget for Flow

3.畫Wireframe

-23-

Global Navigation Global Navigation Global Navigation

Local Navigation

Local Navigation

Local Navigation

Local Navigation

Local Navigation

Breadcrumb

HEADER

FOOTER

Context

4. 建立link (OnClick Event)

-24-

4.建立link

5. 加上註解 (Annotation / Page Notes)

-25-

5

5 5.Widget / Page的註解說明

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

-26-

6.自訂共用區域template 6

如何定義Sitemap (page list)

• 把已經想好架構, 輸入到sitemap區域 • 自動產生 Page Flow

-27-

輸出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-

畫Wireframe, 並產出 Prototype 及 SPEC文件

-29-

Global Navigation Global Navigation Global Navigation

Local Navigation

Local Navigation

Local Navigation

Local Navigation

Local Navigation

Breadcrumb

HEADER

FOOTER

Context

學習使用Widget Libraries

-30-

http://www.axure.com/widgetlibraries

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

-31-

Part 2互動設計

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

-32-

觸發事件(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

Axure RP人機介面觸發事件 Event

• 以滑鼠點擊 - OnClick • 滑鼠的指標移動到物件之上 - OnMouseEnter • 滑鼠的指標移動出物件之外 - OnMouseOut • 滑鼠的指標進入文字輸入狀態 - OnFocus • 滑鼠的指標離開文字輸入狀態 - OnLostFocus • 敲鍵盤 - OnKeyUp • 瀏覽器下載網頁 - OnPageLoad

-35-

-36-

狀況 (Case)

指定動作

定義動作

邏輯判斷(Condition)

所有可用的動作

設計基本的AJAX/ RIA 效果

• 使用 Dynamic Panel • Dynamic Panel – 一種透明的，可以內含很多層Layer的Widget, 比如 – Dynamic Panel – Panel 1 •State 1 •State 2 •State 3

-37-

設計基本的AJAX/ RIA 效果

• State (of Dynamic Panel)

–小網頁

–可隱藏 , 可顯現

–不同state可以疊在一起, 借著控制State

的順序(order), 來呈現網頁上的資訊

-38-

TabView State 1/2/3

-39-

提高效率的技巧

• 善用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-

對齊/移動/選擇

• 按住【Shift】鍵拖曳Widget可以水平或垂直移動Widget

• Hand Tool: 按住空白鍵時滑鼠會切換成手狀，可以用來滑動畫面。

• 重疊的物件，按住上層物件久一點，放掉後可選取下層物件

• 以方向鍵移動Widget

-41-

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-

• 問題請貼到這裡來 – Axure RP User's Club – http://on.fb.me/axure-user-club

• 想收到最新使用性相關資訊 – 網站企劃 – http://www.facebook.com/web.plan

-43-

-44-

Q&A