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

1. Sketching with Code
⽤用程式碼「畫」草圖
阿修

2. 阿修
旅人一番 UX Lead & Co-funder
台灣使用者經驗設計協會(UiGathering)
創會成員與工作小組理事
·•www.lis186.com
·•lis186@gmail.com
·•twitter @lis186

3. • 快速完成的⼿手繪草圖，通常不是最後的完成品。
什麼是草圖 (Sketch)?
Leonardo da Vinci, 15 centry

4. 記錄
Leonardo da Vinci (15 century)

5. 探索
Leonardo da Vinci (15 century)

6. 說明概念
Leonardo da Vinci (15 century)

7. 企劃製作Wireframe，規劃元件配置於動線
http://dribbble.com/shots/588394-Shindig-Wireframe-V01

8. 設計師畫草圖，發展互動概念及操作流程
http://www.garethbotha.com/blog/case-studies/mobile-ui-design-process/

9. 設計師⽤用Mockup，定義視覺⾵風格
http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/

10. 企劃
⼤大功能沒問題，交界處的⼩小細節沒⼈人管
設計師
前端
⼯工程師
後端
⼯工程師
研究 設計 前端 後端
⼈人⽂文 ⼯工程
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html

11. 設計師不確定他的設計可不可⾏行
http://www.cartoonstock.com/lowres/lba0240l.jpg
⼯工程師
設計師

12. 每個⼈人都有意⾒見
http://usa.chinadaily.com.cn/life/2011-10/13/content_13887552.htm
⼯工程師
設計師
企劃 業務

13. 設計師無法獨⾃自確認可⾏行性
http://dribbble.com/shots/588394-Shindig-Wireframe-V01

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

15. 互相協助多溝通
研究 設計 前端 後端
⼈人⽂文 ⼯工程
使⽤用者經驗
設計師
使⽤用者界⾯面
⼯工程師
應⽤用程式
⼯工程師
改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html

16. 沒⼈人處理的三不管地帶，往往是決勝關鍵
http://www.amazon.com/

17. 這個做得出來嗎？

18. 這個呢？
http://blog.tackmobile.com/article/interface-origami/

19. 設計師應該是副駕駛
http://www.emagzin.com/wp-content/uploads/2010/06/120308.jpeg
⼯工程師
設計師

20. 理解對⽅方的能耐
http://blog.gravitybureau.com/wp-content/uploads/2011/06/2011_06_04-STPR_2011-013.jpg

21. 多⼀一個不同的⾓角度思考，更容易成功
http://circuitprodigital.com/wp-content/uploads/2010/05/178551.jpg

22. 設計師的認知
設計 產品
http://www.slideshare.net/marcinignac/prototyping-in-code
魔術
⼯工程師設計師

23. 讓設計師了解魔術怎麼變
設計 產品
http://www.slideshare.net/marcinignac/prototyping-in-code
⼯工程師
設計師
？
？

24. 更敏捷的跨功能協作
Think Make
Check
⼯工程師 設計師

25. ⽤用各⾃自熟悉的⼯工具共同探索
⼯工程師設計師
http://media.24ways.org/2010/annett/sketch.jpg

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

27. ⽤用程式碼「畫」Sketch

28. • ⽤用最快的⽅方式作出結果
• 讓結果更快展現出來
Make feedback loop faster!

29. ⽤用最快的⽅方法作出結果
• 暫時忘掉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

30. 讓結果更快展現出來
• 熟悉採⽤用的技術
• 各種⼯工具的應⽤用組合
• ⾃自⼰己打造⼯工具

31. Appcelerator Titanium

32. Titanium的運作原理
OS (iPhone/Android)
Application Runtime
Javascript Runtime
Application Code
Native Module
Titanium Module
Titanium Kernel
JS Module
Native Module

33. 每次build要數⼗十秒

34. TiShadow by David Bankier
https://github.com/dbankier/TiShadow
Quick Titanium previews across devices

35. 略過Wireframe和Mockup，直接進⾏行prototype
原型
草圖

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

37. 所以要⾃自⼰己記錄

38. TiSnippet
• ⾃自動存檔
• 多⼈人協作
• 不⽤用⾃自⼰己開server
• 隨時⽅方便demo
http://www.tisnippet.com
• Nodejs
• Expressjs
• Firebase
• Bootstrap
• Titanium

39. TiSnippet http://www.tisnippet.com

40. 設計師不應該是乘客，讓他們坐到副駕駛座來
http://www.kickinthehead.org/kickinthehead3/comics-archive/2010-11-15-taxi-choices.png
⼯工程師
設計師

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

43. 謝謝指教！
旅人一番 UX Lead & Co-funder
台灣使用者經驗設計協會(UiGathering)
創會成員與工作小組理事
·•www.lis186.com
·•lis186@gmail.com
·•twitter @lis186