移动互联网时代的Mobile app设计和开发

3,251 views

Published on

移动互联网时代的Mobile app设计和开发

Published in: Technology, Design
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,251
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
99
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

移动互联网时代的Mobile app设计和开发

  1. 1. Mobile App By 完颜 移动互联网时代的 设计和开发
  2. 2. Profile <ul><li>完颜小卓 </li></ul><ul><li>SMbey0nd </li></ul><ul><li>淘宝 [eTao] 无线 UED </li></ul><ul><li>前端工程师 </li></ul><ul><li>热爱 Mobile Web </li></ul>
  3. 3. 内容提要 <ul><li>现代移动互联网 </li></ul><ul><li>Mobile App 的设计和开发 </li></ul><ul><li>工具 </li></ul><ul><li>前端创新 </li></ul><ul><li>机遇与挑战 </li></ul>
  4. 4. 现代移动互联网 Modern Mobile Web (Mobile 2.0)
  5. 5. 现代移动互联网 - 过去 WAP1.0 时代
  6. 6. 现代移动互联网 - 过去 <ul><li>代表平台 ( 嵌入式 ) </li></ul><ul><ul><li>Symbian S40 </li></ul></ul><ul><ul><li>Windows CE </li></ul></ul><ul><ul><li>MTK </li></ul></ul><ul><li>代表浏览器 </li></ul><ul><ul><li>内嵌 wap 浏览器 </li></ul></ul><ul><li>语言规范 </li></ul><ul><ul><li>WML / HTML(i-Mode) </li></ul></ul>WAP1.0 时代
  7. 7. 现代移动互联网 - 过去 WAP2.0 时代
  8. 8. 现代移动互联网 - 过去 <ul><li>代表平台 </li></ul><ul><ul><li>Symbian S60 </li></ul></ul><ul><ul><li>Windows Mobile </li></ul></ul><ul><ul><li>MTK </li></ul></ul><ul><li>代表浏览器 </li></ul><ul><ul><li>UCWEB/OperaMini </li></ul></ul><ul><li>语言规范 </li></ul><ul><ul><li>XHTML Basic / XHTML Mobile Profile </li></ul></ul>WAP2.0 时代
  9. 9. 现代移动互联网 - 过去 <ul><ul><li>WAP2.0 手机兼容性测试表格 – 淘宝无线 UED 前端组 </li></ul></ul>
  10. 10. 现代移动互联网 - 过去 <ul><ul><li>兼容性 </li></ul></ul>
  11. 11. 现代移动互联网 - 现在 HTML5 时代
  12. 12. 现代移动互联网 - 现在 <ul><li>代表平台 </li></ul><ul><ul><li>iOS </li></ul></ul><ul><ul><li>Android </li></ul></ul><ul><ul><li>Other OS </li></ul></ul><ul><li>代表浏览器 </li></ul><ul><ul><li>Mobile Safari/Android Webkit </li></ul></ul><ul><li>语言规范 </li></ul><ul><ul><li>HTML5 </li></ul></ul>HTML5 时代
  13. 13. 现代移动互联网 - 现在 Morgan Stanley - 2010 Mobile Internet Report
  14. 14. 现代移动互联网 - 现在 <ul><li>iOS 、 Android ↑ Symbian ↓ </li></ul>m.taobao.com 2011.6
  15. 15. 现代移动互联网 - 未来
  16. 16. 现代移动互联网 - 未来 <ul><li>2011 年底:一半的美国人使用智能手机 </li></ul><ul><li>2013 :移动互联网用户超 10 亿 </li></ul><ul><li>2020 :全世界的网络访问主要来自手机 </li></ul>mobithing 2011
  17. 17. 现代移动互联网 - 未来 <ul><li>? </li></ul>
  18. 18. Mobile App 设计和开发 Design & Development
  19. 19. Mobile App 设计和开发 <ul><li>三种模式: </li></ul><ul><li>1.Native </li></ul><ul><li>2.Web </li></ul><ul><li>3.Hybrid(frame) </li></ul>Native Web Hybrid (frame)
  20. 20. Mobile App 设计和开发 - 三种模式 <ul><li>Native App </li></ul><ul><li>iOS : Objective-C </li></ul><ul><li>Android : Java </li></ul><ul><li>Symbian : C++ 、 WRT(Widget) </li></ul><ul><li>WP7 : C# 、 VB </li></ul>Native Hybrid (frame)
  21. 21. Mobile App 设计和开发 - 三种模式 <ul><li>Native App </li></ul><ul><li>此处略去一亿字… </li></ul>Native Hybrid (frame)
  22. 22. <ul><li>Web App </li></ul><ul><li>HTML(5) </li></ul><ul><li>+CSS(3) </li></ul><ul><li>+JavaScript </li></ul><ul><li>+Device API </li></ul>Mobile App 设计和开发 - 三种模式 Hybrid (frame) Web
  23. 23. <ul><li>Hybrid(frame) App </li></ul><ul><li>{Native + Web} App </li></ul><ul><li>Hybrid – Native 与 Web 完全混合 </li></ul><ul><li>Frame – 纯 Native 框架形式( PhoneGap ) </li></ul>Mobile App 设计和开发 - 三种模式 Hybrid (frame)
  24. 24. Mobile App 设计和开发 <ul><li>Web App </li></ul><ul><li>1.HTML5(CSS3) </li></ul><ul><li>2. 浏览器兼容概览 </li></ul><ul><li>3. 移动框架的抉择 </li></ul><ul><li>4.Web App 开发实战 </li></ul>Hybrid (frame) Web
  25. 25. <ul><li>HTML5 </li></ul><ul><ul><li>Elements/Forms </li></ul></ul><ul><ul><li>Offline App </li></ul></ul><ul><ul><li>LocalStorage </li></ul></ul><ul><ul><li>GeoLocation </li></ul></ul><ul><ul><li>Video/Audio </li></ul></ul><ul><ul><li>Canvas/WebGL </li></ul></ul><ul><ul><li>Web Workers </li></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  26. 26. <ul><li>CSS3 </li></ul><ul><ul><li>Selector </li></ul></ul><ul><ul><li>Border </li></ul></ul><ul><ul><li>Background </li></ul></ul><ul><ul><li>Text effects </li></ul></ul><ul><ul><li>Transition/Transform/Animation </li></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  27. 27. <ul><li>Device API </li></ul><ul><ul><li>Touch Event </li></ul></ul><ul><ul><ul><li>MultiTouch(gesture) </li></ul></ul></ul><ul><ul><li>DeviceOrientation </li></ul></ul><ul><ul><li>WebClip </li></ul></ul><ul><ul><li>Viewport </li></ul></ul><ul><ul><li>Status Bar/Startup Image </li></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  28. 28. <ul><li>浏览器兼容概览 – iOS 4.3.3 Mobile Safari </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame) HTML5 Canvas √ Video √ (Ogg/WebM ×) Audio √ (Ogg/WebM ×) Elements ○ Forms ○ (search/tel/url/email √ ) GeoLocation √ WebGL × Storage √ (IndexedDB ×) Workers × Device API TouchEvent √ DeviceOrientation API √ WebClip √ Viewport √ Status Bar/Startup Image √
  29. 29. <ul><li>浏览器兼容概览 – Android 2.2 Webkit </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame) HTML5 Canvas √ Video ○ (Video codecs ×) Audio ○ (Audio codecs ×) Elements ○ Forms ○ (search/tel/url/email √ ) GeoLocation √ WebGL × Storage √ (IndexedDB ×) Workers × Device API TouchEvent ○ (MultiTouch ×) DeviceOrientation API ○ WebClip √ Viewport √ Status Bar/Startup Image ×
  30. 30. Mobile App 设计和开发 - Web App Hybrid (frame) Video codecs × Audio codecs ×
  31. 31. <ul><li>移动框架的抉择 </li></ul><ul><li>交互集成框架 </li></ul><ul><li>Sencha Touch </li></ul><ul><li>jQuery Mobile </li></ul><ul><li>DHTMLX Touch/iUI/iWebkit(iOS)/… </li></ul><ul><li>纯 JavaScript 框架 </li></ul><ul><li>Zepto.js </li></ul><ul><li>应用开发平台框架 </li></ul><ul><li>PhoneGap </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  32. 32. <ul><li>移动框架的抉择 </li></ul><ul><li>Kissy Mobile ? </li></ul><ul><li>or… </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  33. 33. <ul><li>开发实战 </li></ul><ul><li>HTML5 应用实例 </li></ul><ul><ul><li>Elements/Form/GeoLocation </li></ul></ul><ul><li>CSS3 应用实例 </li></ul><ul><li>Device API 应用实例 </li></ul><ul><ul><li>基本包装 /ScrollLayer/Shake! </li></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  34. 34. <ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>Elements </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  35. 35. <ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>Form </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  36. 36. <ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>GeoLocation </li></ul><ul><li>navigator.geolocation. </li></ul><ul><ul><li>getCurrentPosition </li></ul></ul><ul><ul><ul><li>successCallback </li></ul></ul></ul><ul><ul><ul><li>errorCallback </li></ul></ul></ul><ul><ul><ul><li>positionOptions </li></ul></ul></ul><ul><ul><li>watchPosition </li></ul></ul><ul><ul><li>clearWatch </li></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame) Will come true on
  37. 37. <ul><li>开发实战 -HTML5 应用实例 </li></ul><ul><li>GeoLocation </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame) Will come true on
  38. 38. <ul><li>开发实战 -CSS3 应用实例 </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame) selector/border-radius/gradient/box-shadow/transition/animation …
  39. 39. <ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>本地化基本包装 </li></ul><ul><ul><li>Viewport </li></ul></ul><ul><ul><ul><li>Width </li></ul></ul></ul><ul><ul><ul><li>initial-scale / maximum-scale </li></ul></ul></ul><ul><ul><ul><li>user-scalable </li></ul></ul></ul><ul><ul><li>Capable </li></ul></ul><ul><ul><li>WebClip icon </li></ul></ul><ul><ul><li>Startup image </li></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  40. 40. <ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>本地化基本包装 </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  41. 41. <ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>ScrollLayer </li></ul><ul><ul><li>touchstart/touchmove/touchend </li></ul></ul><ul><ul><ul><li>e.touches // 所有手指列表 </li></ul></ul></ul><ul><ul><ul><li>e.targetTouches // 当前 Dom 手指列表 </li></ul></ul></ul><ul><ul><ul><li>e.changedTouches // 当前事件手指列表 </li></ul></ul></ul><ul><ul><ul><ul><li>clientX / screenX / pageX </li></ul></ul></ul></ul><ul><ul><ul><ul><li>target </li></ul></ul></ul></ul><ul><ul><ul><ul><li>identifier </li></ul></ul></ul></ul><ul><ul><ul><ul><li>… </li></ul></ul></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  42. 42. <ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>ScrollLayer </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  43. 43. <ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>Shake! </li></ul><ul><ul><li>ondevicemotion </li></ul></ul><ul><ul><ul><li>e. accelerationIncludingGravity </li></ul></ul></ul><ul><ul><ul><ul><li>X </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Y </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Z </li></ul></ul></ul></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  44. 44. <ul><li>开发实战 -Device API 应用实例 </li></ul><ul><li>Shake! </li></ul>Mobile App 设计和开发 - Web App Hybrid (frame)
  45. 45. Mobile App 设计和开发 <ul><li>Hybrid App </li></ul><ul><li>1. 权衡利弊 </li></ul><ul><li>2.WebView </li></ul><ul><li>3. 双向通信技术解析 </li></ul><ul><li>4.Hybrid App 开发实战 </li></ul>Hybrid (frame) Hybrid (frame)
  46. 46. <ul><li>权衡利弊 </li></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Hybrid (frame) Native vs. Web Native Web
  47. 47. <ul><li>权衡利弊 </li></ul><ul><li>Native 的优势: </li></ul><ul><ul><li>速度 </li></ul></ul><ul><ul><li>功能 </li></ul></ul><ul><ul><li>表现 </li></ul></ul><ul><ul><li>性能 </li></ul></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Hybrid (frame) Native
  48. 48. <ul><li>权衡利弊 </li></ul><ul><li>Web 的优势: </li></ul><ul><ul><li>效率 </li></ul></ul><ul><ul><li>成本 (跨平台) </li></ul></ul><ul><ul><li>更新 </li></ul></ul><ul><ul><li>复用 </li></ul></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Hybrid (frame) Web
  49. 49. <ul><li>权衡利弊 </li></ul><ul><li>适合的 才是最好的 </li></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Web Hybrid (frame)
  50. 50. <ul><li>WebView </li></ul><ul><li>它是 Webkit 在 SDK 中封装而成的一个组件 </li></ul><ul><li>Java 和 JavaScript 通过 WebView 的接口进行通信 </li></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Naive
  51. 51. <ul><li>双向通信技术解析 </li></ul><ul><li>Native 调用 Web </li></ul><ul><ul><li>loadUrl 方法 </li></ul></ul><ul><ul><ul><li>webview.loadUrl(&quot;javascript:foo()&quot;); </li></ul></ul></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Naive
  52. 52. <ul><li>双向通信技术解析 </li></ul><ul><li>Web 调用 Native </li></ul><ul><ul><li>超链接监听 </li></ul></ul><ul><ul><ul><li><a href=“http://a.com/?b”> 监听 b 参数 </a> </li></ul></ul></ul><ul><ul><li>addJavascriptInterface 方法 </li></ul></ul><ul><ul><ul><li>addJavascriptInterface(Object obj,String interfaceName) // 将一个 java 对象绑定到一个 javascript 对象中 </li></ul></ul></ul><ul><ul><ul><li>Native : webview.addJavascriptInterface(Foo,“GoAction”); </li></ul></ul></ul><ul><ul><ul><li>Web : Javascript:window.GoAction.Foo(); </li></ul></ul></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame) Naive
  53. 53. <ul><li>开发实战 </li></ul><ul><li>Hybrid </li></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame)
  54. 54. <ul><li>开发实战 </li></ul><ul><li>Hybrid </li></ul>Mobile App 设计和开发 - Hybrid App Hybrid (frame)
  55. 55. 工具 Tools
  56. 56. <ul><li>模拟器 </li></ul><ul><ul><li>Android SDK Emulator </li></ul></ul><ul><ul><li>iPhone SDK Simulator(MacOS only) </li></ul></ul><ul><ul><li>Windows Phone Emulator </li></ul></ul><ul><ul><li>Opera Mobile Emulator </li></ul></ul>工具 Hybrid (frame)
  57. 57. <ul><li>在线工具 </li></ul><ul><ul><li>HTML5 : </li></ul></ul><ul><ul><ul><li>http://html5test.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.caniuse.com/ </li></ul></ul></ul><ul><ul><li>CSS3 : </li></ul></ul><ul><ul><ul><li>http://css3generator.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.css3.info/selectors-test/ </li></ul></ul></ul><ul><ul><ul><li>http://css3please.com/ </li></ul></ul></ul><ul><ul><li>Other : </li></ul></ul><ul><ul><ul><li>http://detectmobilebrowser.com/ </li></ul></ul></ul><ul><ul><ul><li>http://www.vodori.com/blog/phantom-limb.html </li></ul></ul></ul><ul><ul><ul><li>http://www.quirksmode.org/m/ </li></ul></ul></ul><ul><ul><ul><li>…… </li></ul></ul></ul>工具 Hybrid (frame)
  58. 58. 前端创新 Innovation
  59. 59. 机遇与挑战 Opportunities & Threats
  60. 60. <ul><li>前沿敏感度 </li></ul><ul><ul><li>格局变化性和应对 </li></ul></ul><ul><ul><li>HTML5/CSS3 </li></ul></ul><ul><ul><li>Device API </li></ul></ul><ul><ul><li>平台多样性 / 差异性 / 兼容性 </li></ul></ul><ul><li>JavaScript 框架 </li></ul><ul><li>性能 </li></ul><ul><li>外界因素 </li></ul><ul><ul><li>硬件设备与调试 </li></ul></ul><ul><li>你的激情 </li></ul>机遇与挑战 Hybrid (frame)
  61. 61. 机遇与挑战 Hybrid (frame) 激情过后 你会觉得……
  62. 62. <ul><li>Mobile Design is the art of Communicating within an Environment of Mobility. </li></ul><ul><li>- Cameronmoll </li></ul><ul><li>一切技术以体验为本 </li></ul>Hybrid (frame)
  63. 63. Q&A , and Other… 无线前端联盟群: 793745802 与我联系:完颜 weibo.com/Mario 团队微博: weibo.com/MobileUED
  64. 64. 谢谢 再见

×