一、筛选在生活中的应用

我们去商场逛街，没有明确购买目标就随便逛逛，有明确购买目标却不知道店铺在哪时，通常会有以下两种方式确定：

    1、精准定位——通过商场导航显示屏搜索品牌进行快速定位；

    2、模糊定位——通过区分商场每层楼的商品属性，如B1、B2基本综合区，L1、L2、L3是服饰区，L4、L5餐饮、娱乐综合区（商场布局虽然各不相同，但基本会根据商品属性陈列），大致确定楼层范围之后再悠闲的边逛边看。

其实日常生活中不经意间就会有筛选动作，我们去超市购物、图书馆找书等，为了找到目标都会进行一系列筛选行为，帮助我们在大量选择对象中快速定位，节约时间成本，提升决策效率。

二、筛选器的构成

筛选器能帮助用户从巨量信息中快速找到目标内容，由多个筛选条件组合而成，和表格是一对黄金搭档搭。

多样的文本录入和选择录入控件构成了筛选条件，这些筛选条件按照且、或的组合关系共同作用定位内容，有些筛选器选择筛选字段后实时呈现结果，有些需要点击按钮触发。

文本录入控件通常由标签和文本框组成，选择录入控件通常由单选框、复选框、选择器和标签组成，文本录入框和选择录入框在这里我就统称为筛选框。标签和筛选框的对齐方式影响页面呈现的效果，通常有以下几种形式：

左对齐/右对齐

布局更为紧凑，节省纵向空间。标签的长度会影响标签与筛选框之间的距离，影响可读性。

标签与筛选框左对齐

标签处于筛选框的上方并保持左对齐，不受标签长短变化而影响，在视觉上层次结构更清晰，方便做适配，但在垂直方向上占用更多的空间。

标签作为占位符

标签作为占位符放置于筛选框内，布局会更紧凑，可以节省空间。标签作为固定不动的占位符，不随筛选字段变化而变化。

设计tips：

1、在常用的筛选框中预设默认值，减少修改成本；

2、筛选条件量较多的时，把常用的放在前面，不常用的筛选条件放后面并按相应的逻辑关系来排列；

3、标签建议不要超过六个字，不要使用不易理解的词汇，一定要使用的话可增加说明文字；

4、简短的说明文字可以放在筛选框内，如果说明文本内容过长，置于靠近标签或者筛选框的地方，光标悬停时展示；

5、筛选器需要按钮触发相关操作，区分主要操作按钮和次要操作按钮；

三、筛选器的类型

筛选器通常由多种类型的控件组合而成，对内容进行多维度的筛选，通常会涉及到搜索框、输入框、下拉选择框、操作按钮等。

1）快速搜索

通常只有一个简单的搜索框。

适用场景：内容标识唯一，用户熟悉那些标识符，这些标识符可以快速定位内容，同时也支持模糊搜索。

2）基础筛选

通常有多个筛选条件组合而成，系统预设好的字段，用户无法修改。

适用场景：针对特定的业务和场景，除了关键词之外还有其他查询限定词，既支持模糊搜索也满足精准定位。

3）高级筛选

用户自行设置筛选条件，系统预设好条件类型，用户把筛选条件通过逻辑关系组合（关系有且、或）；字段关系有等于、不等于、属于、不属于、空、非空等。

用户可以根据需要自行增减筛选条件。

使用场景：产品需要使用于不同行业，业务场景不唯一，包容性极强（也通常用于满足专家级用户的特殊需求），通用性产品必备。

高级筛选示例

四、筛选器的布局

筛选器的布局根据页面信息承载量确定布局形式，尽量和整个系统布局保持和谐。

上下布局

上下布局是比较常用的布局方式，根据筛选条件的数量、使用频率考虑是否需要对部分筛选条件收起，节约纵向空间。

左右布局

左右布局符合用户的阅读习惯，也和网站的布局保持统一，对于横向空间比较紧凑的页面，尤其是表格字段特别多需要左右滚动，上下布局可以节省横向空间

五、筛选器的表现形式

1）折叠式

通常是将2~3个高频使用的筛选条件直接展示出来，低频使用的筛选条件折叠起来，和查询、重置、展开、收起按钮搭配使用，选择完筛选字段后点击【查询】，页面刷新后得到筛选结果。折叠式是比较基础的筛选形式。

优点

所有的筛选条件都展示出来了，筛选条件只有简单的“且”逻辑关系，认知成本和操作成本低，筛选条件数量多的时候折叠起来节约空间。

缺点

筛选条件数量较多的时候不利于快速定位目标，而且一般需点击查询按钮才能触发筛选，不能实时得到结果。预设的筛选条件具有较强的业务局限性，不能保证通用性。

Tips

处在折叠区域的筛选条件选择字段后，收起筛选区域时要显示出所选的字段，让用户知道选择了什么字段，同时可快捷删除选项。（下方案例没有显示）

2）tab切换式

