H5案例分析和场景应用

对于H5这个名词想必大家已经很熟悉了，就在2014年，一项本来还不太成熟的技术在微信的社交舞台下大放异彩，让我们见识了“移动+社交”爆发的巨大能量。

相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势，品牌营销在数字和移动方面的投入在逐年上升。
这样的结论：习惯了24小时手机陪伴的生活，而品牌最关注的就是消费者“在哪”的问题。

显然，移动营销已是大势所趋，我们可以看到已经广泛应用的签到、二维码技术，正在兴起的iBeacon、微信的Wifi连接，还有就是本文将与大家分享的H5技术。文章有点长，可能需要费些时间阅读，全文包括：H5技术简介及其特性，怎么实现、有哪些应用场景，以及如何推广等内容。

什么是H5？

    很多人对H5的理解都是停留在用户层面，邀请函、小游戏、品牌展示、抽奖等等。

其实如果上升到营销层面的话，仅在用户层面去思考是远远不够的，因为任何传播都要考虑有效性的问题，如果100w pv带来的只是刷屏效果，而对品牌带不来任何有效转化，这样的传播显然是不成功的。

对于事物的理解，如果不能从多个角度去分析，我们很难跳出原有的思考框架去看问题。因此，这篇文章我想以更原始的角度，从H5这项技术本身为出发点去阐述；事实上互联网技术的发展本质上也是需求驱动的，程序语言其实是高于应用层面的产品。以下的内容希望不会太晦涩，也希望能对你有所启发。

H5的最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS。它可以轻易地移植到各种不同的开放平台、应用平台上，打破各自为政的局面。这种强大的兼容性可以显著地降低开发与运营成本，可以让企业特别是创业者获得更多的发展机遇。

1.H5能在营销中做什么？
2.它的传播阵地在哪里？
3.如果要启动一次H5传播，该以哪些先例为标杆？

一、功能与目标

首先从功能与设计目标来看，H5 专题页主要有以下 4 大类型：

活动运营型

为活动推广运营而打造的 H5 页面是最常见的类型，
形式多变，包括游戏、邀请函、贺卡、测试题等形式。
与以往简单的静态广告图片传播不同，如今的 H5 活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。
从进入微信 H5 页面到最后落地到品牌 App 内部，如何设计一套合适的引流路线也颇为重要。

案例：01.大众点评为电影《狂怒》设计的推广页便深谙此道。复古拟物风格的视觉设计让人眼前一亮，富有质感的旧票根、忽闪的霓虹灯，配以幽默的动画与音效，恨不得每个选项都点一遍。围绕「选择」这个品牌关键词，用引人入胜的测试题让用户把人生当作大片来选择，选到最后一题引出「大众点评选座看电影」，一键直达 App 购票页面。即使明知是软文也忍不住带着「矮油不错，这个页面有点 diao 噢」的心情点击了分享。
02.百度——2014百度世界
入选理由：美轮美奂的邀请函
集视听多重感官于一体的H5还改造了千人一面的邀请函。

标杆案例如今年的百度世界大会，将会议邀请和星空元素紧密结合：在一片唯美的星空背景之上，每划过一道流星，就浮现出一位意见领袖对移动互联网的看法和愿景，最后是会议的时间地点，并可进行在线抢票。（#纳尼，又是百度的？！TOP君就不展开说了，夸那么多一分钱没收到何必呢？#）

品牌宣传型

不同于讲究时效性的活动运营页，品牌宣传型 H5 页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。

案例：01.伴随着浪漫的钢琴旋律，《首草先生的情书》以一位男士的口吻娓娓道来在成长历程中对妻子的爱与愧疚，最后引出「首草——滋阴圣品，爱妻首选」的宣传语。设计上采用回忆般的黑白色调，简单的照片加文字，配以花瓣掉落、水面涟漪等轻动画，渲染出唯美优雅的气氛。「首草」这个全新的高端养生草药品牌，用 H5 打出了一副走心的情感牌，让用户记住了「半生只为你」的爱妻品牌形象。
02. 巴宝莉从伦敦到上海的旅程
入选理由：堪称互动体验派的集大成者
前面几个例子都是“专业人才”，在技术的运用上各精一道，或是触屏，或是多媒体，或是重力感应。当然还有集各项技术于一身的“全才”，这里最有名的要数巴宝莉“从伦敦到上海”的旅程。

