出自UXGuide.net

工具提示与信息提示

Tooltips and Infotips

目录 1 它用在这里合适吗？ 2 设计理念 2.1 可发现性 2.2 适当的信息 2.3 适当的超时设置 2.4 适当的位置 2.5 无障碍访问（辅助特性） 3 使用模式 4 设计规范 4.1 超时 4.2 位置 4.3 工具提示 4.4 信息提示 4.5 开始菜单信息提示 4.6 快速启动工具提示 4.7 控制面板信息提示 4.8 图标 5 文档编写

工具提示（Tooltip）是指一个小的弹出窗口，用于标注那些被指向的未标注的控件，例如未标注的工具栏控件或命令按钮。

典型的用于工具栏按钮的工具提示

由于工具提示被证实非常有用，一种类似的控件随之产生，名为信息提示。与工具提示相比，它可以提供更多的描述性信息。

信息提示（Infotip）是指一个小的弹出窗口，用于精确地描述被指向的对象，例如工具栏控件、图标、图形、链接、Windows® Explorer 对象、开始菜单项、以及任务栏按钮的描述信息。信息提示是渐进展开（Progressive Disclosure）的一种形式，避免总是将描述文本显示在屏幕上。

典型的信息提示

在这篇文档中，工具提示和信息提示将统称为“提示”。

提示可帮助用户理解那些未知或不太熟悉的、用户界面（UI）上又缺乏直接描述的对象。当用户将鼠标悬停在某个对象上时，提示会自动显示，而当用户单击控件、移动鼠标、或是提示超时后移除。

致开发人员：并不存在信息提示控件，信息提示是通过工具提示控件实现的。其区别在于使用方式，而不是实现。

注：与气球状提示、工具栏和帮助相关的设计规范请参考各自相应的章节。

它用在这里合适吗？

考虑下列问题以进行判断：

• 是根据鼠标是否悬停来显示信息的吗？如果不是，则改用其他控件。仅当用户操作之后再显示提示——不要让其自行显示。相反，气球状提示则能够自行显示（当用作通知时），因此它带有一个尾部箭头以指明来源。
• 控件是否具有文本标签？如果没有，则用工具提示给出标签。注意，大部分控件都应当带有标签，因此不需要工具提示。工具栏控件以及使用图形标签的命令按钮则应当具有工具提示。
• 是否需要为对象提供辅助描述或更多信息？如果需要，则应使用信息提示。不过，那些文字应当是辅助性质的，也就是说，对于主要任务来说不是必须的。如果那是必须的，则应当直接放在 UI 中，用户无须再到处寻找。
• 辅助信息的内容是否是错误、警告、或状态描述？如果是，应改用其他 UI 元素，如气球式提示、错误信息或状态栏。通知区域图标的信息提示则是一个例外，它可以用于显示状态信息。
• 用户是否需要与提示进行交互？如果需要，则应改用其他控件，例如气球状提示。用户无法与提示进行交互，因为一旦移动鼠标，提示就会消失。
• 用户是否需要打印辅助信息？如果需要，则应改用其他控件，例如静态的注释区。当然，你也可以使用信息提示来提供对此信息更直接的访问。

在这个示例中，Microsoft Word 中的静态注释区使得用户能够打印注释。

• 这些提示是否会在某些环境中对用户产生干扰，或使用户感到厌烦？如果会，则应考虑改用其他的解决方案——包括什么也不做。如果你一定要在该处使用提示，要让用户能够将其关闭。

如果使用得当，提示能够促进与用户的交流。切勿将提示当成好设计的替代品来使用。如果图形、按钮或其他对象需要用户反复查看提示才能理解的话，这就是不好的设计。应当对设计进行修改。

设计理念

提示是简化用户界面的强有力的方式。它在用户需要信息的时候再提供，需要的精力也最小。提示能够帮助你更有效地使用屏幕空间，减少屏幕混乱。不过，设计糟糕的提示也可能令人厌烦、使人分心、没有帮助、带有强迫性或是碍手碍脚。下列设计理念将显示这些差别。

