search

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

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

必须完成的准备工作

阅读 frontend-design，并遵循其上下文收集流程。复用现有上下文，只询问影响重大的信息缺口。此外，还需收集以下信息：用户通常搜索什么、哪些常见查询会失败，以及可搜索数据集有多大。

评估搜索需求

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

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

搜索界面设计

查询输入

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

自动补全与建议

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

筛选器集成

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

结果呈现

结果列表

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

空状态

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

排序控件

• 允许用户更改排序顺序（相关性、价格、日期、评分）
• 标明默认排序方式，并解释为何将其设为默认
• 如果结果经过推广，应明确标注（“精选”）

分页与加载

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

• 加载时显示与结果布局相匹配的骨架屏
• 在可行的情况下，加载新结果时保留之前的结果

无障碍

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

反模式

• 区分大小写的搜索：用户不应需要猜测大小写
• 搜索时没有视觉反馈：无声的搜索会让人觉得功能失效
• 筛选后没有结果的组合：禁用或隐藏无效组合
• 过于复杂的筛选面板：筛选项太多会让用户难以抉择
• 隐藏已启用的筛选条件：用户会忘记自己筛选了什么
• 刷新后丢失筛选状态：筛选条件应保存在 URL 中
• 无法访问页脚的无限滚动：用户无法访问页脚链接
• 要求完全匹配的搜索：模糊匹配和词干提取必不可少
• 没有无结果恢复方案：没有任何指引的空白页面会让用户无路可走
• 劫持光标的自动补全：建议项不应自动提交

验证搜索质量

发布前：

• 搜索能够处理拼写错误、部分匹配和常见同义词
• 自动补全支持键盘操作、适合指针操作，并能适应紧凑视口
• 已启用的筛选条件清晰可见，且可逐项移除
• 筛选状态会反映在 URL 中
• 无结果页面提供替代选项和恢复路径
• 用户可以更改结果排序
• 加载状态与结果布局相匹配
• 屏幕阅读器会播报结果数量和筛选条件的变化
• 焦点管理遵循合理的顺序
• 使用真实查询和拼写错误对搜索进行测试