搜索框

备注

此设计指南是针对 Windows 7 创建的,并且尚未更新 Windows 的更新版本。 本指南中的大部分内容仍适用,但演示和示例并不反映我们 当前的设计指导

使用搜索框,用户可以通过筛选或突出显示匹配来快速查找大型数据集中的特定对象或文本。 无标准搜索控件,但应尽量使程序的搜索功能与 Windows 的功能保持一致。

有两种类型的搜索:

  • 即时搜索,其中的结果会在用户键入时立即显示出来。 不需要单击任何按钮,因此放大镜搜索符号显示为图形,而不是按钮。

    屏幕截图,显示 "提示" 标注指向搜索框的即时搜索框,"搜索符号" 标注指向放大镜图形。

    使用即时搜索的典型搜索框。 将在每个击键上自动执行搜索。

  • 常规搜索,在用户单击 "搜索" 按钮时执行搜索。 按钮上显示的是放大镜搜索符号。

    常规搜索框的屏幕截图

    使用常规搜索的典型搜索框。 用户单击按钮以执行搜索。

    你可以为用户提供两种或两种搜索选项。

这是正确的控件吗?

在决定之前,请考虑以下问题:

  • 是否难以找到特定对象? 下列情况下测试输入无效:
    • 有很多对象。
    • 对象不在单个位置。 搜索特别适用于查找树中的对象。
    • 搜索数据很难查找 (例如,元数据) 。
  • 用户是否需要在文档中查找特定文本?
  • 你的功能是否在5秒内返回相关的搜索结果? 如果不是,则可以提供搜索功能,但可以使用其他的设计来提供可视反馈,以适应长时间运行的搜索,如搜索对话框。

设计概念

在许多情况下,搜索是一个非常重要的第一步:用户必须在使用对象之前查找对象。 用户要在更大的硬盘上保存越来越多的对象,但浏览对象却不能很好地进行缩放。 搜索必须是一种简单、一致、可靠的用户体验。

Windows 中的搜索框:

  • 是所有资源管理器窗口的一部分,因此易于查找和识别。
  • 具有一致的外观和行为。
  • 既高效又快速,使即时搜索模式产生即时结果。

搜索框用于以下位置的 Windows 中:

  • 资源管理器
  • (Microsoft Windows Media Player、Windows 照片库、Windows Internet Explorer)
  • "开始"菜单 (查找程序和最近使用的文件)
  • 用于查找控制面板项和任务 (控制面板的 "主页")
  • 帮助 (查找相关帮助主题)

外观

通过支持即时搜索,可大大增强 Windows 中搜索的外观。 利用即时结果,Windows 感到更加强大和直接。

在 Windows 资源管理器和应用程序窗口中,如果是补充入口点,则搜索位于右上角。 在这种情况下,当用户在窗口中找不到要查找的内容时,用户会寻找搜索机制。 但是,如果搜索是主入口点,则在窗口顶部居中。

"搜索" 按钮在视觉上连接到搜索框。 若要最大程度地减少空间,请在搜索框中使用一个可选 提示 ,而不是使用标签。 提示 (例如,键入以搜索) 或指示搜索范围 (例如,搜索 "图片") 。

"即时搜索" 框的屏幕截图

如果没有标签和单独的按钮,Windows 中的即时搜索具有轻型外观。

执行成功的搜索会创建搜索结果的虚拟页面,并将其添加到后堆栈和地址栏。 用户有多种方法可以还原原始页面并清除搜索框,包括单击 "上一步",单击地址栏中的原始页面,按 Esc,或清除搜索框。

用户还可以直接清除搜索框,而不还原上一页结果。 在即时搜索模式下,用户开始键入后会出现一个 "清除" 按钮;"x" 替换放大镜搜索符号。 悬停时,"x" 将获取按钮外观,并可单击。

包含 "x" 图标的搜索框的屏幕截图

用户可以通过单击控件右端的 "x" 来清除搜索框。

在常规搜索模式下,"清除" 按钮是可选的。 例如,如果搜索需要很长时间才能完成,用户可能会发现它很有用。 用户可以单击 "x" 以停止正在进行的搜索。 如果搜索已完成,用户可以单击 "x" 以清除搜索框。

指南

位置

  • 对于应用程序窗口,请在右上角找到 "搜索"。
  • 对于弹出窗口,找到最明智且最方便的 "搜索"。
  • 异常: 如果搜索通常是用户在主入口点) (窗口中的第一件事,请将它置于窗口顶部。

查找

  • 使用标准搜索按钮图形。 有三个版本:
    • 放大镜搜索符号仅 (悬停) 上的按钮。 用于即时搜索。
    • 带按钮的放大镜搜索符号。 若要开始搜索,请使用 "需要单击时" 按钮。
    • 带有按钮和下拉箭头的放大镜搜索符号。 如果用户可以更改范围或其他设置可用,请添加下拉箭头。
      • 对于 "即时搜索",只使用下拉箭头,并在悬停时显示按钮。
      • 对于常规搜索,显示按钮上的下拉箭头。

处于不同状态的即时搜索框图

即时搜索的视觉规范。

处于不同状态的常规搜索框图

常规搜索的视觉规范。

  • 不要使用标签;请改用可选提示。 如果用户倾向于假设搜索是一般文件搜索,请使用提示来指定范围。 否则,请使用类型搜索或类似的简洁短语。

    "要搜索的类型" 提示的屏幕截图

    "搜索所有小工具" 提示的屏幕截图

    在这些示例中,brief 文本提示可帮助用户使用搜索。

交互

  • 在输入焦点上,自动选择以前输入的任何文本。 这样,用户就可以通过键入来输入新的搜索,或者通过使用箭头键定位插入符号来修改上一个搜索。

    包含突出显示文本的 "搜索" 框的屏幕截图

    在此示例中,先前输入的文本在输入焦点上处于选中状态。

  • 将搜索框的键盘快捷方式指定为 Ctrl + E。

功能

  • 尽可能支持即时搜索。 如果存在常规搜索需要额外的等待时间,则应同时提供常规搜索和即时搜索。
  • 常规搜索必须在5秒内返回相关结果,并且即时搜索必须在两秒钟内返回结果。 在此之后,只要程序响应并且用户可以执行其他任务,搜索可能会继续在一段时间内填写不太相关的结果。 可能需要为搜索数据编制索引,以确保此响应能力。
  • 如果同时提供普通和即时搜索模式,则即时搜索结果必须是常规搜索结果的子集。
  • 所有搜索都是基于前缀的 (没有任何子字符串或后缀搜索) 。 尾随通配符的使用是可选的,不会影响结果。 如果输入了多个字词,请使用或搜索。
  • 成功的搜索将向后堆栈和地址栏中添加包含搜索结果的虚拟页面。 多个搜索将产生单个虚拟页面,因此单击 "上一步" 将始终返回原始页面。
  • 如果需要进行缩放,则按相关性对搜索结果进行排序。
  • 空白搜索将返回原始页。

即时搜索框大小和间距的图

建议的即时搜索大小和间距。

标准搜索框大小和间距的图

常规搜索的建议大小和间距。

文本

  • 对于搜索框中的提示的措辞,请将其设置为 (例如,键入以搜索) 或指示搜索范围 (例如,搜索 "图片") 。
  • 提示文本应简短。 一个词或短语应该已经足够。
  • 使用句式大写。
  • 不要使用结束标点或省略号。

文档

  • 引用此控件作为搜索框。 第一个单词的首字母大写不要将框的首字母大写。
  • 请参阅两种类型的搜索,作为即时搜索和常规搜索。 首字母大写的即时搜索不要将常规搜索的首字母大写。

术语表