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

推荐阅读

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

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

业务方需求

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

需求分析

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

解决策略

一、后台方案

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

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

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

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

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

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

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

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

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

分页器:分页器

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

②设计思路

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

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

③页面呈现

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

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

入口菜单设计

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

页面设计

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

弹窗设计

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

二、前端方案

1. APP/小程序

①首页方案

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

直播专区位置确定思路:

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

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

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

小程序和 APP 展示

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

②直播专区入口方案设计

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

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

③直播专区详情页设计

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

方案一:

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

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

方案二:

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

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

④直播商品价格展示

设计难点:

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

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

全部页面展示

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

2. PC 端

①首页方案

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

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

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

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

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

直播专区

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

②直播专区详情页

交互体验方案

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

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

直播款详情页

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

数据验证

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

谢谢!

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

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

收藏 11
点赞 23

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。