如何用数据优化设计？快手的保姆级案例来了！

更多快手案例：

一、前言

一般谈及运营活动设计，大家往往侧重视觉表现层的优化与迭代。但至于怎么优化、为何优化？就需要借助用户数据，让其为设计提供方案支撑及后期验证。以数据作为依据，运营设计师才能精准洞察用户行为背后的心理密码。从数据波动里明晰优劣，有依据地进行设计优化。持续进行“设计-数据复盘-优化”的循环，后续归纳出相关规范并执行，才能打造出不仅颜值出众，更能深度黏合用户、驱动业务增长的优质运营设计作品。

所以，今天就为大家完整分享快手运营设计是怎样利用数据完成设计优化的。

二、通过数据发现问题

首先我们可以通过运营活动的数据趋势特点与用户行为数据来发现运营活动的一些主要特点

1、活动流量趋势&作品生产趋势分析

快手运营活动页的内容主要可以分为两大模块：

1）促产活动模块：用户参与相关话题发布作品赢取流量、奖品等奖励
2）消费活动模块：图文展示、直播、抽奖等等

选择近期不同垂类的十个活动 (如上图所示)，分析他们上线后约两个月范围内的数据,归纳总结了如下的数据曲线：

活动流量趋势可以总结为以下几点：

1、大部分活动都是在上线后短时间有大量访问流量，几天后平均维持一段时间常量，再之后逐渐减少
2、某些大型活动会划分不同时间阶段，在新活动模块上线时也会突增访问流量

作品生产趋势可以总结为以下几点：

1、大部分作品生产趋势与活动流量趋势呈现正相关
2、所选择的7个样本中，每日生产者的占比（发布作品数/UV）比例并不高

2、用户行为数据分析

通过用户浏览页面时长热力图，可以获取用户对页面各板块的兴趣程度。

我们分析上文提到的10个活动页样本，可以发现如下图所示效果：

可以总结为以下几点:

1、活动页人均浏览时长峰值约为65.78秒，首屏后浏览时长会骤降50%以上，也就是说用户在首屏平均停留1分钟左右，随着页面深度增高，停留时长逐渐降低

2、当首屏内容有文字信息时，用户在文字信息部分停留时间更长

3、页面深度很深时，如果有抽奖/投票等模块，停留时长会回升

通过上面两个数据的结论，我们大致可以勾勒出常规运营活动的特点：

根据运营活动的特点，我们归纳了这次页面优化的主要三个目标：

1、找到首屏的最佳展示区域与方式
2、提升用户活动参与度
3、优化页面排布与阅读体验

并根据这三个目标提出了一些想要解决的问题：

三、通过数据解决问题

1、首屏内容框架优化

问题1：一个适合大部分用户的活动页首屏高度为多少？

快手的后台运营活动数据类型很多，某些看上去只是服务于运营侧的数据其实可以侧面的反应出设计上的可优化点，举个例子：

比如观察浏览用户热力图：

本身浏览用户热力图是作为观察页面内各板块的访问人群的一个数据指标

但我们观察可发现：100%用户都会访问到的高度=这个活动所有用户手机的平均首屏高度

所以我们带着这个结论，总结了快手运营各垂类（比如时尚、健康、青春娱乐、三农、泛知识等）的各种活动页面浏览用户热力图

可发现如下一些现象：

1、大部分用户的首屏展示区域约为828*1792尺寸（绝大数iPhone机型首屏尺寸）
2、三农活动的首屏展示区会更短，展示区域约为828*1406

这个现象可能是因为：三农垂类用户群体为年龄约40+的农村用户群体，他们使用的手机多为基础款（尺寸更接近于扣除底部导航栏的1080*1920的安卓机型）

所以我们就可以在下一阶段制定优化方案的时候，针对三农的垂类进行特殊设计：

1、三农用户的首屏浏览高度更小，所以就要尽量压矮头图高度，更多的露出关键内容信息
2、三农的用户群体年龄偏大，页面字号就要相对普通活动更大一些，方便用户阅读
3、尽量少的使用过于有设计感的排版

问题2：首屏内，主视觉头图与活动内容的比例为多少更合适？

我们将上文制定的两种首屏展示高度分别列两组方案
收集行业内以及快手内部数据量较好的活动页案例投入到方案中

可以发现如下图所示的结论：
1、常规主视觉高度约为首屏展示区的60%
2、短主视觉高度约为首屏展示区的54%

*总结：制定首屏设计框架规范

