跨平台行動應用程式使用者介面開發

李易修

以Titanium Mobile為例

2011

搜尋COSCUP2011

下載了沒？

李易修 Justin Lee赫迅互動科技 使用者經驗架構師

以下狀況是否有點眼熟？

http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks

我有個Idea要做成App

http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks

&

http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks

&

http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks

開發速度要快

好短的時間！

Web App

HTML5+CSS+JS

強

尚可

低

無

弱

沒辦法

技術

跨平台能力

使用者經驗

學習門檻

離線能力

整合性與功能

上架賣錢

Native App

技術

跨平台能力

使用者經驗

學習門檻

離線能力

整合性與功能

上架賣錢

Java, Objective-C等

低

最佳

高

有

最佳

可

該選哪一個？Native AppWeb App

兩全其美

用熟悉的Web技術開發Native App

Titanium Mobile

開發 測試 發佈設計願景

開發流程

開發 測試 發佈設計願景

願景

http://www.flickr.com/photos/othree/4889443021/in/set-72157624717324004 Photo by Othree

大會手冊

紙本手冊的特性

沒網路也ok資料詳細可做記號

無法更新無法搜尋不見得會帶

Good Bad

設定期望

讓會眾盡情享受活動，When&Where這種事就交給Mobile App。

Mobile App要做到

跨平台沒網路也ok資料詳細可做記號可更新可搜尋

開發 測試 發佈設計願景

開發 測試 發佈設計願景

設計

怎麼開始？

先觀察

https://picasaweb.google.com/lh/view?q=coscup&uname=lis186&psc=G&filter=1&imglic=creative_commons&face=false#5505105241165189650 Photo by iocy

趕場馬上要知道下個活動在哪

Photo by Othreehttp://www.flickr.com/photos/othree/4889441807/in/pool-1501134@N21/

網路不可靠

http://www.flickr.com/photos/yurenju/4897741695/in/pool-1502528@N22/ Photo by yurenju

超大會議廳

Photo by D.K. CHOUhttp://www.flickr.com/photos/38664137@N07/4903778188/in/pool-1501134@N21/

座位表我的朋友和正妹坐哪裡？

http://www.flickr.com/photos/timchen86/4890800578/in/pool-1502528@N22/ Photo by tim.chen

即時分享IRC,Plurk或是twitter

環境

人

產品

活動

為使用情境設計

使用情境可能隨時間改變

家中

人

App

找議題

會場

人

App

找場地

會議室

人

App

查詢資訊

活動前 找場地 聽講

不同情境，期待不同

家中

人

App

找議題

會場

人

App

找場地

會議室

人

App

查詢資訊

怎麼找？ 下一場是？位置在哪？

更多資訊

活動前 找場地 聽講

不同情境，限制不同

找到哪裡？ 邊走邊用 網路不穩定

家中

人

App

找議題

活動前

會場

人

App

找場地

找場地

會議室

人

App

查詢資訊

聽講

情境 功能

‧顯示所有議程‧標記想聽的內容‧活動提醒...

功能 UI與架構

‧顯示所有議程‧標記想聽的內容‧活動提醒...

選一個裝置開始

先SmartPhone後Tablet

基礎功能擴充功能

先iOS後Android

320x480

240x320

480x800

480x854

1280x800

240x400

240x432

320x480

640x960

768x102

遵守UI Guideline

哪裡怪怪的？

尊重不同OS的差異

開發 測試 發佈設計願景

開發 測試 發佈設計願景

開發

Titanium Mobile

Titanium Mobile

‧Open Source (Apache 2.0)

‧支援平台: iOS, Android, BlackBerry(Beta)

‧開發平台: Mac OSX, Windows, Ubuntu

‧SDK: Titanium Mobile SDK 1.7.2

‧開發工具: Titanium Studio 1.04

開發iOS應用程式仍然需要Mac

