Post on 28-Jan-2015
description
跨平台行動應用程式使用者介面開發
李易修
以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
COSCUP2011by Justin Lee
謝謝！