项目背景

站内攻略作为每年大促玩法的预告者，承担了向用户输出平台节奏、吸引用户预约回流的重要任务。 不同于着眼于转化的卖货会场，或是着眼于分享的互动H5，如何能让用户更好地了解京东的大促平台玩法，便捷用户的购物旅程，就成为了它的主要任务。

设计思路&设计执行

1. 产品化思路与定位

在开始设计之前，我们对比了2017年至今的所有攻略页面，发现往年页面存在缺乏延续性、定位不清晰的问题。作为大促信息传达的先行军，往期的攻略反而更多承担了转化型的会场类任务，对于优惠信息的预告往往是轻描淡写地用文案带过。而每一次的攻略样式都是「船新版本」，也产生了较大的人力消耗。

然而尽管攻略的任务是信息传递，但作为整体大促链路中的一环，它终究还是需要为大盘GMV服务。那么应该如何平衡二者，以达成更好的数据效果呢？

首先，从攻略存在的核心意义——助力集团大盘GMV的提升出发，它需要达成以下几个目标：

• 让用户愿意逛：让用户明白京东大促的节奏和玩法、并且在了解后有意愿参与；
• 让用户愿意买：提供能提升用户购物欲望的决策信息；
• 让用户养成习惯：当攻略持续为用户产生了用户价值后，就可以养成用户「来京东购物前先看攻略」的心智，从而更好地引导用户进行操作。

然而纵观大促会场全局，许多卖货会场也可以达成这些目标，那么站内攻略和它们相比有具有哪些差异性呢？我们可以从对内和对外两个角度进行分析：

对内差异化：从站内来看，「我的」和「AI助手」也都承担了向用户进行活动会场推荐的功能，但「我的」是围绕用户已有的操作展开管理和推荐，是绝对精准的量身打造，「AI助手」是理性层级下的导购，需要用户先产生「想法」，再指导操作；站内攻略则是引导用户未来行为的指导和说明，先组织、筛选促销信息，再使用户产生「想法」，从而产生操作，有一定「逛」的性质。

对外差异化：从站外来看，站内攻略的定位与「什么值得买」有些近似。相比之下，站内攻略的优势则在于它能更紧密地围绕京东用户的消费习惯进行定制化推荐，和近年来以长图为主的阿里系攻略相比，则提供了更为丰富的操作（如预约），一定程度上能减少用户的记忆成本。

基于以上基础，我们对往年攻略的用户画像进行分析，并对攻略进行了横向与纵向的对比，总结出了攻略作为一个长线产品视角下的迭代思路，并根据攻略的特性制定了分时期的北极星指标：提升预热、专场期的预约加购率、提升全时期的活动分流以及提升高潮期的商品转化。那么我们又是如何根据这三个指标来拆解细分策略的呢？

2. 提升预约加购——日历优化

交互层面：动效辅助内容聚焦

作为站内优惠信息的聚集地，如何清晰简洁传达内容，一直是交互侧需要重点思考解决的难题。于是在本次攻略中，我们对比了往期攻略中的预告样式，在数据表现较好的日历样式基础上，对页面的层级进行了进一步的简化，配合动效的引导操作，以便用户能够更聚焦地浏览日历部分的核心内容：

视觉层面：视觉层级清晰

经过对交互稿的分析理解，以下3个痛点，对此次页面的信息层级和画面舒适度是一个考验：

• 内容信息较多：为了提升预约吸引力，这次在单日预告内露出了更多的BI单品，同时增加了预约瓜分京豆的玩法，所以这次首屏的内容信息和双11相较而言，是有所增的。
• 日历展示状态增加：日历尝试了新的交互样式，有展开和收起两种状态。
• 卡片颜色多：为了让用户感知到每日主题的差异，日历卡片的颜色会根据每日主会场的主题颜色相呼应。

那么如何通过视觉的手段，让视觉层级清晰展示且画面颜色和谐呢？下面从最基础的视觉构成里的构图和色彩两方面进行分析并落地：

「构 图」整体用方形进行构图和内容分割

方形是最简洁的几何形态，对于信息量较大的页面，方形会让设计空间利用最大化，并且可以排除形态上的干扰，结构清晰的展示信息内容，让用户通顺的浏览页面。

简化视觉层级

在交互稿上，瓜分京豆模块和日历选择器两部分内容划分较为明显，但所留出的空间，会增加视觉层级的复杂度。为了尽量简化视觉层级，找交互同学商量是否可以在保持内容划分清晰的情况下，把瓜分京豆模块背景和日历选择器拉通，同时，也咨询了前端同学，视觉这样处理在实现上是否会有问题。最终，三方达成一致后，采用了视觉最终呈现的方案。

