前言：

“H5不行了！” “H5已经被做地烂大街了！”

唱衰H5的论调在它诞生的两年后便不断浮现。

但质疑反而催化着它的爆发。全景沉浸、一镜到底、交互动效......一次次的惊喜让营销人欲罢不能，竭尽全力去探索新的可能性。

2014年到2018年，从“H5是什么”到“什么都要做个H5”。H5仿佛长在朋友圈里的庄稼，一茬又一茬地收割着流量红利。

本文将带你回顾H5自诞生以来的发展历史，为你梳理哪些元素被继承并不断优化，哪些元素被无情淘汰。

大浪淘沙，留下的才是精华。

腾讯2013年财报显示，微信月活跃用户达3.55亿，飞速赶超新浪微博，直逼QQ积蓄了十几年才达到的用户数。真实的用户、精准的信息、低获客成本，微信成为当时新的流量洼地。

但封闭、私密的产品特性，让带着“公共”性质，追求“覆盖”的营销推广，看起来略显尴尬。“营销掘金者”们只能被圈禁在“摇一摇”“漂流瓶”“公众号”等地方，始终无法走进用户的社交圈。

图文成为攻入用户朋友圈的唯一方式。但静态图片和文字在吸引用户目光上存在天然缺陷，大量同质的、毫无新意的图文内容也对用户造成严重打扰，被用户判定为“垃圾”直接过滤掉。

图文之外，是否有其他适合朋友圈展示的方式？当时，微信4.0版本已经开放了第三方接口，外部APP的内容可以接入微信平台，富媒体展示成为一个全新的值得探索的方向。

但第三方接入步骤繁琐，且面临着适配问题。在解决这些问题的过程中，人们发现了一个完美契合手机端、轻量却能展示丰富效果的形式——H5。自此，开启了一个全新的微信营销时代。

2014萌芽

攻克“注意”和“社交”两个底层壁垒

2014年上

“能帮我做个会动的PPT吗？”

作为最早登录朋友圈的一批作品，特斯拉的这支H5保留了H5最初的模样：精美图片+简单的翻页动效，最终的呈现效果却超越了当时人们对微信营销的想象：原来还可以这样玩！

然而你可能不知道：虽然现在我们有无数个在线网站，可以快速生成这样的H5，成本基本为0，但在4年前，开发一个这样的页面却需要将近10000元。

接下来的5月份，可口可乐推出的《分享快乐128年》，将这种“动”又向前推进了一步。

这支H5页面上的每个元素都可以动。而且相较于原本的单页翻动，更注重跨页连接，一根贯穿画面始终的“红线”，让画面在视觉上更加流畅和统一。

同期，还有一支H5的动效不容忽视——Burberry 的《从伦敦到上海的旅程》。这支H5是当时交互体验的集大成者。

“摇一摇”，进入H5页面；

“点一点”，探索油画般的伦敦清晨；

“擦一擦”，使屏幕上的晨雾散去；

点击“河面”，河水会随之泛起涟漪；最后点击屏幕上的白点，抵达终点上海。

H5的“交互”自此才有了和PPT不一样的含义，所有的动效都是基于用户操作，“为你而动”，撩动用户进行更深度的参与。

2014年下

“给我做个神经猫那样的小游戏！”

H5虽然以惊人的速度在进化，但2014年上半年始终没有达成“刷屏”成就。“社交”成为H5继续发展必须突破的一个壁垒。

而这个壁垒，在2014年7月被七个字轻松击破——“简单好玩能攀比”。这七个字来自小游戏《围住神经猫》的制作团队，是团队为神经猫小游戏定下的基调。上线48小时，PV达1026万，即使放在今天也是不俗的成绩。

现在看来如此简单的七个字，却为当时苦苦无法进入社交圈的H5成功地植入了“社交”基因，打通了朋友圈的“分享链”。

