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

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

阳光底下并无新事。刷屏 H5 的表现形式总是千变万化，但套路却不离其宗。今天，增长官研究院携手电子工业出版社新书《运营的秘密》作者黄杰民，为你归纳总结了刷屏 H5 的若干套路和案例。我们来看看不同类型的 H5 是如何俘获用户欢心的。

友情提示：文末依旧提供了赠品福利。欢迎将增长官研究院推荐给您身边的增长官。

  美学取胜  

（1）首草「首草先生的情书」

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

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

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

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

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

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

「首草先生的情书」H5

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

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

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

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

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

「我们之间就一个字」H5

（3）悦榕庄「唤起这一刻」

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

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

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

「唤起这一刻」H5

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

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

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

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

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

  技术取胜  

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

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

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

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

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

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

「吴亦凡入伍」H5

（2）奔驰「七夕鹊桥会」

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

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

「七夕鹊桥会」H5

（3）AKQA「梦幻水晶球」

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

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

「梦幻水晶球」H5

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

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

「每双球鞋都有一个故事」H5

  情节取胜  

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

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

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

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

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

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

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

「这个陌生来电你敢接吗」H5

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

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

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

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

「时代姐妹花」H5

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

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

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

「1步1步看清韩寒」H5

（4）腾讯「NEXT IDEA × 故宫」

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

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

「NEXTIDEA ´故宫」H5

  互动取胜  

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

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

（1）轻游戏

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

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

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

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

「围住神经猫」H5

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

「密室逃脱类」H5

（2）测试类

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

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

测试类 H5（1）

测试类 H5（2）

（3）匿名类

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

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

匿名类H5

（4）恶搞类

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

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

「我要上头条」H5

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

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

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

恶搞类 H5

  其他Tips  

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

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

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

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

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

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

二次传播带来持续曝光

   文末福利  

如果你对今天的话题感兴趣，可以购买电子工业出版社博文视点新上市的《运营的秘密：解码大公司的运营方法论》。本书总结一线大公司的丰富、真实的运营案例，从内容、数据、活动、用户四个维度对运营进行了详细的阐述。

增长官研究院作为合作伙伴（并且我个人也是博文视点的作者），与官方携手，独家为你准备了一个抽奖活动。

你可以长按小程序抽奖二维码，参与本次抽奖。我们将送出 5 本书。