产品经理内功修炼——眼球经济下的H5页面

目标

1.了解5页面的类型

2.认识H5页面的形式

3.掌握H5页面的设计技巧

前言

从引爆朋友圈的H5小游戏《围住神经猫》，到颠覆传统广告的大众点评H5专题页《我们之间只有一个字》，从2014，各种H5游戏和专题纷纷崭露头角。“H5”，这个由HTML5简化而来的词汇，借由微信这个移动社交平台，正在走进更多人的视野。

为什么H5那么火？

1.开发周期时间短

用H5页面开发能够保证最短的时间内把活动页面制作出来。

2.传播范围广速度快

H5页面利于传播，有浏览器的地方都可以进行传播。

3.更新迭代成本小

H5在开发上有明显的优势，速度快、更新迭代成本小。

4.形式丰富，天马行空

H5基于浏览器，不受形式限制。

H5页面的类型

1.活动运营型

活动推广的H5页面形式多变，包括游戏，邀请函、贺卡、测试题等形式。如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户传播。

2.品牌宣传型

不同于讲究时效性的活动运营页，品牌宣传H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。这种设计最好运用大胆的设计、走心的文案，需要UI和交互的人员有更多的创造力。

3.产品介绍型

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

如下面这个例子介绍的是一款车，那么能否通过这种交互的动画能够让用户感知到这款车有哪些特性。比如说舒适的座椅、优质的音响以及车速等。通过这种交互的体验能够让用户通过这种页面来尽可能的体验这款车的特性。

4.总结报告型

自从支付宝的十年账单引发热议后，各大企业的年终总结表现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。需要技术、产品、交互、UI能够一起努力，把普通的总结报告包装的比较有趣并且和用户有关。比如说支付宝的十年账单就让用户觉得和自己有关。

H5页面的形式

1.简单图文

简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等，“文”指标题文字。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。

如图滴滴打车的简单图文。

2.礼物/贺卡/邀请函

每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函。通过提升用户好感度来潜移默化的达到品牌宣传的目的。既然是礼物，那创意和制造便是重要的加分项。

如国外的一种产品，通过“魔法球”的模式给用户带来好感。

3.问答/评分/测试

问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出色的视觉和文案，弱化答题的枯燥感那就再好不过了。要让用户乐在其中。

4.游戏

H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上做到成功传播，需要在玩法和设计上多下点功夫。要注意推陈出新、让用户产生兴趣。

H5页面的设计技巧

1.故事化

H5本身是一个信息承载和传达的工具。讲故事是让信息快速传达的最好方式。你要将品牌故事融入H5，借助H5的技术优势将品牌价值文化理念传达给用户，让其永久的记住你。

如以成长记录的形式来进行产品的推广。

H5融入场景一是让用户能在参与中，找到熟悉感以更容易的接受里面的信息，而是场景承载的品牌信息，用户在特定场景里，唤起他们的认知，从而加深用户对品牌的印象。

比如下图滴滴打车利用“加班”场景推广品牌：

2.强互动

强互动是将H5页面做的比较有趣的最好的一种方法。场景现实化、加入互动机制，能让用户进一步感知体验H5宣传的品牌产品，提高对产品的购买欲望，并且增加了乐趣。

如苏泊尔空气净化器的H5页面，交互的方式让用户既进一步认知产品又提高乐趣。

3.参与感

真正能和让用户更好的理解品牌是让用户在参与进来深入感知，拥有能让用户参与体验的H5会更加有趣和让用户喜爱。你可以结合产品本身的特性以及用户的喜好进行参与机制的设置。

如优衣库“为自己的一天搭配”，希望用户通过H5页面的搭配来传递给用户优衣库的品牌、产品信息。

4.社交性

H5页面最重要的一个特性是传播。要让品牌能传播的更远还需在H5上融入社交性，借助用户的社交关系链传播。通产用户会通过谈资、帮助、比较、炫耀、窥视……与好友维持或促进社交关系。因此在H5设计中，应融入了这些能让用户分享的动机。而且社交对H5页面是一个黄金方法，利用好社交性，推广力度、传播范围会成倍增长。

5.话题性

想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。注意借势营销具有很强时效性。要分清主次用热点去推广产品。

如天天P图结合当时的热播剧《武媚娘》的界面。

6.流畅性

随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、吹起、3D视图等互动效果。但是切记实现动效的前提是保证流畅性。有些流畅性可以通过动效进行掩盖，但有的时候动效可能会影响画面的流畅性，所以产品经理要根据具体情况具体对待。

H5页面用户行为报告

这个报告对于我们设计和研发H5页面有非常好的启迪，希望可以分享给大家。

1.加载超过5秒钟就会有74%的用户离开页面

这个是H5页面用户行为报告揭示的道理，这个就要求我们在做动效加载的时候一定要控制下时间，我们一定要把时间缩短在5秒之内，最好能够在3秒之内打开那个界面进入到我们活动的主题或者是每一个新的页面。

