用途
该技能用于设计或改进搜索体验、结果呈现与筛选界面。当用户要求添加搜索、重新设计搜索结果、改进筛选等时使用。目标是帮助用户快速找到所需内容，即使他们并不确定自己在找什么。重点不是第一次就实现完美相关性，而是通过宽容的搜索与清晰的结果，引导用户从意图走向结果。
主要能力
技能会参考多份参考资料：
- 搜索与筛选 UX 参考：自动补全模式、筛选架构、结果呈现、零结果恢复。
- 搜索与可发现性参考：站内搜索、自动建议、命令面板、意图感知的可发现性。
- 集合浏览与筛选参考：长结果列表、分面浏览、筛选浮层。
- 预测与意图驱动 UI 参考：推荐、智能默认值、恢复流程。
使用方式
用户以 /search 启动该工作流。技能激活后，需加载 $frontend-design，其中包含设计原则、反模式与上下文收集协议。遵循该协议；若尚无设计上下文，必须先加载 $setup。此外需收集：用户通常搜索什么、常见的失败查询是什么、可搜索数据集有多大。
评估搜索需求
设计界面前先理解搜索上下文：
- 搜索意图：用户是在寻找特定条目（已知条目搜索）、探索某个类别（探索式），还是试图完成某项任务（事务式）？
- 数据集规模：小数据集（少于 100 项）可能不需要搜索，筛选或分类即可。大数据集需要分面搜索与排序。
- 查询模式：用户实际输入什么？常见的拼写错误、同义词和缩写都应处理。
- 失败模式：搜索无结果时会怎样？结果过多时会怎样？
搜索界面设计
查询输入
- 使用具体的占位符文本（如“Search for "project alpha"”），而不是通用的填充语。
- 用户输入后显示清除按钮。
- 支持按 Enter 提交；不要仅依赖实时结果。
- 包含可见的搜索按钮，而不仅是装饰性图标。
- 如果范围可选（“All”“Products”“Help”），要明显且可更改。
自动补全与建议
- 输入 2-3 个字符后显示建议。
- 按类型分组：最近搜索、热门查询、产品、帮助文章。
- 加粗匹配的子串。
- 支持方向键导航、Enter 选择、Escape 关闭。
- 在移动端确保建议可滚动且不溢出。
- 无匹配时显示有用的提示信息，而不是空列表。
筛选集成
- 宽布局上筛选较多时使用侧边栏筛选。
- 少量关键筛选使用顶栏。
- 窄布局上使用抽屉/浮层。
- 活跃筛选以内联标签展示，可直接移除。
- 筛选状态与 URL 同步，便于分享。
- 折叠时显示活跃筛选数量。
结果呈现
结果列表
- 清晰的层级：标题、元数据、摘要、缩略图。
- 在标题和摘要中高亮匹配的查询词。
- 所有结果的格式保持一致。
- 每条结果应是清晰的链接，或具有主要操作。
空状态
- 确认查询内容（“No results for 'xyz'”）。
- 建议替代方案：纠正拼写、相关词、更宽泛的类别。
- 如有活跃筛选，提供清除筛选的选项。
- 提供兜底操作（“Browse all”“Contact support”）。
排序控制
- 允许用户更改排序顺序（相关性、价格、日期、评分）。
- 标注默认排序并解释为何默认。
- 如果结果被推广，要透明标注（“Featured”）。
分页与加载
模式对比：
-
分页：适合大量结果集、SEO 关键页面、需要引用具体页面的用户。
-
无限滚动：适合探索式浏览、图片画廊、社交信息流。
-
加载更多：平衡方案；用户控制何时加载。
-
加载期间显示与结果布局匹配的骨架屏。
-
在可能的情况下，加载新结果时保留之前的结果。
无障碍
- 为屏幕阅读器播报结果数量变化。
- 使用 aria-controls 将筛选控件与结果区域关联。
- 确保活跃筛选变化时被播报。
- 提供从筛选到结果的跳转链接。
- 支持通过键盘在建议和筛选之间导航。
反模式
- 大小写敏感的搜索：用户不应猜测大小写。
- 搜索过程中没有视觉反馈：静默搜索感觉像坏了。
- 会产生零结果的筛选：禁用或隐藏无效组合。
- 过于庞大的筛选面板：太多筛选会导致决策瘫痪。
- 隐藏的活跃筛选：用户会忘记自己筛选了什么。
- 刷新后丢失筛选状态：筛选应保留在 URL 中。
- 无限滚动导致无法访问页脚：用户无法到达页脚链接。
- 要求精确匹配的搜索：模糊匹配与词干提取是必需的。
- 没有零结果恢复：空屏且无引导是死胡同。
- 自动补全劫持光标：建议不应自动提交。
验证搜索质量
上线前检查：
- 搜索能处理拼写错误、部分匹配和常见同义词。
- 自动补全可通过键盘导航且适配移动端。
- 活跃筛选可见且可单独移除。
- 筛选状态反映在 URL 中。
- 零结果页面提供替代方案与恢复路径。
- 结果排序可由用户更改。
- 加载状态与结果布局匹配。
- 屏幕阅读器播报结果数量与筛选变化。
- 焦点管理遵循合理的路径。
- 使用真实查询和拼写错误测试搜索。
适用场景与限制
适用于需要设计或改进搜索、结果展示与筛选界面的场景，尤其当用户搜索意图不明确、查询模式多样、数据集较大或需要分面筛选时。技能强调宽容搜索、清晰结果与恢复路径。限制方面：本资料未提供具体实现代码、价格、平台或性能指标；实际效果取决于具体项目与数据。设计前需要明确搜索意图、数据集规模、查询模式和失败模式；若数据集较小，可能筛选或分类即可，无需完整搜索。