20130112用原型驅動設計@webconf

10,464 views
10,287 views

Published on

原型是網站或App開發過程當中,不可或缺的一項實用技巧。原型能夠讓我們用更少的成本、更短的時間,驗證某項設計的可行性,進而提高最終產品的品質。也能夠促進不同職能團隊成員間的溝通,避免想像與成果間的落差。本議程介紹基本的原型設計工具與其應用時機。

Published in: Design

20130112用原型驅動設計@webconf

  1. 1. ⽤用原型驅動設計PROTOTYPING DRIVEN DESIGN 阿修
  2. 2. 阿修台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter @lis186
  3. 3. 動⼯工前你會先畫草圖嗎? http://designedbynatalie.com/2010/01/31/case-study-part-1-victorsfood-brief-wireframe-concept/
  4. 4. 原型為什麼重要?
  5. 5. WATERFALL已經不符合時代潮流
  6. 6. 專業分⼯工 研究 設計 前端 後端 ⼈人⽂文 ⼯工程 前端 後端 設計師 ⼯工程師 ⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  7. 7. 從GUI到NUI
  8. 8. RESPONSE WEB DESIGNhttp://theindustry.cc/2012/02/06/your-response-responsive-web-design/
  9. 9. 不可能⼀一次想清楚、 講清楚所有的事file folders image by CraterValley Photo from Fotolia.com
  10. 10. http://software-document.blogspot.tw/2010/11/scrum-sprint.html
  11. 11. 環環相扣 研究 設計 前端 後端 ⼈人⽂文 ⼯工程 使⽤用者經驗 應⽤用程式 設計師 ⼯工程師 使⽤用者界⾯面 ⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  12. 12. 專業分⼯工,環環相扣 使⽤用者經驗 資訊 設計師 設計 互動 研究 設計 前端 後端 ⼈人⽂文 設計 視覺 ⼯工程 研究員 應⽤用程式 設計 視覺 ⼯工程師 設計師 使⽤用者界⾯面 ⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  13. 13. ⽤用原型驅動設計http://www.flickr.com/photos/maxdicapua/4461034536/
  14. 14. 原型設計可幫助你• 打磨點⼦子,做出更好的設計決策• 探索未知,減少思考的盲點• 便於溝通,減少誤解• 早期發現,早期「治療」• 確認技術可⾏行性• 銷售你的解決⽅方案
  15. 15. 原型的流程
  16. 16. Assassins Creed 2
  17. 17. Assassins Creed 2
  18. 18. 原型的流程起點 評估需求 製作原型終點 評估原型
  19. 19. 反覆制作原型,不斷進化http://www.youtube.com/watch?v=-9Psqkq1nwU
  20. 20. 從低⾵風險的開始http://www.youtube.com/watch?v=OLC9C5A0u-8
  21. 21. 原型的形式和⼯工具
  22. 22. 紙⾯面原型
  23. 23. ⼿手⼯工打造的HTML
  24. 24. ⼯工具輸出的HTMLhttp://www.userxper.com/samples/zh/Prototypes/demo_TravelSite/index.html
  25. 25. 影⽚片http://www.youtube.com/watch?v=Y6295G425X8
  26. 26. 互動的FLASH
  27. 27. 簡報http://cvil.ly/2010/05/16/creating-ipad-prototypes-on-the-ipad/
  28. 28. 可點擊的PDFhttp://www.joydeepsg.com/2009/10/tour-planner/
  29. 29. 上線環境http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/http://www.plaidsoftware.com/
  30. 30. ⽴立體模型http://www.joystiq.com/2007/12/31/wii-prototype-auction-is-disappointing/
  31. 31. PROTOTYPING的形式 紙⾯面原型 81% ⼿手⼯工打造的HTML 58% ⼯工具輸出 (Axure, Fireworks...) 39% ⽤用HTML做的可點擊的螢幕截圖 34% Flash, Flex, AIR或Blend 27% Keynote或PowerPoint 24% 可點擊的PDF 21%上線環境 (Rails, Java, XCode...) 9% ⽴立體模型3%
  32. 32. DOUBLE DIAMOND設計流程 點⼦子 願景 成果 時間 Discover Define Develop DeliverDesign Council, 2005
  33. 33. ⽤用原型驅動設計 戰略 戰術 點⼦子 願景 成果 時間 Discover Define Develop DeliverDesign Council, 2005
  34. 34. PROTOTYPING的⼯工具 紙和筆 77% Visio 59%Dreamweaver 47% PowerPoint 43% Axure 30% OmniGraffle 30% Illustrator 23% Flash 21% Acrobat 19% Fireworks 18% InDesign 12% Photoshop 10%
  35. 35. PROTOTYPING⼯工具選擇 互動 上線環境 多媒體軟體 各種⽂文具⽤用品 原型設計軟體 簡報軟體敏捷 精細 紙、筆 繪圖軟體 靜態
  36. 36. 原型設計原則
  37. 37. 了解原型會給誰看http://www.jasmine.com.tw/wiki/show-1754.aspxhttps://www.house123.com.tw/group/project/26
  38. 38. 設定你要探索的範圍incredibleshttp://www.coroflot.com/Artmonkeys/Animation-Character-Illustrationhttp://thelongestdayhasanend.blogspot.tw/2010/11/grammar-of-ornament-colour-and-pattern.htmlhttp://salemwitchtales.wordpress.com/
  39. 39. 選擇適合的⼯工具http://www.flickr.com/photos/frankieroberto/2904690694/http://dschool.stanford.edu/blog/2010/10/27/user-testing-with-kids-lessons-from-the-field/
  40. 40. 剛好夠的精細度 視覺 草圖 ⾵風格設定 功能 按這裡開 載⼊入中 始載⼊入 靜態 互動 內容 假字 真實⽂文字http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/
  41. 41. 不⼀一定要⾃自⼰己做Sketching user experience (Bill Buxton, 2007)
  42. 42. 精細度⾜足夠就好http://www.flickr.com/photos/rohdesign/3307873748/
  43. 43. 誰說紙不能動
  44. 44. 混合應⽤用⾼高科技與低科技
  45. 45. 只作需要的部分
  46. 46. 及早開始作原型Palm Pilot wooden form factor prototype (Hawkins, Jeff, 1995)
  47. 47. 重點回顧• 了解原型會給誰看• 選擇適合的⼯工具• 精細度⾜足夠就好• 不⼀一定要⾃自⼰己做• 只作需要的部分• 越早做越常做,⾵風險越低
  48. 48. HAVE FUN!http://www.youtube.com/watch?v=WuP78X6H5JU
  49. 49. Q&A
  50. 50. 謝謝指教! 阿修 ·•台灣使用者經驗設計協會(UiGathering) 創會成員與工作小組理事 ·•www.lis186.com ·•lis186@gmail.com ·•twitter: @lis186
  51. 51. ⽤用紙⽚片原型作使⽤用性測試https://www.youtube.com/watch?v=9wQkLthhHKA
  52. 52. 營造測試環境http://www.youtube.com/watch?v=4wuyFF0OGrU

×