根据以上两个问题数据分析后的结论，制定了首屏设计框架的规范，并投入设计使用

2、活动模块布局优化

问题1：参与活动的按钮放页面哪个位置，更能促进用户活动参与度？

让我们先来了解一下组件曝光及点击数据：

如下图所示，此数据是选择的时间范围内，某个组件的曝光与点击数据情况
简单来讲，如果转化CTR值比较高，说明这个组件的点击率很高

所以我们把活动参与入口按钮设计了三种不同位置的方案，并设计相关活动投入使用

每组方案选择5个活动样本，并选择同一时间范围内（如活动上线一周区间内）形成对照组，观察三个组的转化ctr值情况如下：

可发现如下结论：

● 按钮位于【首屏】时比按钮【吸底&首屏以外】点击率更好
● 其中按钮在【首屏外】点击率最差

*总结:制定活动参与入口设计规范

根据以上问题数据分析后的结论，制定了活动参与入口的设计规范，并投入设计使用

问题2：活动页最常用的活动组件是什么？

想知道有哪些模块更吸引人，就要先调研活动页最常见的有哪几种活动模块。我们选取了各垂类40个活动页进行归纳总结：

可以发现：

1、【参与相关话题发布作品 赢取奖励】是最常见的活动主模块，要远多于纯图文内容展示的活动
2、其中部分体量大的活动会匹配【抽奖活动/热门用户关注面板/直播预约】等功能模块，具体使用占比如上图所示

问题3：什么活动组件点击量更高更受欢迎？

我们将上述的活动样本的数据设定为活动上线一个月的数据量，并取该活动组件转化CTR排名最高的前三名进行数据调研

下面截取部分数据表作为参考：

我们将全部样本的活动组件转化CTR除以平均值，进行顺序排布，可以发现如下结论：

1、如图中红色标记数值所示：两种活动类型，抽奖与投票的CTR值都明显高过于其他任何组件
2、【参与话题发布作品】型活动中，参与活动按钮的平均CTR值一般为除了【抽奖与投票】组件外，点击率最高的组件
3、其他组件相对没有明显突出的点击率，个别组件因不同运营活动的侧重点不同会有偶发点击率很高的情况，所以不作为参考

*总结:通过CTR数据，整理活动组件用户点击偏好

通过以上结论可将组件的点击率情况如下图从左至右排布，也可作为指导运营同学调整模块顺序更好提升用户留存的参考信息：

• 抽奖跟榜单/投票的模块点击率最高，内容少的活动页一般可以将抽奖作为头部吸引点击
• 内容多的活动页可以将抽奖放第二屏，吸引用户继续下滑查看更多内容

3、字号排版优化

问题：页面字号设定为多少，才能更多的覆盖各种手机尺寸、用户群体？

从相关文献可知：我们手机距离眼睛的阅读距离（30cm左右）以及最佳阅读角度（30°左右）

使用视角计算公式，我们能识别到的最低的文字大小为 h= 2*30·tan(0.3/2) ≈ 0.157cm

带入到我们设计稿标准尺寸iPhone 11 （分辨率 828×1792  326PPI）

可以得出在828宽度下，最小的可识别字号约为20px

但在实际应用中，快手的运营页面大部分为切图搭建

与需要技术搭建的UI页面不同，运营活动的UI页面是将整个切图等比缩放到各个机型的手机屏幕内显示

即便使用的是同一字号，在不同尺寸的手机下也会有不同的字号显示：

举例，如果在设计稿宽度828的屏幕下，28px的字号在不同手机型号下会变成如下图所示的字号大小。

可以发现过半的机型，实际浏览的字号要小于设计稿字号。

我们将旧规范的一组字号带入计算：

可以发现：20、22号字中有多数字号在其他型号手机中显示大小低于20px

*总结：制定页面字号规范

根据以上内容制定了新的文字规范：

• 删除原始规范内的22、20号字体，最小字号为24号字
• 正文从28号字改为30号字

四、总结

通过对活动页数据分析归纳出的结论整理后，便可形成一套完整的、有数据依据的运营设计规范，如下图所示：

但这样一套设计规范并不是一成不变的，当我们将新的遵循设计规范的活动页投入使用时，又会获得更多新的数据。

通过这些数据，我们还是会继续整理更多的可以优化的设计点，并形成一种循环迭代：

将有数据支撑的有效优化内容继续迭代更新，才能做真正有价值、符合时代趋势的好设计！