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

Mobile App

By 完颜

移动互联网时代的

设计和开发

Profile

完颜小卓SMbey0nd

淘宝 [eTao] 无线 UED

前端工程师

热爱 Mobile Web

内容提要

• 现代移动互联网

• Mobile App 的设计和开发

• 工具

• 前端创新

• 机遇与挑战

现代移动互联网Modern Mobile Web (Mobile 2.0)

现代移动互联网 - 过去

WAP1.0 时代

现代移动互联网 - 过去• 代表平台 ( 嵌入式 )

– Symbian S40

– Windows CE

– MTK

• 代表浏览器– 内嵌 wap 浏览器

• 语言规范– WML / HTML(i-Mode)

WAP1.0 时代


WAP2.0 时代


WAP2.0 时代

• 代表平台– Symbian S60

– Windows Mobile

– MTK

• 代表浏览器– UCWEB/OperaMini

• 语言规范– XHTML Basic / XHTML Mobile Profile


WAP2.0 手机兼容性测试表格 – 淘宝无线 UED 前端组


兼容性

现代移动互联网 - 现在

HTML5 时代


HTML5 时代

• 代表平台– iOS

– Android

– Other OS

• 代表浏览器– Mobile Safari/Android Webkit

• 语言规范– HTML5


Morgan Stanley - 2010 Mobile Internet Report


m.taobao.com 2011.6

iOS 、 Android ↑ Symbian ↓

现代移动互联网 - 未来


mobithing 2011

2011 年底：一半的美国人使用智能手机

2013 ：移动互联网用户超 10 亿

2020 ：全世界的网络访问主要来自手机


？

Mobile App 设计和开发Design & Development

Mobile App 设计和开发

三种模式：

1.Native

2.Web

3.Hybrid(frame)

Native

Web

Hybrid(frame)

Mobile App 设计和开发 - 三种模式

Native App

iOS ： Objective-C

Android ： Java

Symbian ： C++ 、 WRT(Widget)

WP7 ： C# 、 VB

Native

Hybrid(frame)


Native App

此处略去一亿字…

Native

Hybrid(frame)

Web App

HTML(5)

+CSS(3)

+JavaScript

+Device API Hybrid(frame)

Web


Hybrid(frame) App

{Native + Web} App

Hybrid – Native 与 Web 完全混合

Frame – 纯 Native 框架形式（ PhoneGap ）

Hybrid(frame)



Web App

1.HTML5(CSS3)

2. 浏览器兼容概览

3. 移动框架的抉择

4.Web App 开发实战 Hybrid(frame)

Web

HTML5– Elements/Forms

– LocalStorage/IndexedDB

– GeoLocation

– Video/Audio

– Canvas/WebGL

– Web Workers

Hybrid(frame)

Mobile App 设计和开发 - Web App

CSS3– Selector

– Border

– Background

– Text effects

– Transition/Transform/AnimationHybrid(frame)


Device API– Touch Event

• MultiTouch

– DeviceOrientation API

– WebClip

– Viewport

– Status Bar/Startup Image Hybrid(frame)


浏览器兼容概览 – iOS 4.3.3 Mobile Safari

Hybrid(frame)


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 √

浏览器兼容概览 – Android 2.2 Webkit

Hybrid(frame)


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 ×

Hybrid(frame)


Video codecs ×

Audio codecs ×

移动框架的抉择交互集成框架

•Sencha Touch

•jQuery Mobile

•DHTMLX Touch/iUI/iWebkit(iOS)/…

纯 JavaScript 框架•Zepto.js

应用开发平台框架

•PhoneGap

Hybrid(frame)


开发实战

•HTML5 应用实例

– Elements/Form/GeoLocation

•CSS3 应用实例

•Device API 应用实例

– 基本包装 /ScrollLayer/Shake! Hybrid(frame)


开发实战 -HTML5 应用实例•Elements

Hybrid(frame)


