用一篇超全面的文章，帮你掌握B端系统筛选控件的知识点

近的作一直筛选打交道，公司 B 端系统了一次设调整，去解决目系统中筛选功能交互繁琐的问题。

首先我们先从筛选本身讲起。

筛选可以说是使用比较频繁的一种交互形式，比如点外，会选择减优惠力度大，同也可以选择在哪一个价格间内的产品，这就会用筛选，而了 B 端产品上来，一个 CRM 系统当中，筛选的逻辑也会比 移动端的复杂，伴随着：且关系、或关系、大于、于等等这复杂的逻辑，也为计本身增加了多难度。因此，今就来讨论讨论筛选控件。

筛选存在的意义

筛选存在于个表单来说是常要，它可以帮助用户，在表单茫茫多数据进快速定位；可以表单进快速划分，缩短用户于数据寻找时；能够满足用户在工作，实业务场景筛选。

于实 B 端场景来说，筛选是日常数据分类个要途径，我们先来看看实场景到底有哪些？

用个 CRM 用户日常使用的景来说：

比今天为一个电销售人，想要联系最近注册的用户时，通常通筛选来选出最近几天注册，同时又没有销售更进的客户，进行一个优先级的排；

再如说，在销售周报当中，销售管可通过筛得到每个人这周成的状态，可通过筛得每个人对于线索的更进情况和对客户的流失状态等等，这些都可通过各种各样的筛形式来满足户对于特定情况的使。

筛和搜索、导航的区别？

筛可通过多个筛条件进行多维的寻，而导航、搜索只通过单一条件进行指定筛。虽然在现在很多搜索都可支持多维空格进行多字的键词搜索，但本质上区别大。在 B 端项目当中，如果你有表单，那你就需要筛。

筛选的类型

我们将筛分为基础筛和级筛两种，两种筛会根据务场景同，在同的页面使。

1. 基础筛

基础筛一般为系统预设好的筛字，具有很强的务和场景的需求。基础筛一般分为个分：

• 筛选条件：是指用户以筛选的范围
• 筛项：是指户可择的筛项目
• 已选项：指用户已选中的筛选项
• 备选项：是指用户没有选择筛选选项

基础筛更多作为户快捷筛的一种方式，因为一般使场景当中户几个筛逻辑为「且」

同时筛选的逻辑也简单筛选，所以使用场景只合对筛选求不高的场景下使用。

2. 高级筛选

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

• 筛系：是指几个筛条件之间的系，一般为 且、或系，即「且」系为几个条件之间的并集；「或」系为几个条件之间的联集。
• 筛选字段：指筛选当中，所的筛选项，一般表单当中的所可筛选的字段。
• 筛选操作：是指筛选段和筛选值关系，常见筛选操作有：大于、小于、是、否、含、不含、为空、不为空等等。
• 筛选值： 你所需要筛选的数值。

高级筛选一般满足多的用户场景，用户多条件多字段、多筛选关系、多筛选操作提供利保障。

筛选的布局

1. 上布

当在筛器条件于 5 个的情况，最使的就是上布，这样筛与保持统一，更方户进行阅读。

当筛选器过多的况下（一般 5-15 之间），筛选器过多，需滚屏能看到筛选结果，用户使用起会很别扭。所以 5-15 的况下，一般会将筛选项行收折，这样保证筛选整体面积不会太，同时将用户常用的筛选面，可以满足用户基本的业务需求使用场景。

2. 左右布

左右布在 PC 端一般是字择进行筛，通俗来讲就是将户可筛的有字全罗列来，然后通过勾，择你需要筛的字，进行筛器的使。

左右布局的好处能够将筛选的所条件都直接的展示出，可以应很多场景，筛选器用 15 以时。通过左右布局的方式，能够让筛选条件行滚动，限度保证用户使用体验。

筛选的形式

在日的 B 端产中，筛的形式有哪些？筛到应该怎么设计？接来为大总结梳一些在  B 端产中的筛玩法，希望为你开启大陆。

1. 平铺型

平铺型一般为用户搜索结果数据量大，使用户搜索出来的结果与其预期差距大，用户以通筛选对数据的一次分类，使用户能够精准寻找其想要的结果。

平铺一般为筛条件于 6 个，这样够通过 1 行或者 2 行展示筛项的结果。

多用于信息的产品，比如电商、视频网站。常见的淘宝、京东、腾讯视频 PC 端都采取用这样的方式，将所的筛选条件列出。