筛选条件是高频使用的、筛选条件不存在交叉且筛选字段少于五个时，设计为tab切换式，置于顶部，点击tab切换内容。

优点

实时筛选，每个tab可承载非常丰富的内容。

缺点

tab切换式相当于对内容分了大类，想要获得更细颗粒度的内容时，还需要和其他形式的筛选条件搭配使用。

Tips

最简单的就是搭配一个搜索框，快速筛选目标内容，搜索输入框尽量采用模糊搜索，不要让用户去精准记忆要输入的内容，用户只记得个大概的时候也能搜到。

3）弹框式

通过点击按钮弹出筛选区，需要按钮触发筛选，筛选条件的标签与筛选字段纵向排列（在筛选框的上方）。

优点

适用于筛选操作是低频功能的场景，不占用页面空间。

缺点

筛选入口不容易被发现，也增加了点击操作次数。

Tips

初次打开这个页面时，筛选按钮旁边可以放个小红点或者利用动态提示，让用户注意到这个功能。

4）表头筛选

鼠标悬浮至表头标题，就会出现筛选按钮，采用下拉框形式展示筛选字段。

优点

用户根据表头标题就能快捷筛选内容，表头所有字段都支持筛选，用户想筛选哪个条件都可以满足。

缺点

筛选功能不直观，用户在操作上有一定的学习成本。

Tips

重要字段往表格前面放（重要的数据优先展示），次要的数据往后放。这样表格字段数量多的时候方便快捷筛选，减少横向滚动表格查找数据。

5）单侧筛选式

单侧筛选和弹框式的筛选条件布局类似，区别在于单侧式是采用左右布局的方式（放置在内容区的左侧或者右侧），可实时获得筛选结果，弹框式通过查询按钮触发以弹框形式悬浮在页面上，需点击查询按钮进行筛选。

优点

能承载非常多的信息，通过滚动或者展开收起的形式查看更多的筛选条件，节省空间。

缺点

信息量大的话，信息没做好分类会增加操作难度，信息量小的时候我觉得大可不必，浪费横向空间。

左侧模式非常适用于管理日程、考勤、支持用户配置页面功能的产品。像saleforce系统的通用性非常强，用户可自定义页面功能，配置页面就是采用单侧式自行功能选择，配置更适合自己使用的页面。worktile的日历页面采用的也是单侧式，操作非常便捷。

6）平铺式

通过对筛选条件进行合理的分类，把相应条件下的筛选项全部显示出来。适用于用户搜索的内容标识不唯一、筛条件中的筛选项特别多或者细分种类非常多的情况。一般网页或者客户端应用的比较多，像电商网站、视频网站等。

优点

所有筛选项一目了然，能快速获取不同筛选条件的结果，筛选项很多的情况下比下拉选择的方式操作更快捷。

缺点

页面空间占用比较大

Tips

根据使用频率依次从上到下排列筛选条件，最常用的放置在最上方；平铺出来的筛选条件多于4个时，剩余的筛选条件可收起来。

我之前设计电销系统的时候用过平铺式的筛选器，大概占了页面垂直高度的三分之一，只在特定的页面使用，不会应用于整个系统。

想深入研究平铺式的可以去看下淘宝网站或者腾讯视频的筛选形式。

以下是ant desigin系统应用示例

7）综合式

单一的筛选形式不能完全满足筛选需求时，往往会采用多种筛选器组合搭配使用。如基础筛选+高级筛选，tab切换式+弹窗式等等，或者直接由用户自行增减筛选条件。

六、筛选器设计标准

对筛选器有一定的了解之后，还要结合实际业务场景考虑如何设计筛选器。我总结了以下几个设计标准：

    1、支持两种搜索模式：用户可以通过关键词进行模糊搜索，也可以通过关键词结合其他筛选条件精准查找，尤其是筛选内容标识不唯一，或者包含用户不太熟悉的标识符；

    2、内容易于识别和查找：标签尽量用简短易懂的词语，必要的时候辅助明文字。筛选条件比较多的时候，高频使用的筛选条件放在前面，低频筛选条件往后放或者折叠起来。

    3、效率优先：筛选操作是高频行为，筛选条件不要完全折叠起来，尽量保持最短操作路径和最少点击次数。筛选操作是低频行为，可以适当弱化筛选信息，筛选入口以按钮形式呈现。

    4、具备通用性：产品定位是行业通用的系统，筛选项的通用性不言而喻，高级筛选必备。对于产品定位是公司内部使用的系统，通用性也是需要兼顾的，说不定公司就有个小目标，系统要做成行业标杆产品呢？（经验体会）

最后

不同的用户有不同的筛选偏好，作为B端产品设计师，应该体验过因为不同决策者的个人偏好导致功能几番修改的情况，面对这种情况更要做到设计有据可依。

本文参考了各优秀系统的筛选器设计形式，并结合自身的设计经验总结了此文，希望对大家有所启发，能够根据自己实际的业务场景设计符合产品的筛选器。