如何通过H5页面走入用户内心?

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

H5突然火了。

通过微信和朋友圈的快速发展,H5靠着无需下载、即点即用的属性迅速上位,一跃变成炙手可热的小鲜肉。

1、为什么说它是小鲜肉?

跟大家分享一份eMarketer的数据,其中显示了2012年 -2018年营销在不同媒体渠道的预算比重:

143400mdfq37f5aofpqpio

相比电视、杂志、户外广告等传统媒体呈逐年下降的趋势,品牌营销在数字和移动方面的投入在逐年上升,而且,在所有渠道预算中移动技术的投入增长最快,远远高于其他渠道的增长。

移动营销已是大势所趋。

2、什么是H5?

H5,是HTML 5的简称,它就是一种高级网页技术。

还是没听懂?

这么说吧,我们平时看到那些邀请函、小游戏、幻灯片……都是H5网页,它跟我们平时上网看到的那些网页本质上没有任何区别。

只不过大家普遍接受的那个网页技术版本是HTML4,而这个版本是在1997年发布的。相比H4,H5有更多的交互和功能,最大的优点之一是在移动设备上支持多媒体。

3、H5能做什么?

这边我大致做了三个分类:

1、品牌传播:形式一般为品牌发布、总结报告、公益传递、人事招聘;

2、活动推广:形式一般为贺卡邀请、游戏互动、答题有奖;

3、产品展示:形式一般为故事讲述、性能展示。

4、H5案例分享:

品牌传播之品牌发布型

腾讯——生命之下,想象之上

143401jkkkw0617x3ir1ke

品牌传播之总结报告型

京东——京东十大任性

143401gub2puufcp8uzyb7

品牌传播之公益传递型

欧莱雅:我和你之间,就差一个字

143401pl5xs03utgu0p9u5

品牌传播之人事招募型

东华禅寺——招聘启事

143402ep6x8m11h89aa441

这是一个看似正经的总结:

品牌传播型H5——等同于一个品牌的微官网,更倾向于品牌形象塑造,向用户传达品牌的精神态度。在内容上倡导一种态度、一个主旨,在设计上则需要运用符合品牌气质的视觉语言,让用户对品牌留下深刻印象。

关于视觉

整体——氛围渲染

细节刻画——人物、元素配合

关于内容

适当借力——寻找共鸣

热点结合——业务板块完美融合

