移动端h5页面设计实战.doc

移动端 H5 页面设计实战目录为什么要设计 H5 页面............................................................................................................. 2 赛程魔方 3D 旋转界面设计..................................................................................................... 4 双屏互动游戏设计.................................................................................................................... 8 资讯与游戏的结合设计.......................................................................................................... 11 刮刮乐在移动端互动游戏中的微创新.................................................................................. 15 互动调查小游戏的设计创新.................................................................................................. 19 设计小贴士.............................................................................................................................. 23 为什么要设计 H5 页面移动设备的普及给媒体和娱乐带来了一场革命。根据中国互联网信息中心( CNNIC ) 2014 年 7 月的报告显示,中国网民中,手机使用率达 % ,已经超过传统 PC 整体 %的使用率。其中,手机网络新闻的使用率为 % ,仅次于即时通信和搜索,远超其他手机网络应用。在资讯移动化的趋势下,观察近期各大门户在重大事件报道中的表现,会发现移动优先、产品社会化、交互趣味化是三个重要的趋势。其中,基于 HTML5 技术的移动 Web 页面(以下简称 H5 页面),较完美地融合了上述三种属性,成为当下最受关注的内容报道形态,也引爆了社交平台上的大规模分享行为。就像 CD 取代磁带成为一种更高效的音乐播放方式一样,数字文件也将取代 CD ,依此类推,智能手机也将会替代 PC 的一部分重要功能。尽管仍有争议,但不可否认的是,移动互联网时代已经到来,随着用户从 PC 向移动端的迁移,从大屏到小屏,从鼠标键盘到多点触控,移动端逐渐成为媒体报道的前沿阵地。一提起移动端,大家首先想到的就是手机上安装的移动应用,比如微信、腾讯新闻客户端、 QQ 浏览器等。我们称这些应用为原生应用( Native App ),因为它们是需要安装在用户设备上的软件,它们的代码和界面都是针对所运行的平台开发和设计的。这些原生应用能够最大程度地发挥用户设备的性能,例如使用存储空间实现离线阅读,利用图形加速实现界面动效,以及利用摄像头来上传图片,等等。但跟 Web 专题相比,移动应用的开发周期长,开发者需要将产品提交到应用商店供用户下载使用。以苹果的 iOS 应用开发为例,开发者在应用商店要发布应用,需要通过约耗时 8 天的人工审核。因此,把 PC 端的 Web 专题做成一个个移动应用是不现实的。除了原生应用之外,在移动端还有一种产品形态——移动 Web 页面。它源自于移动互联网诞生初期的 WAP 页面,有着和 PC 网页同样的优点:开发周期短、发布和更新方便。此外, 用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问,比原生应用要方便得多。但在 2014 年前,因用户渠道和设备性能的原因,移动 Web 页面的形态通常都非常简单,也很少有用户互动。 2014 年, HTML5 技术的普及、智能手机的更新换代和新闻客户端、微信等渠道用户的增长彻底改变了这一点。在移动端,要在网页上实现交互和动效需要借助 HTML5 技术(例如 CSS3 媒体查询、 CSS3 动画、 Canvas 等)。现在的手机浏览器大都支持 HTML5 的核心技术,例如对触摸事件和手势的响应、播放声音和视频、渲染 CSS 变换,以及获取设备的加速度传感器数据等。这些技术衍生了诸