2014 年是H5营销的元年，彼时正值微信刚刚火热，但因为其封闭私密的产品特性，营销人们始终难以真正进入当时已有3亿活跃精准用户的微信社群中去，就是在这种情况下，H5忽然进入了人们的视野。

01

图文型H5

特斯拉是最早一批利用H5登录朋友圈的知名企业，所利用的展现形式也是H5最初级的运用——精美图片+简单的翻页动效，类似于PPT，但最终展现出来的效果却为当时困顿的微信营销领域提供了另一个选择！

△ 2014   特斯拉《你快还是特斯拉快》

仿佛打开了潘多拉魔盒般，一发不可收拾。

其后，各大玩家跟上，H5的应用场景开始逐渐增多，从产品推广，到移动网站、邀请函、年终总结，人们的对H5的想象空间越来越大。

其中，邀请函因为其应用层面更广，算得上是2014上半年的主力应用场景，代表作有奔驰的《奔驰 C 级上市邀请函》

△ 2014   奔驰《奔驰 C 级上市邀请函》

然而现在的营销人可能很难想象，这种如今在各大H5平台上可以一键生成、成本几乎为零的图文型H5，在当时的开发成本却高达五位数！

此外，14年五月份，可口可乐推出的《分享快乐128年》更是将H5的“动”又往上推进了一大步。

这支H5页面上以一根贯穿画面始终的“红线”为主，跨页流动，相较于原本简单的单页翻动，这种形式让观看者在视觉上的感受更加流畅，一经推出就引起了极大的反响。

△ 2014   可口可乐《分享快乐128年》

而在《分享快乐128年》之前一个月，还有另外一支当时交互体验集大成者的H5——著名奢侈品牌Burberry 的《从伦敦到上海的旅程》：摇一摇，开始探索之旅；点一点，水面泛起涟漪；擦一擦，擦去屏幕上的晨雾。

H5的自此区别于PPT，它的所有动效都是对应着用户的操作，“为你而动”，真正让用户感受到什么才是营销的互动。

△ 2014   Burberry《从伦敦到上海的旅程》

其后的几个月，营销人们对H5的展现形式又有了更为深刻的理解，其中演化的“测试类H5”、“游戏类H5”其后的文章中小编会做详细介绍，此文不做赘述。

而到了12月份，历史上第一个年终总结类的H5终于诞生——网易娱乐出品的《二零一四 娱乐圈画传》。

这支H5中收录了包括文章姚笛出轨、韩剧《来自星星的你》、柯震东吸毒被捕等年度热度较高的娱乐圈事件，诙谐的文案，辛辣的笔触，幽默的漫画风都令人耳目一新。

△ 2018   网易《2018娱乐圈画传》

由此，《娱乐圈画传》成了网易的年度保留项目，而从2016开始，呈现形式已经趋于成熟的娱乐圈画传几乎年年成为朋友圈的爆款，想必今年的《2018娱乐圈画传》各位营销人一定印象深刻！

02

活动型H5

活动型 H5 是较早一批出现的 H5 类型，其展现形式多样，包括签到、抽奖、投票、红包、砍价、拼团等等，活动型H5的模式和技术都非常简单，但是往往与奖励直接挂钩，因此具有传播能力强、应用范围广的特点。

2.1 抽奖类H5

抽奖类是应用最普遍的活动类型，大众最为常见的是大转盘、九宫格两种形式，其变种也是多种多样，比如刮刮卡、水果机、扭蛋机、砸金蛋、开宝箱、摇一摇、集五福。

△ 抽奖H5

抽奖类的H5活动不仅形式简单，而且还可以无缝植入许多商家的信息，无论是线上拉新还是线下推广，都能取得卓有成效的营销效果。

2.2 签到类H5

而签到类的活动无疑是提高用户留存率的利器，几乎所有app都会做类似的活动来促使用户养成打开app签到打卡的习惯，而对于线上的商家而言，上线一个长期的签到活动对于用户的留存和二次运营转化都能起到非常卓越的效果。

△ 签到H5

2.3 投票类H5

投票类H5则可以让产品在特定人群内快速传播，并且带动特定人群发动他们的亲友参与活动，投票活动能够将自身产品、品牌信息非常高效地传达给用户，比如给喜欢的球队、歌手、艺术作品、萌宝等等，常常用于教育、母婴等行业。