可发现性

当用户将鼠标指针在对象上方悬停一段时间后，提示将自动显示。这种延时机制使得提示用起来非常方便，但同时也会使其较难被发现。

随着时间的推移，用户能够学习到像工具栏按钮、图形按钮、开始菜单项及通知区域图标等这些标准对象都具有提示，因此你可以认为用户理所应当能够发现它们。

在非标准的地方，用户需要花费较长的时间来寻找提示。那里没有什么视觉线索，类似于热区或更改鼠标指针之类来指示对象具有提示。更糟糕的是，有些用户会到处移动鼠标，尤其当他们学习在 UI 中导航时。用户得根据以往的经验或通过试验知道某个对象带有提示。

你可以按照统一的方式使用提示，通过提高可预见性来提高它的可发现性。你如果为某些对象提供了提示，就也应当为所有类似的用户可能想获取辅助信息的对象提供提示。这么做有时可能有些困难，因为你必须确保这些提示是有用的，而且不那么显而易见。

如果要提供易于发现的、统一且有用的提示确实存在问题，则考虑其他的设计方案，比如自描述的控件标签或就地辅助文字。

适当的信息

适当的提示信息应当具有下列特点：

• 简洁性。用于提示的弹出窗口最适合于简短的句子或句子片断、以及带格式的文本。大段的不带格式的文本难以阅读且容易被忽视。
• 实用性。提示文本应当包含有效的信息。它不应是那些显而易见的或者只是重复屏幕上已有的文字。
• 辅助性。因为提示文本并非总是可见，因此它应当是用户不必阅读的辅助信息。重要的信息应当通过自描述控件的标签或就地辅助文本来传达。
• 稳定性。用户认为，提示在不同的实例之间不会发生改变，因此用户不太容易注意到那些动态改变的内容，比如状态信息。通知区域图标提示则是一个特别的例外：用户往往能够发现那里的提示信息的变化，因为那些图标主要用于表示状态。

适当的超时设置

对于维持用户对其 UI 环境的控制来说，适当自动显示和移除提示至关重要。提示具有三种不同的超时设置：

• 显示。指为了显示提示，鼠标指针须保持不动的时间，默认为 0.5 秒（实际上是 GetDoubleClickTime()）。
• 重现。指鼠标指针从一个目标移到另一个目标上后须保持不动的时间，默认为 0.1 秒（实际上是 GetDoubleClickTime() / 5）。
• 移除。指提示在多长时间后将自动消失，默认为 5 秒（实际上是 GetDoubleClickTime() * 10）。

太短的显示和重现时间会带来令人厌烦的、混乱的体验，因为提示往往会在不经意间显示。而太长的时间则又会让人觉得提示没有响应或者无法被发现。默认移除时间对于用在工具提示中的简短文本来说比较适用。信息提示中的文本较长，因此需要更长的显示时间。

适当的位置

提示的位置应当靠近被指向的对象，可能的话，通常位于鼠标指针的尾部或者头部。不过，绝不能让提示挡住用户所关心的对象从而妨碍用户的操作。要避免这种情况发生，你可能需要使提示远离鼠标指针，但仍然保持与对象相连。只要对象与其提示之间的关系足够清楚，这就没什么问题。确保用户移动鼠标的目的不仅仅是消除你程序里的提示。

无障碍访问（辅助特性）

在无障碍访问方面，提示有着特别的功效。虽然它通常是通过将鼠标悬停在对象上方来触发的，但屏幕阅读程序也会处理那些可由键盘访问的控件的提示。如果将简洁、实用、辅助性的信息恰当地用于提示，也有助于无障碍能力的整体提升。事实上，这种扩展文本提示模式是实现图片无障碍访问的推荐方式。不过，如果使用不当，也会因重要或动态的信息难于获取而损害无障碍访问能力。

如果某控件需要提示而又无法通过键盘访问的话，则应为其提供多种访问途径。

在这个示例中，用户可以通过工具栏按钮（无法通过键盘访问）来进行打印，或者通过打印命令快捷键。

