我们从上百个现象刷屏级H5中总结了4种核心套路

来源:增长官研究院 时间:2018-04-18

H5页面的刷屏往往产生巨大影响力。然而,形成刷屏本身是一个“技术活”,本文总结了以往成功的H5页面,发现了美学取胜、技术取胜、情节取胜和互动取胜等操作策略。

本文作者范冰,《增长黑客》作者。本文首发于范冰创立的新媒体——增长官研究院,欢迎大家关注“增长官研究院”。

「亚马逊 Kindle 服务号」新推送了一篇《点击查看你的 Kindle 阅读史》,让「挚爱阅读,向光而行」的拥趸们攒足了分享私人图书馆的社交货币,纷纷转发朋友圈。

我也翻出吃灰的 Kindle,登录帐号,统计了一番,发现在 Kindle 上买的最贵的书居然是原版《Starcraft》小说「幽灵行动」。而 Kindle Unlimited 也在试用一个月后束之高阁。Anyway,我的个体行为不具备代表性。

阳光底下并无新事。刷屏 H5 的表现形式总是千变万化,但套路却不离其宗。今天,我们为你归纳总结了刷屏 H5 的若干套路和案例。我们来看看不同类型的 H5 是如何俘获用户欢心的。

1.

美学取胜  

1)首草「首草先生的情书」

这是一个早期的 H5 作品,在 2014 年末推出,页面元素很简单:纯净的背景音乐+温馨的配图+走心的文案,画面虽然简单,不过意义深远,推出之后在用户群中得到疯传,可谓是 H5 的启蒙作品之一,开启了 H5 营销的潮流。

首草是面向中国企业家的高端养生品牌,营销公司 W(W 是一家著名的新媒体营销公司)为它的品牌宣传活动定的主题是「女人最好的补品不是首草,而是爱」。「首草先生的情书」H5 页面就是第一波宣传。

打开页面,映入眼帘的是淡雅的画面,伴随着舒缓的钢琴背景音乐,用户可以翻阅 17 页真挚的情书,以时间先后为线索,表达了「首草先生」作为一位男士对妻子深深的爱意。最后回归到主题「女人最好的补品不是首草,而是爱」。

整个 H5 有近 20 多页,大部分都配上了长长的文案,也许我们曾经听过一个原则叫「能用图表达的尽量少用文字」,但这个H5 依然赢得了用户的喜爱。

首先是在情绪渲染上抓住了用户的注意力,而每页有大标题和小文案,看到大标题就可以了解在讲什么,小文案并不是必须的。其次是 H5 的目标用户群是稍微年长的中年男士,具有读文的习惯,他们可能会更喜欢这些能引起他们共鸣的文案。

总体来说,首草先生的 H5 是以美取胜的作品,简约淡雅的画面加上引起共鸣的走心文案,渲染出充满浓浓爱意的情绪,强化了首草代表对女性之爱的品牌宣传诉求。

2)大众点评「我们之间就一个字」

当一个 H5 全部都是文字,你觉得还会有人看吗?不仅有,而且还有很多。

「我们之间就一个字」是 W 公司给大众点评做的 H5 推广页面,虽说是全文字的形式,但他们把文字变成了「图」,常见的文字被拟物化,直观地展现了这个字的含义。

「人与人之间的情分,言之不尽,感之不弥,不如一字以道之。」这几个字分别是:金、本、欠、梦、日、朋、拼、赞、聚,代表了朋友之间相处之道,最后一个字是「聚」,巧妙地和大众点评品牌结合起来。

大众点评的主营业务是预订餐厅,而「聚」字表示朋友之间常聚,也就是需要大众点评的服务。这个作品的精髓在于文字拟物化的精美动画,推出之后引起了大量模仿。

3)悦榕庄「唤起这一刻」

悦榕庄是高端酒店品牌,一般开在风景秀丽、环境优美的自然景区,根据当地的特点,酒店环境设计与当地环境融为一体,非常漂亮。结合品牌特点,他们推出了「唤起这一刻」H5 页面,展现了黄山悦榕庄的极致美学。

画面采用了中国风元素,分为四个画面,用户长按画面可以听到应景的一段音频。个画面是黄山一角,配音为风声鸟鸣;第二个画面为留白,长按出现对着山谷呐喊的声音;第三个画面为油菜花田地,长按出现风吹田野的声音;第四个画面为传统徽派建筑,长按出现女子的传统吟唱。