△ 投票

2.4 拼团砍价类H5

而拼团砍价类活动则是拉新裂变的神器，近两年快速崛起的电商巨头拼多多就是通过拼团砍价的活动在短时间内获取了巨额流量，从而以令人咋舌的速度崛起的。毫无疑问，这种方式能够快速吸引目标群体的眼球，从而推动目标人群将活动向亲友之间扩散裂变，最后取得不可思议的活动效果。

△ 砍价拼团

当然，也有一些H5在常规活动型 H5 之外做出了一些新玩法和新花样，以促使用户点击和分享。

例如2016 年 1 号店的 H5《姐妹花的烦恼》，这支H5在常规活动中加入了故事情节，用人民币开玩笑，吐槽日益高涨的物价，引出一号店的促销活动，也取得了相当不错的成绩，当然本质上着其实只是一个抽奖型H5。

△ 2016 一号店 《姐妹花的烦恼》

03

测试型H5

测试类H5也是刷屏频率非常高的一种H5营销形式，主要以问答、评分、测试为表现形式，利用各种有趣的问题，吸引用户参与问答，分享测试结果，从未产生裂变效应。

测试类 H5 主要有三大类：运势占卜、知识测试、心理测试，刚开始出现的时候以运势占卜为主，慢慢开始出现有趣的知识测试类型，而今年大部分在微信刷屏的测试类 H5 则大多是心理测试。

3.1 运势占卜

通常是以抽签或者塔罗牌的形式出现。中国自古就有传统节日去寺庙道馆祈福的习俗，而H5求签则为人们在传统节日提供了一个新颖而轻松的祈福方式。

用户只需要通过摇一摇、点一点等简单的交互方式，便可轻松得到自己接下来的运势，非常符合现代人们的心理诉求，因此极易传播，再配上品牌方的品牌信息，很容易就能带来比较大量的流量。

携程旅行2016年推出的H5《我的2016福地》，就是以“爱情、事业、健康、财运”为噱头，吸引用户选择一个自己想了解的类别，点击「探寻我的福地」，测试出2016年自己的福地。

△ 2016 携程 《我的2016福地》

3.2 知识测试

通常是一些具有趣味性的测试题目，或者是针对某些特殊人群的测试题目，这类测题往往能够在某些群体内部快速裂变传播，并自发分享出去，传播性非常强。

例如2017年爱奇艺的《接招吧，直男》,针对男生做了一支男生对女朋友的某些行为会做出那些反应的测题，以此测试男生的直男属性，七夕当天发布，pv接近3000万，分享150万，成绩令人咋舌。

△ 2017 爱奇艺 《测测你的直男属性》

3.3 心理测试

通常通过答题来给测试者的认知、行为、情感的心理活动予以量化，帮助其了解自己的情绪、行为模式和人格特点。这两年来刷爆朋友圈的测试性H5基本都是属于这一类型，轻轻松松日pv破千万的也不少见。

比如这一条，网易×哒哒的《测测你的哲学气质》，一共10个问题，每个问题2-4个答案不等，根据用户每个问题的选择，会生成出自己的哲学性格图。同时，用户也可点击详情页查看23 种哲学性格的含义。此H5上线不过几个小时，PV便已经达到千万级别，虽然最终微信以诱导分享为由将其屏蔽，但是其取得的成就还是令众多营销人瞩目。

△ 2018 网易 《测测你的哲学气质》

而两天天猫出品的《天猫正当红》也是在女生群体中刮起了一股旋风，通过测试不同场景下女声选择的妆容，最终给女生颁发美妆称号，确实是能够深的美女们的心。

△ 2019 天猫   《天猫正当红》

测试型H5的大多是以创意取胜，拼的是创意和财力，如果对自己的创意和文案足够自信，又有足够的资金来实现自己的创意，测试型H5确实是非常不错的一种营销手段。

04

游戏型H5

2014年7月，一直处于疯狂进化中的H5营销终于取得第一次刷屏成就——上线48小时，PV破千万，取得这个成就的H5并非来自某个愿意斥巨资打造精品图文类H5的巨头企业，而是来自一家此前名不见经传的小团队，这款H5的名字叫《围住神经猫》，是一款游戏型H5。