开发实战 -HTML5 应用实例•Form

Hybrid(frame)


开发实战 -HTML5 应用实例•GeoLocation

navigator.geolocation.

– getCurrentPosition

• successCallback

• errorCallback

• positionOptions

– watchPosition

– clearWatch

Hybrid(frame)


Will come true on

开发实战 -HTML5 应用实例•GeoLocation

Hybrid(frame)


Will come true on

开发实战 -CSS3 应用实例

Hybrid(frame)


selector/border-radius/gradient/box-shadow/transition/animation …

开发实战 -Device API 应用实例•本地化基本包装

– Viewport• Width• initial-scale / maximum-scale • user-scalable

– Capable

– WebClip icon

– Startup image

Hybrid(frame)


开发实战 -Device API 应用实例•本地化基本包装

Hybrid(frame)


开发实战 -Device API 应用实例•ScrollLayer

– touchstart/touchmove/touchend

• e.touches // 所有手指列表

• e.targetTouches // 当前 Dom 手指列表

• e.changedTouches // 当前事件手指列表– clientX / screenX / pageX

– target

– identifier

– …

Hybrid(frame)


开发实战 -Device API 应用实例•ScrollLayer

Hybrid(frame)


开发实战 -Device API 应用实例•Shake!

– ondevicemotion

• e. accelerationIncludingGravity

– X

– Y

– Z

Hybrid(frame)


开发实战 -Device API 应用实例•Shake!

Hybrid(frame)



Hybrid App

1. 权衡利弊

2.WebView

3. 双向通信技术解析

4.Hybrid App 开发实战 Hybrid(frame)

Hybrid(frame)

权衡利弊

Hybrid(frame)

Hybrid(frame)

Mobile App 设计和开发 - Hybrid App

Native vs. Web

Native Web

权衡利弊

•Native 的优势：– 速度

– 功能

– 表现

– 性能 Hybrid(frame)

Hybrid(frame)


Native

权衡利弊

•Web 的优势：– 效率

– 成本（跨平台）

– 更新

– 复用 Hybrid(frame)

Hybrid(frame)


Web

权衡利弊

适合的才是最好的

Hybrid(frame)


Web

Hybrid(frame)

WebView

•它是 Webkit 在 SDK 中封装而成的一个组件

•Java 和 JavaScript 通过 WebView 的接口进行通信

Hybrid(frame)


Naive

双向通信技术解析•Native 调用 Web

– loadUrl 方法• webview.loadUrl("javascript:foo()");

Hybrid(frame)


Naive

双向通信技术解析•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)


Naive

开发实战•Hybrid

Hybrid(frame)


工具Tools

• 模拟器– Android SDK Emulator

– iPhone SDK Simulator(MacOS only)

– Windows Phone Emulator

– Opera Mobile Emulator

Hybrid(frame)

工具

• 在线工具– 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)

工具

http://html5test.com/

http://www.caniuse.com/

http://css3generator.com/

http://www.css3.info/selectors-test/

http://css3please.com/

http://detectmobilebrowser.com/

http://www.vodori.com/blog/phantom-limb.html

http://www.quirksmode.org/m/

前端创新Innovation

机遇与挑战Opportunities & Threats

• 前沿敏感度– 格局变化性和应对

– HTML5/CSS3

– Device API

– 平台多样性 / 差异性 / 兼容性

• JavaScript 框架

• 性能

• 外界因素– 硬件设备与调试

• 你的激情

Hybrid(frame)

机遇与挑战

Hybrid(frame)

激情过后你会觉得……

机遇与挑战

Hybrid(frame)

Mobile Design is the art of Communicating within an Environment of Mobility.

- Cameronmoll一切技术以体验为本

Q&A ， and Other…

无线前端联盟群： 793745802

与我联系：完颜weibo.com/Mario

团队微博：weibo.com/MobileUED

http://weibo.com/mario

http://weibo.com/mobileued

谢谢再见

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

Technology