最重要的一点：

设计易于发现的提示，在恰当的位置和时候显示简洁、实用、辅助性的信息。

使用模式

提示具有下列使用模式：

工具提示（tooltip） 为不带标签的控件或图元显示标签。	因为这些提示是当作标签来使用的，因此其文本应当遵循相应控件的标签设计规范。 在这个示例中，工具提示为命令提供标签。 在这个示例中，工具提示为图形按钮提供标签。 在这个示例中，工具提示为图元提供标签。
信息提示（infotip） 为对象或控件提供补充描述或解释信息。	使用信息提示来描述或解释对象和控件，如工具栏控件、图标（包括叠加图标）、链接、选项卡、渐进展开控件及自定义控件。 在这些示例中，信息提示给出了关于控件和对象的补充信息。
扩展文本（alt text）信息提示 为无障碍访问而对图形进行描述。	此模式主要用于具有某种视觉损伤的用户，他们可能会使用屏幕阅读程序。 在这个示例中，信息提示描述了开始菜单图形。
缩略图 显示某个条目的小型图像。	缩略图为窗口或文档提供了一个易于识别的图形呈现方式。 在这个示例中，Windows Vista® 任务栏为每一项提供了缩略图提示。 在这个示例中，Windows 照片库为每一项提供了缩略图提示。
详细信息提示 显示对象的详细信息。	信息提示是用于显示关于某个对象或为数据提供详细信息的有效途径。 在这些示例中，信息提示用于给出关于对象或数据的详细信息。
开始菜单信息提示 描述开始菜单上的项。	开始菜单包括程序名称和重要的 Windows 目标位置，比如文档、图片和控制面板。这类提示用于描述开始菜单项，通常给出这些程序或目标位置的简介以及用户主要能够用来做的事情。这类描述也会被编入开始菜单搜索框的索引中，以帮助用户找到他们需要的程序。 在这个示例中，信息提示用于描述用户用开始菜单中的这个程序所能够做的事情。
控制面板信息提示 描述控制面板分类或任务	这类提示用于提供辅助信息以帮助用户选择合适的控制面板分类与项。 在这个示例中，信息提示用于描述 User Accounts（用户帐户）控制面板分类。
完整名称信息提示 当某项目的名称被截断或不能完全可见时显示完整的名称。	这类提示使你能够在更紧凑的空间中显示条目，并减少水平滚动的需要。这对于因内容动态变化而长度未知的情况尤为重要。与其他模式不同，这类提示用在列表或树中时将直接显示在源对象上方。 在这个示例中，信息提示用于在鼠标悬停地显示完整的项目名称。
状态信息提示 为通知区域图标显示状态信息。	一般来说，提示应当是静态的，因为用户会认为提示在不同的实例之间不会发生改变。通知区域图标提示则是一个例外，因为那些图标主要用于表示状态，而那里没有多余的屏幕空间用于状态文本。 在这些示例中，信息提示为通知区域图示显示了状态信息。

设计规范

超时

• 使用默认的显示和重现超时设置。例外：
  • 不重复的显示在相关联的对象旁边的缩略图可以立即显示（不带延迟）。但对于重复的缩略图（比如用于小型图形对象的大缩略图提示）或是覆盖在关联对象之上的缩略图来说，则应当使用默认的显示超时设置。
• 对于工具提示来说，应当使用默认的 5 秒移除超时设置。
• 对于信息提示来说，应当关闭信息移除超时设置。致开发人员：由于你在技术上无法关闭移除超时设置，你可以将其设置为最大值。
• 考虑无障碍访问特性，如果你需要将超时设置为最大值以外的值的话，应使用 GetDoubleClickTime() 的相对值，而不要使用绝对时间。这么做可使超时设置适应用户的速度。

位置

• 避免遮挡用户可能会去查看或者操作的对象。应当总是把提示放在对象的侧边，即使会造成鼠标指针与提示的分离。这样的分离不存在问题，因为对象和其提示之间的关系仍然非常清晰。
  • 例外：用在列表和树中的完整名称工具提示。

