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

獨立軟體開發者 使用者經驗設計師UiGathering台灣使用者經驗設計協會理事

李易修 Justin Lee

www.lis186.comlis186@gmail.comtwitter @lis186

台灣使用者經驗設計協會�

“推廣使用者經驗設

計

與研究，帶動產業

專業知識

的提升與交流”

“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

謝謝！