ux-search

搜索技能

此技能的工作方式（请先阅读）

这是一项生成式技能。默认的失败模式包括：只有一个输入框，除此之外一无所有（输入后只返回一个简单列表——没有建议、查询无法保留，也无法恢复）、走入死胡同（只有一句“未找到结果。”），以及功能堆叠（无论搜索是不是次要功能，到处都塞满丰富建议、热门内容、最近搜索、筛选器和标签）。搜索是一段旅程——构思 → 建议 → 结果 → 优化；哪些阶段需要投入，取决于用户如何查找。此技能会引导你：

1. 了解用户如何查找，以及搜索的核心程度——据此决定要在哪些阶段投入。
2. 应用始终适用的核心原则——让搜索入口易于发现，输入约定有效，提供基础建议，结果页便于浏览，并避免走入死胡同。
3. 呈现视情境而定的设计决策（丰富的自动建议、筛选器布局、标签、视图选项）及其权衡。

随后将交由 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit 进行验证。

---

步骤 0 — 设计前先了解情境

如果情况未知，请先询问；如果没有答案仍要继续，请说明所作的假设：

• 用户会如何查找？ 查找已知项目（用户能说出想要什么——应投入资源优化输入框、自动建议和重新查找）与探索式／半定向查找（需求较模糊且会变化——应投入资源优化建议、相关搜索、筛选和浏览）。重新查找长期以来都未得到足够重视：最近搜索和历史记录几乎在所有场景中都很有用。
• 搜索的核心程度如何？ 以搜索为主的产品（电商、文档、预订）→ 持续显示醒目的搜索框，并提供丰富的结果页。作为紧急出口的搜索 → 设计可以更简洁，但仍须易于发现。
• 平台 — 移动端：使用常驻搜索框（以搜索为主的应用），或可展开的图标（搜索为次要功能的应用）；将筛选器收纳在“筛选”按钮后；提供方便单手操作的点击目标。
• 结果类型 — 图片商品、文档还是数据行：这决定采用列表还是网格，以及每条结果显示哪些内容。

请记住，信息需求会在搜索过程中不断变化，用户也会快速浏览（大多数页面停留时间不足 10 秒）——设计时应支持反复调整和快速浏览，而不是追求一次就输入完美查询。

---

始终适用的核心原则（几乎适用于所有情况）

输入框

• 将搜索放在用户会寻找的位置： 每个页面的顶部中央或右上方。切勿将其藏在汉堡菜单后；桌面端应显示搜索框本身，而不只是图标。
• 在搜索框内放置放大镜图标，并确保它是可用的按钮，可以提交查询。
• 输入框宽度约为 27 个字符——输入框太窄会导致查询更短、更差。
• 占位符应提供示例查询（“搜索航班、酒店、目的地”），并使用较浅颜色，以免被误认为已填入的文本；绝不能用占位符替代标签。

建议（构思阶段）

• 在用户输入时提供自动建议——减少拼写错误和认知负担，并加快查询速度。下拉列表最多显示约 10 条建议，不要滚动。
• 通过加粗或颜色区分用户输入与建议补全的字符，让用户一眼看出每条建议为何出现。
• 聚焦输入框时显示最近搜索——重新查找时，让用户识别，而不是回忆。

结果页

• 让查询内容保持可见且可编辑——用户通常需要调整首次查询；绝不要让用户重新输入。
• 显示匹配数量——帮助用户判断是优化查询、放宽条件，还是开始查看结果。
• 在结果中突出显示匹配关键词——用户会扫描，而不是逐字阅读。
• 加载状态也是体验的一部分： 在结果区域显示骨架屏；等待时间较长时，显示进度指示器或旋转图标，并附上简短说明。
• 分页类型应适合内容（有关分页与无限滚动的选择及控件规范，请参阅 ux-navigation）。

绝不让用户走入死胡同

只显示“未找到结果”是最糟糕的搜索失败方式。无结果页面始终要提供继续操作的方式：替代查询建议、类别链接、相似／相关内容，或根据过往行为提供推荐。

---

依情境决定的事项（展示出来，不要自动应用）

