Axure RP Prototyping Tool
Upcoming SlideShare
Loading in...5
×
 

Axure RP Prototyping Tool

on

  • 3,096 views

簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ,主要為Axure RP雛型軟體簡易介紹與操作的體驗課程。 ...

簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ,主要為Axure RP雛型軟體簡易介紹與操作的體驗課程。

本投影片資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用。

悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com

Statistics

Views

Total Views
3,096
Views on SlideShare
3,070
Embed Views
26

Actions

Likes
3
Downloads
53
Comments
0

2 Embeds 26

http://yiweijie.freehostia.com 24
http://axurerp.blogspot.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Axure RP Prototyping Tool Axure RP Prototyping Tool Presentation Transcript

  • Axure RPPrototyping 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本投影片資料由蔡明哲 (Richard Tsai)整理提供,經同意進行修改與教學使用悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com -2-
  • 武林高手 -3-
  • 打坐 練功 積內力-4-
  • 內功要深厚第一式-基本功 -5-
  • 如來神掌 易筋經-6-
  • 秘笈第二式-方法與步驟 -7-
  • 倚天屠龍青冥劍 -8-
  • 絕世好劍第三式-善用工具 -9-
  • Prototype位於什麽階段? -10-
  • 資訊架構, 使用者經驗, 介面設計, 互動設計,【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-
  • Axure RP絕世好劍 -12-
  • 基本功 使用性 步驟工具 方法 -13-
  • http://www.axure.com/-14-
  • 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)屏科大機構典藏展覽館http://npuir.npust.edu.tw/bdweb/index.jsp?orgId=BD -16-
  • Axure RP HTML 原型範例(3)台灣原住民族數位典藏知識入口網,http://portal.tacp.gov.tw/ -17-
  • 認識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-
  • 4.建立link 3.畫wireframe 1.定義sitemap 1 4 32,內建 5widget 5.Widget / Page的 2 註解說明 6.自訂 5 共用template 6 -20-
  • 1.定義Sitemap -21-
  • 2. 使用WidgetWidget for Wireframe Widget for Flow -22-
  • 3.畫Wireframe HEADERGlobal Navigation Global Navigation Global Navigation BreadcrumbLocal NavigationLocal Navigation ContextLocal NavigationLocal NavigationLocal Navigation FOOTER -23-
  • 4. 建立link (OnClick Event) 4.建立 link -24-
  • 5. 加上註解 (Annotation / Page Notes) 5 5.Widget 5 / Page的 註解說明 -25-
  • 6. 自訂 master (共用區塊template)6.自訂共用區域 template 6 -26-
  • 如何定義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文件 HEADER Global Navigation Global Navigation Global Navigation Breadcrumb Local Navigation Local Navigation Context Local Navigation Local Navigation Local Navigation FOOTER -29-
  • 學習使用Widget Libraries http://www.axure.com/widgetlibraries -30-
  • 實機練習-屏科大資管系網頁 -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-
  • 1 2 3 -34-
  • Axure RP人機介面觸發事件 Event• 以滑鼠點擊 - OnClick• 滑鼠的指標移動到物件之上 - OnMouseEnter• 滑鼠的指標移動出物件之外 - OnMouseOut• 滑鼠的指標進入文字輸入狀態 - OnFocus• 滑鼠的指標離開文字輸入狀態 - OnLostFocus• 敲鍵盤 - OnKeyUp• 瀏覽器下載網頁 - OnPageLoad -35-
  • 狀況 (Case) 邏輯判斷(Condition) 指定動作 定義動作 所有可用的動作 -36-
  • 設計基本的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 Users Club – http://on.fb.me/axure-user-club• 想收到最新使用性相關 資訊 – 網站企劃 – http://www.facebook.com/web.plan -43-
  • Q&A -44-