搜索与筛选

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

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

{
  "id": "search-and-filter",
  "type": "interaction",
  "name": {
    "zh": "搜索与筛选",
    "en": "Search and Filter"
  },
  "aliases": [
    "分面筛选",
    "Faceted Search",
    "Search & Filter"
  ],
  "granularity": "flow",
  "intents": [
    "find-item",
    "narrow-results"
  ],
  "tags": [
    "搜索",
    "筛选",
    "分面",
    "结果数",
    "无结果"
  ],
  "definition": "搜索让用户输入查询词缩小集合；筛选让用户按预设的属性排除不符合条件的项目；两者都需呈现当前生效的条件。",
  "boundary": "搜索由用户自由输入，筛选从预设分面中选择；两者常并列使用，但不等于主从布局——主从关注列表与详情的联动，搜索与筛选关注集合如何被缩小。条件不可见、无法清除，或无结果时无法恢复，就不算完整的搜索与筛选。",
  "signature": [
    "输入查询词或选择分面后结果集随之缩小",
    "当前生效的条件与结果数始终可见",
    "可以逐条移除条件，也可以一键清除全部"
  ],
  "when": [
    "集合大到无法逐项浏览，且用户的目标可以用词或属性表达",
    "内容有多个可区分的属性维度，用户需按不同角度缩小范围",
    "用户既有明确目标（搜索）也有探索需求（筛选）"
  ],
  "when_not": [
    "集合很小，直接浏览比构造条件更快",
    "内容没有稳定、可辨识的属性，分面无法维护",
    "用户不了解领域词汇，只提供搜索框会让他们无从下手"
  ],
  "tradeoff": "让用户更快命中目标，但分面结构的建设与维护成本较高，且更多选项会增加理解负担。",
  "comparison": {
    "focus": "缩小集合的方式与当前条件的可见性",
    "mechanism": "用户输入或选择条件，系统排除不符项目",
    "cost": "分面的维护成本与更多选项的理解成本"
  },
  "sources": [
    {
      "id": "nng-filters-vs-facets",
      "title": "NN/g · Filters vs. Facets: Definitions",
      "url": "https://www.nngroup.com/articles/filters-vs-facets/",
      "claim": "筛选按条件排除不符项目；分面导航为内容的每个维度提供一组筛选，帮助用户理解内容空间，但建设与维护成本更高，也增加交互成本。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/filters-vs-facets/",
        "status": "available",
        "checkedAt": "2026-09-15T18:20:59.765Z",
        "jobId": "spn2-5ae816af7fdb0586a3fb39815a087ee0ab40e575",
        "url": "https://web.archive.org/web/20260915182135/https://www.nngroup.com/articles/filters-vs-facets/",
        "timestamp": "20260915182135"
      }
    },
    {
      "id": "nng-search-not-enough",
      "title": "NN/g · Search Is Not Enough: Synergy Between Navigation and Search",
      "url": "https://www.nngroup.com/articles/search-not-enough/",
      "claim": "只提供搜索并不够：不熟悉领域的用户难以构造查询词，导航以再认代替回忆；分面把搜索转化为导航，两者应互补。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/search-not-enough/",
        "status": "available",
        "checkedAt": "2026-09-15T18:31:24.152Z",
        "jobId": "spn2-6aa431b458a3401ff4016d71ad673dad8663f1de",
        "url": "https://web.archive.org/web/20260915183158/https://www.nngroup.com/articles/search-not-enough/",
        "timestamp": "20260915183158"
      }
    },
    {
      "id": "baymard-applied-filters",
      "title": "Baymard Institute · Always Display an Applied Filters Overview",
      "url": "https://baymard.com/blog/how-to-design-applied-filters",
      "claim": "应在列表上方显示已应用筛选的总览，便于确认、移除条件并理解结果范围；只显示已应用条件的数量而不列出条件本身是不够的。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/how-to-design-applied-filters",
        "status": "available",
        "checkedAt": "2026-09-15T18:21:21.636Z",
        "jobId": "spn2-f327dc0f761d8878521f4af16a166f1f89318db1",
        "url": "https://web.archive.org/web/20260915182253/https://baymard.com/blog/how-to-design-applied-filters",
        "timestamp": "20260915182253"
      }
    },
    {
      "id": "baymard-no-results",
      "title": "Baymard Institute · No Results Page Design",
      "url": "https://baymard.com/blog/no-results-page",
      "claim": "无结果页应提供恢复路径，如相关类目、替代搜索建议和热门内容；仅给出搜索提示不足以帮助用户恢复。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://baymard.com/blog/no-results-page",
        "status": "available",
        "checkedAt": "2026-09-15T18:21:34.580Z",
        "jobId": "spn2-b41438d37a62070f4bb5453e2acf9bf5b2259a11",
        "url": "https://web.archive.org/web/20260915182158/https://baymard.com/blog/no-results-page",
        "timestamp": "20260915182158"
      }
    }
  ],
  "relations": [
    {
      "target": "master-detail",
      "kind": "composes_with",
      "condition": "在主从布局的列表栏中缩小可选项目",
      "reason": "搜索与筛选决定列表里有什么，主从布局决定选中后如何看详情。",
      "basis": "editorial"
    },
    {
      "target": "recognition",
      "kind": "informs",
      "condition": "设计筛选分面而非只提供搜索框",
      "reason": "预设分面让用户再认可用属性，而不必回忆并拼出查询词。",
      "basis": "editorial"
    },
    {
      "target": "progressive-disclosure",
      "kind": "composes_with",
      "condition": "分面数量多且只有部分常用",
      "reason": "常用分面保持可见，其余按需展开，可控制筛选区的复杂度。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "任何搜索词或筛选条件生效时",
      "instruction": "在结果上方列出每一项生效条件并显示当前结果数，不能只显示条件的数量。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "条件组合产生零结果",
      "instruction": "提供明确的“清除全部”，保留用户已输入的条件，并给出可恢复的路径，如放宽某一条件或替代建议。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "用户从结果进入详情后返回，或刷新、分享页面",
      "instruction": "保留已输入的搜索词和已选分面，不要重置为默认状态。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "querying",
      "narrowed",
      "empty",
      "cleared"
    ],
    "a11y": [
      "搜索框有可访问的名称，筛选分面可用键盘选择并暴露选中状态",
      "结果数变化通过实时区域通知辅助技术",
      "若提供自动补全，遵循 WAI-ARIA 组合框模式"
    ],
    "motion": "结果更新不依赖动画；列表替换应即时可读"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。应用到产品时仍须验证生效条件的可见性、零结果的恢复路径、导航后条件是否保留，以及筛选与结果数对辅助技术的可达性。",
  "image": {
    "src": "/images/search-and-filter.webp",
    "alt": "虚构的 FIELDNOTES 列表页：顶部是搜索框，下方一排筛选标签中有一个处于激活状态，接着是一行结果数占位，以及被缩小后的两三张结果卡片。"
  },
  "searchTerms": [
    "search",
    "filter",
    "facets",
    "result count",
    "no results"
  ]
}