Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
⽤用原型驅動設計
PROTOTYPING DRIVEN DESIGN
Justin Lee
Member of Council of UiGathering
Co-funder & UX Lead of Travelerfan Co.
李易修	 Justin	 Lee
• www.lis186.com
• lis186@gmail.c...
http://www.uigathering.org/
Taiwan User Experience Professional Association
台灣使⽤用者經驗設計協會
「推廣使⽤用者經驗設計與研究,
帶動產業專業知識提升與交流。」
“Promote user experience design
and research,
and lead the professional knowledges’s
advan...
since 2005 3000+ participants30+ events
https://www.facebook.com/UiGathering
複雜的⾏行動時代
The complicated Mobile Age
智慧型⼿手機+平板
時間
全球出貨量
(億台)
PC
20102005 2006 20092007 2008 2011 2012 2013
1
2
3
4
5
6
7
0
Global
shipments
(MM)
Time
Smartphon...
⾏行動裝置讓我們從空間中解放
http://www.slideshare.net/fullscreen/space150/mobile-trends-june-2011/6
We not longer need to be tethered t...
我們可以隨時隨地使⽤用
We can you the mobile technology any time any where
我們可以⽤用各種喜歡的裝置上網
http://theindustry.cc/2012/02/06/your-response-responsive-web-design/
We can use anything we want to surfin...
我們可以⽤用更⾃自然的⽅方式與科技互動
We can use much more natural way to interact
with technology
數位匯流加速進⾏行中
電視 遊戲機 電腦 平板 ⼿手機
遊戲
App
⾳音樂
影⽚片
應⽤用
applications
Game
Music
Video
TV game console PC/Laptop Tablet Smartphone
E...
簡單的產品背後其實很複雜
http://www.oneaccordpartners.com/blog/bid/97586/Siri-Apple-s-Digital-Assistant-The-Technology
The backstage o...
複雜的⾏行動使⽤用情境
The complicated mobile interaction model
產品設計⽅方式需要改變
Product design process must be change
瀑布式軟體開發流程無法適應變動的需求
http://embeddedsystemsvvce.files.wordpress.com/2013/02/waterfall-copy1.jpg
The waterfall model is not su...
file folders image by CraterValley Photo from Fotolia.com
不可能⼀一次想清楚、
講清楚所有的事
It is not impossible to plan all the details ...
設計師
前端
⼯工程師
後端
⼯工程師
傳統的分⼯工⽅方式需要改變
⼈人⽂文 ⼯工程
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.ht...
http://en.wikipedia.org/wiki/Agile_software_development
敏捷式開發
Agile software development
Customer collaboration over contr...
⼈人⽂文 ⼯工程
使⽤用者經驗
設計師
使⽤用者界⾯面
⼯工程師
應⽤用程式
⼯工程師
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.h...
⼈人⽂文 ⼯工程
使⽤用者經驗
設計師
使⽤用者界⾯面
⼯工程師
應⽤用程式
⼯工程師
視覺
設計師
研究員
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-des...
⽤用原型驅動設計
Prototype Driven Design
原型把概念具體化
prototyping is to concrete representation of part or
all of an interactive system
Prototyping: A Practitioner's G...
原型讓錯誤的代價降低
Prototype make mistakes cheap.
http://www.flickr.com/photos/d2clon/4402993445/
原型是最好的溝通⼯工具
Prototype is the best communication tool.
http://blog.tackmobile.com/article/interface-origami/
更早就得到使⽤用者回饋
Get user feedback earlier
Research at Youtube in 2008
原型的流程
評估需求
Determine Needs
製作原型
Build Prototype
評估原型
Evaluate Prototype
起點
終點
Start
End
Prototyping Process
http://designedbynatalie.com/2010/01/31/case-study-part-1-victorsfood-brief-wireframe-concept/
草圖
Sketching
紙⾯面原型
Paper Prototype
簡報原型
http://cvil.ly/2010/05/16/creating-ipad-prototypes-on-the-ipad/
Presentation Prototype
http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/
http://www.plaidsoftware.com/
軟體原型
Software Prototype
⽴立體模型
http://www.joystiq.com/2007/12/31/wii-prototype-auction-is-disappointing/
Model
選擇適合的⼯工具
靜態
敏捷
互動
精細
各種⽂文具⽤用品
紙、筆
上線環境
簡報軟體
繪圖軟體
原型設計軟體
多媒體軟體
Choose the right tools
static
dynamic
agile detail
pen and p...
雙鑽⽯石設計流程
Design Council, 2005
時間
Time
Idea Vision
Discover Define Develop Deliver
願景點⼦子 成果
Solution
探索 定位 開發 交付
The Double...
⽤用原型驅動設計
Design Council, 2005
Prototyping Driven Design
時間
Time
Idea Vision
Discover Define Develop Deliver
願景點⼦子 成果
Solut...
原型讓我們做出更好的產品
Prototyping makes our product more awesome
THANKYOU!
Member	 of	 Council	 of	 UiGathering
Co-funder	 &	 UX	 Lead	 of	 Travelerfan	 Co.
李易修	 Justin	 Lee
·•www.lis186....
http://www.uigathering.org/
Taiwan User Experience Professional Association
台灣使⽤用者經驗設計協會
Upcoming SlideShare
Loading in …5
×

of