「颜 色」

为了更好的覆盖618全时期，挑选了色环上三种距离基本相等的色彩进行从暖色到冷色的色相渐变。

• 头图运用了较为清透的黄色至红色的暖色渐变，适用于618全时期，体现了大促的热闹氛围；
• 头图过渡到日历选择器，则是运用了从头图的红色渐变至紫蓝色，这样既能让选择器的文字信息清晰识别，也能将头图和日历选择器两部分内容进行自然的分割，减少了线面分割所带来的复杂层级关系；
• 瓜分京豆模块的颜色则选用了偏中性的黄色，这样一来和每日不同颜色的卡片搭配和谐，二来和头图有所呼应，整体画面色彩保持平衡。

前端层面：复杂交互动画与跨平台功能适配

关于选中移动动画

日历选中动画部分我们需要实现的一种跟随移动的效果，那么我们需要考虑的是在当前日期是有可能去到任何一个可点击日期的位置。

实现方式：

用纯css方式控制，方块使用背景图的方式实现，通过控制类名移动位置，比如.move-[start]-[end]，缺点：需要写好每个日期对应到其它日期的位置，不够灵活

用js控制。把日期看成一个棋盘格子，每个格子都占相同的坑位大小。我们把当前日期看作a，移动至日期看作b。假设把a移动至b的横向占格子数设为n，把a移动至b的纵向占格子数设为m。那么n=当前下标 % 行个数，m=当前下标 / 行个数取整。那么a移动到b的x = w * n，y = h * m (w为格子宽度，h为格子高度)。

注：宽度获取使用block.getBoundingClientRect().width；clientWidth会忽略小数位

• 关于展开收起动画，半圆实现：
• 可以使用clip-path
• 我的实现方法为使用border-radius+height实现，半圆的弧度使用两倍大圆取其部分圆弧显示，展开收起实现使用高度修改：在低端机会略卡，因为每次使用会引起页面重绘（有待探讨优化）
• 使用svg，canvas等
• 关于app预约，小程序预约
• app预约采用的是京东app日历预约，用户开启手机日历（写入）权限后，预约就会写入用户的手机日历，在活动开始前会以日历提醒的方式提醒用户。
• 小程序预约走的是微信大账号提醒流程，预约需要分三步进行：预约-> 授权 -> 上报授权状态。进行完上述步骤后，用户会在活动开始前10分钟左右通过大账号（已关注用户）或服务通知（未关注用户）收到消息

2. 提升活动分流——福利秘籍

提升筛选效率

福利秘籍专区作为大促期间福利互动活动的集中地，承担了为互动分流，为用户提供快速查找筛选可参与活动的任务。而互动往往存在较为复杂的规则，对用户而言存在较高的理解成本。此次除了集团主推的互动，又增加了对于事业部互动的展示，对于保证页面展示效率也带来了一定的挑战。通过对往期迭代内容进行数据对比，同时参考其余会场对于多信息展示的策略，最终我们采用了BI展示，同时对用户弱相关的互动卡片进行折叠的方式提升页面的效率；而在卡片的信息展示上，选择重点突出活动可得的利益点，让用户一眼即可筛选出对自己最有价值的互动进行参与。

视觉创新优化

虽然运营同学对双11的秘籍视觉比较认可，但是仍然提出了希望有秘籍形式感的同时，能进行视觉创新的诉求。经思考后，我认为运营的诉求无法满足：

• 视觉风格和618大促整体风格保持统一；
• 能体现秘籍感的视觉表现手法有限；
• 视觉创新的前提是要保证信息清晰的展示给用户；

于是带着以上3点找运营同学再次沟通清楚对方的真正诉求到底是什么，经沟通，对方最重要的诉求是希望有视觉创新，秘籍形式感诉求较弱。接下来针对重要诉求集中发力，并结合此次618视觉概念（光点、光线），找到了视觉创新优化的解决方案，并和运营达成了一致。

「构图」

上面提到了方形可以排除形态上的干扰，考虑到活动入口图数量较多，且氛围图不可把控，左侧以方形构成，右侧结合了618主图形——光线，把文字和氛围图分开，让各部分信息更加聚焦。

「颜色」

