HTML5适合移动应用开发的几大特性

今天我们来详细探讨HTML5适合移动应用开发的特性。

1. 离线缓存：为HTML5开发移动应用提供基础

HTML5 Web Storage API可视为加强版的cookie。它不受数据大小限制，具备更好的弹性与架构，能将数据写入本机的ROM中。当用户关闭浏览器后再次打开，数据可恢复，从而减少网络流量。

同时，该功能如同另一个方向的后台“操作记录”，且不占用任何后台资源，能减轻设备硬件压力，提升运行流畅性。

在线app支持边使用边下载离线缓存，也可选择不下载；而离线app则必须下载完离线缓存才能使用。形象地说，cookie就像存了电话和菜单，想吃东西得叫外卖，等待时间受交通情况影响；离线缓存则是直接在冰箱里存了食物，想吃就能马上吃到（当然，想吃最新的食物同样可以打电话预定）。

设计师需要明确何时让用户下载离线缓存，同时要注意在线和离线app的区别。

2. 音频视频自由嵌入，多媒体形式更为灵活

原生开发方式处理文字和音视频混排的多媒体内容相对繁琐，需要将文字、图片、音频、视频拆分，解析对应的URL并分别采用不同方式处理。

HTML5在这方面不受限制，可将这些内容放在一起处理。对于新闻类、微博类、社交类应用的信息呈现，若能实现文字与多媒体混排，且无需专门嵌入webview，将是非常理想的情况，而目前原生方式实现起来仍有困难。

3. 地理定位，随时随地分享位置

HTML5能充分发挥移动设备在定位方面的优势，推动LBS应用发展。它可综合运用GPS、wifi、手机等方式，使定位更精准、灵活。

地理位置定位让定位和导航不再是导航软件的专属，地图也无需下载非常大的地图包，可通过缓存解决，到哪儿下哪儿，使用更灵活。

如今，嵌入LBS功能的应用越来越多，这是移动设备相较于台式PC的最大优势之一，HTML5能进一步扩大这一优势。设计师应思考如何在自己设计的应用中运用该功能。

4. Canvas绘图，提升移动平台的绘图能力

使用Canvas API可简单绘制热点图，以收集用户体验资料。它支持图片的移动、旋转、缩放等常规编辑。

Canvas具备2D和3D绘图功能，同时还支持SVG向量图。

对于设计师而言，图片的移动、旋转、缩放等操作只是基础，利用Canvas自己绘图也并非难事，关键在于思考如何运用这些功能。

5. 专为移动平台定制的表单元素

在浏览器中，HTML5表单元素与对应的键盘配合使用十分便捷。只需简单声明 <input type=”email”> ，即可完成对不同样式键盘的调用。

设计师在使用时，记得告知研发同事相关情况。

6. 丰富的交互方式支持

HTML5能提升互动能力，支持拖拽、撤销历史操作、文本选择等操作。同时，它还具备Transition（组件的移动效果）、Transform（组件的变形效果）以及Animation（将移动和变形加入动画支持）等功能。

HTML5提供的交互方式丰富多样，设计师可根据需求选择使用。

7. HTML5使用上的优势

• 成本优势：HTML5具有更低的开发及维护成本。
• 性能优势：它能使页面更小，减少用户不必要的支出，同时性能更好，耗电量更低。
• 升级优势：方便升级，用户打开即可使用最新版本，免去重新下载升级包的麻烦，在使用过程中可直接更新离线缓存。

设计师需要了解用户需求，以及HTML5能为用户提供的功能。

8. CSS3：视觉设计师的辅助利器

CSS3支持字体嵌入、版面排版以及令人印象深刻的动画功能。它具有更有弹性的选择器（Selector）、嵌入式字体（Webfonts）、多样化的排版选择（Layout）、圆角、渐变、阴影（Stlying radius gradient shadow）以及边框的背景支持（Border background）等特性。

使用CSS3完成部分视觉工作，载入速度快，可节省代码及图片，为用户节约带宽。设计师应摒弃一个界面使用几十张素材图的方式，借助CSS3提高工作效率。

9. 实时通讯

以往网站受HTTP协议和浏览器设计的限制，实时互动性较差，只能通过一些技巧“仿真”实时通讯效果。而HTML5提供了完善的实时通讯支持。

设计师可利用HTML5在应用中嵌入实时通信功能，实现信息内容的实时提醒。

10. 档案以及硬件支持

在Gmail等新的网页程序中，已可通过拖拉方式将档案作为邮件附件，这得益于HTML5档案功能中的Drag’n Drop和File API。

随着移动应用对数据传输的需求不断增大，传统的路径选择方式过于繁琐，设计师可尝试使用HTML5的拖拽上传功能。

11. 语意化

语意化的网络能让计算机更好地理解网页内容，对搜索引擎优化（SEO）和推荐系统有很大帮助。

HTML5能使搜索更快速、更准确，设计师应了解这一特性。

12. 双平台融合的app开发方式，提高工作效率

目前，iPhone和Android的市场占有率迅速提升。未来，若要在先进的智能手机上撰写应用程序，要么选择使用Objective - C + CocoaTouch Framework撰写iPhone/iPad应用程序，要么选择Java + Android Framework撰写Android应用程序。若要同时支持两种平台，就需维护两套程式码，这对刚起步的小服务来说是不小的运维成本。

使用HTML5和CSS3撰写Web - based的应用程序，若要同时支持iPhone及Android，几乎只需维护一份程式码（少部分需根据客户端进行修改）。而且，若未来其他移动设备拥有支持HTML5的浏览器，同样的WebApp可直接增加一个支持平台。

Google的系列服务运用了HTML5中的cache、storage及database规格，实现了离线存取程式的效果。由于移动设备的网络连线不如桌面应用程序稳定，有时在移动中无网络可用，通过这些技术可让用户在无网络环境下继续使用webapp。这表明HTML5主要服务于Web应用，不会对全部app开发造成威胁，有利于不同类型应用采用不同的开发方式，提高开发的灵活性。