2013/05/19 Sketching with code@JSDC2013

23,742 views

Published on

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

Published in: Technology

2013/05/19 Sketching with code@JSDC2013

  1. 1. Sketching with Code⽤用程式碼「畫」草圖阿修
  2. 2. 阿修旅人一番 UX Lead & Co-funder台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter @lis186
  3. 3. • 快速完成的⼿手繪草圖,通常不是最後的完成品。什麼是草圖 (Sketch)?Leonardo da Vinci, 15 centry
  4. 4. 記錄Leonardo da Vinci (15 century)
  5. 5. 探索Leonardo da Vinci (15 century)
  6. 6. 說明概念Leonardo da Vinci (15 century)
  7. 7. 企劃製作Wireframe,規劃元件配置於動線http://dribbble.com/shots/588394-Shindig-Wireframe-V01
  8. 8. 設計師畫草圖,發展互動概念及操作流程http://www.garethbotha.com/blog/case-studies/mobile-ui-design-process/
  9. 9. 設計師⽤用Mockup,定義視覺⾵風格http://www.tricedesigns.com/2013/01/18/my-workflow-for-developing-phonegap-applications/
  10. 10. 企劃⼤大功能沒問題,交界處的⼩小細節沒⼈人管設計師前端⼯工程師後端⼯工程師研究 設計 前端 後端⼈人⽂文 ⼯工程改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  11. 11. 設計師不確定他的設計可不可⾏行http://www.cartoonstock.com/lowres/lba0240l.jpg⼯工程師設計師
  12. 12. 每個⼈人都有意⾒見http://usa.chinadaily.com.cn/life/2011-10/13/content_13887552.htm⼯工程師設計師企劃 業務
  13. 13. 設計師無法獨⾃自確認可⾏行性http://dribbble.com/shots/588394-Shindig-Wireframe-V01
  14. 14. ⼯工程師不會想到的細節設計
  15. 15. 互相協助多溝通研究 設計 前端 後端⼈人⽂文 ⼯工程使⽤用者經驗設計師使⽤用者界⾯面⼯工程師應⽤用程式⼯工程師改繪⾃自http://taipro.blogspot.tw/2012/08/the-difference-between-ux-designer-and.html
  16. 16. 沒⼈人處理的三不管地帶,往往是決勝關鍵http://www.amazon.com/
  17. 17. 這個做得出來嗎?
  18. 18. 這個呢?http://blog.tackmobile.com/article/interface-origami/
  19. 19. 設計師應該是副駕駛http://www.emagzin.com/wp-content/uploads/2010/06/120308.jpeg⼯工程師設計師
  20. 20. 理解對⽅方的能耐http://blog.gravitybureau.com/wp-content/uploads/2011/06/2011_06_04-STPR_2011-013.jpg
  21. 21. 多⼀一個不同的⾓角度思考,更容易成功http://circuitprodigital.com/wp-content/uploads/2010/05/178551.jpg
  22. 22. 設計師的認知設計 產品http://www.slideshare.net/marcinignac/prototyping-in-code魔術⼯工程師設計師
  23. 23. 讓設計師了解魔術怎麼變設計 產品http://www.slideshare.net/marcinignac/prototyping-in-code⼯工程師設計師??
  24. 24. 更敏捷的跨功能協作Think MakeCheck⼯工程師 設計師
  25. 25. ⽤用各⾃自熟悉的⼯工具共同探索⼯工程師設計師http://media.24ways.org/2010/annett/sketch.jpg
  26. 26. ⼯工程師們,準備好你的⼯工具
  27. 27. ⽤用程式碼「畫」Sketch
  28. 28. • ⽤用最快的⽅方式作出結果• 讓結果更快展現出來Make feedback loop faster!
  29. 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>embeddedexternal.menu: {background: blue; color: white;}index.htmlindex.htmlindex.htmlstyle.css
  30. 30. 讓結果更快展現出來• 熟悉採⽤用的技術• 各種⼯工具的應⽤用組合• ⾃自⼰己打造⼯工具
  31. 31. Appcelerator Titanium
  32. 32. Titanium的運作原理OS (iPhone/Android)Application RuntimeJavascript RuntimeApplication CodeNative ModuleTitanium ModuleTitanium KernelJS ModuleNative Module
  33. 33. 每次build要數⼗十秒
  34. 34. TiShadow by David Bankierhttps://github.com/dbankier/TiShadowQuick Titanium previews across devices
  35. 35. 略過Wireframe和Mockup,直接進⾏行prototype原型草圖
  36. 36. 不⼩小⼼心關了瀏覽器,就什麼都沒了
  37. 37. 所以要⾃自⼰己記錄
  38. 38. TiSnippet• ⾃自動存檔• 多⼈人協作• 不⽤用⾃自⼰己開server• 隨時⽅方便demohttp://www.tisnippet.com• Nodejs• Expressjs• Firebase• Bootstrap• Titanium
  39. 39. TiSnippet http://www.tisnippet.com
  40. 40. 設計師不應該是乘客,讓他們坐到副駕駛座來http://www.kickinthehead.org/kickinthehead3/comics-archive/2010-11-15-taxi-choices.png⼯工程師設計師
  41. 41. 不要怕嘗試,找出你們⾃自⼰己的合體⽅方法
  42. 42. 謝謝指教!旅人一番 UX Lead & Co-funder台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事·•www.lis186.com·•lis186@gmail.com·•twitter @lis186

×