​理想情况下，移动设计应该是无缝的，且不需要技术文档、在线帮助或工具提示。实际上，即使是最好的设计也可以从补充信息中获益。当用户点击移动用户界面（UI）中的图标、图像、超链接或其他元素时，工具提示会提供此补充信息。例如：

简洁的工具提示说明了每个绘图图标的用途。（图片来源：Sketchbook移动应用，作者添加了金色箭头）

通过识别“实心填充”和“径向填充”功能，上面显示的工具提示可以让用户很容易地找到他们需要的绘图功能。这些工具提示出现在适当的场景中，不会显得突兀。初次使用的用户可以轻松理解每个图标的含义，而有经验的用户则不太可能会觉得这些工具提示会让人分心。简而言之，设计师平衡了新老用户的需求。这种成功平衡的结果是一系列的工具提示，用户将其视为设计体验的自然延伸。

然而，通常情况下，工具提示是事后才考虑的，如以下移动对比检查器示例所示：

冗长的工具提示文字会掩盖屏幕上的重要信息。（图片来源：Stark）

尽管对对比度检查器的解释很清楚，但是文本太长，并且覆盖了屏幕上的重要信息。其结果是一个笨拙的工具提示，其混淆程度不言而喻，避免麻烦的工具提示需要思考和计划。

设计与整个设计无缝配合的工具提示的关键是在设计过程的早期就对其进行规划。具体来说，设计有用的工具提示需要：

适当的时间安排

在草图和早期原型设计阶段要注意工具提示和相关的设计技术。

正确实施

仔细考虑工具提示的环境、位置和清晰度。

定时

定时是指在设计过程中何时考虑工具提示。通过参考由Jake Knapp开发的广泛使用的设计sprint，我们可以确定设计过程中的正确阶段，以便对诸如工具提示之类的设计元素做出决策。

Knapp的冲刺过程包括：绘制问题、绘制解决方案，选择一个解决方案、构建原型，然后测试该原型。简而言之，就是产生一个想法、建立它，并对其进行测试。下图展示了Knapp为期五天的设计冲刺过程。我已经在草图和原型中添加了文本，以显示设计师和开发者何时应该开始考虑工具提示。

Google Ventures Design Sprint。（图片来源：The Sprint Book，作者添加了金色文字）

在考虑工具提示时，草图是一个合理的开始，因为随着布局和初步内容的成形，潜在的困惑点也会出现。由于初始草图通常不包含完整或详细的内容，所以在此阶段不必标识每个可能的工具提示，甚至不必包括所有指定的工具提示。更确切地说，关键是要确定UI中的哪些部分，经过精心设计的工具提示将帮助用户完成手头的任务或更容易理解内容。

例如，字段标签上的工具提示使填写表单变得更加容易，同时还减少了数据输入错误。如果还不清楚是否需要工具提示，只需添加一个带有问题的标注，如下图所示。

表单的草图，带有指向可能有用工具提示的字段的标注（Author’s drawing）。

上面显示的标注可以提醒团队在构建原型之前进行讨论。在上面的“ CVV”示例中，团队可能会决定一个角色代表不熟悉财务条款和缩写的用户。而对于这类人群来说，CVV工具提示可能会有用，并且可以轻松地合并到原型中，如下所示。

原型阶段，信息图标和工具提示处于悬停状态。（图片来源：作者手绘）

在设计过程的早期考虑到对工具提示和其他补充信息的需求，增加了开发有用且可用的原型的机会。

执行

移动应用程序日益复杂，而移动设备上的空间有限，这对设计有效的工具提示提出了重大挑战。

设计师可以通过以下方式来应对这一挑战：

环境

检查、检查并重新检查每个工具提示的环境。对于设计师来说，显而易见的东西很容易让第一次使用的用户感到困惑。关注情境的原则适用于用户体验和用户界面设计的所有方面。对于工具提示来说，这一点尤其重要，因为如果上下文不清楚，它们所必需的简洁性也会让用户感到困惑。