产品介绍型
聚焦于产品功能介绍，运用 H5 的互动技术优势尽情展示产品特性，吸引用户买买买。
案例：01.雷克萨斯这一类型的 H5 页面多见于汽车品牌，LEXUS NX 是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的 7 大特性，宏观和微观都照顾周全。
02.腾讯理财通
总结报告型
自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用 H5 技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
案例：01.《京东的十大任性》用 10 张横屏页面讲述了京东在 2014 年的十大成就，视觉设计上采用简洁的扁平风插画，加入纸面质感形成复古卡片拼贴感。不同页面间通过手指滑动实现流畅的视差滚动效果，最后还有刘总这个小彩蛋。一口气看完后大概就了解 2014 年京东都干了哪些大事。
02.可口可乐中国可持续发展报告
可口可乐我们在乎
入选理由：这是一份“会动”的CRS报告
杂糅图片、文字和视音频等多媒体是H5的又一大优势。而当这种生动的形式与一些严肃的内容相遇，往往发生出人意料的化学反应。

以前段时间席卷朋友圈的可口可乐“我们在乎”为例，它的真身本是一份肩负企业CSR重任的“可持续发展报告”，内容虽力求形象但扔难掩厚重。为了在社交时代更接地气，可口可乐尝试用H5为报告“瘦身美容”：选取报告中的部分核心数据，共十五页画面，直观展现可口可乐的努力，变成适应网络传播特点、特别是移动端观看及分享需求的形式。

二、形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。以下列举几种常见的 H5 专题页表现形式：

简单图文／新闻篇
简单图文是早期最典型的 H5 专题页形式。「图」的形式千变万化，可以是照片、插画、GIF 等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

案例：01滴滴打车这个案例就是典型的简单图文型 H5 专题页，用几张照片故事串起了整套页面。视觉简洁有力，采用整屏黑白照片，点缀以滴滴的品牌橙色。每切换一张图片，文字就渐隐浮现，没有其他互动形式，让观众聚焦于内容，通过陌生人之间的真情联系来塑造品牌的正能量形象。
02. 腾讯－马航MH370客机消失的第365天
相信各位看官都看累了，但是这最后一支案例一定不要错过，在观看了大量同质化的案例时，我还是被这支H5给吸引住了，因为我从来没有想象到新闻事件原来也可以和H5结合到这种程度，完全改变了我对以前新闻传播的固有意识，或者换句话说，也许H5就是未来几年新媒体新闻投放的努力方向！也许，这也将是对新闻传播方式革命的开始～

节日/邀请函
每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种 H5 形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
案例：01.央视春晚2015
入选理由：内容的共鸣才是王道
当然，不管形式如何花样百出，最终还得仰仗过硬的内容才能成大气候。

典型例证就是央视春晚的“家和万事兴”：“我们对世界微笑，彬彬有礼，却带着一身疲惫和抱怨回到家里；我们在外拼命售卖自己的观点，却懒得和父母解释我在忙什么（#讲真，内敛含蓄的TOP君听这台词肉麻兮兮的#）……”H5从一个与父母聚少离多的小故事讲起，通过催人泪下的文案和煽动人心的音乐引发共鸣，然后与“家和万事兴”的主题紧密贴合，最终号召网友“按手印”表达支持。
02. 2015母亲节－妈，我的朋友圈里有个你
情感牌，更贴近生活，节日特性

问答/测试
问答形式的 H5 页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。

案例：01.与本文开头一样也是大众点评的项目，这次是为姜文的电影《一步之遥》做持续推广，让用户为姜文的代表作评分。视觉设计依旧出彩，开脑洞的创意和动画设计令人叫绝（一定要扫一扫体验下！）。延续了怀旧大字报风格，字体、文案、装饰元素等细节处理也十分用心。问答形式的 H5 页面能做到这个份上也是蛮拼的。
02. 知乎－财务包子铺

注意：这类H5刷屏，也比较容易理解，大家都有好奇心嘛！

