来源：Medium网站

作者：尼克·巴比奇

翻译：奥创

阅读时长：5min

工具提示可帮助用户了解未在用户界面中直接描述的未知或不熟悉的对象。它们是简化用户界面的强大方式 - 在用户需要时提供用户所需的信息，他们只需要很少的工作量，并帮助应用开发人员更有效地使用屏幕空间（减少屏幕混乱）。

  工具提示是一个小弹出窗口，用于标记指向的未标记控件，例如未标记的工具栏控件或命令按钮。图片来源：  Dribbble

然而，设计糟糕的提示可能令人烦恼，分散注意力，无益，无法控制，或者妨碍。

这个怎么运作

当用户将指针悬停在对象上时，工具提示会自动显示，当用户单击控件或移动鼠标时，或者提示超时时，工具提示会被删除。

  图片来源：codemyui

或者，可以通过使用键盘（通常是Tab键）聚焦元素来引起工具提示。

工具提示或没有工具提示

何时使用工具提示

控件没有文本标签。如果按钮，标签或图标几乎没有描述性文本或需要一些简短的解释，那么工具提示适用于此 - 工具栏控件和带图形标签的命令按钮应该有工具提示。

  文本编辑器中的工具栏元素具有工具提示

控制受益于补充说明或进一步信息。工具提示可以是渐进式公开控件的一种形式，无需始终在屏幕上显示描述性文本。但是，文本必须是补充性的 - 也就是说，对主要任务来说不是必不可少的。如果它必不可少，请将其直接放在UI中，以便用户不必发现或搜索它。

  显示在桌面上的文件上的工具提示，并提供有关该文件的详细信息

很少使用的功能或功能可以不同的解释。工具提示适用于用户容易忘记的特定功能和特定于上下文的功能。

  StackExchange应用程序。如果我们在每个答案旁边的所有这些向上和向下箭头上没有工具提示，有些人可能会认为它们是用于滚动。

避免使用工具提示

也许最重要的规则是永远不要使用提示作为优秀设计的替代品。如果按钮或其他对象要求用户继续检查提示以理解它，则设计很糟糕。改为修改设计。

此外，您不应在以下情况下使用工具提示：

当用户需要与提示的内容进行交互时。用户无法与提示内容进行交互，因为移动鼠标会使其消失。

用户在移动设备上运行您的应用或网站时。因为工具提示无法在触摸设备上很好地转换。是的，您可以设计触摸时激活的工具提示，但这不是您的用户最可预测的交互。如果您需要某个控件的更多信息，请使用虚线下划线清楚地表明用户可以与工作进行交互，但将其与链接区分开来。

良好的工具提示设计

好的工具提示具有以下属性：

容易被发现

工具提示的问题在于它们缺乏视觉线索 - 没有视觉线索，例如指针变化，表明对象有工具提示。但是用户仍然必须知道一个对象有一个提示，无论是通过过去的经验还是通过实验。

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

提供适当的信息

良好的提示包含简洁和有用的信息：

提示使用的弹出窗口非常适合短句和句子片段以及格式化文本。

  避免：大块文本难以阅读。图片来源：微软

  格式化文本更易于阅读和扫描。图片来源：微软

提示文字必须提供信息。它不应该是显而易见的，或者只是重复屏幕上已有的内容。如果您在工具提示中使用的文本是标签的冗余重复，则它毫无意义。

  此工具提示对您的用户没有帮助

包含静态信息

用户不希望工具提示从一个实例更改为下一个实例，因此他们不太可能注意到动态内容的更改，例如状态信息。

但是，此规则有例外 -  通知区域图标。这些图标表示状态，并且没有其他可用于状态文本的屏幕空间。

  工具提示提供通知区域图标的状态信息

有适当的位置

工具提示应放置在悬停的物体附近，如果可能的话，通常在指针的尾部或头部。但是，它们永远不应该通过模糊感兴趣的对象来干扰用户正在做的事情。

  避免：覆盖用户即将查看或与之交互的对象

始终将尖端放在物体的侧面，即使这需要指针和尖端之间的分离

结论

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

---------------------------------

喜欢请点赞分享并关注哦~~