△ 2014 《围住神经猫》

简单好玩能攀比，这是《围住神经猫》能够刷爆朋友圈的秘诀，这七个字成功地为H5注入社交基因，让“我用X步围住神经猫……你能超过我吗”的链接在微信社交圈中迅速泛滥。

此后，全网开始制作H5小游戏。

而七月份，污妖王“杜蕾斯”的《一夜N次郎》（避孕套版别踩白块儿）以画风清奇在业内挂起一股妖风，黑白块被换成了五颜六色的套套，如此辣眼睛的画面却为杜蕾斯赚足了眼球。

△ 2014   杜蕾斯   《一夜N次郎》

而在之后的很长一段时间内，H5小游戏的交互形式上基本已经固定，没有特别大的变化，大多数是在创意上和画风上做精修和改进。

例如共享单车领导者ofo在其风光无限的2017年曾经做过一个小游戏H5——《小黄车研发车间》，以小黄车和小黄人做结合，呈现3D立体的画风，算得上是相当精致的作品，当然其交互形式上依然运用着点击、滑动、摇一摇等初级的简单交互，让用户参与造车小游戏。

△ 2017   小黄车《小黄车研发车间》

而到了2017 年 9 月，网易严选则推出了一个为强迫症患者量身定做的 H5 小游戏《好难受，强迫症受不了了》，通过对齐木块、将彩色球排列完整、救活枯萎的花、消除俄罗斯方块、修剪树木等 5 个“强迫症”小游戏来展现“极致美学”，在这个小游戏中，除了简单的点击、滑动等简单交互外，还创新应用了重力感应等更复杂的交互，算得上是在交互方式上的小有突破。

△ 2017   网易严选《好难受，强迫症受不了了》

此外，2016年同样还有两个比较有代表性的H5游戏作品诞生，这两幅作品并非来自网易、腾讯、阿里这三位高端玩家，但是在作品的精致和创意方面却毫不逊色，可以说他们拼的是耐力和毅力，并成功为业内注入一股新的活力。

这两幅作品是《我的精神角落》和《活口》，非常凑巧的是，两幅作品都有运用到“密室逃脱”的元素，当然在表现形式上做了创意性的改变。

《我的精神世界》是漫画风，无论是文案还是画风上都透露出一股浓重的文艺风，玩家需要通过点击画面来找到通关线索，而在通关的过程中，玩家也能逐渐理解游戏制作方豆瓣所想要表达的中心思想——除了一个小秘密，我只是一个极其平凡的人。

△ 2016   豆瓣《我们的精神角落》

创意广告公司 Dopemine 在 2016 年推出的《活口》在玩法上有很大不同，作品采取视频录制的方式，采用了真人密室逃脱的形式，用户需要点击视频上的物品推动剧情，从而帮助主角逃脱。

△ 2016   Dopemine《活口》

而在2018年，最火的创意游戏莫过于《睡姿大比拼》和《我的工位有猫、你的工位有刀》这两个DIY游戏了，这两个H5除了场景方面有所区别，其实在玩法和互动方式上几乎是一致的——H5将场景和道具素材做好，玩家则根据自己的喜好进行选择和摆放，本质就是给了用户个性化展示的机会。

△ 2018   网易《睡姿大比拼》

△ 2018   网易《你的工位有猫，我的工位有刀》

05

场景模拟型H5

场景模拟，顾名思义就是模拟不同的应用场景，通过用户所熟知的某个特定环境设置趣味的情节，从而植入产品的信息和优势，令用户不知不觉中接收到品牌方想要传达给用户的信息。

目前比较常见的类型有微信界面、手机界面、新闻界面、app界面。

5.1 手机界面

2015年5月份，大众点评的一支H5悄然在朋友圈刮起了一股转载狂潮。

打开H5，用户便收到一个陌生号码来电，按下接听键后，一个陌生的电子音响起，随后，緑巨人浩克会挥舞起他的铁拳，砸你的屏幕，顺便感慨一句你的屏幕质量真不错，而最终当用户的屏幕完全碎裂时，界面上弹出一个购票页面，这时我们才明白，这原来是《复仇者联盟2》的推广广告。

