快好知 kuaihz

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)优化方案(二)表头筛选+收折式

五、小结

通过调研产品平台的筛选场景应用,总结归纳了几种基础筛选、高级筛选及组合筛选的应用场景,基于此对自身运维平台的筛选场景进行分析、归纳最终输出优化设计方案。

其实在设计优化过程中,产品的易操作性、信息层级、可拓展性都会促使设计需要结合场景思考问题。筛选功能当然也要满足实际场景需求,需考虑如何设计才能是否满足用户的实际操作路径,是否符合用户认知,能否引导用户使用该筛选功能等。设计之路道阻且长,如有不足之处,欢迎拍砖~

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:筛选  筛选词条  调研  调研词条  场景  场景词条  优化  优化词条  实践  实践词条  
设计

 榨干Chrome UI:Chro...

目前的我,已经成为Chrome的严重依赖用户,甚至U盘内也随身装着Chrome便携版。对我而言,它有着其他浏览器无法代替的杀手级优势:快速,稳定,完美支持Goo...(展开)

设计

 暗黑模式设计原则

iOS 13 不出意外地带来了暗黑模式,预计待到九、十月份系统正式推送的时候,WireframeKit 组件库要做超大更新了。近来正好读到这样一篇文章,关于暗黑...(展开)

设计

 为什么Scrum不行?

导语:此前小编发了一篇《Scrum敏捷价值观与原则》阅读量杠杠的,发现产品汪们对这种开发方式还是很感兴趣的。so,小编又去挖掘了一篇老文章,《为什么Scrum不...(展开)