满屏的“我没有围住它，谁能帮个忙”和“我用X步围住神经猫……你能超过我吗”，撩拨地微信用户欲罢不能。

其后，各大公司和品牌火速跟进，全网都开始流行起做H5小游戏。

“污妖王”杜蕾斯的《一夜N次郎》定制感最强，这个H5山寨了经典游戏“别踩白块儿”，将黑白块替换为五颜六色的杜蕾斯套套，操作可谓骚气十足，从题目到游戏内容都赚足了眼球。



不像杜蕾斯这样自带流量怎么办？在一批模仿者中，我们还发现了一个给自己加成的独特姿势——蹭热点。

8月份，正值柯震东“出演监狱风云”（吸毒被捕事件），一款名为《全民找祖名》的H5小游戏借这个社会热点脱颖而出。



“虽然柯少向龙叔保证不会带坏房祖名，但龙叔实在不放心，现在请求你帮忙在一群柯震东的头像里捞出唯一一个房祖名”。

然而，在快速更迭的移动互联网时代，H5小游戏的热潮仅持续了不到半年，就悄然退去。不过不用怕，H5很快又找到了挑逗消费者的新姿势。

10月份，可口可乐推出名为《北极熊出没，求合影！》的H5，提供了多个场景、多种动作供你选择合影，成为“晒照片”流派的先行者。



11月份，H5届还刮起了收集“指纹”的风潮。

其中，央视春晚节目组发布的以“家和万事兴”为主题的手印收集H5最受瞩目。

扎心的文案+简单的操作，H5上线24小时便收获322万网友的支持。这是央视春晚首次设置新媒体互动板块，堪称传统媒体和新媒体在对撞中融合的缩影。

在指定位置扫描指纹即可表示支持

12月份，出现了最早的年度总结H5——网易娱乐出品的《二零一四 娱乐圈画传》，收录了文章姚笛出轨、韩剧《来自星星的你》爆火、柯震东吸毒被捕等2014年关注较高的娱乐圈事件，辛辣的文案，泼辣的笔触，别具一格的漫画风令人耳目一新。

自此，每年的“娱乐圈画传”成了网易娱乐的年终保留项目。但由于在呈现形式上并无突破，2014和2015年的娱乐圈画传都没能爆火。

直到2016年，独特的“画中画”形式才将这一项目打造成爆品。

2015成长

呈现形式井喷，元素拆解殆尽

2015年

“还有什么形式是别人没用过的？”

1月份，朋友圈就爆款频出。

天天P图的H5——《全民COS武媚娘》，让“晒照片”完成最终进化。“上传照片-美化-分享”，新增的“美化”环节让消费者分享照片的最后一丝负担荡然无存。

借助这个H5，诞生半年默默无闻的天天P图，火速登上亚太区APP榜首。



大众点评的H5——《我们之间就一个字》，大胆地玩起了“文字游戏”。

“金、本、欠、梦、日、朋、拼、赞”，精选代表友谊的汉字，每页一字，并结合文字的含义配以动效。终页一个“聚”字，引出大众点评“年底聚餐团购”的信息。最终，页面访问量超300万。

2月份，测试类、答题类、双屏互动纷纷亮相。

UC浏览器的H5—《颜值测运势》，用户上传一张个人照片，系统便会自动生成一个评分，此外还会分别评定“桃花”“财运”“健康”的星级，并在照片下附上一句评语，比如“桃花满盈，来年可得一人心，恩爱两不疑”。



杜蕾斯2月初推出答题模式的H5《恋爱模考》。

2月中旬情人节杜蕾斯又推出H5《唯你所爱》，这是H5届首次出现双屏互动，即需要两款手机同步操作和呈现画面。页面设计十分唯美，风声虫鸣的音效清新可人，充满浪漫气息。



5月份，大众点评的一支H5——《这个陌生来电你敢接吗？》，又开启了场景模拟的新风潮。

