日活提升37%！用一个实战案例，帮你了解B端高手的设计思路

推荐阅读

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

1. 如何全链路思考需求以及推进落地；
2. 如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯；
3. 如何平衡设计方案和技术实现之间的卡点；

业务方需求

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

需求分析

1. 直播款怎么来？如何管理？需要哪些设置项？
2. 电脑端、APP、小程序展示方案需要包括哪些内容，如何呈现？呈现方式有什么差异？

解决策略

一、后台方案

1. 增加独立的直播款管理后台，对款式进行管理

依据系统现有的款式库管理后台，将打了直播款标签的款式从中抽离，形成独立的直播款管理后台。

①直播款管理后台功能梳理：

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

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

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

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

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

分页器：分页器

②设计思路

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

③页面呈现

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

入口菜单设计

页面设计

弹窗设计

二、前端方案

1. APP/小程序

①首页方案

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

直播专区位置确定思路：

1. 需要保证直播专区在首页可以有效露出。
2. 买手精选、金刚区是流量分发入口，不易调整。
3. 优质档口、选品中心、爆款推荐，与直播专区是为“逛”的零售商客户所准备，根据本次的业务要求，直播专区优先级更高

具体位置：直播专区入口在金刚区和瓷片区之间展示

小程序和 APP 展示

②直播专区入口方案设计

③直播专区详情页设计

直播专区详情页交互方案制定

方案一:

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

方案二:

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

④直播商品价格展示

设计难点：

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

全部页面展示

2. PC 端

①首页方案

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

直播商品卡片在 PC 端首页应该如何展示

相比于移动端，PC 端的大屏幕在展示内容方面有天然的优势。

直播专区

②直播专区详情页

交互体验方案

单个楼层的商品，后端数据全部返给前端，前端不做分页处理全部请求，左侧锚点自动定位到对应楼层，内容呼应。

直播款详情页

数据验证

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

谢谢！

欢迎关注作者微信公众号：「西城门设计」