Material Design 文本字段设计不当

将标签放在 Web 表单中的什么位置在早期，我们讨论了左对齐标签与顶部对齐标签。这些天我们谈论浮动标签。让我们探讨一下为什么它们不是一个好主意，以及使用什么来代替。
我设计表格已有 20 多年了，我已经为像Boots、Just Eat和Gov.uk这样的大型组织测试过其中的许多表格。与表单有关的一个话题是：标签放在哪里。在早期，我们讨论了左对齐标签与顶部对齐标签。

这些天的重点更多是关于替换标签和浮动标签的 whatsapp 手机号码列表 占位符。后者从输入内部开始。当用户开始输入时，标签“浮动”起来为答案腾出空间：

 Material Design 文本字段使用浮动标签模式。（大预览）
有些人认为浮动标签是最好的，因为Google 的 Material Design使用它们。但在这种情况下，谷歌是错误的。

相反，我建议使用具有以下特征的传统文本字段：

输入外的标签（告诉用户要输入什么），
一路都有明显的边界（以明确答案的位置）。
 常规文本字段
在这篇文章中，我将解释为什么我总是推荐传统的文本字段，以及为什么 Google 在 Material Design 中使用浮动标签是错误的。




浮动标签比普通的替代品更好，但它们仍然存在问题
浮动标签旨在解决一些常用替代方法的问题：占位符标签。这就是标签放置在输入中但在用户开始输入时消失的地方：

 占位符标签文本字段。
通过我的工作亲眼看到很多人与表单交互，我知道占位符标签是有问题的。

这是因为，例如，他们：

一旦用户打字就会消失，这会让人更难记住输入的内容，尤其是对于有认知障碍的用户；
可能被误认为是实际答案，导致用户不小心跳过该字段；
变灰表示它是标签而不是答案——但这会使它更难阅读。