榜单会场在大促活动中一直难掩它优秀的带货能力。本文主要讲述在本次618大促场景下，榜单会场在数据、内容以及效率提升方面采用的一些方法和手段。
1、项目背景
榜单会场在大促活动中一直难掩它优秀的带货能力。榜单会场中的商品由消费者购买、好评等自发数据推起从而形成排行，榜单这种天然的公信力，可以更好地辅助用户做购物决策。大促场景下，凭借用户历史操作精准推送的榜单具有唤起购物需求的作用。
京东近年大促活动中榜单会场数据表现较好，引入订单量、uv转化率逐年升高，转化率约为整体大盘1.4倍，可见其导购能力。本次618榜单会场设计原则简单来说，就是以榜单（商品排⾏）给用户购物参考，通过高效导购提升商详到达，击中用户购买，最终带动GMV增长。
2、设计目标
3、设计思路
3.1 数据提升
· 强化锚点导航，便于用户操作
从往期榜单会场数据来看，锚点导航的点击率较低，但转化率和引入订单的数据不错，展示出了设计价值。从数据看，我们猜测：
部分用户来到榜单会场目的明确，会主动寻找品类，在想买的品类中挑选；
导航点击较低可能和浏览时自动收起的逻辑有关，部分用户未注意到导航的存在。
由此，本次设计把锚点导航从第二屏出现、正常页面上滑时收起的逻辑改为了吸顶常驻展示；同时把较小的文字导航，改为图+文的形式，在可见性和易读性上强化锚点导航。
从上线数据看，本次618的图文导航方案点击率提升2.46倍，同时转化率提升1.09倍，基本完成了让更多用户看到导航，让有需求的用户便捷使用导航的目标。
·增加商详入口漏出，形式层面提升点击
往期榜单会场的事业部楼层是这种样式：点击红框部分热区，跳转至当前品类BI展示的top1商品榜单页面。
为了提高商详到达率，我们考虑把红框中绿框部分热区，调整为点击跳转至3个排行top商品的详情页。从更久远的历史经验来看，用户的主要点击和购买都在榜单前几名的商品形成，所以这样的调整我们认为是可以的。但同时，也担忧在把大块热区切分给前3商品后，是否会导致榜单落地页本身的曝光大大降低呢？——我们也绝对不愿意这样的情况发生。
于是我们思考有什么方式能够把榜单落地页可能被忽略的一部分流量“捡起来”，产生了这样一个动效的方案。
规则定义：如果用户点击了榜单中3任意一个商品（去往了商品详情页面），之后退出（返回到当前榜单会场页面），则在榜单入口右上角出现动效引导标示，吸引用户去往完整的榜单页面。
从上线数据看，整体榜单会场的事业部楼层日均引单量提升48%、点击转化率提升33%，等等各方面都有较好的提升。当然这和BI底池的大量扩充、页面屏效提升都有关系。
3.2 内容感知度提升
·延续主视觉，贯穿618品牌体系
本次榜单会场页面延续了618主视觉风格，在头图、楼层以及坑位氛围中贯穿使用光束、光点等基础图形元素。
· 细节打磨，营造榜单自身氛围感
采用全局居中对齐的构图方式，视觉感受更加正式、稳重。与其他会场对比热闹促销的氛围感相对弱化，强调整体视觉呈现的品质感以及内容信息展示的清晰度。
通过卡片包裹的形式，明确信息内容的包含关系。单个商品坑位以分割线做分隔，榜单坑位则以独立的卡片形式通过固定间距来分隔，可以更好的区分单品和榜单，构建合理清晰的层级关系，同时可以更好的体现榜单的专业严谨度。
加入麦穗、颁奖台等装饰元素，辅助体现榜单的专业性和权威性。
在技术方面追求精确还原，坚决解决不同设备所造成的一两像素的误差，尤其曾经一直困扰大家的坑位队列在某些设备间隙不一的问题。因项目开发都是通过pxtoviewport插件将px转为vw单位达到等比缩放适配各设备大小屏的，开发上极为方便，兼容也好，但有一个缺点就是转换后的像素实际尺寸如果不为整数，则不同的设备的渲染将有所不同，会有1像素的误差，这个误差放到较大的设计尺寸里肉眼是看不出来的，但在小尺寸里很容易看出来，比如坑位之间的隙缝，设计一般8像素以内，用得最多的是4px。
如下图实例：
很明显414屏下右边的坑位间隙比左边要多1px。原因是：
设备只能进行整像素渲染而不能渲染半个，所以会做不同的处理。
优化方案：
pxtoviewport参数(.postcssrc.js)：
将上方参数minPixelValue设置为4，然后在页面开发中所有小于等于4px的都写为2px，让坑位间隙固定为2px，然后坑位(inline-block)水平居中，如此每个横排坑位的误差都转移到页面边距，而边距一般会有15px左右，这个尺寸有一两个像素的误差是看不出来的，完全可以忽略。
另外如轮播、动画数量多时会导致低端手机发热的问题，基本上所有会场都统一使用了动画开关来处理性能消耗问题，即动画的楼层离开视口时关闭或销毁动画，进入视口时再打开或重建。但除此之外，经过多次尝试和对比动画的实现方式的性能，得出实现动画的优先选择结论：
keyframes > transition > requestAnimationFrame > setInterval/setTimeout
3.3 效率提升
页面使用组件搭建，提升设计效率并保证整体大促会场视觉的统一性。
4、优化方向
·榜单会场的人工运营内容
从页面整体表现说，整个会场历史沉淀下来的顶部轮播榜单、事业部榜单楼层在几期活动、运营产品设计不同岗位的迭代下表现渐好。而本次在榜单会场首屏中加入了京东平台的购物趋势榜单，榜单内展示热门趋势商品榜单和相关品类主播。但从数据看，这个模块的跳失较高。我们猜测：①用户没有对趋势榜单的预期；②直播更偏内容属性，和导购功能差异较大，和榜单会场定位难结合；③页面顶部趋势楼层、趋势报告、值得买等模块零散模块较多，和榜单契合度不足。这些经验，将让我之后在对榜单会场加入偏人工运营的内容更加谨慎。
· 视觉内容呈现效果
1.现在的tab栏在整个页面中虽然比较突出，但是割裂感也比较严重。思考其他方式，如留出两侧边距，与其他楼层统一宽度，使得整体页面更加统一和谐。
2.由于榜单商品池数量限制，BI后可展示内容有限，现商品图质量普遍不高，并且存在大量的打标、牛皮癣情况。后面的设计中应提前向需求方了解商品图情况，在设计时也应尽量考虑实际情况输出方案。
· 排期流程的前瞻性
项目完成后，又陆续接到一些新增的资源位广告图等零碎需求，此类临时且紧急需求对设计同学的工作节奏和输出效果影响较大。针对此情况，在后面的大促活动中应主动提前与运营侧沟通，是否需要预留排期支持此类需求。
· 榜单品牌的长期规划
为提高用户对京东榜单的感知度，提升京东榜单自身的专业性，后续会尝试打造“京东榜单”品牌感，将部分模块固定化，并输出相应的视觉规范。
