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

1. ⽤用原型驅動設計
PROTOTYPING DRIVEN DESIGN
阿修

2. 阿修
台灣使用者經驗設計協會(UiGathering)
創會成員與工作小組理事
·•www.lis186.com
·•lis186@gmail.com
·•twitter @lis186

4. 動⼯工前你會先畫草圖嗎？
http://designedbynatalie.com/2010/01/31/case-study-part-1-victorsfood-brief-wireframe-concept/

5. 原型為什麼重要？

6. WATERFALL已經不符合時代潮流

7. 專業分⼯工
研究 設計 前端 後端
⼈人⽂文 ⼯工程
前端 後端
設計師
⼯工程師 ⼯工程師
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html

8. 從GUI到NUI

9. RESPONSE WEB DESIGN
http://theindustry.cc/2012/02/06/your-response-responsive-web-design/

10. 不可能⼀一次想清楚、
講清楚所有的事
file folders image by CraterValley Photo from Fotolia.com

11. http://software-document.blogspot.tw/2010/11/scrum-sprint.html

12. 環環相扣
研究 設計 前端 後端
⼈人⽂文 ⼯工程
使⽤用者經驗 應⽤用程式
設計師 ⼯工程師
使⽤用者界⾯面
⼯工程師
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html

13. 專業分⼯工，環環相扣
使⽤用者經驗 資訊
設計師 設計
互動
研究 設計
前端 後端
⼈人⽂文 設計
視覺
⼯工程
研究員 應⽤用程式
設計
視覺 ⼯工程師
設計師 使⽤用者界⾯面
⼯工程師
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html

14. ⽤用原型驅動設計
http://www.flickr.com/photos/maxdicapua/4461034536/

15. 原型設計可幫助你
• 打磨點⼦子，做出更好的設計決策
• 探索未知，減少思考的盲點
• 便於溝通，減少誤解
• 早期發現，早期「治療」
• 確認技術可⾏行性
• 銷售你的解決⽅方案

16. 原型的流程

17. Assassin's Creed 2

18. Assassin's Creed 2

19. 原型的流程
起點
評估需求
製作原型
終點
評估原型

20. 反覆制作原型，不斷進化
http://www.youtube.com/watch?v=-9Psqkq1nwU

21. 從低⾵風險的開始
http://www.youtube.com/watch?v=OLC9C5A0u-8

22. 原型的形式和⼯工具

23. 紙⾯面原型

24. ⼿手⼯工打造的HTML

25. ⼯工具輸出的HTML
http://www.userxper.com/samples/zh/Prototypes/demo_TravelSite/index.html

26. 影⽚片
http://www.youtube.com/watch?v=Y6295G425X8

27. 互動的FLASH

28. 簡報
http://cvil.ly/2010/05/16/creating-ipad-prototypes-on-the-ipad/

29. 可點擊的PDF
http://www.joydeepsg.com/2009/10/tour-planner/

30. 上線環境
http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/
http://www.plaidsoftware.com/

31. ⽴立體模型
http://www.joystiq.com/2007/12/31/wii-prototype-auction-is-disappointing/

32. PROTOTYPING的形式
紙⾯面原型 81%
⼿手⼯工打造的HTML 58%
⼯工具輸出 (Axure, Fireworks...) 39%
⽤用HTML做的可點擊的螢幕截圖 34%
Flash, Flex, AIR或Blend 27%
Keynote或PowerPoint 24%
可點擊的PDF 21%
上線環境 (Rails, Java, XCode...) 9%
⽴立體模型3%

33. DOUBLE DIAMOND設計流程
點⼦子 願景 成果
時間
Discover Define Develop Deliver
Design Council, 2005

34. ⽤用原型驅動設計
戰略 戰術
點⼦子 願景 成果
時間
Discover Define Develop Deliver
Design Council, 2005

35. PROTOTYPING的⼯工具
紙和筆 77%
Visio 59%
Dreamweaver 47%
PowerPoint 43%
Axure 30%
OmniGraffle 30%
Illustrator 23%
Flash 21%
Acrobat 19%
Fireworks 18%
InDesign 12%
Photoshop 10%

36. PROTOTYPING⼯工具選擇
互動
上線環境
多媒體軟體
各種⽂文具⽤用品
原型設計軟體
簡報軟體
敏捷 精細
紙、筆 繪圖軟體
靜態

37. 原型設計原則

38. 了解原型會給誰看
http://www.jasmine.com.tw/wiki/show-1754.aspx
https://www.house123.com.tw/group/project/26

39. 設定你要探索的範圍
incredibles
http://www.coroflot.com/Artmonkeys/Animation-Character-Illustration
http://thelongestdayhasanend.blogspot.tw/2010/11/grammar-of-ornament-colour-and-pattern.html
http://salemwitchtales.wordpress.com/

40. 選擇適合的⼯工具
http://www.flickr.com/photos/frankieroberto/2904690694/
http://dschool.stanford.edu/blog/2010/10/27/user-testing-with-kids-lessons-from-the-field/

41. 剛好夠的精細度
視覺
草圖 ⾵風格設定
功能
按這裡開 載⼊入中
始載⼊入
靜態 互動
內容
假字 真實⽂文字
http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototyping/

42. 不⼀一定要⾃自⼰己做
Sketching user experience (Bill Buxton, 2007)

43. 精細度⾜足夠就好
http://www.flickr.com/photos/rohdesign/3307873748/

44. 誰說紙不能動

45. 混合應⽤用⾼高科技與低科技

46. 只作需要的部分

47. 及早開始作原型
Palm Pilot wooden form factor prototype (Hawkins, Jeff, 1995)

48. 重點回顧
• 了解原型會給誰看
• 選擇適合的⼯工具
• 精細度⾜足夠就好
• 不⼀一定要⾃自⼰己做
• 只作需要的部分
• 越早做越常做，⾵風險越低

49. HAVE FUN!
http://www.youtube.com/watch?v=WuP78X6H5JU

50. Q&A

51. 謝謝指教！
阿修
·•台灣使用者經驗設計協會(UiGathering)
創會成員與工作小組理事
·•www.lis186.com
·•lis186@gmail.com
·•twitter: @lis186

52. ⽤用紙⽚片原型作使⽤用性測試
https://www.youtube.com/watch?v=9wQkLthhHKA

53. 營造測試環境
http://www.youtube.com/watch?v=4wuyFF0OGrU