1. App開發流程與小工具分享
Justin

2. 李易修 Justin Lee
獨立軟體開發者 使用者經驗設計師
UiGathering台灣使用者經驗設計協會理事
www.lis186.com
lis186@gmail.com
twitter @lis186

3. 台灣使用者經驗設計協會

4. 經驗 設計
使 用者 知識
“推廣 產業 專業
究， 帶動
與研 ” ea r c h
,
交流 e design and ses
升與 perienc wledge’
r
的提 user ex nal kno
“Pro mote e professio nge”
a
ead th t and exch
and l emen
c
advan

5. 2012 年度活動規劃
3/17 -- 從使用者研究報告描繪產品輪廓
5/26 -- 發想/設計/架構/雛形
6/30 -- 會員專屬活動
7/14 -- 實作/驗證
10/5 -- 台灣使用者經驗高峰會
11/17 -- 管理/維運/經營
12/15 -- 年終派對

6. 1
我習慣的工作流程

7. 邊畫邊想

8. 全盤考量
視覺
介面
架構
功能
目標
改繪自The Elements of User Experience: User-Centered Design for the Web” by Jesse James Garrett

9. 草圖與原型交互運用
草圖用於設計 原型用於修正
“Sketching User Experience”, Bill Buxton

10. 慢慢逼近最終成果
最終App
精確度
重構
原型
草圖
時間

11. 2
原型開發工具

12. Titanium Mobile
用 Javascript 開發 Native App
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

13. 同⼀一套程式碼支援多個平台

14. Write once, run everywhere
adapt
Business logic
Networking
UI controls
Database
Event handling logic
}
幾乎100% 共用 80%-100% 共用

15. 不管後面的程式碼寫得多漂亮，
使用者只記得前端。
這邊沒做好，你就失敗了。
-Tristan Louis

16. “我很願意幫忙，
“可不可以再幫我套個版，
但是你知道這要花我多
設計又做了⼀一些調整。”
少時間嗎？”

17. 支援多重解析度
1536x2048
240x320
320x480 240x400
240x432
320x480
1280x720
480x800 1280x800
480x854
640x960
768x1024

18. 測試地獄

19. 面臨的問題
⼀一次只能測⼀一種
每次都要等
每次改都要測

20. TiShadow

21. TiShadow
https://github.com/dbankier/TiShadow
TiShadow 讓開發者可以在瀏覽器寫⼀一小段程式，
即時的在 iOS 和 Android 裝置上執行。
NodeJS server
TiShadow server + TiShadow App + Web Client
All in Javascript !

22. nvALT

23. 3
檢討原型的工具

24. 實物投影

25. 面臨的問題
手晃動看不清楚
要另外買webcam
光線問題

27. Reflection

28. Mousepose

29. 謝謝！