土豆妹儿

1.为什么要设计H5页面？

一提到移动端，大家首先想到的就是手机上安装的移动应用，比如微信、QQ等，我们称这些为原生应用，因为他们是需要安装在用户设备上的软件，他们的代码和界面都是针对所运行的平台开发和设计的。

除了原生应用之外，在移动端还有一种产品形态——移动Web页面。他们有着和PC网页同样的优点：

(1)开发周期短、发布和更新方便。

(2)用户只需要借助手机浏览器或者内嵌手机浏览器的应用就可以访问，比原生应用方便得多。

(3)与原生应用相比，H5页面的传播性和灵活性使它更加符合媒体产品对时效性和差异化的要求。

在移动端，要在网页上实现交互和动效需要借助HTML5技术。通过HTML5实现交互效果，通常比原生应用要消耗设备资源，因此设备性能就成为H5页面效果的一大瓶颈。不过现在大多手机基本达到展示H5页面的要求。

下面来举例说明H5页面的运用，并可扫描二维码体验相关H5页面。

2.H5可视化资讯报道在传播中的使用

(1)赛程魔方3D旋转界面设计

[赛程魔方]设计利用HTML5的CSS 3D智能旋转方案完成多个页面的切换方式，以达到贴合“魔方”的项目概念。

(2)时尚产品设计中的情怀

[上下]上下的精髓为“东方雅致生活”。字体采用了变形的宋体，色彩上提取品牌自身的主色——朱红与淡棕色，设计元素提取圆形和竹子，凸显沉静的中国气质。

(3)[来翻天后牌子]选择树形结构（将起点人物突出，描述周边人物与之的关系）作为关系网样式的基础，根据距离起点任务的关系层数，制定了“王”的环绕设计。

3.H5互动游戏与媒体的结合

2014年多款H5小游戏一度刷屏，引发热议。众多H5小游戏都有一个共同的设定，即分享到移动端最具人气的微信朋友圈，和小伙伴们比比高下。利用社交圈的攀比心理，是该类游戏成功的一大关键。而且点击链接直接可以玩小游戏，无需下载消耗成本，游戏往往简单也无需学习成本。

(1)双屏互动游戏设计

双屏互动通俗来件就是通过手机与其他媒介产生交互关系并获得新鲜娱乐体验，它可以是PC、Pad、电视、户外屏幕等多种终端。前3年微博火热的时候，一些发布会上出现的微博墙是某种意义上的双屏互动。还有最近的弹幕视频，手机操控电视，双屏互动正在慢慢侵蚀到真实生活中。

（双屏互动在某些大型活动上会给人极大的参与感）

以下这款小游戏[ola快跑]是基于移动端及PC端联动的双屏互动跑酷射门类游戏，是世界杯期间PC端和移动端同时嵌入的游戏。

[ola快跑]的游戏交互形式分为两种：

一是手机端直接操控人物行为，二是PC端用手机操控PC界面行为。