新人来收！后台系统的「筛选设计」基础知识科普

编者注：由于我们的疏忽，未经@智铭桑 授权就用了他的插画（https://dribbble.com/shots/4946856-Designer-s-Rhapsody）作为Banner 图，经沟通已取得作者谅解。再次向作者表达歉意：对不起。

筛选可以说是我们日常生活中使用最多的交互之一了，看电影时选择喜欢的类型，外出吃饭时选择附近的商圈，网购时选择合适的价格区间等等。这些筛选无不帮助我们提高了使用的效率。

与to c产品不同，后台系统中，筛选条件往往更多，并伴随着复杂的逻辑关系。更重要的是，to c产品中的筛选往往是对搜索结果的进一步优化，而后台系统的筛选是工作流程中必不可少的一环，发挥着非常重要的作用。

一、筛选的作用

我用几个比较典型的场景来描述后台系统中「筛选」发挥的作用吧。

有经验的电销同学在电话联系客户时，通常都有自己的小策略，比如先联系近期注册的客户，或者先给等级高的客户打电话等。「筛选」可以帮助电销同学按自己的优先级来工作，提高转化率。

客服同学需要找到在操作中遇到困难的客户并给予帮助，可通过筛选出近三天内有注册行为，但无后续操作的客户，电话联系提供帮助。

另外，如果系统内没有任务模块的话，「筛选」可以临时顶替一下。例如，组长下达指令「拨打1个月内注册，但无投资行为的客户」，电销同学便可筛选出对应的客户来拨打电话。

复杂多变的筛选条件，为使用系统的用户提供了更加方便灵活的工作方法。

二、筛选——页面布局

筛选的页面布局可简单地分为左右布局和上下布局，如图：

△ 左右布局

△ 上下布局

我们在考虑筛选页面的布局时，通常与整个网站的布局保持统一即可。但是两种布局仍有一些微妙的差距：

• 左右布局能在同一页面即时看到筛选后的结果，而上下布局在筛选条件过多的时候，通常需要滚屏才能看到筛选结果。
• 左右布局的横向空间比较紧凑，在筛选条件过多的时候，表格本身需要左右滚动，在查阅信息的时候非常不友好。且左右布局下的表格通常长度也在一页的范围内，所以单页的信息密度低，需要频繁翻页。

一个小tip：如果表格字段过多，横向空间比较紧凑，需要左右滚屏的话，我们通常会锁定表头前几列的关键信息（例如客户姓名，客户ID），方便阅读。同理，如果表格过长，单页需展示的条数很多时，我们也可以锁定表头优化体验。总之，若想优化表单体验，可以多多参考 Excel。

除了上述的两种基本布局外，我们通常会使用 tab 来进行辅助。

例如某些高频使用的筛选条件（可以理解为分类），我们可以单独提出来，作为 tab 设计在表格上方。如图：

tab设计可以根据实际情况，放置在不同的位置。

三、几种常见的筛选设计

1. 所有筛选条件平铺展示

所有筛选条件平铺展示，最简单粗暴的做法，问题也很明显，看起来非常冗余，不利于快速定位目标。这种设计通常只适合应用于后台权限系统做的比较精细，每个角色可见的筛选条件比较少的情况下。

优点是选择任何筛选条件时都只有一级，不需要跨层级操作。

如果选择了平铺展示的话，可以将筛选条件按逻辑或使用频率分类，让用户对各个筛选条件的位置有预期。

2. 保留高频的筛选条件，将复杂的筛选项隐藏在「高级筛选」中

保留高频的筛选条件，将复杂的筛选项隐藏在「高级筛选」中。这是一种比较通用的办法。

关于这个我有一个脑洞。我曾经设想，针对「账号ID」「手机号」「身份证号码」这类的精准筛选的条件，统一做成一个搜索。根据输入的格式去匹配字段，再在字段内进行筛选。这样可以将几个筛选条件整合为一个，节约了空间，（某种程度上来说）提升了体验。

但是在咨询了小伙伴之后，发现有以下几个问题：通用性可能差一点，不同 table 的条件不一样，就要写不同的判断格式的方法（我们在界面上看起来是一张表，但在数据库中是由很多张互相关联的表组成的）；不同字段的格式可能是相同的，比如客户ID和订单ID；最后，一般系统已有了全局搜索，这种替代筛选的精准搜索似乎是重复劳动。

3. 默认只展示筛选条件，不展示内容，check后显示内容

默认只展示筛选条件，不展示内容，check后显示内容。如图：

△ 截图来自zoho crm

△ 截图来自网易七鱼

这种设计最大的优点就是省空间。尤其是一些 Saas化的后台系统（简单来说就是对外出售服务的，不是公司内部使用的后台系统），无法针对某类客户做设计，所以筛选项大而全，使用这种设计可以使页面干净高效。

另外，可以记录登录用户的使用习惯，将高频筛选条件显示在顶部。或支持手动调整顺序。当然，为每个用户记录不同的筛选也是成本很高的做法了，需要结合具体情况和开发同学沟通清楚再做定夺。

以上三种设计，都可以再附加一个功能——快捷筛选。

4. 快捷筛选

如我们之前所说，一个用户在使用筛选的时候，通常是有固定流程的。如果把这些操作绑定，储存为快捷筛选，可以节约用户很多时间。举个例子，交互如图：

高清大图戳 → https://share.weiyun.com/55UaCt7

四、筛选的逻辑关系

当筛选的可能性较复杂的时候，我们就需要考虑筛选条件的多种逻辑关系。比如我们在筛选「金额」字段的时候，有多种可能性「大于」「小于」「介于某个区间」等等；在筛选「所属销售」字段的时候，可能「是某人」，「除某人以外」，以及并列选几个人名的情况。

这种情况尤其会出现于需要自定义字段的系统中，在用户自定义字段的时候，就需要为不同的字段类型配置全面的筛选逻辑。例如，对于「数值字段」，对应的逻辑关系可能是「大于」「小于」「介于某个区间」；对于「纯文本字段」，对应的可能是「是」「否」「包含」「不包含」「为空」「不为空」等。

写在最后

虽然这篇文章写的是后台系统的筛选设计，但是to c，甚至说移动端的筛选设计，有很多都是可以借鉴过来的，尤其是在优化体验的时候，想一想我们平时经常用的筛选控件，会有很多新的灵感。

另外，筛选作为表单的一部分，在 Excel中已经有各种各样的用法了。如果觉得自己一头雾水，可以想一下我们在 Excel中通常会怎么做，也许就豁然开朗了。

以上是对自己在后台系统设计中的一点点总结，欢迎大家一起交流讨论。

图片素材作者：Ramy Wafaa

「筛选功能细节设计」

• 《交互基础小课堂！全面的筛选功能设计总结》
• 《如何设计更高效的筛选器？来看网易设计师的总结！》
• 《搜索和筛选有什么区别？来看顺丰UED 的总结！》