△ 2015 大众点评 《这个陌生来电你敢接吗？》

其后， 模拟场景类H5频频出现，基本都是此类H5的跟进，不过应用场景上会有所不同。例如模仿Siri，例如模仿打开app等等。

5.2 微信界面

模拟微信界面也是应用场景比较广的迷你场景，模拟场景类别里的爆款H5 小半都是来自模拟微信，例如下面这条《吴亦凡即将入伍？！》，打开就是微信新闻的页面，仿真度100%，最后的视频通话则应用了场景模拟，而吴亦凡从新闻视频中跳出来，可谓H5人和界面互动的又一次革命性改革。

△ 2015 腾讯游戏《吴亦凡即将入伍？！》

当然腾讯游戏的这支H5作为此类风格的初次尝试，在场景的风格变化上和情节的构架上都有不足。而同样出自大厂腾讯，腾讯视频11月份推出的同类风格H5——《V视界大会移动端邀请函》就显得更为精致。

△ 2015 腾讯视频 《V视界大会移动端邀请函》

此外，微信聊天与戏精模式的结合也打造出了一款刷屏H5。2017年9月份，一支名为《深夜，男同事问我睡了吗......》红透半边天。脑洞大开的剧情加上逗比的戏精脑补，让观众不由的捧腹大笑，也让众多营销人惊叹：原来H5还能这么玩！

△ 2017 有道翻译 《深夜，男同事问我睡了吗.....》

5.3 新闻界面

新闻界面的应用场景也非常广，除了人们常见的腾讯新闻，南方日报等传统报刊也玩起了新潮。

△ 2017 南方日报 《靓丽，南方网红带你深度游广东》

而论起制作投入的，当数宝马的《该新闻已被BMW快速删除》，动效精致，花费不菲。在当时确实火了一把。

△ 2016 宝马《该新闻已被BMW快速删除》

5.4 app界面

而app界面则会应用一些其他打开率非常高的应用，例如芒果TV2017年为《歌手》节目的预热H5就运用到了微博界面模拟。

△ 2017 芒果TV 《再曝大咖!》

06

一镜到底型H5

一镜到底原来是影视作品上的一种手法，是指拍摄中没有cut情况，运用一定技巧将作品一次性拍摄完成。

它通过对镜头的起幅和落幅的精准设计和控制，从而完美地掩盖剪辑的痕迹。同时导演也运用了一些其他技巧来掩藏剪辑点，比如在主体运动时观众往往容易忽略次要内容的变化、物体的运动过程容易被无视、镜头眩光、借用时间过渡造成的光影变化和实际光效中不经意的暗场，等等。

靠后期修饰的当然也有，比如有个镜头摇上天空，然后，天色渐暗的场景，画面明显有切换。

最早出现在美国波普艺术家安迪·沃霍尔拍摄的纪录片《帝国大厦》中。1964年，他将摄影机对着帝国大厦毫不变换机位、景别地拍了485分钟。

△ 1964 《帝国大厦》

最早运用到一镜到底的H5大作要数网易出品的《2015娱乐圈画传》，不得不说的是，“娱乐圈画传”自2014年起就是网易娱乐的年终保留项目，标准的大制作，但是《2015娱乐圈画传》却并没有在当时取得广泛的关注，一直到2016年，在运用到画中画形式之后，《娱乐圈画传》才真正的成为爆款。

△ 2015   网易《2015娱乐圈画传》

07

VR全景型H5

VR全景是指利用计算机生成一个全方位的3D实景画面，再通过虚拟现实技术将这个画面完美的呈现在观众眼前，最早也同样是影视行业先投入使用的，全球票房榜榜首的巨作《阿凡达》就是利用VR全景技术制作的。

△ 2009《阿凡达》

H5在应用VR全景技术早期的代表作是2016年6月份淘宝的《淘宝造物节》，造物节也是淘宝自己创造的节日，不过在知名程度上面远逊于双十一，因此阿里为了改变这样的局面，加强公众对造物节的认知，特地耗费巨资打造了这样一款H5，用户通过移动手机可以看到不同角度的造物节大厅的不同细节，然后点击画面的节点则会跳出相应的词条，这支H5在当时风靡一时，也在一定程度上普及了造物节。