错误：

正确：

在正确的示例中，信息提示位于搜索框旁边，即使会导致它与光标之间隔开一段距离。

错误：

正确：

在正确的示例中，带下划线的文本比提示要有意义得多，因此信息提示被放在了旁边。

• 对于一组项目，应当避免遮挡用户可能查看或操作的下一个对象。对于横向排列的项，避免将提示放在右侧；对于纵向排列的项，避免将提示放在下方。

错误：

在这个示例中，提示挡住了用户接下来最有可能要操作的对象。

• 对于可能会分散用户注意力的提示（往往是大的提示），确保其信息对于大多数用户来说是实用的。如果并非如此，则将此提示改为可选的或者干脆去掉。否则，大多数用户会不得不将鼠标从目标对象身上移开以去掉提示。

工具提示

• 用工具提示为未标注的控件提供标签。工具栏按钮、图形按钮和渐进展开控件通常具有工具提示。带有提示文本（prompt）的控件也可考虑进行标注，如文本框和组合框。其他所有控件则应当具有显式的标签。
• 使用不带句末标点的句子片断。
• 使用句子大写样式。
  • 例外：对于遗留的应用程序，如果需要，你可以使用标题大写样式来避免混合的大小写样式。
• 如果用于某命令的标签需要额外信息的话，应添加省略号。
• 和普通标签一样，应当保持工具提示简洁——通常不超过五个英文单词——不过明确的标签要比模糊不清的要好。

可以接受：

更好：

最好：

错误：

在这些示例中，最好的示例是既简洁又明确，而错误的示例则过于冗长。

• 如果有用的话，工具提示也可以为已有标签的工具栏按钮提供更多的细节。不要只是重复或者换个方式表达已经在标签中说过的内容。

正确：

在这个示例中，工具提示解释了 Search（搜索）的功能。

错误：

在这个示例中，工具提示只是重复了标签的内容。

• 你不必仅仅为了保持统一而为带标签的控件提供工具提示。

在这个示例中，未标注的工具栏按钮具有工具提示，而带标签的则没有。

• 可能的话，提供键盘快捷键和默认值以使工具提示更加实用。将这些额外的信息放在括号内。这么做可以使工具提示对于那些已经有标签的控件来说更加实用，即使只是对标签的重复。在评估工具提示的简洁性时不必将这些额外的文本计算入内。

在这个示例中，Word 在工具栏工具提示中显示了默认值和快捷键。

信息提示

• 对于非标准位置上的信息提示来说，先考虑一致性，后考虑实用性以提高被发现的可能性。为所有用户可能需要辅助信息的对象提供提示，即使有少数信息提示可能是显而易见的。这么做可以避免用户等待那些永远不会出现的信息提示。
  • 例外：如果只有少数对象具有实用的信息提示的话，就干脆不要使用信息提示。而是应当改用自描述控件标签或者是就地补充说明文本。
• 使用带有句末标点的完整句子。
  • 例外：通知区域中的图标信息提示不需要句末标点。
• 使用句子大写样式。
• 使用现在时，不要使用将来时。
• 使用平行的语法结构。这要求具有相关功能的字词和短词也具有相同的形式。
  • 例外：对于完整名称信息提示模式来说，信息提示的文字则应当与对应控件文本的行文、大小写及标点符号精确相同。
• 避免大段的信息提示。大段的信息提示不易阅读，而且很难在定位时不遮挡对应的对象。
• 信息提示在排版时应使其内容更易于阅读和扫视。大段不带格式的文本很难阅读。

错误：

正确：

在正确的示例中，带格式的文本阅读或扫视起来要容易得多。

• 当信息提示中首次出现缩写词时，应当完整拼出，并在后面括号内给出缩写。如：“Dynamic Host Configuration Protocol (DHCP)”。

开始菜单信息提示

