2011 Taiwan UX Summit_Workshop D

  • 2,264 views
Uploaded on

[2011台灣使用者經驗高峰會] …

[2011台灣使用者經驗高峰會]

工作坊D
App設計實戰:在開始寫程式之前

主持人:
李易修
赫迅互動科技
使用者經驗架構師

More in: Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,264
On Slideshare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
128
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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