关于过滤的交互

有灵感能出界于2021-12-27发布在灵感

近期遇到一个关于过滤的设计点，发现对于过滤，虽然功能上比较相似，但在设计呈现上却有很多变体，放在外层，层级浅，可以直接交互，放在右上角作为icon，则可以为页面留下更多的空间，等等。

关于过滤的交互(图2) Fig 1 过滤的多样形式

因此我总结了一些平时遇到的过滤设计，希望可以从中找寻其中的规律。

因为过滤与搜索，都是辅助用户去寻找信息之用，所以本篇文章里面里的“过滤”定义为包含“筛选”与“搜索”在内，可以辅助用户寻找东西的“过滤”。

在调研的过程中，我发现的一点是，“过滤”选取怎样的交互模式，跟信息的深度与复杂度有关。信息越复杂，对应的交互模式也就更为复杂。想象信息是海洋里的鱼群，人类去捞鱼，如果想要捞更多样更复杂的鱼，就需要去更深的海里，带上氧气罐等更复杂的设备去捞。

01 表面式

关于过滤的交互(图4)

Fig 2 表面式过滤产品例子：Moego

首先来看一个例子来自于产品Moego，场景是有一个工作日历，可以根据员工过滤相关的日程。过滤使用下拉弹框来显示，在当前页面即可完成。这种过滤模式的层级较为浅，之所以称其为表面式，是因为用户只需要坐在救生圈里面，拿网子周围捞就可以捞到信息。

Fig 3 休闲的表面式过滤模式

之所以可以用这样的形式，我觉得是因为信息的类型比较单一，只是日程，而且过滤的条件也只有员工一种，一对一的关系比较直接。如果在内容上，不仅只有员工日程，还有个人的会议，需要参加的讲座等，信息复杂度变高了，需要提供的过滤条件就会更多才能便于找寻这些更加复杂的鱼群。

02 入水式

Fig 4 入水式过滤产品例子：Jira

再看一个例子，是管理软件Jira上的过滤，点击搜索框，会带到一个新的页面专门来筛选与搜索信息。

Fig 5 需要一点点努力的入水式过滤模式

对比于上一个类型的页面，进入的层级更深，而我分析原因则是因为信息的复杂度变高了，而复杂度变高是因为每个信息的属性变多了，前面一个例子，日程就只是日程，而这里的信息，属性包含了，从属的项目，从属的类型，进度，状态，等等，使得过滤的类型也不得不多了起来，才可以便于用户寻找。

因此，用户不得不摘下救生圈，下水去寻找鱼群。

03 潜水式

关于过滤的交互(图10)

Fig 6 潜水式过滤产品例子：Uber Eats

Uber Eat中，点击过滤，可以看到里面允许过滤的种类很丰富，可以选择是不是优秀服务，可以根据价格，配送费选择，也可以选择根据距离，评分排序等，而由于过滤的种类比较多样，交互的模式也变得更多，需要用开关控制有无，需要可视化展示价格的多少等等。

Fig 7 在深处才会有收获的潜水式过滤模式

对比于上一种方式，上一种过滤方式只是使用下拉列表进行选择，而这种方式则需要使用多种控件组合，才可以完成过滤，可以说不仅是信息的属性更多样了，属性的复杂度也更加高了，不仅仅是ABCD的选项可以囊括的。这就好比深海底部包含了品种更加奇幻的鱼，如果需要捕捞他们，除了整个人要下水，也需要氧气瓶手电筒等更多工具次才能找到这些鱼。