工具提示和信息提示

注意

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

工具提示是一个小弹出窗口,用于标记指向的未标记控件,例如未标记的工具栏控件或命令按钮。

显示“打印”按钮的屏幕截图,其中显示了工具提示“打印 (Ctrl+P) ”。

工具栏按钮的典型工具提示。

由于工具提示已证明非常有用,因此存在一个名为“信息提示”的相关控件,它提供的描述性文本比使用工具提示提供的文本更多。

信息提示是一个小弹出窗口,可简洁地描述所指向的对象,例如工具栏控件、图标、图形、链接、Windows 资源管理器对象、“开始”菜单项和任务栏按钮的说明。 信息提示是 渐进式披露控件的一种形式,无需始终在屏幕上显示描述性文本。

带有信息提示的“共享”按钮的屏幕截图

典型的信息提示。

在本文中,工具提示和信息提示统称为提示。

提示可帮助用户了解未在用户界面 (UI) 中直接描述的未知或不熟悉的对象。 当用户将指针悬停在对象上时,它们会自动显示,当用户单击控件或移动鼠标或提示超时时删除它们。

开发 人员: 没有信息提示控件;信息提示是使用工具提示控件实现的。 区别在于用法,而不是实现。

注意

气球工具栏帮助 相关的指南在单独的文章中提供。

这是正确的控件吗?

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

  • 信息是否基于指针悬停显示? 如果不是,请使用其他控件。 仅作为用户交互的结果显示提示,从不单独显示它们。 相比之下, 气球 可以在自己的 (上显示,就像) 通知一样,因此它们有一个标识其来源的尾部。

  • 控件是否有文本标签? 如果没有,请使用工具提示提供标签。 请注意,大多数控件都应标记,因此没有工具提示。 带有图形标签的工具栏控件和命令按钮应具有工具提示。

  • 对象是否受益于补充说明或更多信息? 如果是,请使用信息提示。 但是,文本必须是补充的,这不是主要任务所必需的。 如果是必需的文本,请将它直接放在 UI 中,这样用户便不必查找或搜寻它。

  • 补充信息是错误、警告还是状态? 如果是,请使用其他 UI 元素,例如气球、 错误消息状态栏。 通知区域图标信息提示是一个例外,因为它们可用于显示状态信息。

  • 用户是否需要与提示进行交互? 如果是,请使用其他控件,例如气球。 用户不能与提示进行交互,因为移动鼠标会导致提示消失。

  • 用户是否需要打印补充信息? 如果是,请使用另一个控件,例如静态注释字段。 但是,还可以使用信息提示来更直接地访问此信息。

    批注气球的屏幕截图

    在此示例中,Microsoft Word 中的静态批注字段允许用户打印批注。

  • 上下文是否使用户可能会发现提示令人厌烦或分心? 如果是这样,请考虑使用其他解决方案,包括不执行任何操作。 如果确实在此类上下文中使用提示,请允许用户将其关闭。

使用得当时,提示可改善与用户的通信。 切勿使用提示来代替良好的设计。 如果图形、按钮或其他对象要求用户不断检查提示才能理解它,则设计是错误的。 请改为修复设计。

设计概念

提示是简化用户界面的强大方法。 他们在需要时提供用户所需的信息,只需付出最少的工作量。 提示可帮助你更有效地使用屏幕空间并减少屏幕混乱。 但是,设计不佳的提示可能会令人厌烦、分散注意力、无益、压倒性或妨碍。 以下设计概念旨在说明差异。

可发现性

当用户将指针悬停在对象上一段时间时,提示会自动显示。 这种时间延迟机制使提示非常方便,但也降低了其可发现性。

随着时间的推移,用户了解到某些标准对象(如工具栏按钮、图形按钮、“开始”菜单项和通知区域图标)具有提示,因此你可以将其可发现性视为理所当然。

用户在非标准位置发现提示需要更长的时间。 没有视觉线索(如热点或指针更改)指示对象具有提示。 更糟的是,一些用户经常移动鼠标,尤其是在他们学习导航 UI 时。 用户必须知道对象具有提示,无论是通过过去的体验还是通过试验。