结合双11用研结论——活动入口主题不够鲜明，除了活动文案类似的因素，我认为颜色也是影响因素之一。所以这次在上部分平台级活动入口，采用了2种暖色的近似色交替构成，下部分事业部活动入口，统一采用了1种和上部分近似色的冷色构成；单个活动入口，文字和氛围图的背景进行统一色相的明暗深浅变化。从整体楼层来看，从上至下，由暖至冷，不仅活动主题有了明显差异化，而且较好的过渡到下一楼层；从单个活动入口来看，左右深浅颜色的划分，不仅对不可把控的氛围图适应性更强，且主题文案更加明显。

「表现形式」

整体页面在按钮的部分采用新拟态风格，在保证吸引力的同时，也减少了颜色过多的问题，减少了信息层级。新拟态风格更适合工具功能类产品，本次只尝试使用在了页面的按钮部分，风格上也会有眼前一亮的感觉。

3. 提升商品转化——今日导购

分时期变化的楼层策略

针对高潮期的转化指标，我们参考了往期的迭代经验，发现随着大促节奏的渐进，临近高潮期时，页面的转化模块表现往往有较大的提升。于是在本次设计中，我们针对这个数据表现，对楼层顺序进行了动态调整，高潮期将转化楼层前置，以更好地匹配不同时期的用户需求。

同时根据往期的楼层数据表现，本次我们也延续保留了数据表现较好的模块类型，例如增加了榜单的露出，以辅助页面目标的达成（以下数据来自于lan.jd.com)。

楼层整体化、内容吸引力包装

基于之前今日楼层视觉整体感较弱的问题，这次楼层背景色和页面背景色有所区分，楼层内模块颜色和楼层背景色同色，较往期此楼层来看更加整体化，又能让页面层级更加清晰。

其中，针对这次品牌入口和上海美影厂IP形象结合的策略，为了提升用户吸引力，且不干扰信息内容的前提下，视觉上采用了和用户共情，且和IP形象契合的元素——老电视机，同时按钮文案也进行场景契合的包装，增加趣味性。

项目成果

与往期站内攻略对比，本次618站内攻略主要在以下方面有较为明显的提升：

品牌视觉契合及创新

在延续主视觉元素的同时，视觉风格有所创新，在页面的按钮部分采用新拟态风格，减少颜色过多而导致的复杂信息层级问题，同时也保证了视觉吸引力

视觉精致程度

整体页面颜色较有节奏，且更加清透舒适

元素细节（打光、投影等）的刻画更加精致

信息层级清晰度

通过对颜色的合理规划，有主次的文字信息，让单个楼层更整体化，各楼层模块划分清晰

数据表现

根据上线后的表现，本次福利互动模块的点击数据获得了显著的提升，今日模块的点击转化率相比往年也获得了成倍的增长，页面目标基本达成。

项目沉淀

1. 好的经验

针对攻略这类规律性存在的活动会场，我们可以针对其主要的功能组成模块进行数据导向的设计与迭代，来更好地指导后续的优化方向；同时也可以辅助业务侧更加清晰地规划会场定位，提升页面对用户以及大促的整体价值。

2. 如何沟通

Q：需求方一味的追求热闹复杂的视觉样式创新，该怎么办？

A：热闹的氛围对于大促活动来说固然非常重要，但也要根据页面类型去判断（重氛围or重信息)。设计师要倾听诉求并搞清诉求的根本原因，并用专业的角度判断诉求的合理性，以及价值大与否。热闹氛围塑造的前提是不能影响信息的识别，否则就会本末倒置，并且热闹氛围的视觉样式要和该场景逻辑匹配 。

3. 待优化项

虽然本次页面大部分模块基于产品化的思路迭代均获得了一定的正向反馈，但产品的发展往往是个曲折上升的过程，活动会场也不例外。结合上线后反馈，站内攻略依然有以下可优化点：

日历操作体验

根据用研结果显示，日历操作体验问题反馈较多，日历模块为滑动改变日期，而非点击跳转日期的操作方式，与用户的认知不符，且首屏动效较复杂，在安卓机型上体验较为卡顿。后续如有同样的交互方式，需优化操作体验。

福利互动入口主题文案

根据用研反馈，主题文案描述不直观，不易理解，导致用户容易滑过整个模块。建议后续活动主题能简单清晰的描述优惠和玩法。

综上，未来站内攻略需要进一步探索主要功能模块对用户的价值，探索其在大促链路中独特的差异性；同时保留高用户价值模块并持续优化，以求达到更好的用户体验，用设计策略为用户与业务带来更多的价值。

文章来源：优设    作者：JellyDesign

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务