软性宣传——(其实就在说看我好(diao)厉(zha)害(tian)

活动推广之贺卡邀请型

百度股市通——一封神秘的邀请函

143402mj3l3plorwurivd3

活动推广之游戏互动型

小时代:邀你来撕逼143402nppsagvcrsv3pbgs

活动推广之答题有礼型

途风旅游网:时光倒回9年,你会选择怎样人生?143402sj22x6jx5gmzjbqu

这是一个看似正经的总结:

活动推广型H5——活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播,行成爆炸式的传播效应。
关于视觉

细节与统一——复古拟物的视觉风格,那字体就不能过于现代;幽默调侃的调调,那文案措辞就不能过于严肃;打情感内容牌的,动效就不能过于花哨。

冲击性——最好闪瞎你的钛金狗眼,让用户忍不住带着“矮油不错,这个页面有点diao噢”的心情点击分享

关于内容

标题党——做个妥妥的标题党,先到碗里来再说

参与感——门槛低易参与,内容引发共鸣,利益驱使转发

产品展示之故事讲述型

一封来自1947年的明信片

143403d8eezl1fmpwwj48l

产品展示之性能展示型

兰蔻: “天鹅颈”睫毛膏143405udy1dvdgjdxgel68

这是一个看似正经的总结:

产品展示型H5——聚焦于产品功能介绍,运用H5的互动技术优势尽情展示产品特性,吸引用户买买买。

关于视觉

整体——清晰、简洁

细节刻画——产品为主,性能刻画

关于内容

讲个好故事——引起共鸣

差异化展示——寻找产品个性和调性

这是一个正经的总结:

内容上——

1、故事化:不论H5的形式如何多变,有价值的内容始终是第一位的。在有限的篇幅里,学会讲故事,引发用户的情感共鸣,将对内容的传播形成极大的推动。

2、场景化:H5的设置中,融入如写字楼、地铁站这些场景,一是让用户能在参与中,找到熟悉感以更容易的接受里面的信息,二是也是最重要的,场景承载的品牌信息,能在用户过后在某个特定场所里,唤起他们的认知,从而加深用户对品牌的印象。

4、强互动:加入互动机制,能让用户进一步感知体验H5宣传的品牌产品,提高对产品的购买欲望。

5、参与感:结合产品本身的特性以及用户的喜好进行参与机制的设置。

6、社交性:要让品牌能传播得更远还需在H5上融入社交性,借助用户的社交关系链传播。社交需求是用户存在社交媒体的核心,通常用户会通过谈资、帮助、比 较、炫耀、窥视…..

与好友维持或促进社交关系。因此,在H5设计中,应融入了这些能让用户分享的动机。

形式上——

1、幻灯片式:适用于频繁、小型的需求。 例如:定期发布的内容,几乎零预算;结合热点的营销,周期极短。

2、交互式动画:制作周期和成本比较高,需要提前规划。优质的H5大约在两周到4周左右,也有可能更长。适用于例如: 中小型活动/品牌事件的传播;大型活动/品牌事件的传播。

3、功能型:轻交互重功能的功能型H5制作周期较短、成本也不高,成功的关键不在于酷炫的交互,而在于用户需求的把握以及后续的运营。适用于例如: 品牌账号的粉丝运营。

5、H5能在你心中留多久?

根据腾讯今年发布的《移动页面用户行为报告》提出的几个数据,可以给到大家一些参考:

1、H5页面热度一般只能持续两天 ;

2、加载超过5秒就会有74%的用户离开页面;

3、中午12点和晚上10点是页面访问的高峰期;

4、用户大部分(89.9%)喜欢上下滑动或右点击,只有10.1%会左点击;

5、层级越深流失越多,在第五页的时候只剩下一半不到(48.2%);

6、平均分享率12.68%。

6、怎样和H5保持热恋关系?

从用户角度挖掘H5的价值点,写一篇软文。通过图文群发来推广H5无疑是最重要的方式。

尽你所能利用所有能推广H5的渠道。目前比较常用的方式:通过公众号的图文群发推广、微信群推广、线下二维码推广等式。

充分利用“阅读原文”和自定义菜单:通过字体或者颜色的视觉跳跃引起注意,平均每个菜单项会有20%的新增粉丝点。

我们需明白,在仅限的时间内,我们能否将信息准确无误的传递给更多用户,并让用户易感知,留下好印象,然后在某个场景能想起你。

直白一点说,感情谈好了,掏钱还会远吗?

转载自:鸟哥笔记

您的赞赏,是对我创作的最大鼓励。

评论( 6

登录后参与评论
  1. 内容为王 传播为道 推荐参看【未来应用】

    回复
  2. 哈哈 有些太过精细的不太懂 但是依旧喜欢未来应用的模板跟案例,感觉超赞!

    回复
  3. H5页面可以参考未来应用网站里的案例 免费做

    回复
  4. 请问一下 有哪些软件可以制作H5这种图

    回复
  5. H5不是技术吗,怎么听作者说得像是一种设计理念

    这个算啥??
    这边我大致做了三个分类:

    1、品牌传播:形式一般为品牌发布、总结报告、公益传递、人事招聘;

    2、活动推广:形式一般为贺卡邀请、游戏互动、答题有奖;

    3、产品展示:形式一般为故事讲述、性能展示。

    回复
    1. 回复

      H5是一种理念,HTML5才是技术

加载中