• 用开始菜单信息提示来简要地描述菜单项并列出用户主要所能做的事情。
• 要实用。关注用户能够做什么。不要仅仅重复菜单项的名称，甚至是直接照搬。
• 要明确。避免常规动词和包罗万象的用语，像“及其他任务”。如果信息很重要，则明确列出，否则的话，假设用户知道并非所有的东西都会列在信息提示中。
• 要简洁。使用不超过 25 个英文单词。太长的信息提示不利于阅读。
• 以现在时、命令式动词起头，如“创建”、“编辑”、“显示”和“发送”等。尽量使用明确的动词，而非常规动词，比如“管理”和“打开”，几乎可以用于所有的开始菜单项。要抓住要点。

错误：

较好：

在错误的示例中，信息提示是以常规动词开头的。在较好的示例中，明确的动词则正中要点，不过在提示最后仍然使用了“and other（以及其他）”的多余的措辞。

• 不要使用推销式的语言。

错误：

在这个示例中，信息提示听起来像是在推销。

• 因为信息提示会被编入开始菜单搜索框索引，所以应当以用户最有可能进行搜索的方式描述你程序中最重要的任务。考虑使用关键字和通用的同义词。

错误：

正确：

在正确的示例中，信息提示包含常用的同义词。

• 使用句子大写样式。
• 致开发人员：开始菜单信息提示文本来自于菜单项的 Comment 域。

快速启动工具提示

• 按此格式使用工具提示：启动（完整程序名称）
• 不要使用句末标点。
• 不要使用额外的文本来描述该程序或它的功能。因为用户选择将程序显示在快速启动栏中，说明他们了解其用途。

控制面板信息提示

• 使用控制面板信息提示以简要地描述控制面板任务以及所设置的硬件及软件。
• 控制面板名称及图标必须具有信息提示。单个的任务则不必具有工具提示。
• 要实用。关注用户能够做什么。不要仅仅重复控制面板项的名称，甚至是直接照搬。
• 要明确。避免常规动词和包罗万象的用语，像“及其他任务”。如果信息很重要，则明确列出，否则的话，假设用户知道并非所有的东西都会列在信息提示中。

错误：

正确：

在正确的示例中，明确列出了所设置的硬件类型。

• 要简洁。使用不超过 25 个英文单词。太长的信息提示不利于阅读。
• 以现在时、命令式动词起头。

正确：

Configure Internet display and connection settings.（配置 Internet 显示及连接设置。）

Adjust settings for vision, hearing, and mobility.（为视觉、听觉及可移动性调整设置。）

• 抓住要点。不要使用适用于任何控制面板项的语言，如“用于查看和设置关于你的……的外观和功能”或者是“提供关于……的选项”。
• 不要使用推销式的语言。

错误：

Your one-stop starting point for all your disk configuration needs.（满足你所有磁盘配置需要的一站式起点。）

• 因为信息提示会被编入开始控制面板搜索框索引，所以应当以用户最有可能进行搜索的方式进行描述。考虑对常用的任务和对象使用通用的同义词。

在这个示例中，该项是以用户最有可能进行搜索的方式进行描述的。

• 如果某个控制面板项可能和其他产生混淆，应当在信息提示中解释其区别。

错误：

在这个示例中，两个控制面板项都可以设置声音，但信息提示没有说明其区别。

正确：

在这个示例中，提示使两者间的区别更加明显。

图标

与先前版本的 Windows 不同，Windows Vista 允许在提示中使用图标。

• 对于工具提示来说，不要使用图标。
• 对于信息提示来说，仅当图标有助于识别或理解，或是提供信息时才使用。大多数信息提示不应包含图标。

在这个示例中，信息提示带有图标有助于将其含义与图标联系起来。

• 图标必须使用 Aero 风格，且不显得突兀。

常规的图标设计规范和示例，参见图标。

文档编写

当提及提示时：

• 仅在编程或其他技术文档中才称呼其具体的类型（“tooltip（工具提示）”或“infotip（信息提示）”）。其他地方，只需简单地称其为“tip（提示）”即可。
• 下列写法都是错误的：“tool tip”、“Tooltip”及“ToolTip”。
• 用“hover（悬停）”描述用户的交互行为。