搜索框

注意

此设计指南是为 Windows 7 创建的,尚未针对较新版本的 Windows 进行更新。 大部分指导原则上仍然适用,但演示和示例并不反映我们 当前设计指南

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

有两种类型的搜索:

  • 即时搜索,其中结果立即显示为用户类型。 无需单击任何按钮,因此放大镜搜索符号显示为图形,而不是按钮。

    屏幕截图,显示即时搜索框,其中“提示”标注指向搜索框,以及指向放大镜图形的“搜索符号”标注。

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

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

    screen shot of a regular search box screen shot of a regular search box 常规搜索框的屏幕截图

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

    可以为用户提供两种类型的搜索选项。

这是正确的控件吗?

若要决定,请考虑以下问题:

  • 特定对象是否难以找到? 当以下情况发生时,可能会发生这种情况:
    • 有许多对象。
    • 对象不位于单个位置。 搜索对于在树中查找对象特别有用。
    • 搜索数据难以找到(例如元数据)。
  • 用户是否需要在文档中查找特定文本?
  • 你的功能是否在五秒内返回相关的搜索结果? 如果没有,则可以提供搜索功能,但可以使用一种替代设计来提供可见反馈来适应长时间运行的搜索,例如搜索对话框。

设计概念

搜索是许多方案中的关键第一步:用户必须先查找对象,然后才能使用它们。 用户在越来越大的硬盘上保存越来越多的对象,但浏览对象不会很好地缩放。 搜索必须是用户体验的简单、一致、可靠的部分。

Windows 中的搜索框:

  • 是所有资源管理器窗口的一部分,因此它们易于查找和识别。
  • 具有一致的外观和行为。
  • 高效快捷,以即时搜索模式提供即时结果。

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

  • 探险 家
  • 体验(Microsoft Windows Media Player、Windows 照片库、Windows Internet Explorer)
  • “开始”菜单(查找程序和最近的文件)
  • 控制面板主页(查找控制面板项和任务)
  • 帮助(查找相关的帮助主题)

外观

Windows 中的搜索感觉通过支持即时搜索来显著增强。 即时结果使 Windows 感觉更强大且更直接。

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

“搜索”按钮在视觉上连接到“搜索”框。 为了最大程度地减少空间,在搜索框中使用可选的 提示 而不是标签。 提示可能是指令(例如,键入搜索)或指示搜索范围(例如,搜索图片)。

screen shot of an instant search box screen shot of an instant search box 即时搜索框的屏幕截图

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

执行成功的搜索会创建搜索结果的虚拟页面,并将其添加到“后退堆栈”和“地址”栏。 用户可通过多种方式还原原始页面并清除搜索框,包括单击“后退”、“地址栏中的原始页面”、“按 Esc”或清除“搜索”框。

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

带有“x”图标的搜索框的屏幕截图

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

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

指引

位置

  • 对于应用程序窗口,请在右上角找到“搜索”。
  • 对于弹出窗口,请在最合理且方便的位置找到搜索。
  • 例外: 如果搜索通常是用户在窗口(主要入口点)中执行的第一件事,则将其居中位于窗口顶部。

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

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

即时搜索的视觉规范。

不同州figure of regular search boxes in different states figure of regular search boxes in different states 常规搜索框的图

常规搜索的视觉规范。

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

    screen shot of 'type to search' prompt screen shot of 'type to search' prompt “键入搜索”提示屏幕截图

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

    在这些示例中,简短的文本提示可帮助用户处理搜索。

互动

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

    搜索框的 屏幕截图,其中突出显示了文本

    在此示例中,在输入焦点上选择了以前输入的文本。

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

功能性

  • 尽可能支持即时搜索。 如果在某些情况下定期搜索值得额外的等待时间,请同时提供常规搜索和即时搜索。
  • 常规搜索必须在五秒内返回相关结果,即时搜索必须在两秒内返回结果。 此时,只要程序响应迅速且用户可以执行其他任务,搜索可能会随着时间的推移继续填写不太相关的结果。 可能需要为搜索数据编制索引,以确保这种响应能力。
  • 如果同时提供常规和即时搜索模式,则即时搜索结果必须是常规搜索结果的子集。
  • 所有搜索都是基于前缀的(无子字符串或后缀搜索)。 使用尾随通配符是可选的,不会影响结果。 如果输入了多个单词,请使用 OR 搜索。
  • 成功的搜索将包含搜索结果的虚拟页面添加到“后退堆栈”和“地址”栏。 多个搜索结果会导致单个虚拟页面,因此单击“返回”始终返回原始页面。
  • 如果需要进行缩放,请按相关性对搜索结果进行排名。
  • 空白搜索返回原始页面。

即时搜索框大小调整和间距figure of instant search box sizing and spacing figure of instant search box sizing and spacing 的图

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

常规搜索框大小调整和间距 图

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

发短信

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

文档

  • 将此控件称为“搜索”框。 将第一个单词的初始字母大写:不要大写框的初始字母。
  • 将两种类型的搜索称为即时搜索和常规搜索。 将即时搜索的初始字母大写;不要大写常规搜索的初始字母。

术语表