打开首页，便看到一个陌生号码来电，按下接听键后，会发现来电不过是一个场景模拟。随后根据剧情推进点击屏幕，会出现“击碎屏幕”的效果，最终屏幕完全碎裂，引导到购票页面。

其后，场景模拟类H5频频出现。

6月份腾讯视频为综艺节目《我们15个》做的推广H5《这手机是谁的？》，以及7月份美特斯邦威的《李易峰邀请你进行视频通话》、《小时代4》的《时代姐妹花，邀你来撕逼！》、支付宝的《太误事报》等，都是此类H5的跟进，只不过模拟的场景从来电变成了手机应用界面、视频通话、微信聊天、报纸等。

6月份，虚拟场馆类H5首度面世。

杜蕾斯创建了第一座H5中的虚拟场馆，345块面体、61253个圆心、254731条直线、65486次交叉，永久在线。

这座场馆非常完整，有入口，有前言展板，有回廊，有楼梯，以及一个洗手间和一个纪念品商店。里面正在举办“液体主义群展”，展出了12位艺术家的作品。虽然这座场馆并非实体，但却能给人身临其境的感觉。



8月份，一支主角为吴亦凡的H5找到了更高级的展示方式。

腾讯游戏的这支名为《吴亦凡即将入伍？！》的H5，打开就是腾讯新闻的页面，仿真度可谓100%，包括最后的视频通话，走的还是场景模拟的老套路。但之后吴亦凡从新闻视频中跳出来，人和页面的互动着实令人惊艳。从H5诞生到现在，人们终于能够发出第二次惊叹：“原来还能这样玩！”

但这支H5作为此类风格的初次尝试，在变化的丰富程度和制作的精致程度上都有欠缺。腾讯视频11月份推出的同类风格H5——《V视界大会移动端邀请函》就精进了很多。

9月份，录制个人语音也被开发为H5的一种形式。

相宜本草在中秋节推出的《乡音祝福》H5，搜集了来自全国各地老乡的语音祝福，同时你也可以录制一段自己的乡音祝福并分享。



12月份，网易推出了根据用户姓名定制专属内容的H5。

网易娱乐推出的《我要上头条》H5，用户在页面中输入自己的姓名和性别，即可生成一条以自己为主角的网易娱乐新闻。



2016 & 2017繁荣

高端玩家入局，技术内容双升级

2016年

“我要一个酷炫的大制作！”

2016年腾讯值得一提的爆品共有4款：1月份的《我和微信的故事》、7月份的《穿越故宫来看你》、10月份的《韩寒说的比唱的好》，以及11月份的《薛之谦2个月没写微博段子，结果憋了个大招…》。

《我和微信的故事》开启了年度总结H5中的“数据盘点型”流派。

除去首页引导点击屏幕外，仅仅三页的H5，展示了用户与微信的点点滴滴：你是什么时候第几个注册微信的，第一条朋友圈是什么时候发的，第一个好友是谁，在2015年新加了多少好友，收获了多少个赞等等。

这些与“我”息息相关的信息，帮助用户找回了久违的回忆，引起了用户的疯狂刷屏。



《穿越故宫来看你》在呈现形式和内容创意上可谓双高，“鬼畜风格”令人耳目一新。

大明皇帝唱rap、玩自拍、用表情包、发朋友圈，页面、视频、群对话场景流畅连贯，无缝切换。

但这其中必然有“故宫”IP效应的功劳，H5的风格和故宫潜心打造的鬼畜风格相当一致，这本身就是已经被验证的大众HIGH点。

  

以韩寒和薛之谦为主角的两支H5在表现手法上和吴亦凡的那一支差不多，不再详述。但整体看下来，可以发现：腾讯的爆款H5的一大特色就在于量身打造。

前面提到的4支H5，加上2015年的《吴亦凡即将入伍？！》，内容上风格各异，但却完美贴合H5主角。明星IP自带流量，因此围绕其做内容定制不失为一条制造爆款的捷径。