H5页面把黄山之美展现得淋漓尽致,仅仅通过这个H5就能让人感受到在悦榕庄的放松和美好。

 4)QQ「这可能是地球上最美的 H5」

H5 发展越到后期,技术要求也越高,QQ 发布的「这可能是地球上最美的 H5」就是大手笔制作,把网页技术和精美画面结合,为用户带来科技与艺术的享受。

进入 H5 后,用户看到的是一个完整地球,用户可以自由转动地球。在不同地方放置了不同的锚点,用户长按可以穿梭云层,一探此地的美景。

这个 H5 宣传的是「QQ X 计划」,在全球招募地球探索者去地球最美的地方,把地球之美展现给全球网友。而这个计划的推出也是服务于 QQ 的品牌宣传,QQ 的战略是年轻化,避开与微信的直接竞争,对地球的探索也展现了 QQ 充满探索精神的年轻气质。

 2.

技术取胜  

1)全民突击「吴亦凡入伍」

要说技术取胜的代表作品,首先值得大书特书的就是全民突击做的吴亦凡入伍 H5。它不仅一夜之间刷爆了朋友圈,也开启了 H5 页面动态视频与静态页面相结合的时代,具有「划时代」的意义。

明星题材具有天然的吸引力吴亦凡人气爆棚,「入伍」更是引人注意,因为大陆基本上不会有明星入伍的事情。就算它是一篇娱乐新闻,自身就是传播性很强的爆点新闻了。

仿真,然后出其不意的突破。模拟腾讯娱乐新闻,所有人一开始都以为是一篇娱乐新闻,但是画风突变,吴亦凡动了起来,这时候看客发现不对劲。吸引住注意力,故事才能一步一步讲下去。

剧情紧凑,看客眼球被牢牢抓住。引人注意的标题新闻中的吴亦凡忽然动了起来(违反常规)。画面闪烁,吴亦凡跳出「模拟吴亦凡来电」与吴亦凡的视频通话(谜底揭晓)。

这些接触点,每一个都自带极强的吸引力,让用户一个个场景跟着走下来,最后吴亦凡在视频中揭晓故事的来龙去脉(谜底),用户恍然大悟,觉得刚才这一连串的剧情很有意思。

2)奔驰「七夕鹊桥会」

双屏互动是 H5 页面中的一个流派,需要两个人的手机进入同一个页面,可以看到两台手机中的 H5 进行联动,在情侣、朋友相关的营销活动中用的较多。奔驰的这个 H5 在七夕期间推出,主题是鹊桥相会,追热点表达浪漫的爱情,画面制作精良。

但双屏互动的 H5 至今没有诞生过爆款,究其原因可能是操作成本过高,毕竟在碎片化时间要找到另外一个人用手机进行互动是很难的事情,大部分人都直接放弃了。

3)AKQA「梦幻水晶球」

很多人小时候可能都拥有过一个水晶球,尤其是女生,AKQA 推出的这个 H5 页面打起怀旧牌,利用简单的重力感应技术,让用户进入水晶球探索球里面的美妙世界。摇晃手机还会出现下雪的效果,用户可以定制水晶球的祝福语,然后分享给好友,送出温馨的冬日祝福。

这个 H5 在 2014 年末推出,现在看来其中所运用的重力感应、3D 技术并不复杂,不过在那个时期大部分是平面的 H5 作品,这种交互式 3D 画面的 H5 还是挺惊艳的。

4)NIKE「每双球鞋都有一个故事」

NIKE 搭建了一个「鞋族宇宙」,展现旗下不同鞋子的故事,画面是 3D 的,鞋子用 Polygon 绘画技术展现,用户可以通过手指的上下左右滑动来切换视角,点击某个元素可以放大查看详情。

 3.

情节取胜  

美学取胜需要高额的设计成本,技术取胜需要强大的技术力量,这些类型的 H5 可能意味着一分钱一分货,花的钱越多制作就越精美,更好看的画面才能打动用户。那么有没有可能通过更好的设计另辟蹊径呢?

接下来我们就来看以剧情取胜的 H5 类型,通过巧妙的情节设计来吸引用户的目光,看完它们就像看完了一个微电影一样。

1)大众点评「这个陌生来电你敢接吗」

H5 页面模拟 iPhone 的来电界面,有一个未知号码来电,一开头就用设置悬疑引起用户好奇。

接通之后,画面变黑,出现陌生男子的旁白,随后居然有人在画面中要打破手机屏幕,越来越让人好奇到底发生了什么。

