search

构建搜索体验，帮助用户快速找到所需内容，即使他们不确定自己要找什么。目标不是首次搜索就获得完美相关的结果，而是通过宽容的搜索和清晰的结果，引导用户从意图走向目标。

请参阅搜索与筛选 UX参考，了解自动补全模式、筛选器架构、结果呈现和无结果时的恢复方案。 请参阅搜索与可查找性参考，了解站内搜索、自动建议、命令面板和意图感知型可查找性。 请参阅集合浏览与筛选参考，了解长结果列表、多面浏览和筛选器浮层。 请参阅预测式与意图驱动型 UI参考，了解推荐、智能默认值和续接流程。

必须完成的准备工作

用户通过 /search 启动此工作流。此技能启用后，加载 $frontend-design——其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议——如果尚无设计上下文，则必须先加载 $setup。此外，还要了解：用户通常搜索什么、常见查询为何会失败，以及可搜索数据集的规模。

评估搜索需求

设计界面前，先了解搜索场景：

1. 搜索意图：用户是在寻找特定项目（已知项目搜索）、探索某个类别（探索式搜索），还是尝试完成一项任务（事务型搜索）？
2. 数据集规模：小型数据集（< 100 项）可能不需要搜索，筛选或分类或许就够了。大型数据集则需要多面搜索和排序。
3. 查询模式：用户实际会输入什么？应处理常见的拼写错误、同义词和缩写。
4. 失败情形：搜索无结果时会怎样？结果过多时又会怎样？

搜索界面设计

查询输入框

• 使用具体的占位文本（"搜索“项目 alpha”"），而非笼统的填充文本
• 用户输入内容后显示清除按钮
• 支持按 Enter 提交；不要只依赖实时结果
• 显示清晰可见的搜索按钮，而不只是装饰性图标
• 如果可选择搜索范围（"全部"、"产品"、"帮助"），应确保其一目了然且可更改

自动补全与建议

• 输入 2-3 个字符后显示建议
• 按类型分组：最近搜索、热门查询、产品、帮助文章
• 将匹配的子字符串加粗
• 支持方向键导航、按 Enter 选择、按 Escape 关闭
• 在移动设备上，确保建议列表可滚动且不会溢出
• 没有匹配项时显示有用的消息，而不是空列表

筛选器集成

• 宽屏布局且筛选器较多时使用侧边栏筛选器
• 只有少数关键筛选器时使用顶部栏
• 窄屏布局时使用抽屉或浮层
• 为启用的筛选器显示内嵌标签，以便直接移除
• 将筛选器状态与 URL 同步，以便分享
• 折叠时显示启用的筛选器数量

结果呈现

结果列表

• 层级清晰：标题、元数据、摘要、缩略图
• 在标题和摘要中突出显示匹配的查询词
• 所有结果的格式保持一致
• 每条结果都应是清晰的链接，或具有主要操作

空状态

• 明确回应查询（“没有找到‘xyz’的结果”）
• 提供替代建议：更正拼写、相关词语、更宽泛的类别
• 如果启用了筛选器，提供清除筛选器的选项
• 提供后备操作（“浏览全部”、“联系支持团队”）

排序控件

• 允许用户更改排序方式（相关性、价格、日期、评分）
• 标明默认排序方式，并说明将其设为默认值的原因
• 如果结果中包含推广内容，应明确标注（“精选”）

分页与加载

模式	适用场景
分页	大量结果、对 SEO 至关重要的页面、需要引用特定页面的用户
无限滚动	探索式浏览、图片集、社交信息流
加载更多	均衡的方案；由用户控制何时加载

• 加载时显示与结果布局一致的骨架屏
• 尽可能在加载新结果时保留先前的结果

无障碍

• 向屏幕阅读器播报结果数量的变化
• 使用 aria-controls 将筛选控件与结果区域关联起来
• 确保更改时会播报当前启用的筛选条件
• 提供从筛选条件跳转到结果的跳转链接
• 支持通过键盘浏览建议和筛选条件

反模式

• 区分大小写的搜索：用户不应该需要猜测大小写
• 搜索时没有视觉反馈：无提示的搜索会让人觉得功能失效
• 筛选后没有结果：禁用或隐藏无效的组合
• 筛选面板过于庞杂：筛选条件太多会让用户难以抉择
• 隐藏已启用的筛选条件：用户会忘记自己筛选了什么
• 刷新后丢失筛选状态：筛选条件应保留在 URL 中
• 无法访问页脚的无限滚动：用户无法访问页脚链接
• 搜索要求精确匹配：模糊匹配和词干提取必不可少
• 没有无结果时的补救措施：空白屏幕且没有指引会让用户无所适从
• 自动完成抢夺光标控制权：建议不应自动提交

验证搜索质量

发布前：

• 搜索能够处理拼写错误、部分匹配和常见同义词
• 自动完成支持键盘操作，且适用于移动设备
• 当前启用的筛选条件清晰可见，且可逐项移除
• 筛选状态反映在 URL 中
• 无结果页面提供替代方案和补救途径
• 用户可以更改结果排序
• 加载状态与结果布局一致
• 屏幕阅读器会播报结果数量和筛选条件的变化
• 焦点管理遵循合理的操作顺序
• 使用真实查询和拼写错误测试搜索