H5不是High 5

徐少迟

2015年5月11日，相信不少人都收接到了一通“神秘来电”：选择“接听”后，五位“复仇者”轮番登场，企图与接听者进行一场“恶战”——其实，这是大众点评为《复仇者联盟2》上映制作的H5营销页面。精美的页面设计加上末尾的购票链接，在引爆微信朋友圈转发的同时，也促成了良好的转化效果。

相信对于绝大多数公关人来说，H5已经不是什么新鲜话题了——酷炫的页面效果、新鲜的交互方式，让很多公关人越来越倾心于H5。然而，在H5“华丽”的背后，是否存在着盲目跟风与虚假繁荣呢？

H5是什么？

如今在社交营销圈里，只要聊起H5，必会提到“围住神经猫”。

2014年7月22日上线后，这个基于H5、火爆于微信朋友圈的小游戏仅3天便创造了“用户500万，访问量超1亿”的纪录，更重要的是“这款游戏由一名美工及一名程序员仅用1.5天开发完成”——“围住神经猫”似乎上演了一出四两拨千斤的“奇迹”。

“神经猫”的一夜爆红，也使H5走进了广大公关人的视野。

“H5”全称为“HTML5”，是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（引自百度百科）。其实从学术角度去了解“H5”到底是什么，对于公关人来说并无必要。从业务角度来说，只需要记得H5页面“效果炫、交互强、成本（相对）低、对移动设备支持好”就好了。

其实早在几年前就已经有很多公司将H5运用在了品牌传播中，只是一直显得有些不温不火。而随着智能移动设备的普及，H5对于移动端良好支持的特性得以凸显，H5的走红也就不足为奇了。

别把H5当神药

“神经猫”一夜爆红，营销圈欢声雷动，似乎看到了品牌传播的新未来；甲乙双方蠢蠢欲动，一轮轮新的传播战役即将打响。

可是，纵观2014年7月底——“神经猫”上线至今，与“神经猫”同等量级的案例有几个？“神经猫”创造的是“新未来”，还是新一轮的“虚假繁荣”？

或许我们不应该过于乐观，曾几何时，大家一股脑地将精力投入在病毒视频、微电影、APP、Social等传播手段上，当这些手段并未取得想象中的良好效果，并已经“疲态尽显”的时候，H5出现了。

其实在此并非看低H5以及上述提到的各种传播手段，而是提醒大家思考：近到“神经猫”，远到“血馒头”，传播手段在短短几年内不断花样翻新，但是传播的目标只有一个——扩大品牌声量，解决品牌面临的问题。过于重视手段的运用、盲目追求热点其实是一种本末倒置。

近期，某著名汽车品牌推广了其H5宣传页面，讲述了品牌与车主间几个感人的故事，展现了其品牌内涵与品牌主张。在观看页面时，用户如果想观看下一个故事，则需要将前一个故事的内容看完。整个页面完整观看完，大概需要3分钟的时间——这还不包括页面加载的时间（笔者在WIFI环境下用了大约30秒加载）。

根据腾讯2015年5月发布的《移动页面用户行为报告》：“H5页面加载时间超过5秒会使74%的用户离开页面；只有不到50%的用户会浏览到第5页的页面，层级越深，用户流失越多。”可想而知，该H5宣传页面在无形中流失了多少用户。

既然如此，一段时长3分钟的视频是否会比H5展示效果更好呢？这样用户对当前内容失去兴趣，也可以选择“快进”；而在现在的情景下，除了“关闭页面”，用户没有任何选择。

举这个例子是想说明，不能将注意力仅仅放在形式的“炫酷”上，而应该冷静思考，客观看待各种传播手段：最火的未必是最好的，最合适的才是最好的。所以，不如回到起点——客户的需求是什么？品牌的问题是什么？产品、品牌的特性如何才能与传播手段相结合，达到最好的传播效果？

灵活运用H5

如果仅仅将H5作为“媒介”进行信息的传播，其实有些大材小用。如能将手机原生应用开发的思维应用于H5开发，你将发现一片新天地。

