您应使用什么界面元素向用户提供有关表单字段的有用信息？

如果你在想一个工具提示，你是对的。

例如，当字段标签具有用户不熟悉的模糊术语时。或者，当您要求提供比平常更加个人化的信息并需要解释为什么需要时。

在桌面上，工具提示很容易显示，因为用户有一个鼠标悬停和充足的屏幕空间。这允许用户轻松触发并阅读工具提示。

但在移动设备上，这更具挑战性，因为屏幕空间有限，没有鼠标悬停。这引出了在移动表单上显示工具提示的最佳方式是什么。

易于点击，点按和阅读

移动工具提示必须始终易于识别，点按和阅读。这将取决于图标的外观以及如何定位工具提示。

点击和点击图标

较大的图标比较小的图标更容易点按。不仅如此，它们也更容易被发现。这意味着工具提示图标必须尽可能大，而不会破坏表单布局。一个太小的图标会让用户难以发现和点击。

下面的示例显示了如何将图标放在标签旁边不是一个好主意，因为它会使图标太小。你可以增加它的大小，但这会破坏表单布局和与标签的对齐。

最好的选择是将图标放置在右侧的文本框中。这允许图标跨越字段的高度，该字段比字段标签高得多。它也处于不会干扰用户输入的位置。这个图标现在已经足够大了，但由于它的低对比度风格，它仍然很难找到。

不要使用大纲图标，而应使用外观和感觉像按钮的实心图标。为了加强它的可供选择性，给它一个蓝色，区别于其他所有中性色的形式元素。

现在，工具提示图标很容易找到并点按。接下来我们必须确定的是，激活后，工具提示文本将如何显示。

阅读工具提示文本

工具提示文本不仅需要易于阅读，而且应该可视化地与字段及其标签相关联。

为此，请使用横跨文本字段宽度的工具提示气球。如果允许工具提示直接出现在图标上方，则可能会被屏幕边缘切断。重要的是工具提示气球匹配字段宽度并与其对齐，所以这不会发生。

工具提示气球应放置在字段和标签上方以实现强烈的视觉关联。用户应该能够阅读工具提示文本并同时查看相关字段和标签。气球尖端应指向图标以指示触发工具提示的内容。

一旦用户完成阅读工具提示，他们将点击文本字段来输入他们的输入。当用户点击气球外的区域时，使工具提示消失，允许他们恢复任务。

使用这个名为Balloon.css的工具，只需几行CSS就可以将工具提示添加到表单中，而不需要使用Javascript。

表单元素是可视锚点

请注意，我们使用文本字段的高度和宽度来确定工具提示图标和气球的大小和位置。这是因为文本字段是用作工具提示视觉锚点的最大且最重要的元素。

我们不是随意选取工具提示的大小和位置，而是让文本字段为我们指定它。这将在工具提示和文本字段之间建立强烈的视觉关联和统一性。

其他表单元素

您可能想知道如何在其他表单元素上显示工具提示，例如下拉列表，复选框和单选按钮。您将遵循与文本字段相同的原则，并让表单元素成为大小和位置的锚点。

在上面的示例中，您可以看到工具提示图标位于下拉列表的右侧，并且尺寸与其高度相同。这样做不会干扰选项标签，但对用户仍然可见。下拉列表的视觉形式决定了工具提示图标的大小和位置。

单选按钮的工具提示图标位置将与文本字段和下拉列表不同，因为它们向不同的方向展开。文本字段和下拉列表水平扩展，但单选按钮垂直扩展。

因此，我们不能将工具提示图标放在单选按钮的底部，因为这会使用户看不到它。它需要放置在顶部以获得高可见度。

我们也不能将工具提示图标放在单选按钮的右侧，因为它会干扰选项标签。将工具提示图标放置在文本字段和下拉列表的右侧是可能的，因为它不会干扰用户输入或选项标签。

工具提示图标符合单选按钮的形状，以实现视觉相关性和均匀性。同时，由于问号图标，帮助标签和不饱和蓝色，用户可以将其与单选按钮区分开来。

即使用户在事故中点击了工具提示图标，他们的行为也不会有负面影响。他们只会收到帮助他们填写表格的有用信息。

工具提示的目的

工具提示提供了有用的信息，可以减轻用户对表单字段的摩擦。但并非所有用户都需要这些信息来填写表单。当他们需要时，应该能够立即访问它。那些不应该不需要阅读的人。

一些设计师可能会建议替代工具提示是在字段标签下方显示信息。问题在于它不仅打破了表单布局，而且在不需要时也会窃取用户的注意力。

在执行任务时，用户注意力是有限的资源。窃取它可能会阻止用户并放慢他们的任务性能。除非用户调用，否则工具提示应该以尊重的方式显示，而不是侵入屏幕空间。

当我们了解工具提示的目的时，没有鼠标悬停和屏幕空间限制不成问题。工具提示是帮助。因此，它们应该对用户可访问和尊重。不要让它以用户的方式得到，但不要让它超出手臂的范围。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

小结：最近在做B端项目时遇到的问题，WEB端很容易就可以加的提示，在空间过小的移动端就遇到了这个难题，希望对你也有帮助

原文地址：http://uxmovement.com/mobile/how-to-display-tooltips-on-mobile-forms/

我的追波链接：https://dribbble.com/scjiang