如何通过设计提高H5活动的转化率(一)

@阿肆Stella：日常做了不少H5活动的需求，天长日久积累了一些心得体会，在此跟大家唠叨唠叨，希望能对大家有所帮助，如果没有，那…

日常做了不少H5活动的需求，天长日久积累了一些心得体会，在此跟大家唠叨唠叨，希望能对大家有所帮助，如果没有，那…

 

前言

友情提示，这是一个很长的前言，如果没有耐心看可以直接跳下一小节~当然我是希望你们看看的，毕竟码字忒累了TAT俗话说得好：设计就是解决问题。没有问题就没有设计目标，没有目标就没有方案，更没有设计心得。所以在这里“提升转化率”就是我的设计目标，我要分享的就是解决“转化率低”这个问题的设计心得。我这里提高的“转化率”，是指参与活动的人占总用户数的比率，简单的说就是尽可能让更多的用户参与并完成活动。H5活动有那么多数据指标，为什么要选这个呢？就是因为太多了嘛。

一般在活动开始前会预设一个关键数据指标，比如拉新活动，关键指标是通过这个活动进入产品的新用户有多少；比如促活活动，关键指标可能是参与过这个活动的用户在未来的留存情况和启动频次…总之是因活动而异的。如果按照这种个性化的指标来分享心得，那我可能要写的是《如何设计一个签到活动》《如何设计一个邀请新用户活动》这种文了，但作为一个效率党，我还是希望能有一套通用的套路，能够简单且广泛地应用在大部分活动H5中，一次总结，百倍使用，效率倍儿高，收益倍儿棒。

在这股意志
（懒？）的催动下我发现，这些花里胡哨的指标之前还有一个共通的指标，那就是活动转化率，也就是有多少人参与完成了这个活动。毕竟用户参与是产生活动效果的基础前提，大部分情况下，不管这个活动本身预设的指标是什么，参与的人多了，已经算是成功了一半了。所以，决定就是它了！

在实际活动中，对最终数据来说，影响因素是多方面的，比如活动方式、奖励规则、宣推力度、热点IP影响等等…这些因素的影响作用很大，有的甚至是决定性的。以上我特意用了排比的手法只是想指出一个惨痛的现状：作为一枚交互设计师，以上这些都很重要，但都跟我没关系…

那难道我就只能做一个打杂的线框仔么？必然不能够。作为一个很容易没有存在感的岗位（瞎说什么大实话），也没有什么资源和决定权，我们要做的就是在尽量没有成本的情况下，通过设计为产品附加价值，说得白话一点，就是同样的东西，设计过的和没设计过的，嘿，它就是不一样！

如果你能看到这里，说明是真爱无疑了。因为你刚刚看完了一大段将近千字的“前言”。不是我有意注水，而是我觉得只是简单粗暴看心得和示例，你们可能过眼不过脑，很快就忘记了，我希望尽可能把我的思考过程展示出来，这样你也许更能明白我的想法，收获的心得才更真实。

 

所以总结一下：

1. 活动H5有很多关键数据，但对大部分H5活动来说，活动的转化率都很重要；


2. 交互设计师要积极主动（想方设法）参与到项目中，不要做一个木有思考的线框仔，你的每一份参与和设计成果都可能成为你日后的发言权


3. 以下正文讲的是一个没钱没权的交互设计师，在尽量不占用资源的情况下，“无中生有”地提升H5活动转化率的通用心得。

 

（到这里是真的前言破千了，这大概是我写过最长的前言了）

 

 

提高转化率的途径

通过一个简单的漏斗模型可以直观的看出一个活动的主要阶段和各阶段的流失情况。我们要做的就是把原先锥子型的“瘦漏斗”变成陀螺型的“胖漏斗”。

我们需要做的是：

1. 提升页面流量：让更多用户进入活动，而不是无视；


2. 提升活动参与率：让更多人选择参与活动，而不是看看就走；


3. 提升活动完成率：让更多参与活动的用户顺利完成任务，而不是半途而废。


4. 提升参与周期：让更多用户选择长期持续性的参与活动，而不是仅此一次。接下来我们就按照从上到下的顺序，一层一层来改善。 

 

1. 提高页面流量：提升入口点击率