阿里的2016爆款都出自其电商平台，6月份的《淘宝造物节》以及10月份的《双11邀请函》。

这两支H5在呈现方式上使用的是同一种，三维全景世界，但《双11邀请函》对《淘宝造物节》既有继承又有发展。

 

《淘宝造物节》运用的是漫画形式，在3D效果上的逼真感略逊一筹，而《双11邀请函》融入了时下最流行的VR技术，立体渲染更强烈，画面也更加精致。

“一镜到底”的运用在凸显空间感的同时，更让人产生强烈的时空穿梭感。据透露，这个由225张素材图精心构建的天猫世界，H5制作费用超过百万。

网易做内容起家，它的爆款也最先出现在新闻领域。

8月份，《里约大冒险》，紧贴里约奥运会热点；12月份，《二零一六 娱乐圈画传》，依靠独特的“画中画”形式爆红。

其中，《里约大冒险》运用的互动形式极为新颖，给用户带来了更深的参与感。

用户首先要在空白画布上画一个小人，随后用户创造的小人会在手机和模拟的朋友圈里进行一场大冒险，用户需要随时制造“绳子”“降落伞”等工具来帮小人渡过难关。

这种画小人的互动方式并非网易首创，早在一个月前，361°的H5《我给你画了个动画，看完可别哭啊！》中已经出现过，操作手段如出一辙，画一个小人，并在过程中为其画上各种工具。

但361°的H5反响平平可能就是输在内容上，从题目到内部文案、故事情节的完败。

这一年虽然有腾讯、阿里、网易三位高端玩家形成的重压，但也还是有少数几个品牌的H5突围。

他们的成功显得有点沉重，要么拼财力、拼资源，要么拼制作团队的耐力和毅力。

拼团队耐力、毅力的，以1月份豆瓣的《我的精神角落》以及11月份的《活口》为代表，它们都使用了“密室逃脱”的元素。

但二者的呈现方式却完全不同：

《我的精神角落》是漫画绘制，用户通过点击画面的事物找到通关线索，文案及物品都带有浓厚的文艺风格。

《活口》是视频录制，用户通过点击视频中的物品推动剧情发展，帮助主角脱险，对密室逃脱的玩法复制度更高。





但此类通关游戏需要用户花费较多的时间或者观看详细的攻略才能顺畅通关，很多用户在前面的关卡中失败后，无法观看完整内容，用户体验较差。用户的流失就直接意味着传播量的丧失。

除此之外，还有一支拼毅力的“马拉松式长跑”H5——8月份墨迹天气的《天气改变命运》，大概是H5届至今为止持续时间最长的案例了。

整整17个日夜，一天一个H5热点追击，原创动画+原创词曲+音乐互动。绝对对得起“每天都有新改变，每天都能玩一遍”的宣传语了。

拼制作投入的，当属4月份宝马的《该新闻已被BMW快速删除》，独特的标题和精良的动效，花费应当不菲。虽然大火了一把，但并没有为H5注入新元素，总体上还是在走“吴亦凡类H5”的老路。

   

拼资源的，就是9月份NIKE的《你与冠军的距离，就差那么一“点” 》。

NIKE别出心裁地利用了新世相、gogoboi等一大批KOL资源为自己造势，H5推文标题根据账号的调性量身定制。

比如与新世相合作，选择模拟文章标题为《你应该找到自己的气场》；与gogoboi合作的文章标题为《宇博向你扔来一枚老公，请接好！》。

2017年

“要么把人弄哭，要么把人整笑”

2017年的朋友圈，几乎从年初“哭”到年末，“丧”或“暖”的情绪成为H5击中用户的点。

3月份，一支清明节的公益广告《此处故意留白》让又穷又丧又累的年轻人“哭”了一把。

这支H5采用纯黑白的手绘画风，长长的卷轴漫画讲述着都市人生活——无休止的加班、被压得透不过气。结尾一记暴击：“清明节，不该是你的节日”。