位置

工具提示应突出显示且易于查找，但不应妨碍屏幕上的重要信息。

清晰度和简洁性

编辑每个工具提示以确保其清晰度和简洁性。正如许多编辑告诉他们的作者:“删减，删减，再删减。“在早期迭代中编写较长的工具提示文本是可以的，只要你记得不断编辑和压缩以保持清晰。

以下示例中的工具提示通过提供基本信息而不破坏移动表单的流程来满足这些条件。

字段级别的工具提示放置得很好，很容易理解（图片来源：Mint移动应用程序）

由于移动设备上的空间有限，因此清晰、简洁和位置是非常重要的。上面显示的Mint注册界面上的工具提示设计得很好。它清晰、简洁，当用户点击信息图标时，它会直接出现在邮政编码字段的下方。

下面显示的Square移动应用通过帮助双语用户选择他们喜欢的语言，提供了另一个很好的工具提示设计示例。

显示Square移动应用语言选项的工具提示（图片来源：Square移动应用）

上面显示的“英语/西班牙语”工具提示是清晰、简短且位置正确的。当用户点击标志图标或“英语”文本时，会出现一个工具提示，带有选择“英语”或“Espanol”的选项。

放置恰当的工具提示可以在用户需要时提供简短、具体的解释，从而增强视觉设计。在上面的例子中，寻求其他语言信息的用户立即知道他们可以为这个网站选择英语或西班牙语。语言提示可以帮助母语为西班牙语的用户，他们可以很好地阅读英语，但用母语使用Square应用会更舒服。

实用程序是必不可少的，但还不够。有效的工具提示应该谨慎到用户几乎不会注意到它们的存在。只有当工具提示不存在时，用户才会想念它们。这种工具提示方法是长期以来认为优秀设计是无形的观点的一个例子。从这个角度来看，用户永远不会注意到设计，相反，他们会感到全身心投入，很容易地完成手头的任务。

下面的工具提示在谷歌地图应用程序很容易找到，但却巧妙地集成到了现有设计中：

静音/取消静音的图标出现在图标的垂直行中

这些图标在右边的位置使它们很容易看到，而不会模糊地图上的重要信息

静音/取消静音图标遵循与上面搜索图标相同的风格和配色方案

Google Maps移动应用程序：当用户点击声音图标从静音变为取消静音时，将显示“取消静音”工具提示。（图片来源：Google Maps移动应用程序，作者添加的金色箭头、突出显示和粗体文本）

该Google地图工具提示之所以有效，是因为：

背景很清楚。选择打开声音(在驶出车道之前)是很有用的，因为开车时听指示比看手机更容易、更安全。

在一组现有的图标中放置静音/取消静音图标，可以很容易地看到，而不会模糊地图上的重要信息。

一个单词的工具提示很简短，含义很明确。

相比之下，下面MyZone fitness手机应用的工具提示设计不当。

点击“ 175 Max HR”会显示右上方的工具提示。（图片来源：MyZone移动应用，作者添加了金色亮点）

虽然背景很清楚，但MyZone应用程序提示存在一些问题：

该展示位置很笨重，因为它掩盖了重要的信息

工具提示文本很长，对“Max HR”的解释令人困惑

为了适应这个冗长的文本，并在顶部显示分散注意力的绿色条，工具提示是不必要的。结果是一个不是离散的工具提示，它感觉上不像是设计的自然延伸。

不良的放置和令人困惑的解释并不是用户使用手机工具提示时遇到的唯一问题。一个令人惊讶的常见问题是多余的工具提示。下面的工具提示示例是层叠样式表(CSS)平滑动画的一部分。动画作品及插图本身清晰;问题是工具提示只是重复按钮文本。

冗余工具提示：工具提示文本重复按钮标签文本。（图片来源：Omar Dsooky）

在有关CSS动画的文本中，上面显示的插图仅用于演示目的。尽管如此，图像将更有用的清晰和有用的工具提示，这里使用的工具提示是无用的。