2.中午12点左右和晚上10点左右是页面访问的高峰期

这是一个关于H5页面推广和运营的一个好的经验：那么知道了页面访问的高峰期之后，然后什么时间进行推广？在这里给大家建议是在高峰期前的一个小时左右进行推广，比如说中午12点是一个高峰期，我们要让用户有之前的这个适应程度，因为要是12点发的话，有些用户在自己的朋友圈等无法看到，我们需要鼓动用户主动把我们的页面分享出来，分享到社交平台里面，所以这就要求我们的产品最好能在高峰期前的一个小时或者一到两个小时之内把我们的产品进行上线。

3.通过用户口碑扩散的移动页面，其访问热度往往持续2天左右

也就是说我们一个活动或者一个页面，如果是在活动前提不变的条件下，它的热度一般会保持在两天左右，大家想一想，如果一个活动上线，用户会利用一天的时间进行分享，利用第二天时间去传播、娱乐，差不多两天时间就完成了这个活动的闭合传播。那么两天之后我们就需要给页面增加一些变化或者添加一些新的东西，这样能够持续保持我们这个活动或页面有一些新的增长点，这也是对于产品、运营方面一个比较好的经验。

4.放置在左边的按钮点击率低（可能因为大部分人是右撇子）

大多数用户习惯滑动切换。如图所示数据右点击的概率大约为左点击概率的四倍，也就是用户靠右侧点击的次数是比较多的，因为大部分人更习惯用右手去操作，那这时问题来了，是否我们所有的按钮和点击区域最好都放在右侧呢？或者我们希望用户的点击区域都放在右侧呢？其实也不是，想想一个辅助性点击区域是放在左下角还是右下角呢？正确答案应该是左下角，虽然右下角是和用户常用的右手比较近，但准确来说并不是和用户的手指近而是和手掌心近，那用户右手握着手机的时候手指是很难触碰到手机右下角的，而左下角却是容易触碰到的，所以我们并不是所有的按钮操作都放在右边。

5.用户随着页面层级的加深而不断流失。流失率在前几页最高

如图为一个统计，在第一页用户还有百分之八十四点多，到第七页已经降到了百分之四五点多，那么这规律就和我们的产品设计非常重要了。我们在设计H5页面的时候就要尽量尽量减少页面，能一个页面解决就不要用两个页面，并且最好能够将页面控制在五个页面以内。这也给我们一个启示，如果我们有核心的操作，一定不要放在最后一页，否则看到核心操作的用户数量会很少。所以我们在页面数量缩小的前提下，能不能让一些关键的功能和按钮前置，这就是这个报告对我们的一些重要启示。

6.输入行为或者复杂交互行为会导致用户流失

其实在APP研发时也有类似的规律，我们都知道交互复杂可能导致用户操作不下去，并且这个规律在H5页面中体现的更严重。那么之所以在H5页面这个规律更明显，原因在于H5页面出现的场景往往在社交平台，社交平台可以说是一个秀场或者一个短时间碎片化的浏览方式，而大家不会在社交平台长时间地停留在某一个页面，更不会在一个页面里面做一些复杂的操作，比如输入汉字等。所以说如果我们在客户端里添加一些复杂操作可能还会有一些用户去做，但在移动页面设置复杂操作那使用的人就会更少。用户在社交平台里还是以简单的交互为主，所以我们在设计H5页面的时候一定要避免复杂的交互，如果非要添加输入行为的话，尽量是一些简单的输入，例如一两个字，还是尽量以选择的方式代替输入的方式。

7.由移动页面引导去下载/打开APP的转化率平均值为25.01%，最高值为73.8%

大家知道H5页面里面很重要的一个目的是引流，给我们的APP、产品引流，而引流的效果大家可能没有办法去评判。这里给出一个业界的均值25.01%，大概有四分之一的APP的转化率，这种转化率包含了下载和打开。如果说我们仅仅引导去下载，那么转化率可能会低一点。而这里给出的最高值73.8%，可能是一个记录，打破是非常难的。如果我们能够在转化率上达到均值或以上，那就可以算一个比较好比较合格的H5页面了，所以大家在做引流的时候心里有一个参考数值。

8.移动页面的分享率平均值为12.61%，最高值为64.63%

如果你的H5页面里面有社交化元素，希望用户去引导分享的时候，那么分享率也是我们非常看重的。分享率的均值是12.61%，如果你的分享率能够达到均值，那么这就是一个合格的或者说做的还不错的H5页面，因为大部分的用户是低于均值的。

小结

1.H5页面的类型

活动运营型、品牌宣传型、产品介绍型、总结报告型。

2.H5页面的形式

简单图文、礼物贺卡邀请函、问卷评分测试、游戏。

3.H5页面设计技巧

故事化、强互动、参与感、社交性、话题性、流畅性。

思考

1.收集优秀的H5页面案例，分析其成功原因？

2.结合自己产品的现状，策划并设计一个H5页面？

原文链接：
眼球经济下的H5页面