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

编者注：由我们的疏忽，未经@智铭桑 授权就用他的插画（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