优点：

平型的好处将筛选项的结果全部或者部分出，能够帮用户速理解筛选项以及速找到自己的结果。

缺点：

平型的控件占比，需占据面积展示平出的筛选结果。

比如淘宝 PC 端，搜索个品后花去 40% 积去展示所有筛选条件，其实是想引导用户，淘宝搜索过后 spu 数量仍然过大，想过进步筛选，让用户明确自己想要东西。时为积占比大，常平铺型都是以收折状态，有在搜索触发后才会完全展开。

2. 收折型

收折型筛选一种简单直接的筛选形式，将用户常用的筛选形式通过下拉框的形式行筛选。每一筛选条件就一下拉框，这种形式看去很简单，但 B 端场景中，下拉框对于用户认知本低，操作性也较强，同时用户再度使用时，又能给用户很好的使用体验的一种方式。

优点：

用户可以直接对其常用的字段筛选行一操作，并且复杂的筛选关系，全部都「且」的筛选逻辑，能够保证用户行速的筛选选择。

缺点：

将所信息全部平展，信息过于冗杂繁多，同时通用性产品时，这种方式很难到通用性。

3. 单侧筛选

单侧筛是一种更通的筛形式，通过对于你想筛的字进行勾，勾成后就会现筛条件，然后择筛字、筛操作、筛值，一般择成有筛后，还需要点击查询，筛操作才算成。

整单侧筛选，的筛选条件可以置表单的左侧或者右侧，通过表单纵向空间，去承载筛选条件。

优点：

节省空间、通用性强。因很多 Saas 系统、Paas 系统当中，无法针对每一客户行设，就考虑到系统通用性高，一些全的功能。每表单所需制化修改的方很少，同时能纳的信息可以很。

缺点：

就后台系统当中只这一种筛选形式会面临我常用的几种筛选的字段中，通过不断寻找，满足我的筛选需求，操作麻烦。

我们品在某改版将筛选由收折改为单侧，为我们用户使用筛选场景常多，用户筛选都要多进 2、3 步操作， 导致用户进了大量吐槽， 后来进改，将筛选序支持手动调序，用户吐槽数才慢慢减少。

4. 表头筛选

表筛选一种复杂筛选的形式，其始源于 Excel 的筛选形式。点击表单的筛选按钮，可以将表的筛选字段直接入，方便用户。之后后台产品的发展中，得以借鉴过。

优点：

可以通过表的点击，使用户捷入到自己的筛选条件，通常况下，表单越左的数据显然越重的，也使用筛选去筛频率高的，因此高频的筛选场景基本还得到满足。

缺点：

用户第一次入系统很难理解这种交互形式，且每表都会一 icon，影响用户对于表的识别。

5. 弹窗式

通过点击筛按钮，展现筛弹，进行筛。这种筛适合在筛功在系统中是很重要的层级。最见的就是 Tapd，在中筛是很强的一个功，同时是系统中十分有必要的。

优点：

是够在节省面积的情况，可进行很复杂的筛，同时可支持复杂情况的筛。

缺点：

弹会遮挡一分表单数据，会影响筛人的判断，次筛条件的添相对更繁琐。

选择更合适的筛选

在我们一系列筛的调整过后，我们团队总结了对于我们来说更重要的条件和形式，来和大分享探讨一。

1. 使频率

我们认为影响筛控件最重要的是户的使频率，因为户的使频率和使方式，直接影响到我们筛是普通筛 or 级筛，会影响到筛的形式。

2. 满足实际务需

筛功的做法，取决于我们产未来是想往哪一个方向发展，如果想把功做的强大，就得考虑到筛的后续扩展性。因此满足实际务是十分重要。

3. 户认知成本

在 B 端系统当中，最可遇见的就是你给户设计的路径但是实户根本没有往你想的方向操作。我们系统最开始给户设计好了很多功点，但是户对于这个点的认知成本实在过低，导致了后面系统功点很多都被埋没。因为在你设计好了一个功点后，要适当引导户，解释这个功的使场景才会你设计的功被淹没。

其实 B 端产品中，易用本身就难且的过程，每一功能的设都需去思考很多方面：用户易用、信息层级、未扩展，都出取舍，对于每模块都需思考、结合用户场景， B 端 web 的设一直都摸黑，我也只将自己一段时间的作行总结，如的不确，欢迎家指。

欢迎关注作者微信公众号：「CeDesign」