618站内攻略项目复盘，盘点用户会为怎样的设计买单。

作为年度推广游戏的预告员，项目背景站的策略承担了向用户输出平台节奏、吸引用户预约回流的重要任务。与转型销售场所或共享互动H5不同，如何让用户更好地了解京东推广平台的游戏玩法，方便用户的购物旅程已成为其主要任务。设计思路&在设计开始之前，我们比较了2017年以来的所有策略页面，发现往年页面缺乏连续性和定位不明确。作为促进信息传递的先锋，以往的策略承担了更多的转型会场任务，优惠信息的预测往往是用文案轻描淡写地带来的。每一种攻略风格都是「船新版本」，也产生了较大的人力消耗。然而，虽然策略的任务是信息传递，但作为整体推广链接的一部分，它仍然需要服务于市场GMV。那么，为了达到更好的数据效果，应该如何平衡两者呢？首先，从战略的核心意义——帮助集团市场GMV，需要实现以下目标：让用户愿意访问：让用户了解京东推广的节奏和玩法，理解后愿意参与；让用户愿意购买：提供决策信息，提高用户的购物欲望；让用户养成习惯：当策略继续为用户创造用户价值时，就可以培养用户「在京东购物之前，先看策略」的心智，从而更好地引导用户操作。但是，纵观大促会场的全局，很多卖货会场也能实现这些目标，那么站内策略和它们有什么区别呢？我们可以从内部和外部两个角度进行分析：内部差异化：从车站的角度，「我的」和「AI助手」也承担了向用户推荐活动场所的功能，但也承担了向用户推荐活动场所的功能「我的」它围绕用户现有的操作进行管理和推荐，是绝对准确的量身定制，「AI助手」是理性层面下的高效导购，需要用户先生产「想法」，然后指导操作；站内策略是指导和解释用户未来的行为，首先组织和筛选促销信息，然后让用户生成促销信息「想法」，从而产生一定程度的操作「逛」的性质。外部差异化：从站外的角度来看，站内策略的定位和「什么值得买」有些近似。外部差异化：从站外的角度来看，站内策略的定位和「什么值得买」有些相似。相比之下，站内策略的优势在于可以更紧密地围绕JD.COM用户的消费习惯进行定制推荐。与近年来以长图为主的阿里策略相比，它提供了更丰富的操作(如预约)，可以在一定程度上降低用户的记忆成本。基于上述基础，我们分析了前几年策略的用户肖像，对策略进行了横向和纵向比较，总结了策略作为长期产品视角的迭代理念，并根据策略的特点制定了分时期的北极星指标：提高预热、特殊时期的预订和购买率、整个时期的活动转移和*期的商品转型。那么，我们如何根据这三个指标拆分细分策略呢？2.提高预约购买-日历优化交互水平：动态辅助内容作为车站优惠信息的聚集地，如何清晰简洁地传达内容，一直是交互侧需要关注的问题。因此，在这个策略中，我们比较了以往策略中的预测风格。在数据性能较好的日历风格的基础上，进一步简化了页面的层次，并配合动态效率的指导操作，使用户能够更加关注日历部分的核心内容：视觉层次：视觉层次清晰。通过对互动草案的分析和理解，有以下三个痛点，这是对页面信息水平和图片舒适度的考验：更多的内容信息：为了提高预约的吸引力，在单日预告片中显示了更多的BI项目，并增加了预约分割京豆的游戏玩法。因此，与双11相比，第一个屏幕的内容信息增加了。日历显示状态增加：日历尝试了一种新的交互方式，包括展开和收起。日历显示状态增加：日历尝试了一种新的互动风格，包括扩展和收集。卡片颜色：为了让用户感知日常主题的差异，日历卡的颜色将根据日常主要场地的主题颜色进行呼应。那么如何通过视觉手段清晰地展现视觉层次，和谐地展现画面色彩呢？下面从最基本的视觉构图和色彩两个方面进行分析和落地：「构图」方形是最简单的几何形式。对于信息量大的页面，方形将最大限度地利用设计空间，消除形态干扰，结构清晰地显示信息内容，使用户能够顺利浏览页面。简化视觉层次。在交互稿中，京豆模块和日历选择器的划分很明显，但留下的空间会增加视觉层次的复杂性。为了尽可能简化视觉层次，找互动学生讨论是否可以在保持内容划分清晰的情况下，连接京豆模块的背景和日历选择器。同时，他们还咨询了前端学生，视觉处理在实现中是否会有问题。最后，三方达成协议后，采用了最终的视觉呈现方案。「颜色」为了更好地覆盖618全时期，从暖色到冷色的色相渐变，选择了色环上三种基本相等的颜色。头部图片采用相对清晰的黄色到红色的暖色渐变，适用于618全时期，反映了促销活泼的氛围；头部图片过渡到日历选择器，使用红色渐变到紫蓝色，使选择器的文本信息清晰识别，也可以自然分割头部图片和日历选择器，减少了线面分割带来的复杂层次关系；京豆模块的颜色为中性黄色，与每天不同颜色的卡片和谐相处，呼应头部图片，整体图片颜色保持平衡。前端水平：复杂的交互式动画和跨平台功能适应我们需要实现的跟随移动效果，所以我们需要考虑的是，在当前日期可能会到达任何点击日期的位置。实现方法：采用纯css控制，方块采用背景图实现，通过控制类名移动位置，如.move-[start]-[end]，缺点:每个日期对应其他日期的位置需要写好，js控制不够灵活。实现方法：采用纯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等应用预订，小程序预订应用预订是京东应用日历预订，用户打开手机日历（写入）权限，预订将写入用户的手机日历，在日历提醒用户之前。小程序预约是微信大账号提醒流程，预约需要分为三个步骤:预约->授权->报告授权状态。完成上述步骤后，用户将在活动开始前10分钟通过大账户（关注用户）或服务通知（不关注用户）收到信息2。提高活动转移-福利秘密提高筛选效率福利秘密区作为福利互动活动的集中，承担互动转移，为用户提供快速搜索筛选可以参与活动的任务。互动往往有更复杂的规则，对用户有更高的理解成本。互动往往有更复杂的规则，对用户有更高的理解成本。除了集团推广的互动外，它还增加了业务部门的互动显示，这也给确保页面显示效率带来了一些挑战。通过对以往迭代内容的数据比较，参考其他场所的多信息显示策略，最终采用BI显示，折叠用户弱相关的互动卡，提高页面效率；在卡信息显示中，选择关注活动的利益点，让用户一眼就能筛选出最有价值的互动参与。虽然运营学生认可双11秘籍的视觉优化，但他们仍然提出了希望在有秘籍形式感的同时进行视觉创新的诉求。经过思考，我认为操作需求不能满足：视觉风格和618推广整体风格统一；能反映秘密感的视觉表达技术有限；视觉创新的前提是确保向用户清晰显示信息；所以与上述三点找到操作学生再次沟通真正的需求，沟通后，最重要的需求是视觉创新，秘密形式需求薄弱。接下来，我们将重点关注重要需求，结合618视觉概念（光点、光），找到视觉创新优化的解决方案，并与操作达成一致。「构图」上面提到的方形可以消除形态干扰。考虑到活动入口图数量多，氛围图无法控制，左侧由方形组成，右侧结合618主图形-光，将文字与氛围图分开，使各部分信息更加集中。「颜色」结合双11研究结论——活动入口主题不够鲜明，除了类似的活动文案因素外，我认为颜色也是影响因素之一。因此，在上部平台级活动入口处，交替构成两种暖色相似颜色，下部业务部门活动入口统一采用一种与上部相似颜色相似的冷色组成；在单个活动入口处，文本和氛围图的背景改变了统一色调的明暗。从整体楼层来看，从上到下，从暖到冷，不仅活动主题有明显的差异化，而且更好地过渡到下一层；从单个活动入口来看，左右深度颜色的划分不仅更适应无法控制的氛围图，而且主题副本也更加明显。「表现形式」按钮部分的整个页面采用了新的拟态风格，既保证了吸引力，又减少了颜色过多的问题，降低了信息水平。新的拟态风格更适合工具功能类产品，这次只尝试在页面的按钮部分使用，风格也会有眼前一亮的感觉。3.改善商品转型——根据*期的转型指标，我们参考了以往的迭代经验，发现随着大促销节奏的逐步发展，页面转换模块的性能往往在*期附近有了很大的提高。因此，在本设计中，我们动态调整了楼层顺序，以便更好地满足不同时期用户的需求。同时，根据以往的楼层数据性能，我们还继续保留数据性能良好的模块类型，如增加列表的曝光，以实现辅助页面目标（以下数据来自lan）.jd.com)。基于今天楼层视觉整体感较弱的问题，楼层整体化和内容吸引力包装区分了楼层背景色和页面背景色。楼层中的模块颜色与楼层背景颜色相同。与以往的楼层相比，它更加整体，可以使页面层次更加清晰。其中，针对品牌入口与上海美容电影厂IP形象相结合的策略，在不干扰信息内容的前提下，视觉上采用了与用户同理心、符合IP形象的元素——老电视。同时，按钮文案还包装场景，增加兴趣。与以往的车站策略相比，618车站策略主要在以下方面有明显的改进：品牌视觉契合和创新延续主要视觉元素，视觉风格创新，在页面按钮部分采用新的拟态风格，减少复杂的信息水平问题，也确保视觉吸引力视觉精致整体页面颜色更有节奏，更清晰舒适的元素细节（照明、投影等）。描述更精致的信息水平清晰度通过合理的颜色规划，主次文本信息，使单层更加完整，每层模块划分清晰的数据性能根据在线性能，福利互动模块点击数据显著改进，今天的模块点击转换率比往年翻了一番，页面目标基本实现。项目沉淀1。良好的经验针对定期存在的活动场所，我们可以设计和迭代其主要功能组成模块，更好地指导后续的优化方向；也可以帮助业务侧更清晰地规划场地定位，提高页面对用户和推广的整体价值。项目沉淀1。良好的经验针对定期存在的活动场所，我们可以设计和迭代其主要功能组成模块，更好地指导后续的优化方向；也可以帮助业务侧更清晰地规划场地定位，提高页面对用户和推广的整体价值。2.如何沟通Q：需求方盲目追求热闹复杂的视觉风格创新，该怎么办？A：热闹的氛围对促销活动很重要，但也要根据页面类型来判断(重氛围或重信息)。设计师要倾听诉求，找出诉求的根本原因，从专业的角度判断诉求的合理性和价值。塑造热闹氛围的前提是不影响信息识别，否则会本末倒置，热闹氛围的视觉风格要与场景逻辑相匹配。3.待优化项目虽然本页大部分模块基于产品理念迭代获得了一定的积极反馈，但产品开发往往是一个曲折上升的过程，活动场所也不例外。结合在线反馈，网站策略仍有以下优化点：日历操作体验根据研究结果，日历操作体验问题反馈，日历模块滑动改变日期，而不是点击跳转日期操作模式，与用户认知不一致，第一屏动态效果更复杂，安卓体验更卡住。如果后续交互方式相同，需要优化操作体验。根据研究反馈，主题文案描述不直观，不易理解，导致用户容易滑过整个模块。建议后续活动的主题可以简单清晰地描述折扣和游戏玩法。综上所述，未来的车站策略需要进一步探索主要功能模块对用户的价值，探索其在大推广链路中的独特差异；保留高用户价值模块并不断优化，以实现更好的用户体验，并使用设计策略为用户和业务带来更多的价值。