搜索框

注意

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

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

有两种类型的搜索:

  • 即时搜索,结果在用户键入时立即显示。 无需单击按钮,因此放大镜搜索符号显示为图形,而不是按钮。

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

    使用即时搜索的典型搜索框。 每次击键时都会自动执行搜索。

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

    常规搜索框的屏幕截图

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

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

这是正确的控件吗?

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

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

设计概念

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

Windows 中的搜索框:

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

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

  • 资源管理器
  • 体验 (Microsoft Windows 媒体播放器、Windows 照片库、Windows Internet Explorer)
  • 用于查找程序和最近) 的“开始”菜单 (
  • 控制面板主页 (查找控制面板项和任务)
  • 帮助 (查找相关帮助主题)

外观

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

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

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

即时搜索框的屏幕截图

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

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

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

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

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

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

准则

位置

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

视线

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

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

即时搜索的视觉规范。

不同状态的常规搜索框图

常规搜索的视觉规范。

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

    “键入以搜索”提示的屏幕截图

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

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

交互

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

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

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

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

功能

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

即时搜索框大小调整和间距图

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

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

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

文本

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

文档

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

术语表