推荐阅读
围绕衫海精 APP 直播专区设计,跟大家分享一些我做项目的过程和思考。通过本文,您将了解到以下内容:
- 如何全链路思考需求以及推进落地;
- 如何在设计过程中充分考虑电脑端和移动端用户的需求和使用习惯;
- 如何平衡设计方案和技术实现之间的卡点;
业务方需求
响应公司业务发展,布局直播业务,让直播零售商更高效的选到适合直播的商品,进一步带动平台履约、金融等相关业务,需要在衫海精各端(APP、小程序、电脑端)增加直播专区的模块。
需求分析
- 直播款怎么来?如何管理?需要哪些设置项?
- 电脑端、APP、小程序展示方案需要包括哪些内容,如何呈现?呈现方式有什么差异?
解决策略
1. 增加独立的直播款管理后台,对款式进行管理
依据系统现有的款式库管理后台,将打了直播款标签的款式从中抽离,形成独立的直播款管理后台。
①直播款管理后台功能梳理:
管理后台共分为:系统导航、查询条件、列表批量设置、商品列表、分页器和列表设置 5 个部分。
系统导航:在已有导航中增加子菜单-直播款管理后台
查询条件:商品名称/货号、工厂/档口、商品状态、卖点标签、所属楼层、类目、风格、适用年龄、城市
列表批量设置:楼层设置、批量设置直播价、批量设置佣金比例、批量设置卖点标签、批量设置所属楼层、批量设置库存、批量设置快返时间
商品列表:序号、操作、商品图片、商品名称、工厂/档口、商品状态、进货价、直播价、佣金比例、库存、快返时间、卖点标签、所属楼层、展示顺序
分页器:分页器
②设计思路
后台页面的设计准则为:功能清晰、交互明确、反馈及时,保证客户的操作效率。
③页面呈现
功能嵌套在现有的 BOSS 系统中,页面采用“T”字型结构。
入口菜单设计
页面设计
弹窗设计
1. APP/小程序
①首页方案
结合业务定位以及公司对直播业务的资源倾斜,需要给直播专区足够高的曝光量,保证功能在首页的露出,可以吸引和引导直播零售商的点击,助力业务的转化。
直播专区位置确定思路:
- 需要保证直播专区在首页可以有效露出。
- 买手精选、金刚区是流量分发入口,不易调整。
- 优质档口、选品中心、爆款推荐,与直播专区是为“逛”的零售商客户所准备,根据本次的业务要求,直播专区优先级更高
具体位置:直播专区入口在金刚区和瓷片区之间展示
小程序和 APP 展示
②直播专区入口方案设计
③直播专区详情页设计
直播专区详情页交互方案制定
方案一:
设定商品以瀑布流的方式按楼层分层展示,页面上滑到一定位置楼层名称吸顶,选中状态跟随楼层滑动自动切换;开发实际情况为:单个楼层的商品数量不确定,所以每个楼层商品数据后端全部返给前端。但是当楼层商品数量较少,标题相互切换时,页面容易出现大幅度跳动,影响使用体验。
方案二:
所有楼层横向平铺展示,横向滑动可依次查看全部楼层,单个楼层的商品数量后端全部返回,稍显不足的是不同楼层分区的直观感受会差些,但是整体方案兼容性高,交互流畅,使用体验良好。
④直播商品价格展示
设计难点:
因为直播款同样可以是电商款,所以在之前价格规则不变的前提下,同时要展示建议直播价和佣金比例,所以排版方式是本次设计的重点。
全部页面展示
2. PC 端
①首页方案
保证直播专区模块可以在首屏露出。以 1920*1080 的分辨率为准,1080 的高度并不是全部展示设计的内容,经过计算(以 Chrome 浏览器为准)有效展示高度为 942px。
直播商品卡片在 PC 端首页应该如何展示
相比于移动端,PC 端的大屏幕在展示内容方面有天然的优势。
直播专区
②直播专区详情页
交互体验方案
单个楼层的商品,后端数据全部返给前端,前端不做分页处理全部请求,左侧锚点自动定位到对应楼层,内容呼应。
直播款详情页
数据验证
经过三周开发,顺利上线,衫海精日活提升 32%,月活提升 27%,收到了业务方一致的好评。
谢谢!
欢迎关注作者微信公众号:「西城门设计」
复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。
发评论!每天赢奖品
点击 登录 后,在评论区留言,系统会随机派送奖品
2012年成立至今,是国内备受欢迎的设计师平台,提供奖品赞助 联系我们
AI时代的设计师生存手册
已累计诞生 648 位幸运星
发表评论 已发布4条
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