2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

11,715
-1

Published on

台灣使用者經驗高峰會
工作坊 D - App設計實戰:在開始寫程式之前

主持人:
李易修 Justin Lee

赫迅互動科技 使用者經驗架構師
UiGathering創會成員與工作小組理事

概要:
在 App 開發過程當中,我們往往過於急著開始寫程式,輕忽了 App 前期規劃的重要性,以至於功能與使用者介面無法滿足使用者期望與需要。本工作坊的目標在於讓學員了解設計的重要性與熟悉劇本法設計與動態草圖等設計方法。本工作坊的進行方式將由講師先介紹 App 前期規劃時要留意的事項,與可應用於實際開發時的設計方法,再讓學員分組實地演練,最後和大家分享設計。

Published in: Design
0 Comments
67 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,715
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
502
Comments
0
Likes
67
Embeds 0
No embeds

No notes for slide

2011/09/16 Taiwan UX Summit: App設計實戰:在開始寫程式之前

  1. 1. 工作坊 DApp設計實戰: 在開始寫程式之前 李易修
  2. 2. 李易修 Justin Lee·•赫迅互動科技 使用者經驗架構師·•UiGathering創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter, plurk: @lis186
  3. 3. 請把手機、平板、電腦收起來
  4. 4. 需求 實作 發佈
  5. 5. 圖片取自http://www.handyui.com/2007/03/24/compromised_design/
  6. 6. 進展快速,但方向錯誤
  7. 7. 需求 實作 發佈
  8. 8. 需求 實作 設計 發佈
  9. 9. 設計不只是把圖畫漂亮一些
  10. 10. 設計是全盤瞭解後產出解決方案 視覺 介面 架構 功能 目標改繪自"The Elements of User Experience: User-Centered Design for the Web” by Jesse James Garrett
  11. 11. 需求 實作 設計 發佈
  12. 12. 需求 設計 實作 發佈
  13. 13. 需求 設計 實作 發佈
  14. 14. 需求 設計
  15. 15. 劇本法設計 草圖 人 活動 需求 設計境 物
  16. 16. 動手畫: 視覺元素ABC 各自在A3紙上練習 3分鐘
  17. 17. 動手畫: 畫出你的手機 畫在便利貼上 1分鐘
  18. 18. 動手畫: 畫出你最愛的App 畫在便利貼上 1分鐘
  19. 19. 動手畫: 幫隔壁組員畫張半身像 畫在便利貼上 2分鐘
  20. 20. 代言人: 幫組員自我介紹 把前面的素材貼在A3紙上他/她的名字是____用的手機是_____愛用的App有_____因為____ 2分鐘+30秒
  21. 21. 心智模式不同
  22. 22. 心智模式相符
  23. 23. 消費者要什麼?
  24. 24. 劇本法設計 利用說故事的方式, 預測系統的使用情境,在早期發現問題和設計機會。
  25. 25. 知識與習慣 使用者 活動 環境 物品背景環境與狀況 功能與面貌
  26. 26. 知識與習慣 使用者 活動 環境 ?背景環境與狀況 功能與面貌
  27. 27. http://www.bonnier.com/en/content/digital-magazines-bonnier-mag-prototype
  28. 28. http://www.bonnier.com/en/content/digital-magazines-bonnier-mag-prototype
  29. 29. 劇本法設計流程 需求分析 設計 原型製作 問題劇本 概念劇本 規格 現狀觀察 慣例、 設計準則 功能清單改繪自"Usability Engineering: Scenario-Based Development of Human Computer Interaction" by Mary Beth Rosson, John M. Carroll
  30. 30. 問題 解決方案現在 未來
  31. 31. 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo
  32. 32. 故事的元素 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo
  33. 33. 合理的場景 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo
  34. 34. 編故事 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo
  35. 35. 發現需求 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo
  36. 36. 產生靈感 4.探索 2.建構 3.進入 5.離開 1.想像圖"Gamestorming”, page 3 by Dave Gray, Sunni Brown, and James Macanufo
  37. 37. Brainstorm: 你在哪裡用App? 寫在便利貼上 2分鐘
  38. 38. Brainstorm: 你用App用來做什麼? 寫在便利貼上 2分鐘
  39. 39. 編個合理的故事作為一個通勤族,我在公車亭內等車的時候,用手機查公車還有多久會來,是很合理的一件事。
  40. 40. 編故事圖:少林足球
  41. 41. 討論: 編5個故事把剛剛的便利貼貼在A3紙上,1個故事1張作為一個___________,我在_______做___,用手機_______________________,是很合理的一件事。 3分鐘
  42. 42. Brainstorm: 同理心地圖選1個剛剛編的故事,在全開紙上設想主角的狀況 在站牌等公車 看 想 上班族 說 感覺 做 12分鐘
  43. 43. 從情境找需求公車還有多久會來? 通勤族 等車公車亭 站牌
  44. 44. 從環境看限制 公車還有多久會來? 通勤族太熱,不想等太久 等車 公車亭 站牌
  45. 45. 過去怎麼解決? 公車還有多久會來? 通勤族太熱, 看班次表不想等太久 等車 有沒有人等車? 公車亭 站牌 靠經驗
  46. 46. 解決辦法可以是? 公車還有多久會來? 通勤族太熱, 查詢等候時間不想等太久 等車 到站提醒 公車亭 App
  47. 47. 不同情境有不同的需求 公車還有多久會來? 會不會遲到? 坐幾號車可以到? 通勤族 通勤族 等車 坐車公車站牌 ? 公車上 ?
  48. 48. Brainstorm:問題與可能解決辦法在全開紙上完成主要情境的問題與可能解決方案 20分鐘
  49. 49. 要往哪裡去? 青春不老泉 海怪 印度改繪自"Gamestorming”, page 5 by Dave Gray, Sunni Brown, and James Macanufo
  50. 50. Brainstorm:列出功能清單 在A3紙上列出功能改繪自"Gamestorming”, page 245 by Dave Gray, Sunni Brown, and James Macanufo 3分鐘
  51. 51. 休息3:40回來
  52. 52. NUF測試:決定重要性 新穎性、有用度、可行性取自"Gamestorming”, page 245 by Dave Gray, Sunni Brown, and James Macanufo 3分鐘
  53. 53. Brainstorm:產品定義描述 寫在A3紙上,儘量大 BusGoGo 幫助公車通勤族 準確預估到站時間, 減少無意義的等待。 6分鐘
  54. 54. 框架圖(wireframe)http://moobileframes.tumblr.com/post/2761211624/ozon-ru-online-store
  55. 55. 草圖(sketch)http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/design-an-iphone-bank-app-in-photoshop-part-1/
  56. 56. 原型(prototype)http://katiemccurdy.com/walk/?page_id=207
  57. 57. 精確度 原型 草圖 時間
  58. 58. 草圖不是原型 草圖用於設計 原型用於修正“Sketching User Experience”, Bill Buxton
  59. 59. 邊畫邊想
  60. 60. 草圖速度最重要重點不是好看,而是畫的時候學到的事品質不需要太好,可以傳達概念就好隨時可以丟掉重畫
  61. 61. http://www.flickr.com/photos/d2clon/4402993445/
  62. 62. 畫草圖:App主要功能 各自畫在A3紙上,至少3個畫面http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 3分鐘
  63. 63. 討論:第一次草圖 組內討論各草圖的優點、缺點http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 6分鐘
  64. 64. 畫草圖:改善 各自畫在A3紙上,至少3個畫面http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 3分鐘
  65. 65. 討論:第二次草圖 組內討論各草圖的優點、缺點http://johnhenrybarac.com/notes-on-designing-the-guardian-iphone-app/ 6分鐘
  66. 66. App設計小技巧
  67. 67. 直接操作http://gesturecons.com/
  68. 68. 按鈕大於8x8mm,間距大於5mm i
  69. 69. 考慮握持方式 http://gesturecons.com/
  70. 70. 小心手指遮擋畫面
  71. 71. 哪裡怪怪的?
  72. 72. 尊重不同OS的差異
  73. 73. 提供剛好足夠的訊息
  74. 74. 別忘了sensor
  75. 75. 別過度設計
  76. 76. iPhone UI模式
  77. 77. TabBar
  78. 78. NavigationBar
  79. 79. ToolBar
  80. 80. Android UI模式
  81. 81. Hardware Buttons
  82. 82. Action Bar
  83. 83. Workspace
  84. 84. Dashboard
  85. 85. Search Bar
  86. 86. Quick Action
  87. 87. Widget
  88. 88. 協同合作:共同發展App畫在便利貼上,再貼到全開紙上安排流程 8分鐘
  89. 89. 檢討:共同發展的App討論設計的優點、缺點,寫在小張便利貼上 8分鐘
  90. 90. 每組發表2分鐘
  91. 91. 複雜性守恆定律(Teslers law) 一個系統的複雜度是固定的, 當你想讓操作變得簡單, 藏在背後的複雜度便會增加。
  92. 92. 將UX融入開發流程http://www.targetprocess.com/blog/wp-content/uploads/2011/02/5.jpg
  93. 93. 經驗功能科技
  94. 94. Titanium APITitanium Mobile簡單, 原生, 跨平台
  95. 95. 只須維護一套原始碼 Javascript原始碼+素材 Titanium API
  96. 96. 謝謝指教! 李易修 Justin Lee ·•赫迅互動科技 使用者經驗架構師 ·•UiGathering創會成員與工作小組理事 ·•www.lis186.com ·•lis186@gmail.com ·•twitter, plurk: @lis186

×