43
Sketching with Code 程式碼「畫」草圖 阿修

2013/05/19 Sketching with code@JSDC2013

Embed Size (px)

DESCRIPTION

在App或網站的開發流程當中,總有一些細節是必須由設計師與工程師的緊密配合才有辦法完成,比如Amazon的選單設計。而在探索某個頁面、操作的設計時,設計師會用紙筆畫草圖的方式來思考,而工程師則必須一一驗證這些設計的可行性或提出其他替代方案,而直接寫程式做prototype是最好的做法之一。我稱之為用程式碼「畫」草圖。

Citation preview

Page 1: 2013/05/19 Sketching with code@JSDC2013

Sketching with Code⽤用程式碼「畫」草圖

阿修

Page 2: 2013/05/19 Sketching with code@JSDC2013

阿修

旅人一番 UX Lead & Co-funder

台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事

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

Page 3: 2013/05/19 Sketching with code@JSDC2013

• 快速完成的⼿手繪草圖,通常不是最後的完成品。

什麼是草圖 (Sketch)?

Leonardo da Vinci, 15 centry

Page 7: 2013/05/19 Sketching with code@JSDC2013

企劃製作Wireframe,規劃元件配置於動線

http://dribbble.com/shots/588394-Shindig-Wireframe-V01

Page 8: 2013/05/19 Sketching with code@JSDC2013

設計師畫草圖,發展互動概念及操作流程

http://www.garethbotha.com/blog/case-studies/mobile-ui-design-process/

Page 9: 2013/05/19 Sketching with code@JSDC2013

設計師⽤用Mockup,定義視覺⾵風格

http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/

Page 10: 2013/05/19 Sketching with code@JSDC2013

企劃

⼤大功能沒問題,交界處的⼩小細節沒⼈人管

設計師 前端⼯工程師

後端⼯工程師

研究 設計 前端 後端

⼈人⽂文 ⼯工程

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

Page 11: 2013/05/19 Sketching with code@JSDC2013

設計師不確定他的設計可不可⾏行

http://www.cartoonstock.com/lowres/lba0240l.jpg

⼯工程師設計師

Page 12: 2013/05/19 Sketching with code@JSDC2013

每個⼈人都有意⾒見

http://usa.chinadaily.com.cn/life/2011-10/13/content_13887552.htm

⼯工程師設計師

企劃 業務

Page 13: 2013/05/19 Sketching with code@JSDC2013

設計師無法獨⾃自確認可⾏行性

http://dribbble.com/shots/588394-Shindig-Wireframe-V01

Page 14: 2013/05/19 Sketching with code@JSDC2013

⼯工程師不會想到的細節設計

Page 15: 2013/05/19 Sketching with code@JSDC2013

互相協助多溝通

研究 設計 前端 後端

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

使⽤用者界⾯面⼯工程師

應⽤用程式⼯工程師

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

Page 16: 2013/05/19 Sketching with code@JSDC2013

沒⼈人處理的三不管地帶,往往是決勝關鍵

http://www.amazon.com/

Page 17: 2013/05/19 Sketching with code@JSDC2013

這個做得出來嗎?

Page 18: 2013/05/19 Sketching with code@JSDC2013

這個呢?

http://blog.tackmobile.com/article/interface-origami/

Page 19: 2013/05/19 Sketching with code@JSDC2013

設計師應該是副駕駛

http://www.emagzin.com/wp-content/uploads/2010/06/120308.jpeg

⼯工程師

設計師

Page 20: 2013/05/19 Sketching with code@JSDC2013

理解對⽅方的能耐

http://blog.gravitybureau.com/wp-content/uploads/2011/06/2011_06_04-STPR_2011-013.jpg

Page 21: 2013/05/19 Sketching with code@JSDC2013

多⼀一個不同的⾓角度思考,更容易成功

http://circuitprodigital.com/wp-content/uploads/2010/05/178551.jpg

Page 22: 2013/05/19 Sketching with code@JSDC2013

設計師的認知

