编者注:由于我们的疏忽,未经@智铭桑 授权就用了他的插画(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

「筛选功能细节设计」

点赞
收藏 26
继续阅读相关文章

发表评论 已发布 4

还可以输入 800 个字
 
 
载入中....
4 收藏