B端产品的筛选场景调研与设计优化实践
作者:中国移动云能力中心 ——岳畅
概要:通过调研B端后台系统的筛选场景应用,总结归纳了几种基础筛选、高级筛选及组合筛选的场景,基于此对自身产品的筛选场景应用进行分析、归纳最终输出优化设计方案,希望对你有所启发。
一、筛选场景介绍
在B端后台系统设计中,列表筛选的场景应用最为常见,筛选的作用一方面是为了帮助用户从众多信息中快速提取、定位,以提高效率为基准;另一方面是为了科学的概括列表所具备的功能,提供用户以相同特征的分类信息。
近期在研究B端产品领域后台系统的列表筛选场景设计,故希望通过此次设计分析,从产品易操作性角度展开设计优化实践,从而达到提升用产品满意度的目的。
二、筛选场景类型
筛选是将一类数据展示,同时一类数据隐藏。
常见的筛选形式有:分类筛选、关键字筛选(搜索)、条件筛选、组合筛选等。大体可分为基础筛选、高级筛选通常是多个筛选条件的多维度组合,其实有别于单一的搜索和导航。
三、竞品分析调研
1. 筛选的组成
图(1)
举例:腾讯云
图(2)腾讯云负载均衡实例
- 场景:适用于简单的查询搜索场景,用户快捷筛选,蕴含的逻辑是“且”
- 优点:搜索操作自如
- 缺点:不太适合复杂筛选场景
2. 高级筛选
图(3)
- 筛选关系:有并级“且”、交级“或”的关联关系
- 场景:满足更多用户场景,为用户提供多字段、多层筛选关系、多个操作
3. 组合筛选
(1)平铺型
平铺就是将所有筛选条件全部列出,B端产品场景应用较少,在C端产品中较为常见,便于用户直接获取选项内容,减少操作步骤等。
举例:在线购物类平台
图(4)京东在线购物商城
图(5)当当在线购物商城
图(6)腾讯云告警策略
- 应用场景:用户搜索结果数据量大,搜索结果不能满足用户预期,需要通过筛选对数据进行再次过滤,达到满足精准结果的目的
- 优点:引导用户快速理解筛选项目,帮助用户快速定位结果
- 缺点:控件占据页面空间较大,需要占据大面积展示平铺效果
通常为避免筛选项太多,会提供展开、收起操作,对应每个筛选条件进行收折
(2)收折型
举例:阿里云、腾讯云
图(7)阿里云云服务实例
图(8)腾讯云数据迁移
- 场景:在B端产品中,下拉框展开(高级筛选)对于用户而言认知成本较低,操作性强,较为简单
- 优点:常用使用频率较高的选项可优先快速筛选、减少页面占用空间
- 缺点:信息量大时,页面显示冗杂且占页面比例较大,平台通用性较差
4. 表头筛选型
是一种列表内置筛选形式,类似Excel表格的操作。点击表单进行筛选按钮,可以将筛选字段直接带入。
举例:阿里云、华为云、腾讯云等
图(9)阿里云云盘
图(10)来源华为云云监控
图(11)腾讯云数据库实例
- 优点:通过表头,用户更快捷进入筛选,一般情况下表单左侧数据筛选频次越高
- 缺点:筛选的图标各平台不一,对于首次使用者来说陌生,影响用户对表头的识别,交互形式需要学习成本
四、产品筛选场景设计优化实践
根据现有平台页面梳理,梳理出涉及筛选场景的页面,这里通过举一个典型场景分析和优化。(由于实际页面涉密,所以打马了)
图(12)模块原页面
第一步拆解:
页面“隐藏“式筛选形式需要经过“筛选”按钮点击展开,可以发现默认展开时陈列信息的已选项均为全部。该场景中默认全部的数据量较大,筛选的作用是用于数据过滤,事先通过定义好的过滤值进行操作。
第二步分析:
根据以上过滤项目及过滤值的对应关系,可根据列表常见的筛选方式,归纳为列表上方筛选及表头筛选。
第三步归纳:
表头筛选
放置于列表表头上的筛选,受到列表表头信息的限制,筛选的内容仅限于特定、单次列的筛选。
对「故障告警」过滤项拆解时发现,有几项分别能对应表头信息,可通过放置在列表表头标签上进行单次下拉筛选,这里的场景是下拉多选,如图(13)
图(13)表头筛选优化
列表上方筛选
筛选功能位于列表上方,与表头筛选不同的是,可单次进行多列交叉筛选,过滤值不限于列表列的内容
搜索
搜索字段可灵活方便进行数据查询。当数据量大时,通过搜索功能提升用户查看数据的效率。对原页面过滤项拆解时发现,其中两项涉及输入搜索,对于用户记忆要求较低,通过模糊搜索来提升查找数据的效率。在使用这两项搜索时发现,先通过某一项模糊搜索过滤得到第一版数据,基于该版数据,查看列表中的另一项信息,进行下一步精确搜索,最终得到用户想要的数据。或同时输入两项(以某种分隔符号分割)进行精确查询,事半功倍提升用户效率。如图(14)
图(14)搜索优化
日期时间
因为时间筛选一般是对某个时间段的查询,需要开始时间和结束时间,所以这里对日期的筛选条件单独做处理展示。经操作发现「全部时间」就是默认最开始时间-最新时间,其他几个选项是设置的快速时间段,是平台上对用户最常用的时间段进行抽离作为选项。
由于日期选择的条件多于5个,且自定义时间长度不固定,所以设计采用整体下拉框选择的形式,时间选项都置于内侧,选择结果反馈与下拉框中。如图(15)
图(15)日期选择器优化
按钮
原按钮形式过长,变换样式成纯文字或图标加提示的形式,同时对主、次按钮进行样式区分。如图(16)
图(16)按钮优化
最终优化方案见图(17)、图(18)
图(17)优化方案(一)表头筛选+平铺式
图(18)优化方案(二)表头筛选+收折式
五、小结
通过调研产品平台的筛选场景应用,总结归纳了几种基础筛选、高级筛选及组合筛选的应用场景,基于此对自身运维平台的筛选场景进行分析、归纳最终输出优化设计方案。
其实在设计优化过程中,产品的易操作性、信息层级、可拓展性都会促使设计需要结合场景思考问题。筛选功能当然也要满足实际场景需求,需考虑如何设计才能是否满足用户的实际操作路径,是否符合用户认知,能否引导用户使用该筛选功能等。设计之路道阻且长,如有不足之处,欢迎拍砖~
版权声明 (原创):本文内容由移动云用户自发贡献,版权归原作者所有,移动云开发者社区不拥有其著作权,亦不承担相应法律责任。如果您发现本社区有涉嫌抄袭的内容,可填写举报信息,一经查实,本社区将立刻删除涉嫌侵权内容。
B端产品的筛选场景调研与设计优化实践相关推荐
- 许键树:华为云视频直播在各细分场景的体验指标优化实践
点击上方"LiveVideoStack"关注我们 本文来自华为云媒体服务直播产品经理 许键树在LiveVideoStack公开课的分享,结合华为云在直播领域的实践经验,详细解析如何 ...
- G端产品如何进行需求调研
作者:toG产品寒酥 (转载已取得作者授权) 需求调研阶段我们需要做的工作是: 根据客户提供的核心业务搜集.整理资料,设计方案: 梳理调研思路,准备调研提纲.调研文件: 进行需求调研并整理. 需求调研 ...
- TensorFlow在美团外卖推荐场景的GPU训练优化实践
省时查报告-专业.及时.全面的行研报告库 省时查方案-专业.及时.全面的营销策划方案库 知识图谱在美团推荐场景中的应用实践 搜索场景下的智能实体推荐 机器学习在B站推荐系统中的应用实践 小红书推荐系统 ...
- 【今晚7点半】:华为云视频直播在各细分场景的体验指标优化实践
点击上方"LiveVideoStack"关注我们 近年来,中国在线直播观众数持续增长,今年预计会突破6亿人."直播+"趋势进一步发展,直播与各细分领域充分结合, ...
- 腾讯大咖分享 | 腾讯Alluxio(DOP)在金融场景的落地与优化实践
目录 Alluxio导读 背景 大数据olap分析面临的挑战 Alluxio:一种可能更优的方案 新的挑战 最终架构 线上运行效果 优化调优实践 总结展望 Alluxio导读 近期,腾讯 Alluxi ...
- B端产品和C端产品的用户调研区别
B端产品和C端产品都需要进行需求调研,但是因为目标用户的需求不同,产品的目标不同,在调研方法方面还是有一些区别的,今天就来说一下它们之间的区别. 1.调研对象不同 B端产品的使用对象是企业里面的员工, ...
- 万字好文 | B端产品设计指南
本文由作者 阿翘AKIU 于社区发布 很多人都说,做B端产品最重的是搞清楚业务逻辑,只要搞清楚业务是怎么运作的,就能做出满足业务需求的产品. 但是B端产品所处复杂的业务需求环境,如同茂密的森林一样,产 ...
- 系统待办事项设计_B端产品工作台设计详解
编辑导语:B端产品的设计更多地是为了提高企业员工的工作效率,而工作台的设计则是为了提高员工使用B端产品的效率,因此,工作台对B端产品而言具有非常重要的意义:本文作者详细介绍了B端产品工作台设计内容. ...
- G端产品如何进行需求分析
作者:toG产品寒酥 (转载已取得作者授权) 上一篇文章我们讲到了G端产品如何进行需求调研,今天我们来聊聊G端产品如何进行需求分析. 需求分析阶段我们需要做的工作是: 整理并理解客户需求,与客户确认需 ...
- 58技术主席:还原万亿级三高业务场景的设计与实践
孙玄,前58集团技术委员会主席,前转转二手交易平台首席架构师.今天想跟你聊点儿企业里那些年薪百万的架构师,他们的架构设计思维是如何升级的,我们来聊点儿干的! 01.百万年薪的核心竞争力 作为前58集团 ...
最新文章
- mysql8.0.12最小化安装_简述MySql8.0编译安装过程
- SLAM | 视觉SLAM中特征点法与直接法结合:SVO
- Spring Boot 2.2.1 正式发布,需特别注意这个注解的使用!
- 反复下蹲,你的膝盖响几下?
- Scala集合:ListBuffer可变集合的head/tail/last/init方法
- windows10大瘦身 - Chrome文件夹下可以删除的临时js文件
- [转]ArcGIS.Server.9.3和ArcGIS API for Flex实现Toolbar功能(四)
- _Linux 最常用命令整理,建议收藏!
- Web Broadcast Channel
- java中数组合并的方法,数组合并--Java原生方法
- Luogu2014选课
- kettle安装,启动spoon之后一闪就没了问题
- 关于CC2541蓝牙开发板的学习笔记-3
- 敏感词过滤-DFA算法
- docker-redis配置文件修改
- 基于selenium的大麦网自动抢票脚本实测(新年第一篇)
- C#实现检测打印机状态(包括打印机是否缺纸、打印队列任务数)
- android obtain,Android Message.obtain() 之 高效原因分析
- oracle如何禁用job,Oracle中如何停用JOB及如何使用JOB
- Payton编程实现温度转换
热门文章
- 微生物组-扩增子16S分析和可视化(线上/线下,本周开课,2021.7)
- 爬虫第六式:链家房源爬取
- 拯救红米note3砖头
- Vue3项目报错[vue/no-template]
- 2022年第一季度保险服务数字化跟踪分析
- 用友添加附件设置文件服务器,用友服务器怎么配置上传附件
- 越喜欢村上春树,就越懂得生活
- 徐海学院计算机系朗诵比赛,第九届礼仪文化月之校园礼仪小姐礼仪先生评选决赛...
- 玄秘塔碑-唐代柳公权创作书法作品
- freenas 蜗牛星际_蜗牛星际 B款 配置、安装OpenMediaVault