搜索与筛选 UX 契约

大理论

搜索回答“我想找什么”，筛选回答“我想排除什么”，分面回答“这个结果集合有哪些可探索属性”，排序回答“我优先看什么”。很多库页面失败，是因为这些控制各自存在，却没有共同解释当前结果集。健康的搜索筛选 UX 要把 query、scope、facets、active chips、count、sort、matched excerpt、empty recovery 和 mobile tray 作为一套状态契约。

小知识点

1. 搜索框需要 scope：全站、当前库、当前分类、当前表格或当前项目，不同 scope 的占位符和结果说明要不同。
2. Active filters 用 chips 展示，可单个移除，也提供 reset all；隐藏在侧栏里的条件仍要在结果区可见。
3. Facet count 要和当前 query/filters 对齐；禁用或隐藏选项要有规则，不能让数量突然看似错误。
4. 结果卡片要显示命中摘要或匹配字段，帮助用户理解为什么被召回。
5. 空结果要提供改 query、移除筛选、查看相邻分类、创建内容或反馈缺口的路径。
6. 移动端可用 filter tray，但打开和关闭后都要显示结果数、当前条件和清除入口。

设计判断

如果用户能复制 URL 复现同一结果集，能看出哪些条件正在生效，能理解结果为何匹配，并能从空结果中恢复，这个搜索筛选契约成立。

实现建议

把 q、category、tag、type、license、status、sort、page 写入 URL；服务端和客户端共享同一 query parser。结果区顶部显示 count、scope、sort 和 active chips。搜索命中时生成 excerpt；无结果组件展示当前约束和 reset/suggestion。移动端 filter tray 使用可访问 dialog，关闭后焦点返回触发按钮，按钮文案显示 active count。

反例/风险

输入搜索后 URL 不变；侧栏筛选了三项但结果区看不到；结果数缺失；空结果只写 No results；排序改变不更新 URL；移动筛选抽屉关闭后不知道是否生效；筛选项数量在每次输入时跳动但没有 loading 或解释。

案例分析

NN/g 区分 filters 和 facets，指出 facets 是围绕对象属性组织的多维筛选；NN/g 的移动分面搜索建议用 tray 解决小屏幕同时展示结果和筛选的冲突；A List Apart 把 faceted navigation 视为会影响整体信息架构的 master pattern；Carbon Search pattern 说明搜索字段位置要跟应用结构和搜索范围匹配，Carbon Empty states 强调空结果也要给下一步。可学习点是：搜索和筛选不是控件集合，而是可解释、可恢复、可分享的结果状态。

来源链接

NN/g Filters vs. Facets: https://www.nngroup.com/articles/filters-vs-facets/ NN/g Mobile Faceted Search: https://www.nngroup.com/articles/mobile-faceted-search/ A List Apart Faceted Navigation: https://alistapart.com/article/design-patterns-faceted-navigation/ Carbon Search Pattern: https://carbondesignsystem.com/patterns/search-pattern/ Carbon Empty States: https://carbondesignsystem.com/patterns/empty-states-pattern/