返回知识库

界面与交互 · 内容与数据展示

筛选Filter

用一个或多个 facet 条件缩小可见数据范围;勾选即时改变结果列表与计数,已选条件以 chip 列出可逐个移除,一键清空回到完整集合。

任务清单筛选:勾一个条件,结果与计数立刻变

亲手勾选 facet 条件,看右侧结果列表的条目与「找到 N 条」如何立即缩小;点已选 chip 的 × 单独移除,或点主操作「清空全部筛选」一键恢复。

第 0 步:这是一个 8 条任务的清单。勾选左侧 facet 条件,看右侧结果列表的条目与「找到 N 条」如何立即变; 已选条件以 chip 列在结果上方,点 × 可单独移除;点主操作「清空全部筛选」一键回到完整集合。

筛选条件
状态
负责人
期限
找到 3全部 8
  • 未完成
  • 本周到期
  • 整理发布清单未完成 · 指派给我 · 本周到期
  • 回复客户反馈未完成 · 指派给团队 · 本周到期
  • 评审设计稿未完成 · 指派给我 · 本周到期
当前 2 个条件 · 显示 3 / 8

对照:已应用 2 个条件(未完成、本周到期),当前匹配 3 / 8 条。原因:不同 facet 之间是 AND,要求任务同时满足;同一 facet 内多选是 OR,会放宽该维度。下一步:点已选 chip 的 × 单独移除某条件,或继续勾选其他 facet 观察结果如何变。

面板教会的知识点

把刚才操作里看到的现象命名为六条规则。

  • 筛选缩小数据集:每勾一个条件,结果列表的条目只减不增;取消则恢复。
  • 同 facet 多选是 OR,不同 facet 之间是 AND:勾「未完成 + 已完成」等于不限状态;再勾「本周到期」则必须同时是本周。
  • 已选条件可见可逐个移除:已选条件以 chip 列在结果上方,点 × 只撤销那一条,不必清空重来。
  • 结果计数随条件变:「找到 N 条」实时反映当前条件下的匹配数,与结果列表同步。
  • 筛太严 = 0 条 = 空态:条件 AND 后无匹配时显示空态并建议放宽或清空,而不是一片空白列表。
  • 一键清空回到完整集合:主 CTA 让用户随时恢复全部数据,筛选永远可逆。

什么时候用筛选

从「数据是否大到需要按维度缩小」判断,而不是看页面够不够丰富。

适合

数据集合较大、用户会按维度(状态、负责人、价格、分类、日期)缩小到目标的列表、表格或搜索结果——任务清单、商品目录、订单、文档库。

先别用

集合很小(十几条以内直接看更快)、需要全量对比或排序而非缩小、一次性按关键词查找(用搜索更直接)、或结果不会随条件重复变化的场景。

怎么用:从勾选到判断的最短路径

一次到位的检查顺序。

  1. 选 facet 维度:按用户会关心的属性切分(状态/负责人/期限/价格区间),每个维度独立一组。
  2. 勾具体值:同 facet 内多选是 OR;不同 facet 之间是 AND,条件越多匹配越少。
  3. 看结果与计数:结果列表与「找到 N 条」随勾选即时变化,让用户随时知道当前在看什么。
  4. 移除或清空:不需要时用 chip × 移除单条,或主 CTA 一键清空回到完整集合。

正反例:同一个「筛出 0 条」

只改一处——有没有把已选条件和结果计数亮给用户。

正例

已选「品牌 A + 价格 100 以下」以 chip 列出,显示「找到 0 条」,空态说明「条件组合无匹配」并提供「清空筛选」与逐个移除。用户知道在看什么、怎么恢复。

清空筛选
反例

勾了一堆 facet,却不显示已选条件、也不显示结果计数,结果区只是空白。用户分不清是没数据、被滤光,还是加载中,也无法单独撤销某一条。

(空白结果区)

快速自测

商品列表 200 条,用户勾了「品牌 A」+「价格 100 以下」后结果 0 条。最合适的下一步是?

继续查证

术语的技术定义和行为以这些一手或权威资料为准。

下一步学

和本知识点经常一起出现的概念。