App開發流程與小工具分享Justin
台灣使用者經驗設計協會�
“推廣使用者經驗設
計
與研究,帶動產業
專業知識
的提升與交流”
“Promote user experience design and research,
and lead the professional knowledge’s
advancement and exchange”
2012 年度活動規劃
3/17 -- 從使用者研究報告描繪產品輪廓
5/26 -- 發想/設計/架構/雛形
6/30 -- 會員專屬活動
7/14 -- 實作/驗證
10/5 -- 台灣使用者經驗高峰會
11/17 -- 管理/維運/經營
12/15 -- 年終派對
我習慣的工作流程1
邊畫邊想
全盤考量
目標
功能
架構
介面
視覺
改繪自"The Elements of User Experience: User-Centered Design for the Web” by Jesse James Garrett
草圖與原型交互運用草圖用於設計 原型用於修正
“Sketching User Experience”, Bill Buxton
慢慢逼近最終成果
時間
精確度
草圖原型
最終App
重構
原型開發工具2
Titanium Mobile
Open Source (Apache 2.0)
支援平台:
正式支援: iOS, Android
Beta: BlackBerry, Mobile Web, Nook
開發平台: Mac OSX, Windows, Ubuntu
SDK: Titanium Mobile SDK 2.0.1
開發工具: Titanium Studio
用 Javascript 開發 Native App
同⼀一套程式碼支援多個平台
Write once, run everywhere
Business logicNetworkingDatabase
Event handling logic
UI controls
幾乎100% 共用
}80%-100% 共用
adapt
不管後面的程式碼寫得多漂亮,使用者只記得前端。這邊沒做好,你就失敗了。
-Tristan Louis
“我很願意幫忙,但是你知道這要花我多少時間嗎?”
“可不可以再幫我套個版,設計又做了⼀一些調整。”
支援多重解析度
320x480
240x320
480x800
480x854
240x400
240x432
320x480
640x960
768x1024
1280x800
1280x720
1536x2048
測試地獄
面臨的問題
⼀一次只能測⼀一種每次都要等每次改都要測
TiShadow
TiShadow
TiShadow 讓開發者可以在瀏覽器寫⼀一小段程式, 即時的在 iOS 和 Android 裝置上執行。NodeJS server
TiShadow server + TiShadow App + Web Client
All in Javascript !
https://github.com/dbankier/TiShadow
nvALT
檢討原型的工具3
實物投影
面臨的問題
手晃動看不清楚要另外買webcam光線問題
Reflection
Mousepose
謝謝!