例如比较常见的会议辅助系统。利用H5页面，可以搭建一整套会议报名、签到、互动系统，达到扩大影响、降低成本、提升活跃度的效果。首先，可以向用户发送会议邀请函，利用精心设计的页面吸引关注；然后，通过邀请函中的报名表，完成线上注册；接下来，在会议签到时，也可以直接利用H5页面进行电子签到，从而减少现场签到排队的现象，提升签到效率及用户体验；最后，在会议现场，还可以利用H5页面进行抽奖、提问、摇一摇等多种活动，活跃现场气氛。

再如定制化的H5贺卡。创意广告公司AKQA在去年圣诞节推出的圣诞水晶球贺卡，利用了重力感应及3D效果，配上精美的画面与背景音乐，给予了用户十分新奇的使用体验。在最后，用户还可以输入自定义祝福语，并通过社交媒体转发，形成了良好的传播效果。

也别忘了像“神经猫”一样的H5小游戏——知乎为推广其新书《金钱有术》而制作的“财务包子铺”小游戏，可以算得上是2014年的另一个亮点。“财务包子铺”的游戏形式很简单，用户只要点击不同选项，即可推进游戏进程。该游戏各种“脑洞大开”的结局，也使得“强势植入”的产品显得不那么突兀。据报道，游戏上线3天后，《金钱有术》便成为了亚马逊图书销售总榜冠军。

值得一提的是，2015年1月微信推出了JS SDK，开放了包括分享、图像、地理位置、微店、微信支付等11个接口，这意味着H5页面将拥有更加强大的功能，也为我们提供了更加广阔的想象空间。

如果确定要用H5

在一般情况下，公关公司会将技术搭建的工作外包给第三方公司。如果是第一次进行这项工作，可以参考以下工作流程：

1.确定需求，绘制原型图。这里的“需求”是指页面需要实现的逻辑与功能。确定需求后，需要用草图体现出页面上可能出现的元素及预计实现的功能。需要强调的是，要将页面之间的逻辑梳理清楚，尽可能将所有可能出现的页面都绘制出来。在这个步骤，可以和技术方的项目经理协同进行，因为技术方在技术搭建方面经验更丰富，考虑更周全，不容易遗漏页面；而你对于客户需求更加了解，所以对于需要实现的功能也更加了解。

同时，需要和技术团队沟通好服务器、微信公众账号类型，如是订阅号还是服务号、是否认证等问题，这些都会影响到接下来的开发与推广。

2.设计效果图及动态效果。在客户确认原型图后，需要由设计师根据原型图设计效果图及动态效果——也就是页面最终的展现形式。这里不得不说一下适配问题：对于iPhone来说，由于型号较少，页面适配相对容易；而安卓、WP及其他系统的手机屏幕尺寸可谓“千变万化”，所以对于非iOS系统的手机，会有可能出现页面图片变形、错位等问题。在进行效果图设计前，请一定与技术方进行沟通，了解所需提供的文件尺寸，方便其进行画面适配的调整。

3.技术开发。在客户确认效果图后，就可以将效果图的分层文件发送给技术团队，进行技术开发了。在技术开发前，一定要设计好详细的时间表，确定每一阶段完成的成果及时间点，并留下充足的时间进行测试及BUG修改。

4.上线推广。利用尽可能多的方式——如二维码、微信菜单、微信页面中的“阅读原文”、KOL等，将页面推广出去。

如果不是与专门的团队进行定制化开发，可以考虑利用一些第三方平台——如“MAKA”、“初页”、“最酷”等进行页面搭建。这些平台的基本功能都是免费的，但是会出现这些平台的Logo或推广页面，付费后即可去掉。即使是定制化开发，在向客户提案的时候，也可以将效果图上传到这些平台进行演示，提升提案的生动性。

另外，微信会议系统、微信贺卡等，均已有成熟、稳定的第三方平台可以使用。利用得当，可以省却可观的资金及时间成本。