△ 2016 天猫《淘宝造物节》

而此外，还有一部作品是不得不提的，那就是同样是天猫在2016年打造的一支H5——《双十一邀请函》，这部作品是2016年11月份打造的，和5月份打造的《淘宝造物节》一样，融入了时下最流行的VR技术，使得整体的立体渲染更强烈，同事，他的3D立体手绘风格也比《淘宝造物节》的漫画风格更为精致和逼真，而且，这支H5还创造性地将VR全景与一镜到底相结合，令作品的空间感更凸显，让人产生强烈的时空穿梭感。

而令人咋舌的是，这个由225张素材图精心构建的天猫世界，H5制作费用超过百万。

△ 2016 天猫《双十一邀请函》

08

快闪型H5

2016年9月，苹果在秋季新品发布会结束后，采用快闪的形式，将2小时的发布会浓缩成了107秒的快闪短视频，庞大信息量和强烈的视觉冲击效果，再结合大屏播放，瞬间引发了大量的围观和讨论。

△ 2016 苹果《2017秋季新品发布会》

此后，快闪类短视频在国内迅速发酵，众多品牌纷纷跟风，各类创意层出不穷。

比如凯迪拉克ATSL的30s快闪广告、CMF设计快闪宣传片、京东《闲置衣物》公益快闪广告、华为P10新品发布会，一时之间吃瓜群众们的眼睛都被亮瞎了。

△ 华为p10

△ 凯迪拉克ATSL

同时，快闪形式在H5营销中也迅速改良流行起来，观看形式由传统横版变成了竖版，同时融入了H5中特有的交互形式，并将难以剪辑和快速制作的视频元素去掉，以纯文字的形式快速出品并传播。

例如人民日报在2017年推出的快闪H5《为我党传播力疯狂打call》，一经发布便在朋友圈疯狂刷屏，其后，快闪这种H5开始受到热烈的追捧。

△ 2017 人民日报《为我党传播力疯狂打call》

而后，天猫又将快闪H5与风靡一时的“戏精”模式相结合，全篇仅以文字形式，呈现秋裤场经理和设计师之间的对话，对话脑洞大开，相当精彩，再配上还有“秋裤厂经理”港普口音，轻松逗乐观众，稳！

早先的快闪视频几乎都会加入视频元素，可是其对剪辑的要求非常高，导致出产率不高，而互亿互动现已将文字快闪广告的制作流程进行了技术整合，打造成一款可以一键轻松制作快闪广告的活动制作工具。

09

双屏互动类

双屏互动类H5顾名思义，就是要两部手机共同扫码才能完成互动的H5,这种展现形式极大加强了H5的互动性质，可以在很大程度上削弱了H5的强大传播属性，因此只能说有利有弊，在特定环境下或许能够取得奇效。

例如2015 年奔驰的 《鹊桥会，爱更多》，这支H5就是采用了双屏互动的形式，模拟鹊桥相会的场景，当两台手机重合在一起的时候，一座鹊桥会对接完成，同时出现绚烂的爱心，而车的后备箱也会打开，露出一后备箱的玫瑰，非常get女同胞们的点。

△ 2015 奔驰 《鹊桥会，爱更多》

同样是2015年，六神也推出过一部名为 《在夏天在一起》的双屏互动H5,这支H5通过买通票的方式，模拟电影院让两部手机的主人欣赏到一部制作精良的夏夜动画。

△ 2015 六神《在夏天在一起》

但总体来说，双屏互动H5所取得的成绩并不是很令人满意，毕竟需要同时两个人参与虽然能够加强互动性和可玩性，但是却限制了网上传播的场景，反而难以打造爆款，不过线下的朋友们也可以试试这种H5形式在特定场景下此类活动的效果会比其他H5形式更为适合。

10

总结

H5的发展史可以看做是新媒体营销发展史的缩影，他见证了新媒体营销的崛起，并在其中发挥着极其重要的作用，可以肯定的是，H5在营销领域的路不止于此，但相比较核心玩法上革新，我们应当将更多的目光放在内容创作的创新上来，未来的H5营销市场，一定是属于内容创作型H5的市场！

-END-

原标题：案例盘点：H5活动营销简史