设计师就是只会设计版面会画图的吗？答案是否定的，现在的设计师需要懂点数据，那么为什么还要看数据？从京东云年终采购季项目案例，京东云设计团队是如何运用数据助力产品设计的呢？现在来聊聊…

在日常工作中，我们是不是会遇到这样的场景

实际上，这种情况可能每天都在发生，大家对定位，用户，审美等看法不一，最终靠“个人感觉”决定。不仅降低效率，对产品价值提升更毫无帮助，这时就需要数据为你的设计作支撑。

大家都知道 UED（User Experience Design）用户体验设计团队，主张「以用户为中心的设计」，那么什么是 GD 呢？GD（GrowthDesign）增长设计，主张「以用户为中心，以增长为导向」。

GrowthDesign

而京东云设计团队——JDCD，也在每一次的项目案例当中快速成长。今天给大家分享向GD转型的一个案例——年终采购季大促，聊一聊数据如何助力产品设计。

项目背景

电商必不可少的环节，那就是“大促”，而京东云的年终采购季就是年度大促。此次项目由京东云设计团队来支持。年终采购季的目标受众是京东云用户及拉新、下沉用户。对于京东云来说，2019是快速成长的一年，因此我们的运营活动也要配合起来，打造最具产业属性的智能云。全面提升数字化转型的效益和效率，拉动新用户，对外扩大影响力，对内进行设计沉淀。

本次的年度大促活动分为三个阶段，分别是：点亮科技-助创业起航（预热期）、点亮生活-助零售创新（热卖期）、点亮梦想-助力2020（返场期）。每个环节的数据也是下一步做的更好的基石，环环相扣，步步促进。

视觉维度

工欲善其事，必先利其器。寻找和制定一个合理全面的618方案思路，是提高效率和准确率的关键。经过设计团队脑暴，我们梳理制定了4个方案步骤：

❄️设计维度定义；

❄️寻找切入点；

❄️符号抽象；

❄️输出方案。

我们将根据这条主线来抽丝剥茧，分享在年终采购季项目中的思考。

方案步骤

大促设计开始之前找准设计方向，不在迷宫里原地打转很重要。在经过不同设计师之间的头脑风暴，结合运营诉求，整个活动将围绕 #科技感 #冲击力 #空间感 三个要点思维发散。

Brain storm

寻找切入点是创意关键，如何表现科技感，设计师需要做的，就是根据需求将“科技”这个词结合自身产品属性，通过视觉表现的方式呈现出来，让用户产生共鸣。搭建具有超未来科技感的空间模型，并在此基础上加以动感的元素，为用户营造高科技、强冲击力、新奇又具有共鸣的视觉感受。

寻找切入点

抽象化符号可以升华主题，根据我们推导出的切入点，视觉侧联想出了代码符号和云产品作为本次大促的视觉基础图形。</>、{}、@是一种计算符号，能给目标用户带来归属感，同时在整个构图上保持着强透视空间感，加强画面的冲击力形成画面纵深。

抽象化符号

创意落地

交互策略

活动页的交互设计与产品的交互设计有许多相似之处，例如都需要明确此次活动/产品设计的目标，其次需要在设计上呈现信息层级，避免页面信息堆积毫无主次。

针对“年终采购季”活动的信息进行拆解和整合，发现此次活动需要展现的信息包括：

活动标题；

活动时间 ；

产品/商品；

优惠/利益（折扣、秒杀、返京豆、抽奖）；

互动话题 ；

活动规则。

如何将以上信息合理地展现在页面上，并让用户参与进来是此次设计的关键。

· 首先需要充分利用首屏展示核心信息。在一期、二期以及三期的活动页中，将活动标题、活动时间等核心内容放置在首屏，同时为了给话题页引流，在首屏中增加了互动话题入口。

· 其次将活动规则等次要内容放置在底部或者以折叠的形式展示，减轻用户视觉负担。

· 最后则是需要突出活动优惠/利益，抓住用户注意力，吸引用户浏览、操作。

在三期的活动页设计中，我们通过在产品列表中增加“消费返京豆”的标签强调大促优惠，并在楼层标题中使用“低至”、“返利”等词语直接告诉用户利益点。

交互设计概览

视觉策略

整个活动战线较长，是全阶段全链路的系列活动。活动的整体设计是京东云设计团队根据主视觉对大促进行后期创意延展。随着时间的推移，整体页面色彩由偏冷的蓝紫变到偏暖的红金越来越热闹，最后回归偏冷的蓝金。从色彩心理学理论上运用颜色持续为用户提供新鲜感，避免视觉疲劳。背景采用纵深的太空舱模型，体现行业属性的科技感。通过计算符号使参与用户具有认同感，运用多彩的营销元素体现冲击力和活动氛围。

三个阶段视觉概览

在设计执行的过程中，发现页面最后的整体高度过高，浏览起来的体验并不是很好，为了解决这个问题，我们为页面设计了3个导航，分别是顶导航，侧导航和卡片式导航。其中卡片导航在首屏显示，使用户点击进页面第一时间能跳转到自己感兴趣的楼层。

