2013/05/19 Sketching with code@JSDC2013

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

阿修

阿修

旅人一番 UX Lead & Co-funder

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

·•www.lis186.com·•lis186@gmail.com·•twitter @lis186

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

什麼是草圖 (Sketch)?

Leonardo da Vinci, 15 centry

記錄

Leonardo da Vinci (15 century)

探索

Leonardo da Vinci (15 century)

說明概念

Leonardo da Vinci (15 century)

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

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

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

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

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

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

企劃

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

設計師 前端⼯工程師

後端⼯工程師

研究 設計 前端 後端

⼈人⽂文 ⼯工程

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

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

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

⼯工程師設計師

每個⼈人都有意⾒見

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

⼯工程師設計師

企劃 業務

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

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

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

互相協助多溝通

研究 設計 前端 後端

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

使⽤用者界⾯面⼯工程師

應⽤用程式⼯工程師

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

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

http://www.amazon.com/

這個做得出來嗎？

這個呢？

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

設計師應該是副駕駛

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

⼯工程師

設計師

理解對⽅方的能耐

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

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

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

設計師的認知

設計 產品

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

魔術⼯工程師設計師

讓設計師了解魔術怎麼變

設計 產品

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

⼯工程師

設計師

？

？

更敏捷的跨功能協作

Think Make

Check

⼯工程師 設計師

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

⼯工程師設計師

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

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

⽤用程式碼「畫」Sketch

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

Make feedback loop faster!

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

• 暫時忘掉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

讓結果更快展現出來

• 熟悉採⽤用的技術

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

• ⾃自⼰己打造⼯工具

Appcelerator Titanium

Titanium的運作原理

OS (iPhone/Android)

Application Runtime

Javascript Runtime

Application Code

Native Module

Titanium Module

Titanium Kernel

JS Module

Native Module

每次build要數⼗十秒

TiShadow by David Bankier

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

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

原型

草圖

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

所以要⾃自⼰己記錄

TiSnippet

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

http://www.tisnippet.com

• Nodejs• Expressjs• Firebase• Bootstrap• Titanium

TiSnippet http://www.tisnippet.com

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

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

⼯工程師

設計師

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

謝謝指教！

旅人一番 UX Lead & Co-funder

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

·•www.lis186.com·•lis186@gmail.com·•twitter @lis186