• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例
 

2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例

on

  • 12,405 views

 

Statistics

Views

Total Views
12,405
Views on SlideShare
5,937
Embed Views
6,468

Actions

Likes
18
Downloads
270
Comments
0

9 Embeds 6,468

http://www.lis186.com 3292
http://phonegap.tennet.com.tw 3064
http://forum.herxun.co 59
http://webcache.googleusercontent.com 39
http://203.84.192.95 5
https://www.google.com.tw 5
http://www.plurk.com 2
https://twitter.com 1
http://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例 2011/08/20跨平台行動應用程式使用者介面開發—以titanium mobile為例 Presentation Transcript

    • 2011跨平台行動應用程式 使用者介面開發以Titanium Mobile為例 李易修
    • 李易修 Justin Lee赫迅互動科技 使用者經驗架構師
    • 下載了沒? 搜尋COSCUP2011http://goo.gl/FlkFU http://goo.gl/cN3pZ
    • The Source is openedgit clone git://github.com/lis186/COSCUP2011MobileApp.git
    • 以下狀況是否有點眼熟?
    • 我有個Idea 要做成Apphttp://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
    • 開發速度要快http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks
    • 好短的時間!
    • Web App 技術 HTML5+CSS+JS跨平台能力 強使用者經驗 尚可 離線能力 無整合性與功能 弱 學習門檻 低 上架賣錢 沒辦法
    • Native App 技術 Java, Objective-C等跨平台能力 低使用者經驗 最佳 離線能力 有整合性與功能 最佳 學習門檻 高 上架賣錢 可
    • 該選哪一個?Web App Native App
    • 兩全其美
    • 用熟悉的Web技術開發Native App
    • Titanium Mobile
    • 開發流程願景 設計 開發 測試 發佈
    • 願景 設計 開發 測試 發佈
    • 願景
    • 大會手冊http://www.flickr.com/photos/othree/4889443021/in/set-72157624717324004 Photo by Othree
    • 紙本手冊的特性Good Bad沒網路也ok 無法更新資料詳細 無法搜尋可做記號 不見得會帶
    • 設定期望
    • 讓會眾盡情享受活動,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
    • 網路不可靠http://www.flickr.com/photos/othree/4889441807/in/pool-1501134@N21/ Photo by Othree
    • 超大會議廳http://www.flickr.com/photos/yurenju/4897741695/in/pool-1502528@N22/ Photo by yurenju
    • 座位表 我的朋友和正妹坐哪裡?http://www.flickr.com/photos/38664137@N07/4903778188/in/pool-1501134@N21/ Photo by D.K. CHOU
    • 即時分享 IRC,Plurk或是twitterhttp://www.flickr.com/photos/timchen86/4890800578/in/pool-1502528@N22/ Photo by tim.chen
    • 為使用情境設計 人 活動 環境 產品
    • 使用情境可能隨時間改變 活動前 找場地 聽講 人 人 人 找議題 找場地 查詢資訊 會議家中 App 會場 App 室 App
    • 不同情境,期待不同 活動前 找場地 聽講 人 人 人 找議題 找場地 查詢資訊 會議家中 App 會場 App 室 App怎麼找? 下一場是? 更多資訊 位置在哪?
    • 不同情境,限制不同 活動前 找場地 聽講 人 人 人 找議題 找場地 查詢資訊 會議家中 App 會場 App 室 App找到哪裡? 邊走邊用 網路不穩定
    • 情境 功能 ‧顯示所有議程 ‧標記想聽的內容 ‧活動提醒...
    • 功能 UI與架構‧顯示所有議程‧標記想聽的內容‧活動提醒...
    • 選一個裝置開始
    • 先SmartPhone後Tablet 基礎功能 擴充功能
    • 先iOS後Android 240x320320x480 240x400 240x432 320x480 480x800 1280x800 480x854 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 JS to Native Bridge Native API 原生應用程式
    • 只須維護一套原始碼 Javascript原始碼+素材 Titanium API
    • Titanium Mobile的功能 Native User Experience Multimedia Native performance + Native UI Camera, video camera, (tables, animations, gestures…etc.) streaming/device audio/video Location-based services Analytics Augmented reality, geo-location, Custom analytics baked into every compass, native maps application, track usage patterns and adoption Social sharing Titanium+Plus Authenticated access to Facebook, Encrypted database, ecommerce, Twitter, Yahoo YQL. ads, barcode scanners, custom Native email/address book analytics, in-app purchase Data Development tools Local SQLite data store, web Create, test, and publish your app services, lightweight key/value using the same tools across store platforms
    • Titanium Studio Eclipse-based IDE
    • 專案架構 helloWorld/ build/ 原生專案 android/ ... iphone/ ... CHANGELOG.txt LICENSE LICENSE.txt manifest README Resources/ 原始碼和其他資料檔 android/ ... android專用檔案 app.js 起始檔 iphone/ ... iphone專用檔案 KS_nav_ui.png KS_nav_views.png tiapp.xml 設定檔http://wiki.appcelerator.org/display/guides/The+Application+Project+Structure
    • Hello World!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();
    • 給web開發者的祕訣‧所有的UI由Javascript建立‧沒有DOM,不用JQuery‧window相當於瀏覽器視窗‧view相當於div‧事件處理同樣是用AddEventListener
    • UI元件的使用
    • 共有的元件Titanium.UI.TabGroup
    • 特有的元件Titanium.UI.iPad.Popover
    • 模擬特有的元件TabbedBar Button
    • 區分不同裝置Titanium.Platform.osname//iphone, ipad, androidTitanium.Platform.version
    • 為不同螢幕最佳化
    • 解析度(Resolution) 240x320320x480 240x400 240x432 320x480 480x800 1280x800 480x854 640x960 768x102
    • 密度(Density)http://www.engadget.com/2010/06/22/iphone-4-review/
    • 為不同螢幕準備素材 iOS Androidretina normal hdpi mdpi ldpi
    • 從大做到小
    • 注意可讀性
    • 為不同螢幕準備素材 Android 用路徑區分 res-long-port-hdpi res-long-port-mdpi res-long-port-ldpi iOS 用檔名區分 Starred@2x.png Starred.png
    • 長度單位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先行 開發 審核 上架 iOSAndroid 開發 上架
    • 願景 設計 開發 測試 發佈
    • 願景 設計 開發 測試 發佈
    • 願景 設計 開發 測試 發佈
    • 願景 設計 開發 測試 發佈
    • 願景 設計 開發 測試 發佈
    • 願景 設計 開發 測試 發佈
    • Titanium Mobile快速上手+原生+跨平台
    • 8/27Titanium Mobile全日體驗營 http://ti.herxun.co
    • COSCUP2011 by Justin Lee 謝謝!