搜索界面系统
目的
搜索界面系统提供了一种设计连贯、高性能发现体验的方法论。虽然internal-search-optimization侧重于“增长”和逻辑方面，但本系统定义了搜索用户界面的设计模式和空间人体工程学。它确保用户能够立即找到搜索入口，轻松与之交互（即使在移动设备上），并以最小化认知负荷、最大化“信息线索”的方式处理结果。
使用场景
- 在全局页眉或持久工具栏中设计搜索入口。
- 为SaaS应用程序创建“指挥中心”或“全能搜索框”体验。
- 构建电商“视觉搜索”和自动补全下拉菜单。
- 为文档或目录设计高密度搜索结果页面（SERP）。
- 为移动优先设计实现“全屏搜索”覆盖层。
何时不应使用
- 静态着陆页： 内容固定且发现不是主要目标的情况。
- 微型站点（<20页）： 健壮的导航和面包屑足以满足可查找性要求的情况。
- 纯关系型仪表盘： 仅通过定义的过滤器和选项卡（而非自由文本搜索）访问数据的情况。
输入
- 用户意图画像： 用户是在寻找特定SKU（精确）还是探索某个主题（发现）？
- 目录密度： 系统中有多少项目，元数据的多样性如何？
- 主要设备： 搜索主要是在移动端（触摸）还是桌面端（键盘）使用？
- 现有系统： 颜色体系、间距标记和排版比例（来自
fluid-spacing-system和fluid-typography-system）。
输出
- 搜索触发规范： 搜索栏的视觉定义（静态、可展开或纯图标）。
- 自动补全结构： 建议下拉菜单的设计，包括类别、图片和键盘状态。
- SERP布局蓝图： 结果页面的空间组织，平衡元数据密度和可读性。
- 移动交互地图： 搜索如何从页眉图标过渡到全屏专注界面的计划。
工作流程
1. 定义搜索触发模式
根据搜索在用户旅程中的重要性选择触发方式：
- 持久栏： 始终可见的高对比度输入框。最适合电商或搜索为主的网站。
- 可展开输入框： 以图标或小栏开始，点击后展开。最适合搜索次要于导航的网站。
- “Command + K”触发： 一个微妙的提示或图标，用于打开模态框。最适合高级用户SaaS工具或文档。
2. 设计自动补全（即时）体验
通过提供即时反馈来缩短“到结果的距离”：
- 分类： 按类型分组结果（例如，产品、文章、帮助）。
- 丰富元数据： 在下拉菜单中包含小缩略图、价格或状态徽章。
- 聚焦状态： 使用
interactive-state-system清晰突出显示键盘用户当前选中的建议项。 - ARIA模式： 基于ARIA APG组合框模式建模输入/列表盒关系（
role="combobox"，配合aria-expanded、aria-controls和指向高亮role="option"的aria-activedescendant），而不是自定义交互模型。
3. 建立结果页面（SERP）层级
将visual-hierarchy-system应用于搜索结果：
- “查询回显”： 突出显示用户的搜索词，以确认上下文。
- 结果卡片： 使用
card-ui-system标准化结果格式。 - 元数据权重： 确保标题最为突出，其次是“片段”（内容中与查询匹配的部分）。
4. 构建移动发现层
移动端搜索是一种专用模式，而非小部件：
- 模式切换： 点击搜索应打开全屏覆盖层，消除背景干扰。
- 自动聚焦： 自动聚焦输入框并触发键盘。
- “拇指区域”操作： 将“清除”和“取消”按钮放置在用户轻松可及的位置（最小44x44px）。
5. 定义加载和空状态
- 骨架屏结果： 使用
skeleton-state-system在结果获取时保持布局稳定。 - 智能无结果： 使用
empty-state-system在未找到精确匹配时提供替代路径。
决策规则
- 可见性规则： 如果搜索被超过30%的用户使用，则必须在桌面上采用持久、全宽的搜索栏。
- “三词”最小值： 在用户输入至少3个字符之前，不要显示自动建议（以防止视觉抖动）。
- 结果限制： 将自动补全建议限制在5-8个。如果存在更多，请提供“查看‘...’的所有结果”链接。
- 信息线索： 在搜索结果片段中加粗匹配词，以帮助用户快速扫描相关性。
约束条件
- 可访问性： 搜索输入框必须有可见标签（或
aria-label）。键盘用户必须能够使用箭头键导航自动补全列表，使用Enter键选择，使用Escape键关闭，而不丢失已输入的查询。所有可交互目标（清除按钮、建议行）必须满足WCAG 2.2的24x24px最小目标尺寸（2.5.8）。 - 响应性： 自动补全下拉菜单绝不能超出视口宽度。
- 对比度： 高亮匹配文本必须满足WCAG AA对比度比率（通常使用背景色偏移或加粗）。
常见失败模式
- “隐藏搜索”： 当搜索是用户主要导航方式时，迫使用户寻找放大镜图标。
- “脱节”的下拉菜单： 自动补全菜单的宽度或对齐方式与输入框不匹配，造成视觉上的“漂浮”。
- 键盘陷阱： 不允许用户使用
Escape键退出搜索覆盖层或下拉菜单。 - 死胡同结果： 在结果页面上未在输入框中保留搜索词，迫使想要优化搜索的用户重新输入。
验证标准
- 扫描页面后2秒内可见搜索入口。
- 自动补全下拉菜单在适当时包含丰富元数据（图片/标签）。
- 完全定义了搜索的键盘导航（箭头、Enter、Escape），遵循ARIA APG组合框模式。
- 移动端搜索打开全屏模式并立即聚焦键盘。
- 搜索结果页面回显查询并高亮匹配词。
- 结果加载时使用骨架屏状态。
- 所有可交互元素满足44x44px的触摸目标最小值。