一、简介

筛选栏是由一组数据录入控件 (输入框、选择框、时间选择器等) 构成的集合,  通常作为列表的辅助操作,  帮助用户对数据进行快速的分类、定位。

本文从类型、布局、控件、行为 4 个纬度对常见筛选栏进行了拆解,  帮助设计师快速、正确的进行选用。

二、类型

常见的筛选栏分为平铺筛选栏、折叠筛选栏和侧滑筛选栏 3 类。

1. 平铺筛选栏

平铺筛选栏即将筛选项进行平铺展示,  是一种简单直接的筛选形式。对于用户来说认知成本较低,  便于操作,  具有一定的引导性和较强的可操作性。

优点：用户可以直接对目标筛选字段进行操作，高效、快速的进行筛选。

缺点：将所有信息全部平铺展开，占据较多空间,  信息量过于冗杂繁多。建议超过 3 行使用部分折叠。

2. 折叠筛选栏

折叠筛选栏即将筛选框进行折叠,  仅展示标题。对筛选项繁多的业务场景可以很好的节省纵向空间,  从而尽量减少翻页、滚动操作。分为选中项回填覆盖标题和选中项以标签形式展示在下方 2 种类型。

优点：节省空间。

缺点：交互与视觉展现形式对用户有一定的认知成本和操作成本。其中选中项回填覆盖标题的筛选栏需要用户对标题与选中项有更高的熟悉度，否则会降低选中项的识别性;  选中项以标签展示在下方的筛选栏操作与选中项之间存在视觉差。

3. 侧滑筛选栏

侧滑筛选栏一般通过点击筛选按钮唤起，滑出弹窗进行筛选。这种筛选方式适合筛选功能在系统中层级较轻或复杂度较高的场景。

优点：可以弱化筛选功能在页面中的比重,  支持复杂情况下的筛选,  具备较高的扩展性。

缺点：侧滑筛选栏的操作步骤相对繁琐,  同时筛选结果与筛选项之间缺少直接的映射关系。

三、布局

1. 平铺筛选栏布局

平铺筛选栏以栅格布局的方式排列筛选器,  可以根据筛选项的内容选择双列、三列甚至多列布局。在这种布局方式下需要给标题设定统一的宽度,  这样可以避免筛选项排列混乱的情况。

2. 折叠筛选栏布局

折叠筛选栏以水平布局的方式排列筛选项,  筛选项间的间距固定。如果浏览器的宽度变小或筛选项超过第一行，则折行显示。

3. 侧滑筛选栏布局

侧滑筛选栏以垂直布局的方式排列筛选器,  在各个屏幕尺寸下均保持一致。在这种布局方式下需要给标题设定统一的宽度,  这样可以避免筛选项排列混乱的情况。

四、控件

筛选栏由各种数据录入控件构成,  在设计过程中，要结合当前的业务场景进行选择。

常用的控件有:

• 输入框

• 选择框

• 日期选择器

• 日期范围选择器

• 时间选择器

• 数字输入框

• 单选按钮组

五、行为

1. 实时筛选/手动筛选

实时筛选:
筛选栏会立即对每个输入或选中的筛选项做出反应。每当用户更改筛选项字段时，列表都会更新。因此，如果使用实时筛选模式，则无须使用 “筛选” 按钮。

手动筛选:
在手动筛选模式下，仅当用户点击 “筛选” 时才会更新筛选结果。

如何选择?
毋庸置疑, 实时筛选模式对于用户来说更加方便。但是，如果用户必须同时配置多个筛选项才能获得需要的数据，或数据量过大频繁更新会影响性能，请考虑使用手动筛选模式。

2. 清空/重置

• 筛选项默认预设选中值时一般使用 “重置” 按钮。

• 默认没有选中值时请使用 “清空” 按钮。

3. 筛选项可配置

对于关注不同内容的用户角色来说,  当筛选项较多时,  还可以通过 “设置” 对筛选栏上的筛选项进行隐藏或者排序。

六、常见问题

1. 筛选栏/表头筛选

为保持一致的筛选或搜索体验, 如表格中使用了筛选栏,  则不需要再增加表头筛选,  以防筛选项之间出现混淆或矛盾。