对于UI中的输入框，有时候会需要额外的“提示框”来补充信息。因为输入框的标题往往很简单，因此意义容易模糊；或者有时需要向用户解释为什么需要他填写这项内容。

如果在电脑端，提示框很容易显现，一般用户用鼠标悬浮下就可以了。但是到了手机端，由于屏幕非常有限，而且没有鼠标悬浮的效果，就要好好考虑呈现提示框的最佳方法了。

易识别 易点击 易阅读

手机端的提示框要容易让用户识别、点击、和阅读。提示框的外观和位置都有很大影响。

提示图标的识别和点击

大的图标一定比小的图标更容易识别和点击。所以，只要提示框图标的大小不干扰到页面布局，就越大越好。小的图标会给用户的点击带来阻碍。

下面这个例子错误的地方就在于：提示框图标放在文本旁边，太小不容易点击，另外如果增大尺寸，又会扰乱页面布局。

所以好的选择是，将图标放在文本框内部的右侧。文本输入框的高度一般比标题大，所以这样提示框图标也更大，而且不会影响用户输入。

不过下面这个例子仍然有缺陷：图标跟周围对比度低，不容易识别。

所以，给图标添上色彩，会增强对比度，有“按钮”的感觉。

现在这个提示框图标既容易识别也容易点击。

提示框的阅读

提示框不仅要阅读起来顺畅，在视觉上还要跟相关的输入框联系起来。

因此最好采用一种跟输入框宽度一致的提示框。如果像下图左边一样，提示框出现在图标的正上方，就会出现被截掉的问题，因此要注意保持提示框跟文本框一致。

另外，为了保证视觉上提示框和输入框相关联，提示框要紧挨着输入框，并且指向图标，进一步表明这个提示框是属于哪个输入框的。

如果用户看完提示框内容，他们就会紧接着点击输入框输入内容。要确保用户点击其他位置时提示框消失，不妨碍他们的下一步动作。

提示框的视觉参考标准

在上文中的案例中我们提到，提示框的大小和位置是以输入框为基准的，这是因为输入框是最大、最显要的一个元素。以它为基准，可以创造视觉上的关联性和统一性。

那么对于其他组件元素，比如下拉菜单、勾选选项等，也可以作为视觉参照物。

如上图所示，提示框图标放在了下拉菜单的右边，并且高度一致。这样既不会干扰下拉菜单中的选项，在视觉上也显眼。

不同于一般输入框和下拉菜单的水平延伸，勾选组件在视觉上一般是垂直延伸的。因此我们不能把勾选组件的提示框放在右边，这样会干扰选项；也不能放在所有选项的下方，因为这种位置很容易被用户忽略。

因此好的方法是将提示框图标跟勾选项垂直水平上排列一致，并置于上方。这样视觉上产生关联性，用户也能根据问号和颜色识别出提示框的存在。

即使用户不小心点到了提示框，也不会产生负面的结果，只是让他们接收到帮助信息罢了。

提示框的目的

提示框的目的是让用户更顺畅地输入信息，但是并非所有用户都需要这层提示，因此提示框的设计要满足：需要提示的人能立刻找到提示，不需要的人则不必阅读多余的信息。

有些设计师会采用上图中的“提示”例子，即直接把信息放在文本标题下方。这样做的弊端就是，不仅破坏了页面布局，还会分散用户注意力。

用户的注意力是有限的，要保证用户体验尽可能顺畅，就不要让提示信息在默认状态下入侵整个页面布局。

总之，在为手机端设计提示框时，要做到顺畅而不突兀，明显而不干扰。

  本文译自：Anthony 的 How to Display Tooltips on Mobile Forms