可以通过一致地使用提示来提高可发现性,进而提高可预测性。 如果为某些对象提供提示,则应为用户可能需要补充信息的所有类似对象提供提示。 有时这样做可能具有挑战性,因为还必须确保提示有用且不明显。

如果提供可发现且一贯有用的提示被证明是一个问题,请考虑替代设计,例如一目了然的控件标签或就地补充文本。

适当信息

适用于提示的信息具有以下特征:

  • 简洁。 提示使用的弹出窗口非常适合短句和句子片段以及格式化文本。 大型、无格式的文本块难以阅读且难以承受。
  • 有用。 提示文本必须提供信息。 它不应该很明显,或者只是重复屏幕上已有的内容。
  • 补充。 由于提示文本并非始终可见,因此它应该是用户无需阅读的补充信息。 重要信息应使用一目了然的控件标签或就地补充文本来传达。
  • 静态。 用户不希望提示从一个实例更改为下一个实例,因此他们不太可能注意到动态内容(如状态信息)的变化。 通知区域图标提示是一个值得注意的例外:用户更有可能发现提示信息的变化,因为这些图标主要传达状态。

适当的超时

适当的自动显示和删除提示对于用户保持 UI 环境控制的目标至关重要。 提示有三个超时值:

  • 初始。 指针必须保持静止才能显示提示的时间。 默认时间为 0.5 秒。
  • 重新显示。 指针从一个目标移动到另一个目标时指针必须保持静止的时间。 默认时间为 0.1 秒。
  • 去除。 在该时间之后自动删除小费的时间。 默认时间为 5 秒。

初始值和重新显示值太短会导致令人讨厌的破坏性体验,因为它们通常会无意中显示,而过长会导致提示感觉无响应或未被发现。 默认删除时间适用于短提示文本,如工具提示中所示。 信息提示的文本较长,因此需要更长的显示时间。

适当的放置

笔尖应放置在悬停对象附近,如果可能,通常位于指针的尾部或头部。 但是,不应以干扰用户正在执行的操作的方式放置它们,从而遮挡感兴趣的对象。 若要防止此问题,可能需要将笔尖移离指针,但与对象相邻。 只要对象与其提示之间的关系清晰,就不是问题。 确保用户不要移动指针,只是为了让你的程序提示消失。

可访问性

提示对辅助功能有不同寻常的影响。 虽然它们通常是通过将指针悬停在对象上触发的,但提示由 屏幕阅读器 来处理具有键盘访问权限的控件。 当正确用于简洁、有用、静态、补充的信息时,提示可以提高整体辅助功能。 事实上,替换文字提示模式是使图形易于访问的首选方法。 但是,当使用不当时,它们会使重要或动态信息更难获取,从而损害辅助功能。

如果控件需要没有键盘访问权限的提示,请提供多种访问控件的方法。

带有工具提示的“打印”按钮的屏幕截图

在此示例中,用户可以使用工具栏按钮 (() 键盘不可访问)或“打印”命令键盘快捷方式进行打印。

如果你只做一件事...

设计可在适当时间在适当位置显示简明、有用、静态、补充信息的可发现提示。

使用模式

提示有多种使用模式:

