20130604 prototype driven design@computex 2013 智慧手持裝置論壇 i ...

⽤用原型驅動設計PROTOTYPING DRIVEN DESIGN

Justin Lee

Member of Council of UiGatheringCo-funder & UX Lead of Travelerfan Co.

李易修 Justin Lee

• www.lis186.com• [email protected]• twitter @lis186

http://www.lis186.com


http://www.slideshare.net/lis186


http://www.uigathering.org/Taiwan User Experience Professional Association

台灣使⽤用者經驗設計協會

http://www.uigathering.org/


「推廣使⽤用者經驗

設計與研究，

帶動產業專業知識

提升與交流。」

“Promote user experience design

and research,

and lead the professional knowledges’s

advancement and exchange.”

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

Smartphone + Tablet

電腦

我們已經進⼊入⾏行動時代We are in mobile age

⾏行動裝置讓我們從空間中解放

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



我們可以隨時隨地使⽤用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 surfing the internet



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

with technology

數位匯流加速進⾏行中

電視遊戲機電腦平板⼿手機

遊戲

App

⾳音樂

影⽚片

應⽤用

applications

Game

Music

Video

TV game console PC/Laptop Tablet Smartphone

Evolution of converged cross-platform services is getting faster

簡單的產品背後其實很複雜

http://www.oneaccordpartners.com/blog/bid/97586/Siri-Apple-s-Digital-Assistant-The-Technology

The backstage of a simple product could be complicated



複雜的⾏行動使⽤用情境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 suitable for project where in the project requirements are

dynamic or constantly change.



file folders image by CraterValley Photo from Fotolia.com

不可能⼀一次想清楚、講清楚所有的事

It is not impossible to plan all the details correctly

設計師前端⼯工程師

後端⼯工程師

傳統的分⼯工⽅方式需要改變

⼈人⽂文⼯工程

改繪⾃自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 DesignerFront-endDeveloper

Back-endDeveloper

Research Front-end Back-end

研究前端後端Design設計

http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html


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



⼈人⽂文⼯工程使⽤用者經驗設計師

使⽤用者界⾯面⼯工程師

應⽤用程式⼯工程師


環環相扣

Human focused Technology focused

User ExperienceDesigner

UIDeveloper Application

Developer

closely connected and inseparable

Research Front-end Back-end

研究前端後端Design設計



⼈人⽂文⼯工程

使⽤用者經驗設計師

使⽤用者界⾯面⼯工程師

應⽤用程式⼯工程師視覺

設計師

研究員


專業分⼯工，環環相扣

Human focused Technology focusedResearcher

Research InteractionDesign

Front-end Back-end

VisualDesign

研究互動設計前端後端

資訊設計

視覺設計

InformationDesign

closely connected and inseparable

Visual Designer

UI Developer

ApplicationDeveloper

UX Designer



⽤用原型驅動設計Prototype Driven Design

原型把概念具體化prototyping is to concrete representation of part or

all of an interactive system

Prototyping: A Practitioner's Guide

原型讓錯誤的代價降低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://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/

http://ca.rroll.net/2008/02/05/ruby-on-rails-development-with-gedit/

http://www.plaidsoftware.com/

http://www.plaidsoftware.com/

⽴立體模型

http://www.joystiq.com/2007/12/31/wii-prototype-auction-is-disappointing/

Model



選擇適合的⼯工具

靜態

敏捷

互動

精細

各種⽂文具⽤用品

紙、筆

上線環境

簡報軟體

繪圖軟體

原型設計軟體

多媒體軟體

Choose the right tools

static

dynamic

agile detail

pen and paper

stationery

graphic edition software

prototyping software

presentation software

multimedia software

production environment

雙鑽⽯石設計流程

Design Council, 2005

時間Time

Idea Vision

Discover Define Develop Deliver

願景點⼦子成果Solution

探索定位開發交付

The Double Diamond Design Process

⽤用原型驅動設計

Design Council, 2005

Prototyping Driven Design

時間Time

Idea Vision

Discover Define Develop Deliver

願景點⼦子成果Solution

探索定位開發交付

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

THANK YOU!

Member of Council of UiGatheringCo-funder & UX Lead of Travelerfan Co.

李易修 Justin Lee

·•www.lis186.com·•[email protected]·•twitter @lis186





http://www.uigathering.org/Taiwan User Experience Professional Association

台灣使⽤用者經驗設計協會

