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

13,400 views

Published on

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
13,400
On SlideShare
0
From Embeds
0
Number of Embeds
6,846
Actions
Shares
0
Downloads
278
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

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

  1. 1. 2011跨平台行動應用程式 使用者介面開發以Titanium Mobile為例 李易修
  2. 2. 李易修 Justin Lee赫迅互動科技 使用者經驗架構師
  3. 3. 下載了沒? 搜尋COSCUP2011http://goo.gl/FlkFU http://goo.gl/cN3pZ
  4. 4. The Source is openedgit clone git://github.com/lis186/COSCUP2011MobileApp.git
  5. 5. 以下狀況是否有點眼熟?
  6. 6. 我有個Idea 要做成Apphttp://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks
  7. 7. &http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks
  8. 8. &http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks
  9. 9. 開發速度要快http://screenhog.com/blog/2009/07/17/idea/ by Chris Hendricks
  10. 10. 好短的時間!
  11. 11. Web App 技術 HTML5+CSS+JS跨平台能力 強使用者經驗 尚可 離線能力 無整合性與功能 弱 學習門檻 低 上架賣錢 沒辦法
  12. 12. Native App 技術 Java, Objective-C等跨平台能力 低使用者經驗 最佳 離線能力 有整合性與功能 最佳 學習門檻 高 上架賣錢 可
  13. 13. 該選哪一個?Web App Native App
  14. 14. 兩全其美
  15. 15. 用熟悉的Web技術開發Native App
  16. 16. Titanium Mobile
  17. 17. 開發流程願景 設計 開發 測試 發佈
  18. 18. 願景 設計 開發 測試 發佈
  19. 19. 願景
  20. 20. 大會手冊http://www.flickr.com/photos/othree/4889443021/in/set-72157624717324004 Photo by Othree
  21. 21. 紙本手冊的特性Good Bad沒網路也ok 無法更新資料詳細 無法搜尋可做記號 不見得會帶
  22. 22. 設定期望
  23. 23. 讓會眾盡情享受活動,When&Where這種事就交給Mobile App。
  24. 24. Mobile App要做到跨平台沒網路也ok資料詳細可做記號可更新可搜尋
  25. 25. 願景 設計 開發 測試 發佈
  26. 26. 願景 設計 開發 測試 發佈
  27. 27. 設計
  28. 28. 怎麼開始?
  29. 29. 先觀察
  30. 30. 趕場 馬上要知道下個活動在哪https://picasaweb.google.com/lh/view?q=coscup&uname=lis186&psc=G&filter=1&imglic=creative_commons&face=false#5505105241165189650 Photo by iocy
  31. 31. 網路不可靠http://www.flickr.com/photos/othree/4889441807/in/pool-1501134@N21/ Photo by Othree
  32. 32. 超大會議廳http://www.flickr.com/photos/yurenju/4897741695/in/pool-1502528@N22/ Photo by yurenju
  33. 33. 座位表 我的朋友和正妹坐哪裡?http://www.flickr.com/photos/38664137@N07/4903778188/in/pool-1501134@N21/ Photo by D.K. CHOU
  34. 34. 即時分享 IRC,Plurk或是twitterhttp://www.flickr.com/photos/timchen86/4890800578/in/pool-1502528@N22/ Photo by tim.chen
  35. 35. 為使用情境設計 人 活動 環境 產品
  36. 36. 使用情境可能隨時間改變 活動前 找場地 聽講 人 人 人 找議題 找場地 查詢資訊 會議家中 App 會場 App 室 App
  37. 37. 不同情境,期待不同 活動前 找場地 聽講 人 人 人 找議題 找場地 查詢資訊 會議家中 App 會場 App 室 App怎麼找? 下一場是? 更多資訊 位置在哪?
  38. 38. 不同情境,限制不同 活動前 找場地 聽講 人 人 人 找議題 找場地 查詢資訊 會議家中 App 會場 App 室 App找到哪裡? 邊走邊用 網路不穩定
  39. 39. 情境 功能 ‧顯示所有議程 ‧標記想聽的內容 ‧活動提醒...
  40. 40. 功能 UI與架構‧顯示所有議程‧標記想聽的內容‧活動提醒...
  41. 41. 選一個裝置開始
  42. 42. 先SmartPhone後Tablet 基礎功能 擴充功能
  43. 43. 先iOS後Android 240x320320x480 240x400 240x432 320x480 480x800 1280x800 480x854 640x960 768x102
  44. 44. 遵守UI Guideline
  45. 45. 哪裡怪怪的?
  46. 46. 尊重不同OS的差異
  47. 47. 願景 設計 開發 測試 發佈
  48. 48. 願景 設計 開發 測試 發佈
  49. 49. 開發
  50. 50. Titanium Mobile
  51. 51. 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
  52. 52. 開發iOS應用程式仍然需要Mac {
  53. 53. Javascript原始碼+素材 Titanium API JS to Native Bridge Native API 原生應用程式
  54. 54. 只須維護一套原始碼 Javascript原始碼+素材 Titanium API
  55. 55. 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
  56. 56. Titanium Studio Eclipse-based IDE
  57. 57. 專案架構 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
  58. 58. 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();
  59. 59. 給web開發者的祕訣‧所有的UI由Javascript建立‧沒有DOM,不用JQuery‧window相當於瀏覽器視窗‧view相當於div‧事件處理同樣是用AddEventListener
  60. 60. UI元件的使用
  61. 61. 共有的元件Titanium.UI.TabGroup
  62. 62. 特有的元件Titanium.UI.iPad.Popover
  63. 63. 模擬特有的元件TabbedBar Button
  64. 64. 區分不同裝置Titanium.Platform.osname//iphone, ipad, androidTitanium.Platform.version
  65. 65. 為不同螢幕最佳化
  66. 66. 解析度(Resolution) 240x320320x480 240x400 240x432 320x480 480x800 1280x800 480x854 640x960 768x102
  67. 67. 密度(Density)http://www.engadget.com/2010/06/22/iphone-4-review/
  68. 68. 為不同螢幕準備素材 iOS Androidretina normal hdpi mdpi ldpi
  69. 69. 從大做到小
  70. 70. 注意可讀性
  71. 71. 為不同螢幕準備素材 Android 用路徑區分 res-long-port-hdpi res-long-port-mdpi res-long-port-ldpi iOS 用檔名區分 Starred@2x.png Starred.png
  72. 72. 長度單位var view = Titanium.UI.createView({width: 100, //Pixelheight: 100dp,//Density independence});win.add(view);win.open();
  73. 73. 考慮大螢幕能做什麼
  74. 74. 處理不同方向Titanium.Gesture.addEventListener(orientationchange, function (e) { switchLayout(e.orientation); });
  75. 75. 願景 設計 開發 測試 發佈
  76. 76. 願景 設計 開發 測試 發佈
  77. 77. 測試
  78. 78. 不要只靠模擬器
  79. 79. 模擬器測不出...
  80. 80. 記憶體不足
  81. 81. 肥手指問題
  82. 82. 多測不會錯
  83. 83. 願景 設計 開發 測試 發佈
  84. 84. 願景 設計 開發 測試 發佈
  85. 85. 發佈
  86. 86. 上架等待時間10天 數小時
  87. 87. iOS先行 開發 審核 上架 iOSAndroid 開發 上架
  88. 88. 願景 設計 開發 測試 發佈
  89. 89. 願景 設計 開發 測試 發佈
  90. 90. 願景 設計 開發 測試 發佈
  91. 91. 願景 設計 開發 測試 發佈
  92. 92. 願景 設計 開發 測試 發佈
  93. 93. 願景 設計 開發 測試 發佈
  94. 94. Titanium Mobile快速上手+原生+跨平台
  95. 95. 8/27Titanium Mobile全日體驗營 http://ti.herxun.co
  96. 96. COSCUP2011 by Justin Lee 謝謝!

×