使用情况 示例
工具提示
显示未标记的控件或字形的标签。
由于这些提示用作标签,因此其文本遵循基础控件的标签准则。
带有工具提示的“导出列表”按钮的屏幕截图
在此示例中,工具提示提供命令标签。
带有工具提示的“关闭” 按钮的屏幕截图:带工具提示的“播放”按钮的屏幕截图
在这些示例中,工具提示标记图形按钮。
带有工具提示的显示菜单字形的屏幕截图
在此示例中,工具提示标记字形。
信息提示
提供对象或控件的补充说明或说明。
使用信息提示描述或解释工具栏控件、图标 (包括图标覆盖) 、链接选项卡渐进式披露控件和自定义控件等对象和控件。
包含信息提示的电子邮件按钮的屏幕截图
带有信息提示的“燃烧”按钮的屏幕截图
在这些示例中,信息提示提供有关控件和对象的补充信息。
替换文字信息提示
描述辅助功能的图形。
此模式主要适用于有某种形式的视力障碍且可能使用屏幕阅读器的用户。
带有信息提示的窗口“开始”按钮的屏幕截图
在此示例中,信息提示描述了“开始”菜单图形。
缩略图
显示项的小图像。
缩略图提供易于识别的窗口或文档的图形表示形式。
控制面板类别缩略图的屏幕截图
在此示例中,Windows 任务栏为其项提供缩略图提示。
照片及其数据的缩略图的屏幕截图
在此示例中,Windows 照片库为其项提供缩略图提示。
详细信息信息提示
显示有关对象的详细信息。
信息提示是显示有关对象的详细信息或提供数据的有效方法。
照片信息提示的屏幕截图,其中显示了图形 的文件类型屏幕截图,其中包含信息提示详细信息值
在这些示例中,信息提示提供有关对象或数据的详细信息。
“开始”菜单信息提示
描述开始菜单上的项。
“开始”菜单由程序名称和重要的窗口目标(如文档、图片和控制面板)组成。 这些提示描述了开始菜单项,通常通过简要说明程序或目标以及用户可以使用它执行的主要任务。这些说明还会通过“开始”菜单搜索框编制索引,从而进一步帮助用户找到所需的程序。
欢迎中心信息提示的屏幕截图
在此示例中,信息提示描述了用户可以对“开始”菜单中的程序执行的操作。
控制面板信息提示
描述控制面板类别或任务。
这些提示提供了补充信息,可帮助用户选择正确的控制面板类别和项。
包含信息提示的用户帐户类别的屏幕截图
在此示例中,信息提示描述了“用户帐户”控制面板类别。
全名信息提示
当名称被截断或不完全可见时,显示项的全名。
通过这些提示,可以在更紧凑的空间中显示项目,同时减少水平滚动的需求。 当内容长度未知时,这一点尤其重要,因为它是动态的。 与其他模式不同,在列表和树中使用时,这些提示直接显示在源对象上。
单选按钮组标题信息提示的屏幕截图
在此示例中,信息提示用于在悬停时显示完整的项名称。
状态信息提示
显示通知区域图标的状态信息。
通常,提示应该是静态的,因为用户不希望它们从一个实例更改为下一个实例。 通知区域图标是一个例外 ,因为这些图标传达状态,并且没有其他屏幕空间可用于状态文本。
“messenger 未登录”信息提示的屏幕截图
“messenger 已登录”信息提示的屏幕截图
在这些示例中,信息提示提供通知区域图标的状态信息。

准则

超时

  • 使用默认的初始超时和重新显示超时。 异常:
    • 不冗余且显示在关联对象的一侧的缩略图可以立即显示 (,) 没有任何延迟。 但是,使用冗余缩略图的默认初始超时 (例如小图形对象的大缩略图提示) 或覆盖其关联对象的缩略图。
  • 对于工具提示,请使用默认的 5 秒提示删除超时。
  • 对于信息提示,请关闭小费删除超时。 开发人员: 由于无法从技术上关闭删除超时,因此请将其设置为其最大值。
  • 出于辅助功能,如果需要将超时值设置为最大值以外的值,请将其设为SPI_GETMOUSEHOVERTIME的倍数,并SPI_GETMESSAGEDURATION系统参数,而不是使用固定时间。 这样做会将超时调整为用户的速度。

定位

  • 避免覆盖用户即将查看或与之交互的对象。 始终将笔尖放在对象的一侧,即使这需要在指针和笔尖之间分隔。 只要对象与其提示之间的关系清晰,某些分离就不是问题。

    • 例外: 列表和树中使用的全名工具提示。

    不正确:

    信息提示遮挡搜索框的屏幕截图

    正确:

    位于搜索框下方的信息提示的屏幕截图

    在正确的示例中,信息提示放置在远离“搜索”框的位置,即使这需要它和插入点之间的空间。

    不正确:

    信息提示遮盖修订文本的屏幕截图

    正确:

    位于修订文本上方的信息提示的屏幕截图

    在正确的示例中,基础文本比提示有用得多,因此信息提示放置得很不正常。

  • 对于项集合,请避免覆盖用户可能查看或与之交互的下一个对象。 对于水平排列的项目,避免向右放置提示;对于垂直排列的项目,请避免在下方放置提示。

    不正确:

    信息提示遮挡最近项目列表的屏幕截图

    正确:

    最近项目列表旁边的信息提示的屏幕截图

    在不正确的示例中,提示覆盖了用户最有可能与下一个交互的对象。

  • 对于可能分散注意力 (通常是大型) 提示,请确保这些信息对大多数用户有用。 如果不是这样,要么使分散注意力的提示可选,甚至消除它们。 否则,大多数用户将不得不将指针从目标对象移开才能删除提示。