最后揭晓答案,原来是《复仇者联盟 2》即将上映了,大众点评购票有优惠,前面敲打屏幕的人都是复仇者联盟里面的英雄,让用户提着的心放了下来,恍然大悟。

大众点评的这个 H5 页面同样出自 W 公司,是第一支模拟手机场景的作品,随后有越来越多的 H5 开始模拟手机场景,企图以假乱真,给用户带来惊喜。

2)百度手机助手「时代姐妹花」

这个 H5 界面则是全程模拟日常手机场景,一系列场景带用户进入剧情:锁屏消息、解锁界面、微信联系人列表、聊天窗口、朋友圈等都是用户每天接触的界面。

H5 推出期间正是《小时代 4》热映时期,因此以小时代为主题,用户「解锁后」进入一个聊天群,群里面小时代的各个角色在「争论」,用户甚至还可以发一句话参与群聊。随后场景转换到朋友圈,继续「争论」,最后引出百度手机助手的宣传海报。

H5 页面高度还原了日常的微信使用场景,但又更进一步,不仅仅是模拟,还加入了用户互动部分,让用户参与电影角色的争论大戏中,全程让用户有很强的代入感。

3)一加手机「1步1步看清韩寒」

H5 页面模拟传统的打字机,拟物化的设计非常有质感,用户长按按钮,打字机就可以打印出图片和文案,展现韩寒成长历程,以及一加手机与韩寒气质契合的部分,解释了韩寒成为一加手机代言人的原因。

当所有人都跟风模仿手机界面、微信界面的时候,W 公司再次带头创新,模拟现实中的物品。打字机逐字逐句把文案打印出来的设计,也让用户的注意力集中在文案上,让人关注接下来会出现什么内容,所以基本可以保证所有文案、图片都是被用户认真看完的,保证了品牌宣传效果。

4)腾讯「NEXT IDEA × 故宫」

这个 H5 页面在剧情设计上更加大胆,让人惊艳。它宣传的活动是腾讯和故宫联合举办的「NEXTIDEA」创意大赛,用符合当代人的喜好的创意来推广故宫。

H5 页面主角是朱棣皇帝(他建造了故宫),人们印象中的皇帝都是庄严肃穆的,但是这里展现的皇帝则是一个「潮男」。他唱着 Rap 跳着舞、玩自拍、玩朋友圈和 QQ,带着后宫玩各种高科技产品,传统和现代的碰撞,颠覆了常规的认知,加上欢乐的气氛,让人会心一笑。

 4.

 互动取胜  

最后一个类型是互动为主的 H5 页面,它们不需要高成本投入,却能取得显著的传播效果,其核心秘诀是与「我」相关的互动,让用户有很强的参与感,给用户许多社交货币,满足了他们的社交需求。

例如一个游戏类 H5,可以跟身边的好友分享自己的战绩;一个测试类的 H5,可以分享给朋友看你是怎么样一个人;一个匿名聊天 H5,可以让你和好友互动起来;一个恶搞 H5,可以让你在朋友圈变有趣。

1)轻游戏

围住神经猫是第一个爆红的 H5 小游戏,在 24 小时内访问量达到数千万 PV,随后被微信封杀。其实在 PC 互联网时代已经有无数类似的小游戏,那么为什么在移动互联网时代变得更加火爆起来呢?其成功的原因可以总结如下。

社交攀比。游戏结束后,把成绩告诉用户:你用了 xx 步,排名第 xxx,击败了 xxx 网友,获得 xxx 称号。并且给出一个按钮引导用户分享给好友。这样的数据、称号,可以在好友之间引发热烈的讨论。当你用了 15 步完成游戏,其他人就会挑战在 15 步之内完成,攀比心理让用户欲罢不能。

玩法简单。基本上不需要用户动脑,在几秒钟之内就能熟练掌握玩法完成游戏,在碎片化的移动互联网时代,简单是很重要的特质。用户可能在吃饭排队期间、上班休息间隙、电视广告时间就能完成几轮游戏,无需占用更多时间精力。

有趣放松。大部分爆红起来的游戏都是有趣、使人放松的。神经猫贱贱的形象、flappy bird 令人抓狂的关卡设计、八分音符用音调操作等元素都让人觉得有趣,它们没有精美的画面或者震撼的配乐,但是有趣的画风、简单的玩法能让人放松心情,能帮用户舒缓压力的小游戏自然受人追捧。

