UI 工具提示设计中的 6 项原则和 5 大问题

编者按：又是一篇彻底理清 UI/UX 设计中一个重要控件的文章，核心围绕着「工具提示」来进行。Saadia Minhas 的这篇文章写的相当详细，6 大设计规则，5 大常见错误，把所有的要点都包含进来了，值得学习。以下是正文。

当用户将鼠标悬停或点击屏幕上的 UI 元素时，出现的描述性文案，就是工具提示（Tooltip）。工具提示通常会简要解释这个 UI 元素，让用户更轻松地理解，并且与界面交互。

工具提示可提供即时帮助，而不会打断用户的工作流程。用户以这种方式快速获得帮助帮助，从而减少 UI 给用户的陌生感和迷惑性。

为了增强用户体验设计出有效的工具提示，需要遵循一系列设计规则。

关键要点

• 工具提示是一个需要仔细设计考虑的常见 UI 元素。
• 工具提示应显示清晰简洁地传递信息，帮助用户了解 UI 交互。避免使用专业术语。
• 在整个 APP 中使用一致的工具提示设计。
• 使用适当的时间和位置来显示你的工具提示。
• 设计工具提示时请注意可访问性。
• 仅在必要时使用工具提示。
• 不要使用工具提示来显示关键信息。
• 设计工具提示时请充分考虑到移动端用户。

想要更好设计工具提示，你需要遵循下面的 6 个最佳实践。

1. 清晰简洁

• 提供能够帮助用户理解 UI 元素功能和含义的工具提示文案。

• 不要使用专业术语和复杂的语言。否则，工具提示辅助用户理解的目的，将无法实现。

• 信息要简短，切中要点。冗长的工具提示文本是难以阅读的，需要花费时间去理解，从而导致体验不佳。
• 如果要在工具提示中显示大量信息，请使用其他 UI 控件（如弹出窗口）。此外，你还可以在工具提示中显示「了解更多，查看详细信息」类型的文案，以查看与当前 UI 元素相关的详细信息。

• 不要在工具提示中，使用繁复冗余的 UI 标签文案，它的存在没有向用户提供任何附加信息。有时，保持 UI 的一致性是不可避免的。

• 这里要考虑的一个重要问题是保持一致性。有时你必须为屏幕上的所有 UI 元素提供工具提示，以提供类似的体验。如果用户在大多数链接、按钮或图标上看到工具提示，他们会期望在所有元素上都有这些提示。
• 与其删除多余的工具提示，不如为所有这些元素制作有用的工具提示（如果链接或者按钮本身是不言自明的，则可以不制作任何工具提示）。
• 工具提示的主要目的是传达清晰有效的信息，信息越简洁、越有影响力，用户体验就越好。不要只关注工具提示中可以容纳的字符数，而要考虑需要向用户传达哪些基本信息。

2. 排版和时间

将工具提示放置在相关 UI 元素附近，以便用户可以轻松地与它们相关。

• 由于工具提示可能会与 UI 元素重叠，所以请将它们放置在不会影响用户交互流程的位置。
• 如果工具提示遮挡了用户想要查看的内容，用户会移动鼠标关闭工具提示，然后查看所需的信息。确保工具提示不会遮挡用户完成任务时，必须看清的元素。
• 工具提示的位置取决于你正在使用的窗口。位置应根据屏幕大小自行调整。例如，当窗口以全屏视图打开时，显示在 UI 元素下方的工具提示会自动调整到顶部。

• 如果你正在处理表单，用户可从上到下来浏览选项，则将工具提示放在 UI 元素的顶部是一个更好的主意。由于用户已经使用过上面的 UI 选项，因此工具提示可以暂时隐藏，不会影响使用。

• 将工具提示调整到不会被窗口任何一侧截断的位置。
• 工具提示的可见时长应取决于目标受众阅读和理解其信息的能力。当用户将光标从 UI 元素上移开时自动关闭工具提示，比让它在定义的时间后消失更为方便用户。

3. 工具提示触发机制

工具提示以两种方式出现。

（1）当用户将鼠标悬停在 UI 元素上时，其详细信息将显示在工具提示中。一旦光标离开 UI 元素，工具提示就会消失。

用户必须将鼠标悬停在 UI 元素上才能查看是否出现工具提示。

(2) 当用户点击带有 UI 元素的信息或帮助图标时，其详细信息将显示在工具提示中。当用户再次点击图标或点击工具提示区域外时，工具提示会消失。

如果带有信息或帮助图标的选项太多，此方法可能会造成 UI 混乱。

4. 可见性和可访问性

确保工具提示的可见性，且可读性良好。

• 工具提示必须对所有用户（包括残障人士）都清晰可见且易于阅读。这需要使用高对比度的颜色和清晰易读的字体。此外，还要确保工具提示在合理的时间内保持可见。
• 选择在背景 UI 上可见的工具提示和字体颜色。使用与背景对比鲜明的色彩。
• 让所有用户（包括残障人士）都能轻松使用工具提示。有视力障碍的用户无法阅读带有白色背景的浅灰色工具提示。