工具提示

  • 使用工具提示为未标记的控件提供标签。 通常具有工具提示的控件包括 工具栏按钮、图形按钮和 渐进式披露控件。 带有提示的控件被视为已标记,例如 文本框组合框。 所有其他控件都应具有显式标签。

  • 使用句子片段而不用标点符号结尾。

  • 使用句式大写。

    • 例外: 此指南是 Windows Vista 的新增指南。 对于旧版应用程序,如有必要,可以使用标题样式大写,以避免混合大写样式。
  • 如果标签适用于需要其他信息的命令,则添加 省略号

  • 与普通标签一样, 使工具提示保持简短 ,通常为五个单词或更少,但首选特定标签而不是模糊标签。

    可以接受:

    打印工具提示的屏幕截图

    良好:

    “打印到默认打印机”工具提示的屏幕截图

    最好:

    “打印 (文档编写器) ”工具提示的屏幕截图

    不正确:

    详细工具提示的屏幕截图

    在这些示例中,最好的示例既简洁又具体,而不正确的示例则不必要地详细。

  • 如果这样做有帮助,工具提示还可以为标记的工具栏按钮提供更多详细信息。 不要只是重复或重复标签中已有的内容。

    正确:

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

    在此示例中,工具提示说明了“搜索”的作用。

    不正确:

    工具提示重复按钮标签的屏幕截图

    在此示例中,工具提示只是重复标签中已有的内容。

  • 无需仅仅为了保持一致性而提供带标签的控件工具提示。

    已标记和未标记按钮的屏幕截图

    在此示例中,未标记的工具栏按钮具有工具提示,但标记的按钮没有。

  • 在适当的时候, 通过提供键盘快捷方式和默认值,使工具提示更加有用。 将此附加信息放在括号中。 这样做会使工具提示对标记的控件很有用,即使它们只是重复标签。 评估工具提示的简洁性时,请勿考虑此附加文本。

    “打印 (文档编写器) ”工具提示的屏幕截图

    在此示例中,Word 在工具栏工具提示中显示默认值和键盘快捷方式。

信息提示

  • 对于非标准位置的信息提示,应优先使用一致性,而非帮助性,以提高可发现性。 为用户可能需要补充信息的所有对象提供提示,即使一些信息提示可能很明显。 这样做可避免用户等待永远不会出现的信息提示。

    • 例外: 如果只有几个对象具有有用的信息提示,则根本不使用信息提示。 相反,请改用一目了然的控件标签或就地补充文本。
  • 使用包含结尾标点符号的完整句子。

  • 使用句式大写。

  • 使用当前时态,而不是未来。

  • 使用并行语法构造。 并行度要求具有相同函数的单词和短语具有相同的形式。

    • 例外: 对于全名信息提示模式,信息提示文本与基础控件的措辞、大写和标点完全匹配。
  • 避免使用较大的信息提示。 较大的信息提示难以阅读,并且难以在不干扰基础对象的情况下定位。

  • 设置信息提示的格式,使其内容更易于阅读和扫描。 大型无格式文本块可能难以阅读。

    不正确:

    长、非结构化、已运行工具提示的屏幕截图

    正确:

    相同工具提示的屏幕截图,每个项目一行

    在正确的示例中,格式化文本更易于阅读和扫描。

  • 在信息提示中首次使用时,拼写出首字母缩略词的名称,然后用括号括住首字母缩略词。 示例:“动态主机配置协议 (DHCP) ”。