网易新闻紧接着又“补刀”，邀请你来《查查你的“人生余额”》。

告诉你，你还能吃多少顿饭，还能经历多少次月圆，还能过几次春节，还能看几次世界杯。。。。你的一小时值多少钱，你的一生值多少钱，你的时间都在“煲烂剧、看烂新闻”中浪费了。

6月份，网易的儿童节策划《这是成年人不敢打开的童年》，玩了一把童年动漫串烧，瞬间撩起无数人的怀旧情节。

《灌篮高手》《美少女战士》《名侦探柯南》《火影忍者》《哆啦A梦》，人物场景还原+经典台词，赚足了眼泪。3小时即破150万UV！

8月份，腾讯公益推出《小朋友画廊》，1元前购买自闭症儿童的画作，就相当于为关爱自闭症儿童的社会项目进行了捐款。

小朋友的画作惹人怜爱，热心公益也是人们愿意对外展示的形象，点击动机和分享动机同时具备，该项目顺利完成1500万众筹目标。



11月份，招商银行的一盘“番茄炒蛋”又触及了大众的泪点。

远在美国的儿子想给自己的外国朋友做“番茄炒蛋”，不懂得如何做的他只能打电话像国内的爸妈求助，而这时和美国相差12小时的国内已是深夜，已经睡下的爸妈被吵醒后没有生气，而是耐心细致地做了示范，父母的爱令人感动。

而真正能让用户“笑出猪叫”的H5，毫无疑问是2017年下半年诞生的“戏精”流派。

9月份，一支名为《深夜，男同事问我睡了吗......》的H5在朋友圈悄然出现，瞬间火透半边天。男同事一句简简单单的“睡了吗？”，女主就脑补出了“要表白？怎么拒绝？”等一系列剧情并在好友群分享，脑洞和加戏能力满分。

这种内容其实是我们日常生活中就会出现的小误会，熟悉而亲切，经过爆笑的“内心戏”演绎，乐趣瞬间满级，当然会想跟朋友分享。

其后，网易考拉的两支“连续剧式”“戏精”H5——11月份的《入职第一天，网易爸爸教我做人》和12月份的《入职半个月，网易爸爸让我怀疑人生》，进一步巩固了网易在“戏精”H5届的地位。

不同于网易的“戏精”流派，阿里的“戏精”H5——《双11前，秋裤厂经理深夜给女设计师打电话》，则完全抛弃了内心戏。

全篇仅以文字形式呈现“秋裤厂经理”提出需求和“设计师”满足需求的对话，这一对话过程本身已经足够好看，脑洞大开，还有“秋裤厂经理”极具港粤特色的口音加成，“五彩斑斓的黑”“闲庭信步，只穿秋裤”，稳赢！



2018回归

创新门槛上推，破局需聚焦“小而美”

2018年

“用H5认识“我””

开年，《2017，我的网易云音乐听歌日记》刷的朋友圈一片火红。

每个人的心里都有“姑娘”，有“世界”，有“喜欢”，都有特殊的一天，都有自己的年度歌手。

连你自己都没在意的细节，网易云音乐都帮你挖出来了。一点一滴都是你的足迹，喜怒哀乐都与你有关。



4月份，网易云音乐又靠着花式夸人的66句文案再次攻占朋友圈，上线当日PV轻松破千万。

《嗨！点击生成你的使用说明书》，每个人都成了“材质特殊”“内存巨大”的“珍品”，偶尔“心情不好”，但只需要“多一点睡眠时间”或者“吃一点甜甜的东西”就能哄好。

同期，还火了两个DIY类H5。

3月份的《我的工位，桌上有刀，桌下有猫》，以及4月份的《睡姿大比拼》。

两支H5除了场景不同外，基本玩法是一致的，提供场景和道具，用户根据自己的实际情况进行选择和摆放，究其本质就是给了用户个性化定制和展示的机会。



总结