• 工具提示是一个会显示一段时间的小型 UI 元素。选择更易于阅读和理解的字体大小。调整字符间距，使文案更易读。如果使用多行，请使用合理且易读的行间距。

• 在可访问性上，还应该考虑包括提供键盘导航和屏幕阅读器支持，确保所有用户，无论其能力如何，都可以从工具提示信息中受益。

5. 一致性

在整个界面上保持一致的工具提示风格和行为，有助于用户预测和理解 UI 中的功能。

• 你的产品当中使用的工具提示应该有一致的视觉设计。用户应该能够识别并熟悉工具提示的设计和样式。确定风格样式指南有助于创建一致的工具提示。

• 悬停时出现工具提示所需的时间，应该是一致的。
• 显示工具提示的触发器应该相同。例如，如果工具提示是通过将鼠标悬停在界面某个部分的元素上来触发的，则整个 APP 也应该采用相同的方式。

一致的设计确保更直观的用户体验并减少学习成本。

6.测试和迭代

用户测试对于验证工具提示的有效性，至关重要。

• 进行可用性测试，来收集有关用户如何与工具提示交互，以及所提供的信息是否有用的反馈。
• 根据用户反馈进行迭代，因为这将有助于提高工具提示的清晰度和功能性。

A/B 测试等工具可用于确定哪些版本的工具提示在用户参与度和满意度方面表现最好。

应避免的常见错误

以下是与工具提示设计相关的常见错误，可以通过这些最佳实践来避免这些错误。

1. 过度使用工具提示

毫无疑问，工具提示对用户很有帮助，可以指导用户与 APP 和网站之间的互动。同时，过度使用工具提示，可能会让用户感到不知所措。

• 不要提供不必要的工具提示，因为这会降低其有效性。如果屏幕上的每个元素都有工具提示，用户可能会不知所措或完全忽略它们。
• 工具提示会遮盖其下方的区域。用户界面上的许多工具提示可能会令人厌烦，因为它们会打断流程，而不是帮助用户。
• 工具提示应谨慎使用，只有当它们通过提供必要信息、或阐明复杂功能，并且以此来增加价值时才使用。

2. 时机和地点选择不当

工具提示的出现时间和位置不当，可能会让用户感到烦躁和迷惑。

• 出现得太快或停留时间太长的工具提示，可能会分散注意力。如果当用户将鼠标悬停在 UI 元素上时，工具提示以随机间隔显示，可能会令人摸不着头脑。使用合理的、一致的时间，在用户将鼠标悬停在元素上时立即显示工具提示，是合理的设计。
• 同样，如果工具提示远离相关 UI 元素，则会造成混乱。有时，工具提示文案会被截断，无法正常显示，这会导致糟糕的用户体验。工具提示需要智能地调整其位置。
• 最佳做法是将工具提示放置在相关元素附近，并确保它们以自然和非侵入的方式出现和消失。

例如，一旦用户的鼠标不再聚焦于 UI 元素，悬停触发的工具提示就会消失。

3.设计不一致

保持整个 APP 的工具提示设计统一。不一致的工具提示设计会让用户感到困惑，并带来支离破碎的用户体验。

• 由于工具提示是一个小型 UI 控件，因此可以忽略一致的样式指南和主题。
• 确保在整个产品中定义一致的工具提示布局。这包括形状、大小、颜色、字体、放置选项和触发方式。
  一致的设计可以帮助用户了解可以在何时何地以何种方式，来触发工具提示，同时也有助于打造更具凝聚力和专业的界面。

4. 忽视移动端用户

工具提示通常仅针对桌面用户而设计，同样的机制在移动设备上则不起作用，但是移动端用户同样是需要用到的。

• 移动设备的工具提示行为需要考虑触摸交互。设计点击触发的工具提示，使其能够在触摸设备上轻松消失。
• 使用「帮助」图标可能会在小屏幕上造成混乱。点击图标可以显示工具提示，而文案下方的虚线可以指示出文案信息对应的工具提示。使用虚线的原因是为了将其与链接区分开来。
• 再次点击工具提示即可将其关闭。
• 如果你想在用户打开屏幕时显示一条信息，则可以使用工具提示。例如，在 TikTok、Instagram 等上显示通知的统计信息。

5.显示关键信息

如果总是需要某些信息来完成任务，它应该与页面上的相关 UI 元素一起保持可见。

• 例如，密码输入规范应始终可见，以便用户能够满足这些要求。在许多地方，当用户将鼠标悬停在 UI 元素（如图标）上时，密码要求会显示在工具提示中。

最好让关键信息保持可见，以便用户无需悬停或单击任何内容即可了解它。