從雛形到設計-了解您的使用者在想什麼
•
6 likes•3,278 views
簡報於2011/5/31於屏科大資管系大二「網際網路原理」課程 ，主要為了解使用者的重要性，與雛形(prototyping)的介紹。 本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用。
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to 從雛形到設計-了解您的使用者在想什麼
Similar to 從雛形到設計-了解您的使用者在想什麼 (20)
More from Souyi Yang
More from Souyi Yang (19)
從雛形到設計-了解您的使用者在想什麼
- 1. 從雛形著手- 設計出使用者需要的 楊梭逸 2011/5/31於屏科大資管系「網際網路原理」課程
- 2. • 楊梭逸 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 本投影片Prototype資料由蔡明哲 (Richard Tsai)整理提供，經同意進行修改與教學使用 悠識數位顧問有限公司 UserXper Digital Consulting Co., Ltd. http://www.userxper.com -2-
- 3. 本堂課對您有什麼 『意義』 ? -3-
- 4. 意義是三小? 林北只知道義氣 http://iphoto.ipeen.com.tw/photo/comment/201002/cgmec8d7dae3596eaa6ebb977aa3c225e2e153.jpg -4-
- 8. 3.規劃下的快速開發 http://www.xhtml-css-code.com/wp-content/uploads/2009/07/search_engine_friendly.jpg -8-
- 10. 為何 了解使用者 是重要的 ？ -10-
- 11. 1.您覺得這是什麼建築物？ -11-
- 12. 台南鹽水鎮天主聖神堂 -12-
- 13. 2 1 4 3 http://farm4.static.flickr.com/3577/3379395472_d6da0be894.jpg 2.您要下車時如何感應？ -13-
- 14. -14-
- 15. http://l.yimg.com/f/xp/tw- tech.yahookimo.com.tw/20100917/06/2965299138.jpg?y http://readatech.com/wp-content/uploads/2011/04/SamsungGalaxySII.jpg =500&n=1&sig=MBL_5YXIExCoS9qCf8MFtg-- 3.您父母親偏好提供按鍵的裝置? -15-
- 17. 4.您注意到白色傳球次數有多少? -17-
- 18. http://www.youtube.com/watch?v=vJG698U2Mvo 白色衣服總共有15次，但您有注意到黑猩猩嗎? 有限的注意力選擇 -18-
- 19. 為何了解使用者是重要的？ • 1.您覺得這是什麼建築物？ – 環境與風俗會影響使用者認知 • 2.您要下車如何感應？ – 操作習性會影響使用者認知 • 3.您父母親偏好提供按鍵的裝置? – 年齡世代會影響使用者認知 • 4.您注意到白色傳球次數有多少? – 有限選擇性會影響使用者認知 -19-
- 20. 你也是使用者!!! 請不要設計出『自我感覺良好』的作品!!! -20- http://www.thegreatgeekmanual.com/images/humor/motivational/march/motivational-i-want-you.jpg
- 22. 使用者經驗設計流程 研究 需求 驗證 N 設計 構思 http://www.usablebrands.ch/usability_.html -22-
- 23. Prototype 雛形 -23-
- 25. 模型屋 Prototype(雛形) 可供討論的模型或樣品 http://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 -25-
- 26. Low Fidelity(低擬真) • 不像最終設計成品 • 好處 – 很快，有東西可以討論 – 可以專注在High-level的設計觀念 – 探討主要的架構與功能 – 更容易發散思考不受拘束 -26-
- 27. High Fidelity(高擬真) • 接近最終設計成品 • 好處 – 有更具體的東西可以討論 – 專注在更多的設計細節 – 驗證各種角度的使用者經驗 – 開發工作的工程師更容易理解 – 客戶(老闆/老師)更容易理解 -27-
- 28. 低擬真 > 高擬真 Wireframe(線框) -28-
- 29. 設計流程中，二者都具有意義 Low Fidelity High Fidelity Prototype (Sketch手繪草稿) = Prototype 實際設計產品時， 大家都希望看到更真實的設計 Low Fidelity High Fidelity Prototype (Sketch手繪草稿) < Prototype -29-
- 30. Prototyping的方法 • Wireframe prototyping • Paper prototyping • Storyboard prototyping • Digital prototyping • Blank model prototyping • Video prototyping • Wizard of Oz prototyping • Coded prototyping (including scripting and HTML) -30-
- 31. Wireframe prototyping Paper prototyping http://3.bp.blogspot.com/_tsuzO7Ymydg/TSztbfYyXNI/AAAAAAAA ACE/P5uDxoEfz1w/s1600/lmf_paper_prototype.gif -31-
- 32. Storyboard prototyping 混搭mix Paper – Digital prototyping http://www.youtube.com/watch?v=GrV2SZuRPv0 -32-
- 33. Blank model prototyping Wizard of Oz prototyping http://www.youtube.com/watch?v=_aoo_N-7AYk -33-
- 34. Video Prototyping Code Prototyping http://www.youtube.com/watch?v=BpWM0FNPZSs http://www.flickr.com/photos/s4xton/2425718415/sizes/z/in/photostream/ 56秒-64秒 -34-
- 35. Tools 工具 -35-
- 36. 廣義Prototyping Tool for Web/AP(1) • Diagram Tools (General Purpose) – MS Visio – MS PowerPoint – MS Word – MS Excel – Pencil Project (Plug-in Firefox) – OmniGraffle (Mac OS X, Mac版的Visio) – Cacoo • Graphics Tool – Photoshop / Illustrator / Firework / FlashMX -36-
- 37. 廣義Prototyping Tool for Web/AP(2) • Purpose-Built (For Software Application or Web) – Axure RP – iRise Studio – Prototype Composer – GUI Design Studio (Caretta) – MockupScreens – Balsamiq Mockups • Developing Tool – Dreamweaver – MS FrontPage,Express Web,MS Visual Studio • Aid.(其他輔助軟體) – XMinid – FastStone Capture -37-
- 38. Axure RP -38-
- 39. Pencil Project (Plug-in Firefox) http://pencil.evolus.vn/en-US/Home.aspx -39-
- 41. Balsamiq Mockups(Free) http://balsamiq.com/products/mockups -41-
- 42. 其他Prototyping輔助軟體 Xmind FastStone Capture 心智圖(需求整理) 螢幕畫面擷取編輯 更多簡介：http://briian.com/?p=5713 http://www.xmind.net/ -42-
- 43. Evolution 雛形工具演化經驗 -43-
- 44. MS PowerPoint -44-
- 45. MS Word + MS Visio -45-
- 46. Axure RP -46-
- 47. 小結(1) • 本堂課對您有什麼意義？ – 符合使用者需求並表現專業 – 方便溝通，容易達成共識 – 規劃下的快速開發 – 產出令老師驚艷的作品 • 為何了解使用者是重要的？ – 環境與風俗會影響使用者認知 – 操作習性會影響使用者認知 – 年齡世代會影響使用者認知 – 有限選擇性會影響使用者認知 -47-
- 48. 小結(2) • Prototyping的方法 – Wireframe prototyping – Paper prototyping – Storyboard prototyping – Digital prototyping – Blank model prototyping – Video prototyping – Wizard of Oz prototyping – Coded prototyping (including scripting and HTML) • Prototyping的工具 – Axure RP – Pencil Project (Plug-in Firefox) – Cacoo(Free) – Balsamiq Mockups(Free) – MS Office -48-
- 49. 培養 觀 察 力 的重要性 http://pica.nipic.com/2008-03-24/200832414823712_2.jpg -49-
- 50. Q&A -50-