测试类的虽然易火，但是请大家注意，微信公众平台禁止签类测试，包括但不限于发布新年签、大学测试、星座测试等信息，一旦发现，将视情节对违规公众号删除关注用户（粉丝）及封号、封域名处理。

上周六，因两个心理测试类H5作品违规，微信短时间屏蔽了Epub360域名下H5作品分享朋友圈，经过与微信沟通协商并对作品进行了整改后，当天下午已经恢复正常。对此，提醒大家自律和相互监督，不要违反微信朋友圈规定。

游戏
从「围住神经猫」、「看你有多色」等单纯小游戏再到杜蕾斯「一夜 N 次郎」（即山寨版「别踩白块儿」）等品牌植入式小游戏，H5 游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。

案例：01. Same 在圣诞节推出了一款名为《圣诞老人拯救计划》的 H5 小游戏，操作非常简单，只需用手指交替上滑，把角色的脖子向上拉到无限长，游戏会记录你拉的最高距离，跟朋友比一比谁比较长。界面清新可爱，与 Same 的招牌画风一致，游戏角色也是 Same 的品牌角色，通过幽默恶搞的游戏向用户传达 Same 独到有趣的产品文化。

现在市场上做H5的主要有以下几种类型的公司：

1、公关公司——这类公司离客户最近，他们承接客户的活动比较多，一般是受客户要求或主动向客户推荐H5的方式来做，但是公关公司基本没有技术人才，所以大部分都选择外包。我们的一些客户就是公关公司推荐过来的。

2、广告公司——H5是移动端一种比较好的广告展示方式，有的广告公司在一些项目上也会把H5外包出来做。这种都是广告公司提供创意，然后技术和设计的部分外包给第三方做。

3、互联网公司——有些互联网公司也会自己开发h5，做一些传播性的东西或者把自己的产品H5化。

4、微信开发外包公司——以前的建站公司或者微信菜单开发工作室，看到H5比较火爆，也开始做这块业务，但是还没有形成规模。

5、个人开发者——接公关广告公司外包项目的H5开发者，据我们了解,一些个人开发者的月收入已经达到10万左右了，这主要还是得益于客户旺盛的需求和公关广告公司这方面人才的匮乏。

6、H5模板网站——这是比较专注做h5的公司，在2014年还比较火，也挣了不少钱，但是到2015年被定制化业务冲击的，许多公司已经开始逐渐实施免费服务了。

7、H5生成工具——这跟模板类公司差不多，但是活的不如模板公司，而且盈利情况也不理想，不过最大的好处就是这种类型的公司可以走融资路线，这也是一种挣钱的模式。

8、游戏开发公司——目前许多H5游戏开发公司并不挣钱，很多公司只能在游戏还没火之前，接一些H5的外包业务。但这毕竟不是长久之计，人才流动比较大。我们团队就接收了不少开发者。

9、H5平台公司——这种类型公司走的路线跟模板类差不多，就是平台化概念，实际上大部分都在亏损，不过幸亏融资情况都很不错，所以这种类型的公司在融资之前也会做些外包的业务。

10、精品定制化——未来应用一开始的定位就是这个方向，我们希望能成为这个行业的定价方向标，大家以后定价都能根据我们来参照，比我们做的好的定价更高，比我们做的差的定价更低。未来应用甚至考虑做一个价格公示，让这个行业有个透明公正的价格体系。

估计这个行业里应该有上千家的第三方提供制作H5服务的公司，我们主要是以定制化精品H5为主，其他公司大部分都是提供模板化服务的。几个月前模板公司还是挺挣钱的，收费都挺高。客户刚开始没有见过更好的定制化产品时，觉得模板就非常酷了，能够满足他们的需求。但是在后来定制化的产品逐渐多起来时，客户的胃口就变刁了，更多的定制化的需求正在苏醒过来。而且模板的技术门槛并不高，很容易获取。现在许多做模板的公司都实行免费，我想这应该是主要原因吧。再不免费的话，就留不住客户了。

我们可以很清楚的看到，这个市场在逐渐火爆的同时，也越来越混乱，越来越不规范。无论是第三方开发公司，还是广告主，在面对H5营销时都会遇到这样那样的问题，或者说有这样或那样的误区，现在让我们看看这里面的坑究竟在哪？