{

Javascript原始碼+素材

原生應用程式

Titanium API

Native API

JS to Native Bridge

只須維護一套原始碼

Javascript原始碼+素材Titanium API

Titanium Mobile的功能

Native User Experience

Native performance + Native UI

(tables, animations, gestures…etc.)

Multimedia

Camera, video camera,

streaming/device audio/video

Location-based services

Augmented reality, geo-location,

compass, native maps

Analytics

Custom analytics baked into every

application, track usage patterns

and adoption

Social sharing

Authenticated access to Facebook,

Twitter, Yahoo YQL.

Native email/address book

Titanium+Plus

Encrypted database, ecommerce,

ads, barcode scanners, custom

analytics, in-app purchase

Data

Local SQLite data store, web

services, lightweight key/value

store

Development tools

Create, test, and publish your app

using the same tools across

platforms

Titanium StudioEclipse-based IDE

helloWorld/ build/ android/ ... iphone/ ... CHANGELOG.txt LICENSE LICENSE.txt manifest README Resources/ android/ ... app.js iphone/ ... KS_nav_ui.png KS_nav_views.png tiapp.xml

專案架構

原生專案

起始檔

設定檔

android專用檔案

iphone專用檔案

原始碼和其他資料檔

http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure

var win = Titanium.UI.createWindow({ backgroundColor:'#fff'});

var label = Titanium.UI.createLabel({ text: 'Hello World!', textAlign: 'center'});

label.addEventListener('click', function(e){ Titanium.API.info('label clicked!');});

win.add(label);win.open();

Hello World!

給web開發者的祕訣

給web開發者的祕訣

‧所有的UI由Javascript建立

給web開發者的祕訣

‧所有的UI由Javascript建立

‧沒有DOM，不用JQuery

給web開發者的祕訣

‧所有的UI由Javascript建立

‧沒有DOM，不用JQuery

‧window相當於瀏覽器視窗

給web開發者的祕訣

‧所有的UI由Javascript建立

‧沒有DOM，不用JQuery

‧window相當於瀏覽器視窗

‧view相當於div

給web開發者的祕訣

‧所有的UI由Javascript建立

‧沒有DOM，不用JQuery

‧window相當於瀏覽器視窗

‧view相當於div

‧事件處理同樣是用AddEventListener

UI元件的使用

Titanium.UI.TabGroup

共有的元件

特有的元件Titanium.UI.iPad.Popover

模擬特有的元件TabbedBar Button

區分不同裝置

Titanium.Platform.osname//iphone, ipad, android

Titanium.Platform.version

為不同螢幕最佳化

解析度(Resolution)

320x480

240x320

480x800

480x854

1280x800

240x400

240x432

320x480

640x960

768x102

密度(Density)

http://www.engadget.com/2010/06/22/iphone-4-review/

為不同螢幕準備素材

normalretina hdpi

Androidmdpi

ldpi

iOS

從大做到小

注意可讀性

為不同螢幕準備素材

Starred.png

Starred@2x.png

iOS

Android

用檔名區分

用路徑區分

res-long-port-hdpi

res-long-port-mdpi

res-long-port-ldpi

長度單位var view = Titanium.UI.createView({width: 100, //Pixelheight: '100dp',//Density independence});

win.add(view);win.open();

考慮大螢幕能做什麼

處理不同方向Titanium.Gesture.addEventListener('orientationchange', function (e) { switchLayout(e.orientation); });

開發 測試 發佈設計願景

開發 測試 發佈設計願景

測試

不要只靠模擬器

模擬器測不出...

記憶體不足

肥手指問題

多測不會錯

開發 測試 發佈設計願景

開發 測試 發佈設計願景

發佈

上架等待時間

10天 數小時

iOS先行

iOS

Android

開發 審核 上架

開發 上架

開發 測試 發佈設計願景

開發 測試 發佈設計願景

開發 測試 發佈設計願景

開發 測試 發佈設計願景

開發 測試 發佈設計願景

開發 測試 發佈設計願景

快速上手+原生+跨平台

Titanium Mobile

Titanium Mobile全日體驗營

8/27http://ti.herxun.co

COSCUP2011by Justin Lee

謝謝！