筛选（Filter）也叫做过滤器，是搜索框架中的一部分，用于数据抓取。
可以通过添加不同的属性来创建筛选组件，用户选择个中某个属性并定义其值。一个属性可以有一组可供选择的值，例如设备平台可以分为PC、IOS、Android等。
用户可以根据须要，对数据进行有规律的抓取，快速查找出特定内容，准确缩小数据的展示范围。并且可以定义并保存筛选以备后用。实行筛选后，用户也可以查当作果并进一步缩小结果的范围。
大多数B端产品数据繁芜，数据内容常日都是由用户添加天生的，常常会有项目标题过长、自定义字段无规律、数值繁芜的情形，筛选就显得尤为主要了。
1. 利用场景
只要用户有须要找到屏幕中任何相同元素的需求，都可以用到筛选，常见的利用情形有：
数据列表、卡片列表等任何列表类型的页面，用于筛选可见项目的数量。剖析类型的屏幕和仪表板，用于筛选图表中包含数据的范围或类型（韶光范围、受众类型、显示的指标、代价范围等）。不管利用场景如何，其目的都是让用户对数据进行区分，找到想要的内容。流畅的筛选功能交互，可以减少用户的包袱，使其将更多精力放到处理筛选后的数据中。同时，筛选属性还可以用于向用户先容全体系统可以供应的内容。
二、筛选项的类型
在构建筛选时，须要非常理解产品的数据构造。哪些字段与韶光或日期有关？哪些是定量值、哪些是定性值？不同类型的数据须要不同类型的选择输入，所有数据点都可以反响在筛选器中。
1. 日期
日期是B端产品中常见的筛选类型，一个场景事宜的触发离不开韶光选择。
日期选择器是让用户在程序中选择日期或韶光段的一类控件，其浸染是查询过往韶光发生的事情。常日根据用户习气设置一个默认韶光。
一个好的日期选择器，须要把稳：
确保开始日期和结束日期按顺序排列。所选内容必须可见，对付已选的韶光段须要有明显的样式区分。常日根据用户习气设置一个默认韶光，如今天。添加快捷选项和自定义选择。选择韶光范围时，快捷选项是非常有用的。根据场景特色，增加昨天、最近7天、最近30天等快捷项。但是，如果用户探求的内容快捷选项未涵盖，则许可他们设置自定义选择。2. 状态B端业务繁芜，操作职员角色分工各不尽相同，根据实际的业务流程，同一条数据可能会产生多个状态节点。操作关联到系统的数据时，会触发状态的变更。状态字段常用于列表中，可以让用户追踪定责到详细环节，方便任务的交卸。
3. 字典
用户通过选择的办法录入系统预先配置筛选项信息时，可以利用字典格式。例如，标签类字段：性别男、女，架构类字段：省、市、区等。
字典类字段的值较固定，涵盖范围广，用户可以通过确定性内容选择范围，提高筛选效率。
4. 多条件
列表中最常见的两种字段内容是文本类和数值类字段，若想要精确的筛选这一类字段内容，须要供应含有运算符的筛选操作，常见的筛选操作有：即是、不即是、大于、小于、区间、有值、没值等。
5. 联动
联动紧张是指界面上的控件之间发生相互干联的变革，比如选择了某个值后，其他筛选项随之发生变革。
6. 高等筛选
高等筛选是把筛选变成附加公式，而不是大略地一个值。
在这种情形下，不仅可以让用户掌握相对关系，还可以许可他们通过添加或打消条件来创建繁芜的公式。常日有并级“且”、交级“或”两种关系。
7. 筛选项优先级排序
常日在用户眼中，不是所有字段都具有相同的可用性代价，不同的字段在不同利用场景中的主要程度也不一样。我们须要为高利用频率属性值在筛选组件中更快被访问。
以是在得到可能成为筛选的属性后，须要根据业务需求的主要程度，对所有可成为筛选项的属性做优先级排序。评估出须要实现哪些筛选项，打消哪些筛选项，哪些优先实现，哪些靠后实现等。
除此以外，还可以根据业务需求，对筛选进行分类。
三、筛选的设计1. 位置
筛选器组件的位置有三种常见的类型。一是左侧的垂直侧边栏形式，二是水平的筛选栏，三是嵌入到某个数据卡片或表头的并列形式。选择哪种类型取决于筛选对高下文的影响和产品的扩展性哀求。
（1）侧边栏
左侧边栏位置较固定，不会由于筛选项过多而影响页面中紧张内容的位置，可扩展性强，可在收起部分嵌套更多的值。
但是这种类型筛选器可以影响全体页面。我们须要确保页面上的每个元素都有效地受到筛选的影响，避免造成混乱。
（2）水平栏
全局影响：可能影响全体页面，也可能影响页面中的某一部分可扩展性：一样平常筛选栏可以放置在页面的特定部分的上方，明确表示只有那些项目才会受控。对付那些由不同数据构造组成的页面，是一个很好的选择。
水平栏选项的可扩展性稍差，由于它局限于页面宽度。筛选内容较多时，最好有收起功能，提升屏效。
（3）并列
并列形式常见于列表中，是一种列表内置筛选形式，类似Excel表格的操作。点击表头筛选按钮进行筛选，可以将筛选字段直接带入表头标题中。
如果产品数据构造不一致（如各种图表、图形组成的仪表板），须要谨慎利用全局筛选，这个并列的形式可能更得当。可以在页面级别保留一些全局筛选，但也须要供应较小规模的筛选机制。
这种类型为用户供应了快速进入筛选的通道，但是筛选的图标各平台不一，会影响用户对表头的识别。
2. 初始状态
（1）展开/折叠
筛选较多的页面，考虑到屏效性，可以利用折叠/展开的形式，避免页面滚动影响用户操作效率。
如果界面筛选中没有默认的值，用户必须通过设置一个筛选以获取表的第一个结果集，则默认展开筛选栏。
如果界面在加载时实行的默认值，图表内容已预先添补内容，并且用户很少变动筛选栏，则界面可以默认折叠筛选栏。而如果筛选功能的利用频次不高，可将他它隐蔽不才一个层级中，为关键信息预留更多位置。
（2）平铺/弹出
平铺筛选在B端产品中较为少见，它将筛选项全部罗列在当前页面内，用户可以直不雅观比拟各个选项，操作便捷，但是也有一定限定。这种类型展现条款本身必须可以标签化，条款标字节数受限，不可过长。如果筛选条款数量太多，乃至多到一屏放不下，须要考虑弹出式筛选。
弹出式的范例样式是下拉列表，当筛选条款数量较多时，给出一个额外的空间更有利于操作。对付多层级的信息（如省、市、区）弹出式也更为友好。
3. 实行韶光
过滤器栏有两种不同的模式：实时更新模式和手动更新模式。
（1）实时更新
在实时更新模式下，筛选栏会立即对每个输入变动做出反应。一旦用户做出选择，数据就会刷新并显示筛选结果，因此不须要查询按钮。界面将与所有设置的筛选相匹配并对结果进行实时更新。
这种模式的优点是在实行筛选时为用户供应了一种方便大略的体验，可以在每次点击后立即看到结果。适用于较低风险的交互，一旦处理多选过滤器或更繁芜的输入时可能会造成混乱。当然还须要考虑处理数据的多少，如果运用中数据量巨大，每次更新韶光较长，反而会降落用户的利用效率。
（2）手动更新
在手动更新模式下，过滤结果只有在用户点击查询时才会更新。如果用户想在每次变动后查当作果，必须单击查询按钮。
这种模式最适用于非常繁重的数据集或低性能的运用程序。
（3）利用哪种模式
实时更新模式对用户更方便，但是，如果用户必须配置多个筛选器才能得到有用的结果集、或者预期产生的数据量过大，请考虑改用手动更新模式。
选择哪种模式须要考虑：数据量、系统性能以及用户期望。
4. 显示结果
（1）筛选进度
筛选操作须要一些韶光才能显示结果。在此等待状态期间，须要给出进度的反馈。加载图标是常见加载方法。如果加载结果时涌现问题，应以适当的形式将结果传达给用户。
（2）突出筛选结果
运用筛选后，选项可能会隐蔽在其下拉菜单或可扩展部分中。这时候须要突出实行过哪些筛选值。否则，用户很随意马虎忘却操作内容。
须要把稳：
保持筛选条件在其内容高下文中可见。对付筛选结果应给出明确的指示（数字标记、粗体文本、背景颜色等）在专门的筛选条件概述/择要部分集中显示它们。如果多选并且没有足够的空间将它们全部列出时，须要给出明确数字提示用户选择的个数。标签内容可给出最大字符限定，超过部分用 … 代替。如果用户须要再次查看他们的选择，可以指明让用户再次打开下拉菜单查看。
（3）结果计数
传达反馈的另一个关键要素是显示结果的数量。常见的结果计数常日与翻页功能合营利用。
（4）空结果
如果搜索结果不包含任何数据，须要给出空结果提示。最好能给用户一些建议以相应空结果。
（5）在结果中过滤和搜索
筛选结果常日包含大量用户信息，最好供应一些用户可以运用于结果的逻辑筛选器。这可用于进一步限定结果的数量。
排序功能可帮助用户按所需顺序对结果进行排序。
此外，还可以让用户变动视图以在最佳布局中查当作果。
（6）结果打消/结果重置
无论用哪种模式，都不要忘却添加一个易于访问的“全部打消”按钮。这为用户供应了退出筛选、返回初始结果的通道。如果初始筛选栏中有系统默认值，可以添加“重置”按钮。
四、小结
筛选的定义：根据用户须要，对数据进行有规律的抓取，快速查找出特定内容，准确缩小数据的展示范围。
筛选项的类型：日期、状态、字典、多条件、联动、高等筛选。
筛选的设计：位置（侧边栏、水平栏、并列）、初始状态（展开/折叠、平铺/弹出）、实行韶光（实时更新、手动更新）、显示结果（筛选进度、突出筛选结果、结果计数、空结果、在结果中过滤和搜索、结果打消/结果重置）。
参考：https://pencilandpaper.io/articles/user-experience/ux-pattern-analysis-enterprise-filtering/https://experience.sap.com/fiori-design-web/filter-bar/http://www.woshipm.com/pd/4609527.htmlhttp://www.woshipm.com/pd/3622313.htmlhttp://www.woshipm.com/pd/1947124.html
本文由 @LIZ酱 原创发布于大家都是产品经理，未经容许，禁止转载
题图来自 Unsplash，基于 CC0 协议