H5就是一个“点击”+“分享”的通关游戏

四年时间里，有些H5类型成了朋友圈的常客，比如测试类、年终盘点类等；有些H5类型昙花一现后，归于寂灭，比如双屏互动类、密室逃脱类等。

而决定这众多H5命运的动作，不过是受众的一次“点击”+“分享”。一支刷屏H5只要帮用户找到“点击理由”和“分享理由”，这事就成了。

那么怎么做呢？我们不妨从刚才的历史中去找答案。

1.点击理由：寻找“流量元素”

何谓“流量元素”？就是能够自动吸引用户目光的元素。具体来讲，如果你有能力做朋友圈的词频分析，那些高频率出现的词就是“流量元素”。换个角度思考，H5中经常出现的内容，就可以作为H5取材的“流量元素”。

回顾四年来的热门H5的内容，“流量元素”基本逃不出以下3大类。

第一类：与我有关。比如，“年终盘点”“测试类”“xx照类”。

这些H5多从用户自身出发，联结用户的过往回忆，或者对用户进行颜值或文案的“美化”。

每个人的内心都是渴望被理解、被关注的，而这些类型的H5恰恰直击用户的这种心理，成为每年必出的经典类型。

第二类：明星、IP。吴亦凡、韩寒、薛之谦，腾讯游戏的这几支H5的点击很大一部分都是来自于明星效应。

网易H5中较少用明星，但它把自己做成了一个IP，风格鲜明，大概在H5中看到“网易”两个字，你就控制不住自己要点击的手指了。

第三类：情绪唤起。主要涉及三种内容“怀旧”“公益”“幽默”。

这个部分就是17年全年反复在流行的“让你哭”或者“让你笑”的那些内容。

从15年的《致邓丽君的一封情书》，到17年网易为纪念《哈利波特》20周年而作的H5；从15年关注走失儿童的《陌陌守护计划》，到17年关注自闭症儿童的《小朋友画廊》；从各路鬼畜到“戏精”系列，怀旧、公益、幽默是永不过时的主题。

2.分享理由：寻找“社交货币”

对于新媒体从业人员来讲，“社交货币”绝对算不上一个新词。“刷屏圣经”《疯传》中解释这个词：“就像人们使用货币能买到商品或服务一样，使用社交货币能够获得家人、朋友和同事的更多好评和更积极的印象”。

通俗地讲，就是你用修图三小时后发出的自拍买到了50个赞；你转发了一篇支持蔡徐坤的文章，买到了100个蔡徐坤粉丝的认可；你字斟句酌写下一首诗，买下了一个“文艺小清新”的标签。

只有那些有助于人们获得社交货币的内容，才会被分享。而要想成为一个出色的“社交货币”制造商，你只需要把握好三种心理感觉：

1.归属感。让你的内容成为谈资，成为群体流行话题。比如当网上都在晒网易云音乐听歌日记的时候，你没晒就感觉过去一年的歌白听了；当别人都在刷豆瓣的H5时，你没有刷就总觉得被“文艺青年”这个标签抛弃了。

2.炫耀感。以网易有道的爆款H5《以你之名，守护汉字》为例，别人连读都读不对的生僻汉字，你确是它的守护者，是不是感觉特别牛逼，哪怕你也不过是刚刚才知道这个字怎么念。

3.攀比感。“你已经超越了X%的网友”“你是第x个做________”，不点进来试试，你永远不知道你的世界排名能有多高。

总之，你只需要源源不断地生产能够买到“幽默”“新潮”“文艺”等标签的“社交货币”，用户总会为你买单的。

结语：

2014年到2018年，H5突破“动效”和“社交”的藩篱，技术和内容双双攀至新层面。

H5的路仿佛又走到了尽头。

但营销人实在是个太恐怖的物种，你永远无法想象营销人的创意边界在哪里。

只要营销人的创意不衰竭，我就会始终对H5心存期盼。

你呢？对H5疲倦了吗？