决策	适用情形	应避免／调整的情形	默认建议
丰富的自动建议（缩略图、类别链接、商品预览）	用户寻找已知商品，且商品具有视觉属性（电子商务）	简单的实用型搜索——杂乱内容会拖慢下拉菜单	优先显示纯查询建议；仅在识别商品确实能加快选择时才添加丰富内容
输入前显示热门／相关搜索	有助于激发灵感的探索型产品（商店、媒体）	这类内容会造成干扰的任务工具	仅在以发现为导向的产品中显示
常驻搜索与可展开搜索（移动端）	以搜索为核心的应用采用常驻搜索；其他应用可用可展开图标节省空间	在以搜索为核心的应用中隐藏搜索	搜索的显著程度应与其核心地位相匹配
筛选器	结果集足够大，需要进一步缩小范围	仅有十几个结果时（筛选器反而增加负担）	显示 5–7 个筛选器，其余放在“更多筛选器”下；优先排列最常用的筛选器（根据数据）；多选使用复选框；使用熟悉的词语（“布料”，而非“纺织品”）
筛选器布局	垂直侧边栏：筛选器分组较多的桌面端。水平面板：分组较少、需要吸引注意的情况。移动端：在结果上方通过“筛选”按钮打开	分组较多的水平布局（占用屏幕空间）；用户容易忽略的侧边栏	桌面端筛选器较多时采用垂直布局；数量不超过几个时采用水平布局；移动端隐藏在按钮后
自动更新与“应用”按钮	筛选条件变化时自动更新结果（交互成本低）	连接较慢／查询负担较重时——通过“应用”按钮批量执行，并显示匹配数量	速度快时自动更新；否则使用“应用”按钮并显示数量
筛选标签	紧凑、可点击的细化选项（“营业中”“价格：$$”），可原位更新结果；已应用筛选条件的概览标签带 ×，可供移除	在同一页面混合单选和多选标签组；标签的触控目标小于 48px	用标签提供快速筛选和已应用筛选条件概览；深入筛选使用完整面板
排序	对可比较的项目（价格、日期、人气）始终提供——用户往往更倾向排序而非筛选	将排序并入筛选面板（两者对应不同的思维模式）	单独设置醒目的排序控件
列表视图与网格视图	列表：比较规格（型号、评分）。网格：视觉类商品	对混合内容强制使用单一视图	默认采用合适的视图；提供视图切换控件

---

验证结果（编排）

交接时使用各审查视角对应的可安装技能 name。只有安装了相应技能时才调用；如果未安装，本技能的核心内容已包含这些规则，无需因此阻塞，直接继续即可。

生成或修改后，应将结果交由审查视角检查，而不是直接宣布完成。这些都是候选审查视角——具体采用方式由 docs/orchestration-policy.md 规定，也可以将整个流程交给 ux-design-review。这里，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics、information-architecture 和 mobile-responsiveness 属于 B 级（可选）——使用现有设计系统时，跳过 aesthetics，并将 accessibility 的审查范围缩小为使用体验；mobile-responsiveness 仅适用于移动端。如果用户调用此技能是为了处理某个特定事项，请尊重其范围。

• ux-heuristics-audit （A 级） — 系统状态的可见性（加载状态、匹配数量、已应用筛选条件的双重展示）、用户控制权（清除所有筛选条件、可编辑查询）、优先识别而非回忆（最近搜索）。
• ux-accessibility-audit （B 级——可选；使用设计系统时缩小审查范围） — 建议下拉菜单的键盘可操作性、触控目标（标签 ≥48px，间距 ≥8px）、对比度、输入框与结果之间的焦点管理。
• ux-aesthetics-audit （B 级——可选；使用设计系统时跳过） — 结果页的信息密度与易浏览性、下拉菜单是否杂乱、筛选面板的视觉组织。
• ux-microcopy-audit （A 级） — 占位符示例、使用用户熟悉语言的筛选标签、「无结果」消息的语气与指引。
• ux-information-architecture-audit （B 级——可选） — 支撑搜索的内容结构（类别、分面、元数据）是否满足用户的信息查找方式，以及浏览路径是否能补充搜索；此技能负责设计搜索旅程，信息架构负责组织其所搜索的内容结构。
• ux-mobile-responsiveness-audit （B 级——可选；仅适用于移动端） — 在移动场景下检查：可展开或固定的模式、隐藏的筛选项、单手操作的触达范围。

如果审查发现冲突（例如，丰富的建议与下拉菜单的速度和清晰度相冲突），应优先保障核心任务：用户想要找到目标内容——每项功能都必须缩短这一路径。

---

常见的推荐做法与禁忌

❌ 禁忌	✅ 推荐做法
将搜索入口藏在桌面端的汉堡菜单或纯图标中	每个页面顶部居中或靠右放置醒目的搜索框
输入框太小，只容得下两个词	宽度约 27 个字符，方便用户输入关键词
建议下拉菜单包含 25 条可滚动的内容	最多 10 条，无需滚动，并以视觉方式区分已输入内容与建议内容
加载结果后查询内容消失	保留查询内容，并允许编辑
只显示「未找到结果」，没有其他内容	提供替代方案：修正后的查询、类别、相关条目
结果列表没有匹配数量	显示匹配数量，并突出显示关键词
在侧边栏一次性列出 20 个筛选条件	显示 5–7 个，热门条件优先，其余收在「更多筛选条件」中
选中后看不到已应用的筛选条件	双重展示：在面板中显示选中状态，并在概览标签中提供移除操作
将排序选项埋在筛选条件中	单独设置排序控件——两者对应不同的思维模式
对可组合的条件使用单选按钮	使用复选框或多选标签
加载结果时显示空白屏幕	使用骨架屏；等待时间较长时显示旋转指示器和说明
未经检查就发布	交由启发式、无障碍、审美和微文案审查

---

经验来源（Uxcel）

• 如何设计出色的 UI 搜索体验
• UI 搜索设计最佳实践
• 人们如何查找信息
• 筛选与排序设计最佳实践
• 如何设计用于筛选与选择的 UI 标签