設計 產品

http://www.slideshare.net/marcinignac/prototyping-in-code

魔術⼯工程師設計師

Page 23: 2013/05/19 Sketching with code@JSDC2013

讓設計師了解魔術怎麼變

設計 產品

http://www.slideshare.net/marcinignac/prototyping-in-code

⼯工程師

設計師

Page 24: 2013/05/19 Sketching with code@JSDC2013

更敏捷的跨功能協作

Think Make

Check

⼯工程師 設計師

Page 25: 2013/05/19 Sketching with code@JSDC2013

⽤用各⾃自熟悉的⼯工具共同探索

⼯工程師設計師

http://media.24ways.org/2010/annett/sketch.jpg

Page 26: 2013/05/19 Sketching with code@JSDC2013

⼯工程師們,準備好你的⼯工具

Page 27: 2013/05/19 Sketching with code@JSDC2013

⽤用程式碼「畫」Sketch

Page 28: 2013/05/19 Sketching with code@JSDC2013

• ⽤用最快的⽅方式作出結果• 讓結果更快展現出來

Make feedback loop faster!

Page 29: 2013/05/19 Sketching with code@JSDC2013

⽤用最快的⽅方法作出結果

• 暫時忘掉Best Practice

• 隨時調整做法

• 探索問題找到解法才是重點

inline<p style="background: blue; color: white;">menu</p>

<style TYPE="text/css"> .menu: {background: blue; color: white;}</style>...<p class= "menu" >menu</p>

<link rel="StyleSheet" href="style.css" type="text/css">...<p class= "menu" >menu</p>

embedded

external

.menu: {background: blue; color: white;}

index.html

index.html

index.html

style.css

Page 30: 2013/05/19 Sketching with code@JSDC2013

讓結果更快展現出來

• 熟悉採⽤用的技術

• 各種⼯工具的應⽤用組合

• ⾃自⼰己打造⼯工具

Page 31: 2013/05/19 Sketching with code@JSDC2013

Appcelerator Titanium

Page 32: 2013/05/19 Sketching with code@JSDC2013

Titanium的運作原理

OS (iPhone/Android)

Application Runtime

Javascript Runtime

Application Code

Native Module

Titanium Module

Titanium Kernel

JS Module

Native Module

Page 33: 2013/05/19 Sketching with code@JSDC2013

每次build要數⼗十秒

Page 34: 2013/05/19 Sketching with code@JSDC2013

TiShadow by David Bankier

https://github.com/dbankier/TiShadowQuick Titanium previews across devices

Page 35: 2013/05/19 Sketching with code@JSDC2013

略過Wireframe和Mockup,直接進⾏行prototype

原型

草圖

Page 36: 2013/05/19 Sketching with code@JSDC2013

不⼩小⼼心關了瀏覽器,就什麼都沒了

Page 37: 2013/05/19 Sketching with code@JSDC2013

所以要⾃自⼰己記錄

Page 38: 2013/05/19 Sketching with code@JSDC2013

TiSnippet

• ⾃自動存檔• 多⼈人協作• 不⽤用⾃自⼰己開server• 隨時⽅方便demo

http://www.tisnippet.com

• Nodejs• Expressjs• Firebase• Bootstrap• Titanium

Page 39: 2013/05/19 Sketching with code@JSDC2013

TiSnippet http://www.tisnippet.com

Page 40: 2013/05/19 Sketching with code@JSDC2013

設計師不應該是乘客,讓他們坐到副駕駛座來

http://www.kickinthehead.org/kickinthehead3/comics-archive/2010-11-15-taxi-choices.png

⼯工程師

設計師

Page 41: 2013/05/19 Sketching with code@JSDC2013
Page 42: 2013/05/19 Sketching with code@JSDC2013

不要怕嘗試,找出你們⾃自⼰己的合體⽅方法

Page 43: 2013/05/19 Sketching with code@JSDC2013

謝謝指教!

旅人一番 UX Lead & Co-funder

台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事

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