Tooltips（工具提示）是强大而实用的设计模型，通过在用户需要时准确地提供额外信息来增强体验。本文将向你展示如何设计Tooltips来增强移动设计的体验，并阐述移动端Tooltips在哪些方面最有效。
理想状况下，移动设计应该是无缝的，无需技术文档、在线帮助或工具提示。但实际上，即使是最好的设计也可以从补充信息中受益。当用户点击移动用户界面 (UI) 中的图标、图像、超链接或其他元素时，工具提示会提供对应的补充信息。例如：
通过识别“实体填充”和“径向填充”功能，上面显示的工具提示使用户可以轻松找到所需的绘图功能。这些工具提示出现在适当的上下文中，并不突兀。即便是初次使用的用户，也可以轻松理解每个图标的含义，而对于有经验的用户也不容易分散其注意力。简而言之，设计师平衡了新老用户的需求。这种平衡让用户感受更加自然，是设计体验的自然延伸。
然而，许多Tooltips往往是事后才想到的，如下面的移动对比度检查器示例所示：
虽然关于对比度检查器的解释很清楚，但文本过长，并且涵盖了屏幕上的重要信息。但结果却是：这是一个笨拙的工具提示，它的内容解释非常混乱，用户理解起来很费劲。我们应该避免过于复杂的Tooltips内容提示，需要更加深入的思考和探讨。
如何设计有效的Tooltips
设计无缝融入整体设计的Tooltips，关键在于设计之初对其进行合理的规划。具体来说，设计有用的工具提示需要：
- 适当的时机
在草图和早期原型制作阶段注意工具提示和相关的设计技术。 - 正确实施
仔细考虑工具提示上下文、位置和清晰度。
时间
时序是指在设计过程中何时展现Tooltips。通过参考 Jake Knapp 开发的广泛使用的设计冲刺，我们可以确定设计过程中适合的阶段，对工具提示等设计元素做出决策。
Knapp 的 sprint 过程包括了绘制问题、绘制解决方案、选择一个解决方案、构建原型，然后测试该原型。简而言之，产生一个想法，构建它并测试它。下图显示了 Knapp 为期五天的设计流程。我已经在草图和原型日中添加了文本，批注设计师和开发人员何时应该开始考虑工具提示。
在考虑Tooltips时，草图是合乎逻辑的起点，因为随着布局和初步内容的形成，潜在的混淆点就会出现。因为最初的草图通常不包括完整或详细的内容，所以没有必要在这个阶段识别每一个可能的Tooltips，甚至包括所有指定的Tooltips。相反，此时的重点是识别 UI 的哪些部分，精心设计的Tooltips将帮助用户完成手头的任务或更容易理解当前的内容。
例如，字段标签上的工具提示可以帮助用户更轻松地填写表单，同时还可以减少数据输入错误。如果尚不清楚是否需要工具提示，只需包含一个带有问题的标注，如下图所示。
上面显示的标注提醒团队在构建原型之前进行讨论。在上面的“CVV”示例中，团队可能会选择一个用户角色代表，假定他并不熟悉财务术语和缩写。对于这个组，CVV 工具提示就可能很有用，并且可以很容易地整合到原型中，如下所示：
在设计过程的早期考虑对Tooltips和其他补充信息的需求，这也增加了开发有用和可用原型的机会。
实施
移动应用程序的日益复杂和移动设备上有限的空间对设计有效的Tooltips提出了重大挑战。
设计师可以通过关注以下方面来解决这个问题：
- 上下文
检查、检查和重新检查每个工具提示的上下文。有可能对你来说可能很明显的设计，却容易让初次使用的用户感到困惑。关注上下文的原则适用于 UX 和 UI 设计的所有方面。这对于Tooltips尤其重要，因为如果上下文不清楚，简洁可能会使用户感到困惑。 - 放置位置
Tooltips应突出且易于查找，但不应妨碍屏幕上的重要信息。 - 清晰和简洁
保持每个Tooltips以的清晰和简洁。正如许多编辑告诉他们的作者：“剪，剪，再剪。” 简要概括、浓缩。
以下示例中的Tooltips通过提供基本信息而不中断移动表单中的流程来满足这些标准。
由于移动设备上的显示空间有限，因此清晰、简洁和放置位置尤为重要。上面显示的 Mint 注册屏幕上的工具提示设计得很好。当用户点击信息图标时，它清晰、简洁并直接显示在邮政编码字段的下方，没有阻断表单操作流程。
下面显示的 Square 移动应用程序通过帮助双语用户选择他们喜欢的语言，是一个不错的Tooltips设计示例。
上面显示的“English/Español”工具提示清晰、简短且放置恰当。当用户点击标志图标或“英语”文本时，会出现一个工具提示，其中包含选择“英语”或“西班牙语”的选项。
放置得当的Tooltips通过在用户需要时提供简短、具体的解释来增强视觉设计。在上面的示例中，正在寻找其他多语言的用户可以马上知道他们可以在此网站上选择英语或西班牙语。语言工具提示可以帮助以西班牙语为母语的人，他们可能可以阅读英语，但在使用 Square 应用程序时会更自如地使用他们的母语。
实用性是必不可少的，但还不够。有效的Tooltips应该谨慎到用户几乎不会注意到他们的存在，伟大的设计是无形的。从这个角度来看，用户可能永远不会注意到设计。相反，他们会感到更轻松完成手头的任务。
谷歌地图应用程序上显示的工具提示很容易找到，但巧妙地集成到现有设计中：
- 静音/取消静音的图标出现在垂直的图标行中。
- 将这些图标放置在右侧使它们易于查看，而不会遮挡地图上的重要信息。
- 静音/取消静音图标采用与上方搜索图标相同的样式和配色方案。
此 Google 地图工具提示之所以有效，是因为：
- 上下文很清楚。开启声音的选项（在驶出车道之前）很有用，因为在驾驶时听方向比看手机更容易、更安全。
- 将静音/取消静音图标放置在一组现有图标中使其易于查看，而不会遮挡地图上的重要信息。
- 一个词的提示很简短，意思很清楚。
相比之下，下面 MyZone 健身移动应用程序中显示的Tooltips设计不佳。
虽然上下文很清楚，但 MyZone 应用工具提示存在问题：
- 这个位置很笨拙，因为它掩盖了重要信息。
- 提示文字很长，“Max HR”的解释很混乱。
为了适应这个冗长的文本和顶部令人分心的绿色条，Tooltips面积过于巨大。结果是一个不离散的Tooltips，它感觉不像是设计的自然延伸。
位置不佳和解释混乱并不是用户在使用移动Tooltips时遇到的唯一问题，另外常见的问题是多余的工具提示。下面的Tooltips示例是级联样式表 (CSS) 平滑动画插图的一部分。动画作品，插图本身清晰；问题是工具提示只是重复按钮文本。
在有关 CSS 动画的文章中，上图仅用于演示目的。尽管如此，带有清晰有用的工具提示的图像会更有用。像上面这种用法，Tooltips并没起到任何作用。
虽然多余的工具提示毫无用处，但出现在 UI 错误部分的工具提示尤其成问题，因为它们会分散用户对手头任务的注意力。
上面显示的屏幕包含一个大字体标题，其中包含关于增加收入的声明。然而，Tooltips指的是一个网格系统提示图标，据称它“提高了设计的价值”。充其量，这样的Tooltips和此屏幕上的主题之间存在微弱的联系。图标和工具提示可能很重要，但它们在此应用程序中的位置错误。
上下文是基本的用户体验原则，适用于所有设计元素。例如，针对廉价汽车购物者的网站或应用程序上的价值 150,000 美元的跑车图像看起来和感觉不协调，因为该图像不符合用户的期望。简而言之，该图像可能会混淆目标用户群。
上下文对于Tooltips特别重要，因为Tooltips的目的是阐明和提供附加信息。错误的Tooltips则相反，它会引起混乱。
在哪里使用工具提示
在决定在哪里使用工具提示时，上下文也是一个重要的考虑因素。因为Tooltips在放大精心设计的 UI 时效果最佳，所以它们在以下方面特别有效：
- 上下文帮助。
- 简要说明。
- 新功能。
上下文的帮助
当用户位于 UI 的特定部分时，会出现上下文帮助。以下示例来自 Airbnb。点击图标或“3 条评论”文本会显示一个工具提示，其中包含评论说明和一个链接，该链接将用户带到屏幕上显示的个人（在本例中为作者）的评论。
上面显示的工具提示信息丰富，因为它解释了评论在 Airbnb 应用程序中的含义，特别是在单个配置文件的上下文中。简而言之，上下文特定的工具提示出现在用户需要额外信息的准确时间点。
简要说明
当用户需要更多信息时，也应该出现说明性Tooltips。不同之处在于，移动应用程序的某些方面可能需要在每个步骤中进行解释，以确保用户可以完成手头的任务。例如：
IRS 应用程序这一部分中的每个工具提示都与特定任务配对，例如输入社会安全号码、出生日期或街道地址。由于每个工具提示都是特定于上下文的，因此用户可以轻松了解他们在每个步骤中需要做什么以及 IRS 为何需要此信息。
新功能
正如 Sofia Quintero 在“工具提示：改进功能的秘密武器”中解释的那样，工具提示是吸引用户注意新功能的有效方式，“为了宣传和宣传其新 GIF，Twitter 向用户显示全屏消息，然后引导他们如何使用传统的工具提示将 GIF 合并到他们的推文中。”
GIF 功能是几年前推出的，但它仍然是对新功能的有用展示。清晰干净，在不主导 UI 的情况下脱颖而出。新用户会看到它，而有经验的用户可以继续进行而不会分心，因为工具提示很好地集成到 UI 中并且不会覆盖其他屏幕元素。
结论
Tooltips通过在用户需要时准确地提供补充信息。通过在草绘设计和构建早期原型时考虑Tooltips。在实施过程中，确保Tooltips通过关注以下内容来帮助用户：
- 上下文
有效的工具提示会在用户需要时准确出现。 - 放置位置
工具提示应突出且易于查找，但不应妨碍屏幕上的重要信息。 - 清晰简洁查
看应用程序中的每个工具提示以确保其有意义，简洁概括。
对于精心设计的 UI 的Tooltips，请在 UI 中最合适的位置来使用它们，例如：
- 上下文帮助。
- 简要说明。
- 新功能。
Tooltips是一种功能强大的设计模型，其占用显示空间小，合理使用能增强移动设备上的用户体验。
