占位符文本可用作几乎所有的HTML输入类型的属性，被误导的设计师和开发人员不要犹豫。为复杂的表单提供文字帮助或者删除输入标签来提高美观度都颇具吸引力，然而，这样使用占位符文本会导致许多可用性问题。

本文将例举常见的不良做法，并提供替代方案。

将占位符作为标签

将标签放在输入框的上方，而不是将占位符用作标签。

设计师为了缩短表单长度或者减少视觉干扰，会将占位符文本作为输入框的标签。这种做法给短期记忆带来负担。用户在单击或键入时，标签就会消失，那么如果要再次显示标签，就必须删除该条目才行。

最好在输入区域的上方放置一个输入标签。空白的输入区域就是输入数据的提示——用户会寻找未填写的区域来确定他们需要采取行动。

用占位符作例子

将示例文字放在输入框的外部，而不是用占位符做例子

提供所需示例有助于用户理解请求。然而用占位符文本充当示例会引起一些问题：失焦，对已录入的内容感到迷惑，以及减少输入框的自解释性。作为替代，示例文字可以放在输入框的下方区域。

用占位符充当帮助文本

占位符不应该被用作帮助文本

占位符文本常被用来提供有关完成字段所需的更多信息。上面提过这种做法是不好的，它甚至因为文字的数量更加靠不住。受误导的设计师和开发人员经常犯这样的错——用占位符来传达冗长的信息。这个错误有许多替代方案，比如上图右边的三条示例。

将占位符用作辅助标签

将辅助标签作为标签，不要用占位符

像左图一样将占位符作为辅助标签是很有诱惑力的，但是使用常规的输入标签将提升表单的可用性。

尽早用提到过的一些方法删除／替代占位符，表单就几乎不会有可用性问题。

但是如果你必须要用占位符……

恰当的占位符使用方法：

占位符的颜色应该比键入文本更浅

浅色的键入文本可以传达其短暂性，并与录入文本区别开来

用户填写空白。一个空白输入框就意味着可以键入内容，占位符文本会减弱输入框的可操作性。尤其是当占位符颜色很明显时，用户会以为这是预置文本。

占位符应该在所有屏幕上都可见

当占位符文本颜色过浅时，可能在有些屏幕上就无法显示

占位符文本如果颜色太浅同样会导致问题，因为在某些屏幕上可能无法清晰展现，导致用户阅读困难。

用户单击输入框后，占位符不应该消失

让占位符文本保持到用户开始录入

消失的占位符文本给用户的短期记忆增加了负担，因为它省略了关键的帮助。

通常，在占位符文本被省略时，表单的可用性会增加。

欢迎关注公众号 1660，不仅有译文哦：