密室逃脱或侦探游戏是另外一个流派,特点是在一个封闭的空间内找齐不同的东西,让用户过了一把侦探瘾。这类游戏能让用户沉浸在 H5 当中,意味着可以更长时间地把我们想要宣传的东西曝光给用户,所以通过有趣的藏匿设计,用户会对品牌活动产生更加深刻的印象。

2)测试类

测试类的 H5 实在是太流行了,经久不衰。典型套路是给出一系列题目,最后给出一个得分和分析结果,甚至输入一个名字、传一张照片就给出一个结果。当然这种结果是没有任何科学性可言的,只是博君一笑而已。

有很多人对此非常热衷,经常会转发类似的H5。也许只要跟「自己」相关的东西,总是能获得大部分人关注吧,每个人总是想看看把自己代入到这个测试中会有什么结果。

3)匿名类

匿名聊天类 H5 在朋友圈的生命力也非常旺盛,微信是熟人社交,平时大家都是认识的,忽然切换到匿名语境就会变得有意思。有个产品叫「朋友印象」就是专门做这一类型的 H5 页面,比如说你可以匿名评价一个好友,对他说一些匿名的悄悄话。由于诱导性太强,相关服务悉数被微信封杀,足以见得用户对这类 H5 是多么「上瘾」。

匿名社交是社交软件的一个分支,用户可以在这类社区里畅所欲言。移植到 H5 页面中,发布者可以了解自己在好友中的真实形象,这是一个刚需,毕竟所有人都希望呈现一个美好的自己,所以大家都希望知道好友对自己的评价。而对于匿名留言者来说,可以借机表达平时不方便说的话,如果对方是喜欢的人,则可以一表情愫;如果对方是不喜欢的人,也可以适当发泄一番。

4)恶搞类

「恶搞」一词变得越来越流行,这个不那么文雅的词曾表示通过卖弄、做作获取虚荣心的满足,向他人展现自己不具备的特征。这个解释或许过于言重,很多人仅仅是在日复一日的平凡生活中幽默一番,向好友分享一些恶搞的东西。

有一类 H5 就是迎合了这个心理而变得流行,它让用户「体验」平时无法发生的事情,例如网易娱乐就推出了一个「我要上头条」的 H5,用户输入性别、名字,就可以生成一篇浮夸的假新闻,满足了用户登上头条的幻想。

还有一种形式是生成一张假照片,例如结婚证、房产证、工作证、名片、名人合照等。一般生成的照片都会带上一个二维码,扫描后进入活动页面,让用户生成自己的假照片。

恶搞类的 H5 如果能够跟自身的产品结合起来,能获得很好的下载转化和品牌宣传,但是如果仅仅是为了恶搞而恶搞,则会面临活动效果不明显的局面。

在微信体系内,很多人的做法是加上公众号的二维码,企图增加粉丝,不过这种方式容易导致公众号被微信封杀,所以做一个这样的活动无异于自杀行为。在准备上线类似的 H5 时,我们要思考这个活动到底能为产品带来什么价值。

5.

其他Tips  

1)善用 H5 模板工具提高效率

H5 的流行也带动了很多 H5 模板工具的发展,它们提供了一整套技术方案和设计模板,运营人员自己就可以发布一个 H5,不需要走漫长的流程,对于小团队来说是非常棒的工具。

不过缺点也很明显,那就是只能套用固定的模板,设计也显得过于粗糙,只能用于简单、小范围内使用的 H5。如果只是一些简单的信息告知,或者用户量非常小的互动,则可以用模板快速制作上线。如果想要打造一个传播范围更广的 H5,还是需要从设计到开发都用自己的团队来完成。

2)成功经验分享促成二次传播

做出一个爆款 H5,刷屏了两三天,是否就从此销声匿迹,或者埋头准备下一个爆款呢?其实你还可以选择进行「二次传播」,所谓的「二次传播」就是把如何做成爆款 H5 的成功经验在媒体中进行分享,这样也能带来不少的曝光量。

我们现在用搜索引擎查某一个成功的案例,可以找到大量的分析解读、经验分享等文章,也许 H5 的生命只有两三天,但这类文章却会永久沉淀下来,持续地为品牌、创作团队带来曝光。所以如果对自己的 H5 有信心的话,可以提前准备好经验分享,等 H5 火了之后第一时间分享出来。

相关文章

标签:

A5创业网 版权所有