顶导航和侧导航均在页面下滑至第二屏时开始显示，顶导航显示主要楼层，侧导航显示楼层内小分类，提升了用户在寻找目标产品时的体验度。

导航样式

数据驱动产品设计

在进行完创意落地后，我们需要寻找所做设计的价值所在，为什么要做数据驱动的设计？原因很简单，在项目开发过程中，设计师需要对设计方案负责。对设计方案的负责要求，既要对开始的设计依据负责，也要对最后的设计结果负责。这时候我们需要依靠某些指标去支撑设计依据，以及验证设计结果。将活动按转化路径进行分解，通过对比每个转换路径节点的点击率来评估活动的效果，为进一步提升转化率提供参考。

挖掘核心数据价值，以客户导向为中心。

Step1.通过挖掘数据以及业务导向获得明确的设计目的

❄️ 提高转化率

CTR转化率是指进行到第一步的用户有多少顺利进入了第二步。提高转化率，最终目的就是业务增长。

❄️ 拉动新用户，提高用户活跃度

京东云虽然不是社交产品，但也需要拉动新用户，提高用户活跃度来增加用户粘性。购买云产品毕竟不是高频活动，用户基本上都是有购买需求时才回来网站看看，其他时候都不会想着打开或登录网站。如果用户跟平台的互动少了，当产品到期时可能会选择退出转到其他平台。

Step2.拆分指标

拆分指标就是把刚刚的第一步的目的拆分成具体可量化的指标，可以用多个指标来衡量一个目的。根据AARRR模型，本次活动我们拆分出了PV（页面浏览量）、UV（独立访客人数）、VV（用户访问次数）、CTR（转化率）新用户访问次数、跳出率、退出率、平均访问时长这几大类数据进行分析。

AARRR模型

Step3.制定方案并实施

首先我们对这3期活动上线第一周的数据做了一个对比分析。

相比于一期，双十一二期的浏览量整体提升，三期稍微有些回落但整体表现好于一期，其原因是二期正值双十一黄金期，流量在此期间达到峰值，其中值得关注的是在同等时间内，“云产品”相关模块点击率有一定提升，“云产品”豆腐块导航点击率提升五成，云主机产品的购买按钮点击率提升范围在二至三成内，因此在三期对云主机楼层进行了优化，通过视觉和文案增强其突出性，打造出云主机新手专区,将黄金位置的时间轴部分加入返京豆内容条，优化内容及配图提高返京豆活动的点击量，提炼精简卡片部分，缩小高度，设计话题部分卡片提高活动互动量。突出新用户云主机楼层，促进新用户转化。

*以下数据均为已处理的虚拟数据，但变化趋势是真实的

年中采购季数据对比

接着对数据层面表现较好的第二期进行具体分析，整理出双十一单天数据，二期整体数据以及页面模块点击量。

页面模块点击量

从数据层面反映出

新用户访问次数占整体UV量的近百分之八十，拉新促活的目标完成的不错；

用户对云主机系列产品的关注程度很高, 单个产品最高pv占总pv量的约2成；

京东云设计团队提出设计的顶导航、豆腐块导航设计，聚焦性与识别性强，点击量整体较高，云产品占总pv量约1.8成，UV数据也很不错，证明此次导航的设计大大增强页面浏览的便捷度；

新增大转盘抽奖模块点击量也较高，pc量占约0.9成，设计时与产品模块做区分，视觉上吸引、引导用户进行点击 。

总结

本次年终采购季活动页面的设计，对设计师们来说，最大的收获是可以从多角度去思考，以数据结果为落脚点，在产品策略和目标的基础上，纵向反推设计思路与风格。反复地推敲打磨，从而解决风格过时，转化率低，页面结构不合理等问题。

因此，作为一名理性的设计师，我认为设计就是在洞见的基础上，通过观察、分析数据，利用数据来助力产品和业务的成功。这是我们成长的重要阶段，以目标为导向，用创新和美的方式，让用户获得更好的体验过程，从而驱动数据的增长。

无论是用数据指标做效果衡量，还是用数据指标进行问题判断和原因锁定，客观公正的态度和科学的实验方法都是最重要的。数据相关的知识体系非常复杂，甚至需要有专职的数据分析师或用户研究员参与，本次文中列举的是一些基础的数据分析方法，还不太全面，如果你有更棒的见解，可以在文末留言一起讨论~

最后，感谢JDCD 的分享

感谢京东年终采购季的设计师们分享经验，那么必须有亮相才行～

努力的小姐姐（悄悄偷拍）

JDCD与IXDC希望和大家一起探讨学习进步~加油！

文章来源：Design with Cloud

文章作者：IDCD

原文链接：

https://mp.weixin.qq.com/s/NAwsI4JH55JGMTCPJjvXSg

学习前沿设计思维

聆听来自一线的感悟

2020.07.16—07.19

北京·国家会议中心

2020IXDC国际体验设计大会

共赴设计盛典！