在行動時代，各種裝置的使用情境已經比過去複雜的多。使用瀑布式的開發流程，已經無法滿足瞬息萬變的需求變更。因此我們必須在產品設計開發過程當中，使用各種類型的原型設計技巧，以更低的成本探索設計方案及技術可性性，以避免產品開發完成，上市後才發現不符合使用者的需求。

1. ⽤用原型驅動設計
PROTOTYPING DRIVEN DESIGN
Justin Lee

2. Member of Council of UiGathering
Co-funder & UX Lead of Travelerfan Co.
李易修 Justin Lee
• www.lis186.com
• lis186@gmail.com
• twitter @lis186

3. http://www.uigathering.org/
Taiwan User Experience Professional Association
台灣使⽤用者經驗設計協會

4. 「推廣使⽤用者經驗設計與研究，
帶動產業專業知識提升與交流。」
“Promote user experience design
and research,
and lead the professional knowledges’s
advancement and exchange.”

5. since 2005 3000+ participants30+ events
https://www.facebook.com/UiGathering

6. 複雜的⾏行動時代
The complicated Mobile Age

7. 智慧型⼿手機+平板
時間
全球出貨量
（億台）
PC
20102005 2006 20092007 2008 2011 2012 2013
1
2
3
4
5
6
7
0
Global
shipments
（MM）
Time
Smartphone + Tablet
電腦
我們已經進⼊入⾏行動時代
We are in mobile age

8. ⾏行動裝置讓我們從空間中解放
http://www.slideshare.net/fullscreen/space150/mobile-trends-june-2011/6
We not longer need to be tethered to a PC in order
to use internet to connect the world around us

9. 我們可以隨時隨地使⽤用
We can you the mobile technology any time any where

10. 我們可以⽤用各種喜歡的裝置上網
http://theindustry.cc/2012/02/06/your-response-responsive-web-design/
We can use anything we want to surfing the internet

11. 我們可以⽤用更⾃自然的⽅方式與科技互動
We can use much more natural way to interact
with technology

12. 數位匯流加速進⾏行中
電視 遊戲機 電腦 平板 ⼿手機
遊戲
App
⾳音樂
影⽚片
應⽤用
applications
Game
Music
Video
TV game console PC/Laptop Tablet Smartphone
Evolution of converged cross-platform services is
getting faster

13. 簡單的產品背後其實很複雜
http://www.oneaccordpartners.com/blog/bid/97586/Siri-Apple-s-Digital-Assistant-The-Technology
The backstage of a simple product could be complicated

14. 複雜的⾏行動使⽤用情境
The complicated mobile interaction model

15. 產品設計⽅方式需要改變
Product design process must be change

16. 瀑布式軟體開發流程無法適應變動的需求
http://embeddedsystemsvvce.files.wordpress.com/2013/02/waterfall-copy1.jpg
The waterfall model is not suitable for project
where in the project requirements are
dynamic or constantly change.

17. file folders image by CraterValley Photo from Fotolia.com
不可能⼀一次想清楚、
講清楚所有的事
It is not impossible to plan all the details correctly

18. 設計師
前端
⼯工程師
後端
⼯工程師
傳統的分⼯工⽅方式需要改變
⼈人⽂文 ⼯工程
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
Research
Human focused Technology focused
Traditional Job assignment needs to be changed
UI Designer
Front-end
Developer
Back-end
Developer
Research Front-end Back-end
研究 前端 後端
Design
設計

19. http://en.wikipedia.org/wiki/Agile_software_development
敏捷式開發
Agile software development
Customer collaboration over contract negotiation
個人與互動 重於 流程與工具
可用的軟體 重於 詳盡的文件
與客戶合作 重於 合約協商
回應變化 重於 遵循計劃
Individuals and interactions over processes and tools
Working software over comprehensive documentation
Responding to change over following a plan

20. ⼈人⽂文 ⼯工程
使⽤用者經驗
設計師
使⽤用者界⾯面
⼯工程師
應⽤用程式
⼯工程師
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
環環相扣
Human focused Technology focused
User Experience
Designer
UI
Developer
Application
Developer
closely connected and inseparable
Research Front-end Back-end
研究 前端 後端
Design
設計

21. ⼈人⽂文 ⼯工程
使⽤用者經驗
設計師
使⽤用者界⾯面
⼯工程師
應⽤用程式
⼯工程師
視覺
設計師
研究員
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
專業分⼯工，環環相扣
Human focused Technology focusedResearcher
Research Interaction
Design
Front-end Back-end
Visual
Design
研究 互動設計 前端 後端
資訊設計
視覺設計
Information
Design
closely connected and inseparable
Visual Designer
UI Developer
Application
Developer
UX Designer

22. ⽤用原型驅動設計
Prototype Driven Design

23. 原型把概念具體化
prototyping is to concrete representation of part or
all of an interactive system
Prototyping: A Practitioner's Guide

24. 原型讓錯誤的代價降低
Prototype make mistakes cheap.
http://www.flickr.com/photos/d2clon/4402993445/

25. 原型是最好的溝通⼯工具
Prototype is the best communication tool.
http://blog.tackmobile.com/article/interface-origami/

26. 更早就得到使⽤用者回饋
Get user feedback earlier
Research at Youtube in 2008

27. 原型的流程
評估需求
Determine Needs
製作原型
Build Prototype
評估原型
Evaluate Prototype
起點
終點
Start
End
Prototyping Process

28. http://designedbynatalie.com/2010/01/31/case-study-part-1-victorsfood-brief-wireframe-concept/
草圖
Sketching

29. 紙⾯面原型
Paper Prototype

30. 簡報原型
http://cvil.ly/2010/05/16/creating-ipad-prototypes-on-the-ipad/
Presentation Prototype

31. http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/
http://www.plaidsoftware.com/
軟體原型
Software Prototype

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

33. 選擇適合的⼯工具
靜態
敏捷
互動
精細
各種⽂文具⽤用品
紙、筆
上線環境
簡報軟體
繪圖軟體
原型設計軟體
多媒體軟體
Choose the right tools
static
dynamic
agile detail
pen and paper
stationery
graphic edition software
prototyping software
presentation software
multimedia software
production environment

34. 雙鑽⽯石設計流程
Design Council, 2005
時間
Time
Idea Vision
Discover Define Develop Deliver
願景點⼦子 成果
Solution
探索 定位 開發 交付
The Double Diamond Design Process

35. ⽤用原型驅動設計
Design Council, 2005
Prototyping Driven Design
時間
Time
Idea Vision
Discover Define Develop Deliver
願景點⼦子 成果
Solution
探索 定位 開發 交付

36. 原型讓我們做出更好的產品
Prototyping makes our product more awesome

37. THANKYOU!
Member of Council of UiGathering
Co-funder & UX Lead of Travelerfan Co.
李易修 Justin Lee
·•www.lis186.com
·•lis186@gmail.com
·•twitter @lis186

38. http://www.uigathering.org/
Taiwan User Experience Professional Association
台灣使⽤用者經驗設計協會