Design Vocabulary设计词汇 · 样本集 01

VOCABULARY / 词条

搜索与筛选

Search and Filter

加入比较 +

搜索让用户输入查询词缩小集合;筛选让用户按预设的属性排除不符合条件的项目;两者都需呈现当前生效的条件。

示意图 · 编辑插画,尚无可操作示例
虚构的 FIELDNOTES 列表页:顶部是搜索框,下方一排筛选标签中有一个处于激活状态,接着是一行结果数占位,以及被缩小后的两三张结果卡片。
虚构的 FIELDNOTES 列表页:顶部是搜索框,下方一排筛选标签中有一个处于激活状态,接着是一行结果数占位,以及被缩小后的两三张结果卡片。

识别特征

  • 输入查询词或选择分面后结果集随之缩小
  • 当前生效的条件与结果数始终可见
  • 可以逐条移除条件,也可以一键清除全部

概念边界

搜索由用户自由输入,筛选从预设分面中选择;两者常并列使用,但不等于主从布局——主从关注列表与详情的联动,搜索与筛选关注集合如何被缩小。条件不可见、无法清除,或无结果时无法恢复,就不算完整的搜索与筛选。

什么时候考虑它

  • 集合大到无法逐项浏览,且用户的目标可以用词或属性表达
  • 内容有多个可区分的属性维度,用户需按不同角度缩小范围
  • 用户既有明确目标(搜索)也有探索需求(筛选)

什么时候慎用

  • 集合很小,直接浏览比构造条件更快
  • 内容没有稳定、可辨识的属性,分面无法维护
  • 用户不了解领域词汇,只提供搜索框会让他们无从下手

取舍

让用户更快命中目标,但分面结构的建设与维护成本较高,且更多选项会增加理解负担。

条件规则 · 编辑建议

当任何搜索词或筛选条件生效时必须在结果上方列出每一项生效条件并显示当前结果数,不能只显示条件的数量。
当条件组合产生零结果必须提供明确的“清除全部”,保留用户已输入的条件,并给出可恢复的路径,如放宽某一条件或替代建议。
当用户从结果进入详情后返回,或刷新、分享页面建议保留已输入的搜索词和已选分面,不要重置为默认状态。

相关词条

主从布局 ↗可以配合 · 在主从布局的列表栏中缩小可选项目

搜索与筛选决定列表里有什么,主从布局决定选中后如何看详情。

识别优于回忆 ↗提供解释 · 设计筛选分面而非只提供搜索框

预设分面让用户再认可用属性,而不必回忆并拼出查询词。

渐进披露 ↗可以配合 · 分面数量多且只有部分常用

常用分面保持可见,其余按需展开,可控制筛选区的复杂度。

来源与支持范围

NN/g · Filters vs. Facets: Definitions ↗

筛选按条件排除不符项目;分面导航为内容的每个维度提供一组筛选,帮助用户理解内容空间,但建设与维护成本更高,也增加交互成本。

检索日期:2026-09-15
NN/g · Search Is Not Enough: Synergy Between Navigation and Search ↗

只提供搜索并不够:不熟悉领域的用户难以构造查询词,导航以再认代替回忆;分面把搜索转化为导航,两者应互补。

检索日期:2026-09-15
Baymard Institute · Always Display an Applied Filters Overview ↗

应在列表上方显示已应用筛选的总览,便于确认、移除条件并理解结果范围;只显示已应用条件的数量而不列出条件本身是不够的。

检索日期:2026-09-15
Baymard Institute · No Results Page Design ↗

无结果页应提供恢复路径,如相关类目、替代搜索建议和热门内容;仅给出搜索提示不足以帮助用户恢复。

检索日期:2026-09-15

定义参考以上来源;数字界面示例、选择建议、条件关系及配方由本样例编辑,尚未经用户研究验证。

类型扩展与实现说明

本词条尚无可操作示例;插画为编辑示意。应用到产品时仍须验证生效条件的可见性、零结果的恢复路径、导航后条件是否保留,以及筛选与结果数对辅助技术的可达性。

{
  "states": [
    "idle",
    "querying",
    "narrowed",
    "empty",
    "cleared"
  ],
  "a11y": [
    "搜索框有可访问的名称,筛选分面可用键盘选择并暴露选中状态",
    "结果数变化通过实时区域通知辅助技术",
    "若提供自动补全,遵循 WAI-ARIA 组合框模式"
  ],
  "motion": "结果更新不依赖动画;列表替换应即时可读"
}

打开本词条的 Agent JSON 文件这个文件原样收录本词条的全部字段,并附上来源、存档与编辑声明。