B端设计:盘点筛选控件的基本知识

访客3年前黑客文章761

对B端产品来说,由于业务逻辑与系统设计的限制,所以筛选逻辑更为复杂,为设计增加了不少难度。而笔者也结合为公司B端系统做的一次设计调整,为我们分享筛选功能的基本知识,希望对你有所启发。

B端设计:盘点筛选控件的基本知识

首先我们先从筛选本身讲起吧~

筛选可以说是我使用比较频繁的一种交互形式,比如我点外卖,会选择满减优惠力度大,同时我也可以选择在哪一个价格区间内的产品,这就会用到筛选。

而到了B端产品上来,一个CRM系统当中,筛选的逻辑也会比移动端的复杂,伴随着:且关系、或关系、大于、小于等等这样复杂的筛选形式,也为设计本身增加了很多难度。因此,今天我们就来讨论讨论筛选控件。

01 筛选存在的意义

筛选存在的对于整个表单来说是非常重要的,它可以帮助用户在表单茫茫多的数据当中进行快速的数据定位;可以对表单进行快速数据按照自己想要的方式进行划分,缩短用户对于数据的寻找时间;能够满足用户在工作中,实际业务场景的筛选。

B端设计:盘点筛选控件的基本知识

对于实际B端场景来说,筛选是日常数据分类的一个重要途径,我们先来看看实际场景到底有哪些?

1. 以CRM用户日常使用的场景为例

比如今天作为一个 *** 销售人员,想要联系最近注册的用户时,通常会通过筛选来选出最近几天注册过,同时又没有销售更近的客户,进行一个优先级的排布;

再比如说,在销售周报当中,销售主管可以通过筛选得到每个人这周完成的状态,也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等,这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用。

2. 筛选和搜索、导航的区别?

筛选可以通过多个筛选条件进行多维度的寻找,而导航、搜索只能通过单一条件进行指定筛选。

虽然在现在很多搜索引擎都可以支持多维度用空格去进行多字段的关键词搜索,但本质上区别不大。

所以在B端项目当中,如果你有表单,那你就需要筛选。

02 筛选的类型

我们将筛选分为基础筛选和高级筛选两种,两种筛选会根据业务场景不同,在不同的页面去使用。

1 .基础筛选

基础筛选一般为系统预设好的筛选字段,具有很强的业务和场景的需求。基础筛选一般分为四个部分:筛选条件、筛选项、已选项、备选项。

筛选条件:是指用户可以筛选的范围,

筛选项:是指用户可以选择的筛选项目

已选项:是指用户已经选中的筛选项

备选项:是指用户还没有选择的筛选选项

B端设计:盘点筛选控件的基本知识

基础筛选更多作为用户快捷筛选的一种方式,因为一般使用场景当中用户几个筛选逻辑为“且”。

同时筛选的逻辑也为简单筛选,所以在使用场景上只适合在对筛选要求不高的场景下使用。

2. 高级筛选

高级筛选一般为筛选中含有运算符,同时筛选当中包含条件关系,比如且关系或者否关系。一般高级筛选包含以下几类关键词。

筛选关系:是指几个筛选条件之间的关系,一般为 且、或关系,即 且 关系为几个条件之间的并集;或 关系为几个条件之间的联集。

筛选字段:是指在筛选当中,所要的筛选项,一般为表单当中的所有可筛选的字段

筛选操作:是指筛选字段和筛选值之间的关系,常见的筛选操作有:大于、小于、是、否、包含、不包含、为空、不为空等等。

筛选值:你所需要筛选的数值

B端设计:盘点筛选控件的基本知识

高级筛选一般满足更多的用户场景,为用户多条件多字段筛选提供有利保障。

03 筛选的布局 1. 上下布局

当在筛选器条件少于5个的情况下,最常使用的就是上下布局,这样筛选能与网站保持统一的情况下,上下布局也更方便用户进行阅读。

当筛选器过多的情况下(一般在5-15个之间),筛选器过多,需要滚屏才能看到筛选结果,用户使用起来会很别扭。所以在5-15个的情况下,一般会将筛选项进行收折,这样保证筛选整体面积不会太大,同时将用户常用的筛选放在前面,可以满足用户基本的业务需求和使用场景。

B端设计:盘点筛选控件的基本知识

2. 左右布局

相关文章

web交互中,如何区分弹窗、抽屉、跳转新页面?

web交互中,如何区分弹窗、抽屉、跳转新页面?

对于B端项目辅助页面设计, 使用哪种交互方式让产品页面更好用?整体交互更统一呢? 笔者将结合项目经验和相关知识进行整理总结,希望对你有所启发。 B端设计的体验升级不是打磨优质交互体验,而是统一体验。...

B端产品 | 关于列表内信息项的排序方案设计

B端产品 | 关于列表内信息项的排序方案设计

在B端产品中,常用到列表展示信息,其中列表内条目的排序规则及实现方法需要产品经理去思考和定义。笔者思考总结了项目中的一些经验,供大家参考。 排序的最终目标: 与所有的产品设计思路一样,我们要“以终为...

B端产品该怎么做竞品分析?

B端产品该怎么做竞品分析?

竞品分析作为产品经理的必备技能与日常工作内容,想必很多同学在这方面也是有各自的心得,下面希望就B端产品竞品分析做一次系统的总结和分享,以便大家互相探讨比对。 为什么这里非得强调是B端产品的竞品分析呢...

B端产品如何更清晰地理解业务?

B端产品如何更清晰地理解业务?

B端产品要想清晰理解业务,就需要理解行业、熟悉流程——通过市场分析、行业分析、竞品分析熟悉行业;并从微观层面熟悉流程。 01 理解业务对于 B 端产品非常重要。 为什么理解业务对于 B 端很重要呢?...

商超项目复盘 :B端产品从无到有 (二)

商超项目复盘 :B端产品从无到有 (二)

完成第一阶段的问题识别和目标定位,下一步需要确定整个项目的系统定位、框架设计等提纲挈领性工作,包含系统架构、功能蓝图、核心业务流、需求清单、任务拆解、资源预算等。 当所有方案确认以后,公司通常会进行...

B端产品的筛选场景调研与设计优化实践

B端产品的筛选场景调研与设计优化实践

笔者通过调研B端后台系统的筛选场景应用,总结归纳了几种基础筛选、高级筛选及组合筛选的场景,基于此对自身产品的筛选场景应用进行分析、归纳最终输出优化设计方案,希望对你有所启发。 一、筛选场景介绍 在B...