20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 1 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 2 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 3 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 4 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 5 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 6 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 7 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 8 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 9 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 10 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 11 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 12 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 13 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 14 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 15 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 16 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 17 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 18 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 19 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 20 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 21 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 22 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 23 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 24 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 25 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 26 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 27 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 28 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 29 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 30 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 31 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 32 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 33 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 34 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 35 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 36 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 37 20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I  加拿大人機介面技術發展與經驗分享 Slide 38
Upcoming SlideShare
2013/05/19 Sketching with code@JSDC2013
Next
Download to read offline and view in fullscreen.

15 Likes

Share

Download to read offline

20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

20130604 Prototype Driven Design@Computex 2013 智慧手持裝置論壇 I 加拿大人機介面技術發展與經驗分享

  1. 1. ⽤用原型驅動設計 PROTOTYPING DRIVEN DESIGN Justin Lee
  2. 2. Member of Council of UiGathering Co-funder & UX Lead of Travelerfan Co. 李易修 Justin Lee • www.lis186.com • lis186@gmail.com • twitter @lis186
  3. 3. http://www.uigathering.org/ Taiwan User Experience Professional Association 台灣使⽤用者經驗設計協會
  4. 4. 「推廣使⽤用者經驗設計與研究, 帶動產業專業知識提升與交流。」 “Promote user experience design and research, and lead the professional knowledges’s advancement and exchange.”
  5. 5. since 2005 3000+ participants30+ events https://www.facebook.com/UiGathering
  6. 6. 複雜的⾏行動時代 The complicated Mobile Age
  7. 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. 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. 9. 我們可以隨時隨地使⽤用 We can you the mobile technology any time any where
  10. 10. 我們可以⽤用各種喜歡的裝置上網 http://theindustry.cc/2012/02/06/your-response-responsive-web-design/ We can use anything we want to surfing the internet
  11. 11. 我們可以⽤用更⾃自然的⽅方式與科技互動 We can use much more natural way to interact with technology
  12. 12. 數位匯流加速進⾏行中 電視 遊戲機 電腦 平板 ⼿手機 遊戲 App ⾳音樂 影⽚片 應⽤用 applications Game Music Video TV game console PC/Laptop Tablet Smartphone Evolution of converged cross-platform services is getting faster
  13. 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. 14. 複雜的⾏行動使⽤用情境 The complicated mobile interaction model
  15. 15. 產品設計⽅方式需要改變 Product design process must be change
  16. 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. 17. file folders image by CraterValley Photo from Fotolia.com 不可能⼀一次想清楚、 講清楚所有的事 It is not impossible to plan all the details correctly
  18. 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. 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. 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. 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. 22. ⽤用原型驅動設計 Prototype Driven Design
  23. 23. 原型把概念具體化 prototyping is to concrete representation of part or all of an interactive system Prototyping: A Practitioner's Guide
  24. 24. 原型讓錯誤的代價降低 Prototype make mistakes cheap. http://www.flickr.com/photos/d2clon/4402993445/
  25. 25. 原型是最好的溝通⼯工具 Prototype is the best communication tool. http://blog.tackmobile.com/article/interface-origami/
  26. 26. 更早就得到使⽤用者回饋 Get user feedback earlier Research at Youtube in 2008
  27. 27. 原型的流程 評估需求 Determine Needs 製作原型 Build Prototype 評估原型 Evaluate Prototype 起點 終點 Start End Prototyping Process
  28. 28. http://designedbynatalie.com/2010/01/31/case-study-part-1-victorsfood-brief-wireframe-concept/ 草圖 Sketching
  29. 29. 紙⾯面原型 Paper Prototype
  30. 30. 簡報原型 http://cvil.ly/2010/05/16/creating-ipad-prototypes-on-the-ipad/ Presentation Prototype
  31. 31. http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/ http://www.plaidsoftware.com/ 軟體原型 Software Prototype
  32. 32. ⽴立體模型 http://www.joystiq.com/2007/12/31/wii-prototype-auction-is-disappointing/ Model
  33. 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. 34. 雙鑽⽯石設計流程 Design Council, 2005 時間 Time Idea Vision Discover Define Develop Deliver 願景點⼦子 成果 Solution 探索 定位 開發 交付 The Double Diamond Design Process
  35. 35. ⽤用原型驅動設計 Design Council, 2005 Prototyping Driven Design 時間 Time Idea Vision Discover Define Develop Deliver 願景點⼦子 成果 Solution 探索 定位 開發 交付
  36. 36. 原型讓我們做出更好的產品 Prototyping makes our product more awesome
  37. 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. 38. http://www.uigathering.org/ Taiwan User Experience Professional Association 台灣使⽤用者經驗設計協會
  • ryopeng

    Jul. 24, 2018
  • ryanyaa

    Nov. 2, 2015
  • KevinHo1

    Apr. 23, 2015
  • lize411

    Jan. 21, 2015
  • KrayF

    May. 6, 2014
  • kevintang198

    Mar. 3, 2014
  • SeanLiu4

    Jan. 9, 2014
  • nowill

    Nov. 11, 2013
  • kidsimon

    Aug. 14, 2013
  • partylogo

    Aug. 14, 2013
  • hiiamjy

    Jul. 9, 2013
  • sintyan0109

    Jun. 25, 2013
  • fab3403

    Jun. 17, 2013
  • sunwingman

    Jun. 9, 2013
  • genshueh

    Jun. 4, 2013

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

Views

Total views

27,958

On Slideshare

0

From embeds

0

Number of embeds

23,004

Actions

Downloads

77

Shares

0

Comments

0

Likes

15

×