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/TiShadow
Quick 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