攻略作为每年大促玩法的预告者，承担了向户输平台节奏、吸引户预约流的重要任务。 同于着眼于转的卖货会场，或是着眼于分享的互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」小程序：
浙公网安备33011002017549号