“开始”菜单信息提示

  • 使用“开始”菜单信息提示 简明地描述项目,并列出用户可以使用该项执行的主要任务。

  • 有所帮助。 专注于用户可以执行的操作。 不要只重复项目名称,甚至根本不在说明中使用它。

  • 具体。 避免使用泛型谓词和捕获所有短语,如 和其他任务。 如果信息很重要,请特别列出;否则,假设用户明白信息提示中并未列出所有内容。

  • 简明扼要。 使用 25 个单词或更少。 较长的信息提示会阻止阅读。

  • 从当前时态的命令性动词 开始,例如创建、编辑、显示和发送。 首选特定谓词,而不是一般谓词(例如管理和打开),后者实际上适用于大多数“开始”菜单项。 直接了解这一点。

    不正确:

    工具提示的屏幕截图:打开音乐文件夹

    良好:

    工具提示的屏幕截图:存储和播放音乐

    在不正确的示例中,信息提示以泛型谓词开头。 更好的示例使用特定谓词,但继续使用提示末尾不必要的“和其他”措辞。

  • 不要使用听起来像营销的语言。

    不正确:

    “一站式起点”信息提示的屏幕截图

    在此示例中,信息提示听起来类似于市场营销。

  • 由于这些信息提示是针对“开始”菜单搜索框编制索引的,因此 请使用用户最有可能搜索的术语描述程序的重要任务。请考虑使用关键字和通用同义词。

    不正确:

    工具提示的屏幕截图:创建 dvd

    正确:

    工具提示的屏幕截图:创建 () cd、dvds

    在正确的示例中,信息提示具有通用同义词。

  • 使用句式大写。

  • 开发 人员: “开始”菜单信息提示文本来自项目的“注释”字段。

快速启动工具提示

  • 使用格式为 的工具提示: 启动 (完整程序名称)
  • 不要使用结束标点符号。
  • 请勿使用其他文本来描述程序或其用途。 由于用户选择“快速启动”栏中显示的程序,因此他们已知道其用途。

控制面板信息提示

  • 使用控制面板信息提示简明地描述控制面板任务以及配置的硬件和软件。

  • 控制面板名称和图标必须包含信息提示。 单个任务没有工具提示。

  • 有所帮助。 专注于用户可以执行的操作。 不要只重复控制面板项名称,甚至在说明中使用它。

  • 具体。 避免使用通用谓词和捕获所有短语,如 和其他硬件。 如果信息很重要,请特别列出;否则,假设用户明白信息提示中并未列出所有内容。

    不正确:

    工具提示的屏幕截图:配置鼠标

    正确:

    鼠标设置的详细工具提示的屏幕截图

    在正确的示例中,专门列出了配置的硬件类型。

  • 简明扼要。 使用 25 个单词或更少。 较长的信息提示会阻止阅读。

  • 从当前时态的命令性动词开始。

    正确:

    配置 Internet 显示和连接设置。

    调整视觉、听力和移动性设置。

  • 直接了解这一点。 请勿使用适用于任何控制面板的语言,例如“用于查看和配置外观和功能设置...”。或“提供用于...”

  • 不要使用听起来像营销的语言。

    不正确:

    满足所有磁盘配置需求的一站式起点。

  • 由于这些信息提示针对控制面板搜索框编制索引,因此请使用用户最有可能搜索的术语来描述项目。请考虑对常用任务和对象使用通用同义词。

    包含游戏控制器任务的工具提示的屏幕截图

    在此示例中,该项使用用户最有可能搜索的术语进行描述。

  • 如果控制面板项可能与其他项混淆,请在信息提示中说明它的不同程度。

    不正确:

    缺少特定详细信息的信息提示的屏幕截图

    在此示例中,两个控制面板项都配置声音,但信息提示未阐明差异。

    正确:

    包含特定详细信息的信息提示的屏幕截图

    在此示例中,由于提示,这两个项目之间的差异更为明显。

图标

与以前版本的 Windows 不同,Windows Vista 允许提示具有图标。

  • 对于工具提示,请勿使用图标。

  • 对于信息提示,仅当图标有助于识别或理解或提供上下文时才使用。 大多数信息提示不应包含图标。

    带耳机图标的音量信息提示的屏幕截图

    在此示例中,信息提示具有一个图标,可帮助将图标与其含义关联。

  • 图标必须使用 Aero 样式 ,并且外观不显眼。

有关常规图标指南和示例,请参阅 图标

文档

引用提示时:

  • 在编程和其他技术文档中,请参阅提示 (工具提示或信息提示) 的类型。 在其他地方,只需将其称为小费。
  • 以下变体不正确:工具提示、工具提示和工具提示。
  • 若要描述用户交互,请使用悬停。