当前位置:厦门网站建设 > 网站建设 > 泉州网站建设公司揭露H5页面制作的4种核心套路

泉州网站建设公司揭露H5页面制作的4种核心套路

厦门网站建设
2018-04-19 阅读 专题:

H5页面的刷屏往往产生巨大影响力。然而,形成刷屏本身是一个“技术活”,泉州网站建设公司满山红站长总结了以往成功的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 是以美取胜的作品,简约淡雅的画面加上引起共鸣的走心文案,渲染出充满浓浓爱意的情绪,强化了首草代表对女性之爱的品牌宣传诉求。

H5页面

▲「首草先生的情书」H5

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

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

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

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

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

H5页面

▲「我们之间就一个字」H5

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

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

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

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

H5页面

▲「唤起这一刻」H5

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

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

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

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

H5页面

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

 2.

技术取胜 

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

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

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

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

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

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

H5页面

▲「吴亦凡入伍」H5

2)奔驰「七夕鹊桥会」

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

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

H5页面

▲「七夕鹊桥会」H5

3)AKQA「梦幻水晶球」

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

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

H5页面

▲「梦幻水晶球」H5

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

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

H5页面

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

 3.

情节取胜  

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

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

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

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

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

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

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

H5页面

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

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

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

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

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

H5页面

▲「时代姐妹花」H5

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

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

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

H5页面

▲「1步1步看清韩寒」H5

4)腾讯「NEXT IDEA × 故宫」

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

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

H5页面

▲「NEXTIDEA ´故宫」H5

 4.

 互动取胜  

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

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

1)轻游戏

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

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

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

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

H5页面

▲「围住神经猫」H5

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

H5页面

▲「密室逃脱类」H5

2)测试类

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

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

H5页面

▲ 测试类 H5(1)

▲ 测试类 H5(2)

3)匿名类

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

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

H5页面

▲ 匿名类H5

4)恶搞类

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

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

H5页面

▲「我要上头条」H5

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

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

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

H5页面

▲ 恶搞类 H5

5.

其他Tips  

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

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

H5页面

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

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

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

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

H5页面

▲ 二次传播带来持续曝光

(完)

预约建站专员添加QQ:63820 领取建站内部课程
著作权归作者所有
简介
满山红 创始人
8年建站实战经验(如:个人网站建设,企业网站建设及大型门户网站建设)并深度研究搜索引擎算法,熟悉大型网站SEO优化。
曾操作某大型门户网站日IP达100万(纯SEO流量),拥有上千网站提供SEO友情链接资源(参加培训免费赠送100个单向友情链接),免费赠送满山红SEO内部VIP课程