B端电商产品直播专区(多端)全链路设计方案

围绕衫海精APP直播专区设计，跟大家分享一些我做项目的过程和思考。通过本文，您将了解到以下内容：

响应公司业务发展，布局直播业务，让直播零售商更高效的选到适合直播的商品，进一步带动平台履约、金融等相关业务，需要在衫海精各端(APP、小程序、电脑端)增加直播专区的模块。

管理后台共分为：系统导航、查询条件、列表批量设置、商品列表、分页器5个部分。

系统导航：在已有导航中增加子菜单-直播款管理后台

查询条件：商品名称/货号、工厂/档口、商品状态、卖点标签、所属楼层、类目、风格、适用年龄、城市

列表批量设置：楼层设置、批量设置直播价、批量设置佣金比例、批量设置卖点标签、批量设置所属楼层、批量设置库存、批量设置快返时间

商品列表：序号、操作、商品图片、商品名称、工厂/档口、商品状态、进货价、直播价、佣金比例、库存、快返时间、卖点标签、所属楼层、展示顺序

分页器：分页器

后台页面的设计准则为：功能清晰、交互明确、反馈及时，保证客户的操作效率。

功能嵌套在现有的 BOSS 系统中，页面采用“T”字型结构。

①首页方案

结合业务定位以及公司对直播业务的资源倾斜，需要给直播专区足够高的曝光量，保证功能在首页的露出，可以吸引和引导直播零售商的点击，助力业务的转化。

直播专区位置确定思路：

方案一:

设定商品以瀑布流的方式按楼层分层展示，页面上滑到一定位置楼层名称吸顶，选中状态跟随楼层滑动自动切换；开发实际情况为：单个楼层的商品数量不确定，所以每个楼层商品数据后端全部返给前端。但是当楼层商品数量较少，标题相互切换时，页面容易出现大幅度跳动，影响使用体验。

方案二:

所有楼层横向平铺展示，横向滑动可依次查看全部楼层，单个楼层的商品数量后端全部返回，稍显不足的是不同楼层分区的直观感受会差些，但是整体方案兼容性高，交互流畅，使用体验良好。

设计难点：

因为直播款同样可以是电商款，所以在之前价格规则不变的前提下，同时要展示建议直播价和佣金比例，所以排版方式是本次设计的重点。

保证直播专区模块可以在首屏露出。以 1920*1080 的分辨率为准，1080 的高度并不是全部展示设计的内容，经过计算(以 Chrome 浏览器为准)有效展示高度为 942px。

经过三周开发，顺利上线，产品日活提升 32%，月活提升 27%，收到了业务方一致的好评。