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