20120516 axure rp prototype design outline

4,859 views

Published on

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

No Downloads
Views
Total views
4,859
On SlideShare
0
From Embeds
0
Number of Embeds
3,166
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

20120516 axure rp prototype design outline

  1. 1. 唯一上課時允許facebook的課程? XD• Axure RP Users Club http://on.fb.me/axure-user-club
  2. 2. 關於悠識, 關於 RichardUserXper Web User Experience – Software / Training / Planning -2-
  3. 3. 網站/Mobile App規劃 (悠識服務1) • 制定策略 strategy plan • 規劃藍圖 wireframe • 設計模型 prototype • 使用者測試 user testing • 撰寫規格 specification
  4. 4. 快速原型軟體-Axure RP (悠識服務2) 一半以上財星百大企業, 超過3萬個專業團隊選擇Axure RP
  5. 5. Axure RP軟體客戶• 台灣 – 網路:Yahoo奇摩, 博客來, 巴哈姆特, 104人力銀行, 地圖 日記 – 軟體:趨勢科技, 友訊D-Link, 凌網科技, 華創車電, 華寶通 訊,圓剛科技, 凌誠科技, 神達, 台達電, 致伸科技 – 網路行銷: 達彼思廣告, 知世, 安捷達, 米蘭, 網路基因, 富 爾特, 不來梅, 奇禾, 聯網, 生命樹, 摩奇, 多奇, 喬立達, 阿物 國際, 恆基, 網路行動, 久大資訊, 樂倍達, … – 其他:玉山銀行, 工研院, NII• 大陸 – 微軟亞洲研究院, 百度, 中達電, iResearch, 上海征途, 法國 電信 – 騰訊, 網易, 阿里巴巴, 淘寶網, 當當網, 支付寶, Mapbar, 金蝶軟件, …
  6. 6. 訓練課程 (悠識服務3)• 企業內訓或公開課程• 包括: – 網站企劃工作流程 – Mobile Application 設計與規劃實務 – User-Centered Design – 使用者研究 – 易用性研究 – 網站建置新手指南 – 網站結合Facebook應用 – 網站流量分析及訪客行為解讀 – 簡報專業訓練 – 網路新創模式觀察與分析 – 資訊架構與介面模式 等等…
  7. 7. 使用者研究 (悠識服務4)• 行為觀察及分析 – 流量分析工具 Traffic analytic tool (Google Analytics Report) – 可用性測試 Usability test – 點擊熱圖 Click Heatmap (WaClick 產品) – 眼動分析 Eye tracking• 認知與理解 – 卡片分類 Card sorting• 機會探索挖掘 (目標使用者研究,並非網站現況分析) – 深度訪談 User Interview – 脈絡訪查 Contextual Inquiry – 焦點團體 Focus Group
  8. 8. 點擊熱圖追蹤服務 (WaClick)
  9. 9. Usability Test 可用性測試
  10. 10. 卡片分類法 – 探索使用者的認知
  11. 11. 深度訪談 人物誌 (機會挖掘)
  12. 12. 蔡明哲 Richard Tsai• 悠識數位 首席資訊架構師 Chief Information Architect – 專長 • 網站企劃,網路行銷, 專案管理, 系統分析, 資料庫行銷 – 過去 • 企劃顧問,專案總監,客服總監,技術總監,行銷企畫經理,知識研究部經 理,軟體工程師,專案經理,產品經理,廣告AE.. – UiGathering協會監事 / IAI / UPA – HPX founder• 幫助客戶 – 找出網站設計或企劃的問題 – 提供網站Usability的建議 – 提供網站企劃及Prototype Design的服務 – 提供網站企劃的內功心法/秘笈/工具
  13. 13. 網站/App 企劃 學習架構 Prototype位於什麽階段?
  14. 14. 如何成為網站企劃高手? 資訊架構, 使用者經驗, 介面設計, 互動設計,【1】基本功 使用者研究, 使用者測試, 品牌與視覺, 網路行銷, 資訊技術. … HTML, Flash, Javascript, CSS,【2】步驟與方法 Visualization, Copy(文案), 研究方法,調查方法, 專案管理, 工作流程, 溝通技巧, … Axure RP, MS Office, Mindmap,【3】工具 Google Search, Google Analytics, Sketch, Card Sorting, Camtasia, Morae, FastStone, ZoomIt …
  15. 15. 企劃流程與工具
  16. 16. UserXper Web User Experience – Software / Training / Planning -16-
  17. 17. 紙/筆
  18. 18. Paper Wireframe
  19. 19. Concept ( by Mind Map)
  20. 20. Prototyping工具• Diagram Tools (General Purpose) – VISIO / PowerPoint / Word / Excel – Pencil Project (plug-in Firefox) – OmniGraffle (Mac OS X, Mac版的Visio)• Graphics Tool – Photoshop / Illustrator / Firework / FlashMX
  21. 21. 模型屋Prototype:可供討論的模型或樣品 www.sexinsex.net/luntan/thread-1704273-1-1.html 樣品屋 透視圖 http://ohwed.youthwant.com.tw/blog/user1/CIDesigner/archives/2007/986.html http://blog.sina.com.tw/a0933448885/article.php?pbgid=52334&entryid=577267
  22. 22. Low Fidelity• 不像最終設計成品• 好處 – 很快….有東西可以討論 – 可以專注在High-level的設計觀念 – 探討主要的架構與功能 – 更容易發散思考不受拘束
  23. 23. High Fidelity• 接近最終設計成品• 好處 – 有更具體的東西可以討論 – 專注在更多的設計細節 – 驗證各種角度的使用者經驗 – 開發工作的工程師更容易理解 – 客戶(老闆)更容易理解
  24. 24. 設計流程中,二者都具有意義Low Fidelity High FidelityPrototype(Sketch手繪草稿) = Prototype UserXper Web User Experience – Software / Training / Planning -24-
  25. 25. 實際設計產品時,大家都希望看到更真實的設計Low Fidelity High FidelityPrototype < Prototype UserXper Web User Experience – Software / Training / Planning -25-
  26. 26. 廣義的Prototyping 形式 • Wireframe prototyping • Storyboard prototyping • Paper prototyping • Digital prototyping • Blank model prototyping • Video prototyping • Wizard of Oz prototyping • Coded prototyping (including scripting and HTML)
  27. 27. Wireframe prototyping Paper prototyping http://www.youtube.com/watch?v=GrV2SZuRPv0 http://www.youtube.com/watch?v=ykJ60H4Qkvg
  28. 28. Paper prototypingStoryboard prototyping Digital prototyping
  29. 29. Blank model prototypingWizard of Oz prototyping
  30. 30. Video prototyping http://www.youtube.com/watch?v=BpWM0FNPZSs 56秒-64秒Coded prototyping
  31. 31. Axure RP 最佳網站原型設計工具 網站企劃工具六合一網站架構/示意圖/流程圖/原型設計/互動設計/規格文件
  32. 32. UserXper Web User Experience – Software / Training / Planning -32-
  33. 33. 案例• Website• Web Application• Desktop Application• Mobile Application
  34. 34. Axure RP - Part 1 基本操作 UserXper Web User Experience – Software / Training / Planning -34-
  35. 35. Axure RP Pro入門六個步驟 • 定義 資訊架構(sitemap) • 使用widget • 畫wireframe • 建立link • 加上註解 • 自訂 master (template)最後產生(generate) – HTML prototype – 規格文件
  36. 36. 4.建立link 3.畫wireframe 1.定義sitemap 1 4 32,內建 5widget 5.Widget / Page的 2 註解說明 6.自訂 5 共用template 6
  37. 37. 1. 定義資訊架構 (sitemap)
  38. 38. 定義資訊架構, 繪製page flow• 把已經想好架構, 輸入到 [sitemap窗格]• 自動產生 Page Flow• Page Flow 不等於 UI Flow
  39. 39. 2. 使用 default widgetwidget for Wireframe widget for Flow
  40. 40. 3. 畫wireframe
  41. 41. 輸出Prototype/Spec的預設folder• 不特別指定輸出的目錄, 則放在 “我的文件” 目錄 – My Axure RP Prototypes : 放Prototype (html檔案) – My Axure RP Reports : 放指定輸出的report檔( xls檔案) – My Axure RP Specifications : 放指定輸出的規格文件 (word檔案)
  42. 42. 4. 建立link (OnClick Event) 2 1
  43. 43. 4. 建立link (OnClick Event) 3
  44. 44. 4. 建立link (OnClick Event) 4.建立 link
  45. 45. 5. 加上註解 (Annotation / Page Notes) 5 5 5.Widget / Page的 註解說明
  46. 46. 6. 自訂 master (共用區塊template)6.自訂共用區 域template 6
  47. 47. 自訂 master 的屬性 (Behavior)• 放在背景 (共用) Background• 放在前景 (共用) Normal• 前景, 且不共用 Custom Widget
  48. 48. Page屬性•Page屬性:預設頁面樣式或製作自定樣式•頁面對齊:將網頁置左或置中對齊 (只在HTML上才看得到效果)>根據最左邊和最右邊的物件置中。•背景顏色:給頁面背景顏色(不是在背景上放個大矩形!)•背景圖片:匯入圖片當背景,可以設定重複延展。•重複:將背景圖片水平、垂直或水平垂直重複延展。
  49. 49. 素描效果(Sketch Effects)• 更多樂趣• 任何階段都能使用手繪風格• 溝通時更可聚焦在結構、互動和功能上• Sketchiness(手繪程度) – 顏色: 整個頁面變成灰階 – 字體:可使用手寫字體 – 線寬:物件框線的寬度
  50. 50. Page說明格式化
  51. 51. 規格文件功能UserXper Web User Experience – Software / Training / Planning -51-
  52. 52. Generate Spec 目錄• PC: 全選後 按F9• Mac Command、Shift、Option、u
  53. 53. 規格文件的版型 • 一欄或兩欄 • Column Break--- -"分隔兩欄 • 指定內容排列 • Screenshot可設 定隱藏背景、素描 風格、改變大小
  54. 54. Widget LibrariesUserXper Web User Experience – Software / Training / Planning -54-
  55. 55. 使用Widget Libraries (下載安裝) http://axure.com > How-To > Widget Libraries
  56. 56. 觀念/技巧補充• Axure RP檔案管理及回復版本• 與其他Office文件的圖形交換• 善用Hot Key (跟Office軟體Hot Key相同) – CTRL-A : 全選 – CTRL-C : Copy – CTRL-X : Cut – CTRL-V : Paste• 只要更新一頁Re-generate one page (CTRL-F5)
  57. 57. Axure RP - Part 2 互動設計 UserXper Web User Experience – Software / Training / Planning -57-
  58. 58. Axure RP - Part 2 互動設計 1. Axure RP 互動設計概念 2. 各種互動表現的特性與動作描述 3. Dynamic Panel的狀態(State)控制 4. Page Level的互動設計 5. TabView(頁籤)的效果設計及其他
  59. 59. 觸發事件(Event)、狀況 (Case)、動作型態(Action)• 當使用者對網頁進行某些人機介面的操作時,就會對網頁觸發一個 事件(Event)。• 每一個觸發事件都可以有一或多個狀況(Case) 一個按鈕的OnClick 觸發事件可以有兩個狀況: – Case 1 link到某頁 – Case2 則link至另一頁 。• 而每一個狀況 (Case)又可以執行一或多個動作型態(Action)• 動作型態(Action),必須進一步定義動作描述(Action Description)。 – 比如「Open Link in Current Window」的Action,就是Hyperlink的表 現,需要定義link到哪一頁。
  60. 60. 基本的 Axure RP 觸發事件 Event• 以滑鼠點擊 - OnClick• 滑鼠的指標移動到物件之上 - OnMouseEnter• 滑鼠的指標移動出物件之外 - OnMouseOut• 滑鼠的指標進入文字輸入狀態 - OnFocus• 滑鼠的指標離開文字輸入狀態 - OnLostFocus• 敲鍵盤 - OnKeyUp• 瀏覽器下載畫面 - OnPageLoad
  61. 61. 進階的 Axure RP 觸發事件 Event(多數是僅能用於Dynamic Panel的操控)
  62. 62. 1 2 3
  63. 63. 狀況 (Case) 邏輯判斷(Condition) 指定動作 定義動作 所有可用的動作
  64. 64. Dynamic Panel (Axure 互動設計的魔法棒)• 透明的容器• 內含很多個插槽 –Dynamic Panel – Panel 1 •State 1 (預設一個插槽)
  65. 65. Dynamic Panel (Axure 互動設計的魔法棒)• State (of Dynamic Panel) – 小頁面 – Panel中的State至少一個 (或一個以上)
  66. 66. 顯示/關閉簡易說明視窗• 效果呈現 – Tap (onClick) Show Panel – Tap (onClick) Hide Panel• 練習 LightBox設計
  67. 67. 顯示/關閉簡易說明視窗Event Case ActionOn Click Case 1 Toggle - Show PanelOn Click Case 1 Toggle -Hide Panel
  68. 68. 相同動作觸發兩個不同的狀況• 呈現效果: – 登入成功與失敗各自有不同的顯示方式• 二種作法: 1. 直接置入兩個Case 簡單 2. 條件式判斷 稍難
  69. 69. 設計登入按鍵的互動 (OnClick) Event Case Action 等待0.5秒 Wait 500 mini seconds按下登入按鈕 + Case 1登入成功 OnClick 跳回到首頁 Open Home Page In Current Window 原處顯示錯誤訊息 Case 2登入失敗 Show Error Panel
  70. 70. TabView State 1
  71. 71. TabView State 2
  72. 72. TabView State 3
  73. 73. 手機/平板電腦的拖放UserXper Web User Experience – Software / Training / Planning -73-
  74. 74. 畫面的drag&drop• View DP 限制視界 (可視範圍)• Content DP 放置所有內容• OnDrag觸發事件 (本身已含DragStart,DragDrop) Content DP View DP
  75. 75. Content DP的3個拖放觸發事件• OnDragStart:發生在開始拖動時。• OnDrag:當開始拖動面板時,即開始執行。• OnDragDrop:發生在面板被放下時。
  76. 76. • 手機App 往下拖拉,放掉後自動彈回 – 當開始Drag時, DP跟隨移動, – 當放掉時 (OnDragDrop), DP自動移動回原來位置 "to x,y before drag"• 動作選項: – with drag:跟著游標移動 – with drag x:只有水平方向移動(x軸)。 – with drag y:只有垂直方向移動(y軸)。 – to x,y before drag:回到開始拖動之前的位置
  77. 77. 實際應用時,應解釋 HTML Prototype1. 什麼是原型? 是模擬、偽裝、策劃用、或討論用的2. 哪一種原型? 是可放在瀏覽器體驗的,但不是視覺設計或程式設計過的3. 觀看原型的重點是什麼? 以及什麼不是觀看重點?4. 這個Prototype 是用來表達什麼? 設計架構、資訊設計、導覽動線、操作介面、模仿功能5. 不是用來表達以下項目: – 表現視覺設計 – 討論顏色好不好看 – 表達最終的設計結果
  78. 78. Axure RP Users Club• 問題請貼到這裡來: http://on.fb.me/axure-user-club

×