尽管多余的工具提示没有用，但出现在UI错误部分的工具提示尤其有问题，因为它们会分散用户对手头任务的注意力。

工具提示脱离背景。（图片来源：Danta Griffthy）

上面显示的屏幕上有一个大字体的标题，上面有一份关于增加收入的说明。然而，工具提示是指网格系统提示图标，该图标据说“可以提高设计的价值”。在最好的情况下，工具提示和屏幕上的主题之间存在微妙的联系，从而增加收益。图标和工具提示可能很重要，但它们在这个应用程序的错误位置。

更广泛地说，环境是用户体验的基本原理，适用于所有设计元素。例如，在一个面向廉价汽车消费者的网站或应用程序上，一辆价值15万美元的跑车的图像看起来和感觉都不协调，因为图像不符合用户的期望。简而言之，图像可能会混淆目标用户群。

背景对于工具提示特别重要，因为工具提示的目的是阐明并提供其他信息。错误的工具提示会产生相反的效果，它会导致混乱。

在决定在何处使用工具提示时，环境也是一个重要的考虑因素。由于工具提示在放大设计良好的UI时最有效，因此在以下方面特别有效：

上下文帮助

简要说明

新功能

上下文帮助

当用户位于用户界面的特定部分时，将显示上下文帮助，以下示例来自Airbnb。轻触图标或“ 3条评论”文本将显示一个工具提示，其中包含评论的说明以及一个链接，该链接可将用户带到屏幕上显示的个人（在此示例中为作者）的评论。

Airbnb工具提示说明了评论的含义。（图片来源：Airbnb移动应用程序）

上面显示的工具提示很有用，因为它解释了评论在Airbnb应用中的含义，尤其是在单个配置文件的上下文中。简而言之，上下文相关的工具提示会在用户需要其他信息时立即显示。

简要说明

当用户需要更多信息时，也会出现指导性的工具提示。不同之处在于，移动应用程序的某些方面可能需要在每个步骤中进行解释，以确保用户可以完成手头的任务。例如：

分步工具提示说明。（图片来源：美国国税局移动网站，作者添加了金色亮点）

IRS应用程序这一部分中的每个工具提示都与特定任务配对，例如输入社会保险号、出生日期或街道地址。因为每个工具提示都是特定于上下文的，所以用户可以轻松地了解他们在每个步骤中需要做的事情，以及为什么IRS需要此信息。

新功能

正如Sofia Quintero在“工具提示”中解释的：“工具提示是改进功能发现的秘密武器，工具提示是吸引用户注意新功能的有效方法，“为了推广和宣传其新GIF，Twitter在向用户轻轻引导之前向其显示了全屏消息他们了解如何使用传统的工具提示将GIF纳入其推文。”

Twitter移动应用程序，其工具提示显示了当时新的“ GIF”功能。（图片来源：Tooltips，作者添加的金色标注）

GIF功能是在几年前引入的，但是它可以作为新功能的有用展示。它的清晰和干净，突出而不占主导地位的用户界面。新用户将看到它，而有经验的用户则可以继续进行而不会分散注意力，因为该工具提示已很好地集成到UI中，并且不会掩盖其他屏幕元素。

工具提示可通过在用户需要时准确提供补充信息来放大移动用户界面。在草绘设计和构建早期原型时，请考虑工具提示的功能。在实施过程中，确保工具提示通过关注以下方面来帮助用户：

上下文

有效的工具提示会在用户需要时出现

位置

工具提示应突出显示且易于查找，但不应妨碍屏幕上的重要信息

简洁明了

查看应用程序中的每个工具提示，以确保其有意义。

工具提示是一种功能强大的设计模式，如果使用得当，它可以增强手机设计。

文中部分图片来自网络，如侵权，请联系删除

想要了解汽车更多内容，就留言联系我们吧！

来源：Eric：Designing Better Tooltips For Mobile User Interfaces