2013/05/19 sketching with code@jsdc2013
DESCRIPTION
在App或網站的開發流程當中,總有一些細節是必須由設計師與工程師的緊密配合才有辦法完成,比如Amazon的選單設計。而在探索某個頁面、操作的設計時,設計師會用紙筆畫草圖的方式來思考,而工程師則必須一一驗證這些設計的可行性或提出其他替代方案,而直接寫程式做prototype是最好的做法之一。我稱之為用程式碼「畫」草圖。TRANSCRIPT
Sketching with Code⽤用程式碼「畫」草圖
阿修
阿修
旅人一番 UX Lead & Co-funder
台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事
·•www.lis186.com·•[email protected]·•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://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
設計師不應該是乘客,讓他們坐到副駕駛座來
http://www.kickinthehead.org/kickinthehead3/comics-archive/2010-11-15-taxi-choices.png
⼯工程師
設計師
不要怕嘗試,找出你們⾃自⼰己的合體⽅方法
謝謝指教!
旅人一番 UX Lead & Co-funder
台灣使用者經驗設計協會(UiGathering)創會成員與工作小組理事
·•www.lis186.com·•[email protected]·•twitter @lis186