1，幻想凭一款H5能一夜成名
期望高、投入少，许多市场营销人员，特别是老板，都希望靠一款没有任何推广投入的H5一夜成名，但现在这种情况在微信朋友圈里已经不可能出现了。
H5页面的推广方式乏善可陈，无外乎朋友圈分享和微信公众号推广，但目前的H5营销无论是在表现形式还是内容创意上，依旧面临着很大的挑战，同时微信朋友圈的用户对日渐增多的泡沫信息感到疲劳，产生了某种程度上的抵抗力；而微信公众号的暴增则让打开率和阅读量持续走低，想让一款H5一夜爆红的可能性不是没有，但的确是越来越小了。在整个H5的产出中所占的比例也会低到令营销人员所难以忍受的地步。

2，营销推广只索取的态度无法长久
未来应用经常建议客户投放微信广点通广告，我们觉得在微信里传播就要遵守微信的游戏规则，不应该只想从微信里摄取东西，而应该转变思维，想想我们给微信贡献了什么？我们给用户带来了什么？你给微信贡献的越多你的回报也会越大。如果有一款H5之所以能在微信朋友圈里成功，主要还是创意和制作人要始终站在为微信用户思考的角度来制定H5策略的，我们要做让用户喜爱的“广告”，用户才会分享转发，而不是靠强制性的要求和诱导，这种结果最终会被用户投诉，甚至被封。

3，H5本身还存在技术问题
作为一项本来还不太成熟的技术，H5是在微信的社交舞台下才大放异彩的。目前看，H5的问题依旧比较多，技术上还有很多不足需要改进，比如页面切换白屏、下拉菜单不流畅、多个音频播放不流畅、移动设备件的接口API少等，无法扫描二维码、无法用语音输入、无法一键分享到朋友圈。这些对营销人员来说，都是一个个掩藏在脚下的深坑，一不留神就掉进去了。

4，易抄袭且缺乏知识产权保护
如果你运气，通过千辛万苦做一款好的H5应用，例如像神经猫那样，那么比你更
开心的一定是其他抄袭者，他们可以轻易的把你的H5抄下来，换成他们的域名挂上去，然后再把广告联系方式改成他们自己的。神经猫、2048等就衍生出许多版本，大部分人可能都没有访问过原版（因为抄袭和模仿者太多），抄袭的轻者换域名，更厉害的是把你的创意拿去然后在短时间内做一个比你更好的游戏或者应用，让你的泪儿哭干。

5，作品同质化现象严重
很多人对H5的理解都是停留在用户层面，邀请函、小游戏、品牌展示、抽奖等等，但大多数作品的同质化现象很严重，无论是形式上，还是内容创意上。这对营销人员和制作人员的要求逐渐在提高，挑战也越来越大，想随随便便做一款能够引起注意的作品并不容易。

6，寄人篱下不确定性大
H5之所以能一下子爆火，微信的功劳最大，但是微信正把H5最优质的入口收紧——朋友圈分享红利正在逐渐消失。这里作品的特点是受平台政策影响较大，未来具有不确定性。微信在近期出台了针对朋友圈分享的政策限制，诱导关注与分享，初犯将会面临封号30天、拦截链接、删除诱导增加的粉丝和关闭流量主的处罚，二次违规将直接永久封号。而且转发量超过一定数量后微信就会屏蔽朋友圈，意味着未来微信里再也不易出现花费很少的钱获得流量破千万的H5。
目前需要注意的是：1）、分享的图片和自定义接口已变更，请注意修改；2）、请勿在标题中涉及分享赢大礼、100%中奖等恶意诱导的关键词；3）、分享页面需部署在拥有ICP备案的域名上。

7，机型成千上万适配难度大
刚刚开始做H5的企业面临的第一个问题就是，机型适配，由于手机的型号繁多，系统、屏幕都不一样，所以在显示和一些功能性的接口开发时都会耗费一些时间，如果你是刚刚入手希望能做个热门的h5应用，那么初期机型的适配会让你吃一番苦头，不过幸亏这个还是可以解决的，比其他前面的那些坑，这简直是小巫见大巫。