页面的流量会受到很多因素的影响，比如入口的位置、展现的频率，推广的途径等。这些都是需求方去协调的，我们没办法决定，我们力所能及的是：提升入口的点击率。如果用成功追到女神来类比活动转化率，道理就很好理解了。想追到女神，第一步得先让女神知道你的存在。默默的站在角落里，做一个安静的守望者，期待她哪一天能忽然注意到你，那么结果想必大家也都知道了…

所以，必须赶紧行动起来，让自己成为这条gai最亮的仔。常用的的方法有以下几种：

1.1 加动效

人眼对动态事物的感知要明显强于对静态事物的感知。在一片静态的视野中，一点点细微的动静也会被人眼快速捕捉到。所以我们可以利用这一点，让活动入口快速吸引到用户的注意。

快看漫画-签到入口-icon动效

 

芒果TV-签到入口-气泡动效

 

美团外卖-红包活动入口-动态悬浮角标

 

动效的类型、特点和使用规则大家自行学习，在此就不赘述了~

 

注：动效虽好，但不能滥用，要根据信息优先级区分主次，避免出现一个页面有N个动效，动效的强度还一样，花里胡哨晃得用户不知道看哪里，不仅没有起到引导作用，还极大的损害了用户体验（想想那些满屏弹广告弹对话框的网页），得不偿失。

 

比如下面这个案例，虽然一页有2个动效：①banner上的按钮；②右下角动态悬浮角标。但是明显可以看出有强弱对比：①＞②，不会干扰视觉焦点。

饿了么-口碑tab

 

1.2 加红点

不会做动效，或者没时间做动效怎么办，那你可以试试动效的“低配版”：加个小红点。小红点对视线的吸引力无需赘述大家都懂得，放一个红点在活动入口上，想看不到都难啊。

有人说，红点不是你想配，想配就能配。确实，有些时候因为一些技术、权限、制度等问题，不是随随便便就能加红点的，那该怎么办？简单，你们还记得当年逼疯强迫症的微信【红点狂欢】事件么。了解一下你就明白我意思了。当然我不是鼓励大家去做伪红点欺骗用户，而是可以借鉴红点元素，在入口icon增加一些类似红点的小元素，以此来起到吸引用户的目的。

 

猫眼视频，入口加了红点样式的“极速审批”

 

优酷视频，云相册icon上方的伪红点“热”

  

1.3 加按钮

如果说还有什么元素能与红点的“吸引力”相比，那就非按钮莫属了。用专业点的术语描述就是，按钮的可供性
(affordance)很强，可以让用户快速意识到这个元素是可以被点击的。所以在入口如果添加按钮的元素会有助于提升用户的点击量。这也是为什么只要你仔细留意就会发现一个现象：明明整个卡片区域都可以点，但还要在图上加个“按钮”。

饿了么、美团的banner，加了按钮元素

 

1.4 加诱人的文案

一提到文案，不得不提到流量神器【标题党】，标题党的威力想必大家都体会过，所以也就可以理解诱人的文案的重要性了吧。其实只要仔细留心各产品的运营位：banner、弹窗、push等，你就会发现，诱人的文案无处不在。比如：

请拿出你们的小本本，记下关键词：免费、限时。这个词是活动入口常用的“黄金组合”，一个激发贪欲，一个创造稀缺感，都是人类无法抗拒的诱惑。不要犹豫了，加上就对了。可以延伸的还有：5折、立减、优惠、打折、限量…
（关于更多标题党的技法，感兴趣可以去私下了解了解，拓宽一下知识面~） 

  

1.5 建议使用方法

建议使用方法很简单：

• ① 能用就用，不要客气
• ② 能用几个用几个，组合使用效果更佳仔细观察，有很多情况都是复合用法，比如：

支付宝-文案+红点+按钮

 

淘宝-天猫农场：文案+红点+气泡动效

 

 

今天我们讲了作为一个“没钱没权”的交互设计师，“无中生有”地提升H5活动转化率的第一步：提高页面流量，也就是提升入口点击率。有下面几个通用方法：

1.加动效


2.加红点


3.加按钮


4.加诱人的文案建议：组合使用效果更佳。

这次的内容文字比较多，看完的都是真爱~内容方面如果你有好的建议或意见欢迎在评论区一起探讨~未完待续，下次见~

 

 

原文地址：
海盐社（公众号）

作者：阿肆Stella