谷歌 Material Design 的文本框为什么没人用？

Material Design 那独特的下划线文本框，想必大家都有印象。

2017 年以前长这样：

确实很多产品都借鉴了这道横线，尤其是登录页面：

不过真正那个标题的动态效果，却几乎没有哪家真正使用的，哪怕 Google 自己都用得少。

例如，这是 Gmail 里的截图：

Material Design对文本框的研究

后来可能自己设计团队也觉得有问题，从 2016.11 到 2017.02 做了一个为期三个月的研究，期间一共完成涉及 158 人和 400 人的两次实验。

P.S. 这时间安排实名羡慕了……

最终得到了几点发现：

• 封闭的文本框 比下划线更容易让人理解。
• 这个文本框要么是 半透明填充加下划线 ，要么是 全透明加个边框 。
• 下划线和边框的 色彩对比 ，至少和背景相比要有 3:1。
• 标题 应该放在文本框的边界里面。
• 文本框应该有 圆角 。

于是，Material Design 里的文本框变成了这种：

然而，问题是现在依旧很少看到严格遵从 Material Design 文本框设计规范的产品。

哪怕是 Google 自己，也似乎是各个产品部门有自己的规范。

为啥大家都对 Material Design 的研究成果不在意？

仔细想想，我工作过的团队有可能用 Matreial Design 这套文本框吗？

显然不可能，因为：

1. 开发成本过高

浏览器、操作系统……很多都平台都有默认样式。

随随便便一行代码，一个文本框就出来了，基本都是一个框里面可以填内容：

如果要把标题加在文本框的左侧和顶部，都好说。

但要做成 Material Design 那种动态的，就麻烦死了。

虽然开发一套组件的成本未必那么高，但关键是以前那么多老页面都得换啊。

2. 体验价值相比不够高

一般来说，任何产品的大改版，哪怕做得再好都要被骂的，除非以前那版实在太烂。

因为人的天性就是这么守旧，不然为啥讨厌百度的人那么多却还是戒不掉呢？

大部分用户早就习惯传统文本框，突然改一个新样式，肯定不习惯。

本来公司开发更换新组件已经很不容易了，还要被用户骂，如何向领导交代？

3. 新规范未必比传统的好

虽说 Google 设计团队信誓旦旦花费 3 个月的时间搞研究，理论上应该没问题。

但是，从他们发布的文章来看，似乎根本没有测试传统的文本框！

或许，也有可能他们测试了传统文本框，但是因为希望让 Material Design 的组件样式更有特色，最终还是选择现在的样式。

如果真的测试了传统文本框，却不发布信息……只可能是因为新型的没有比传统文本框明显更好了。

N/N Group 的文本框研究

尼尔森的用户体验咨询公司，早在 2014 年就做过文本框的研究。

并且在 2018 年专门为 Material Design 更新了这篇文章。

他们最推荐的，就是这种很常见的文本框样式，尤其是下面哪种说明文字不消失的最保险（保守）。

其中尤其重点提到，不鼓励用占位符来替代标题，除非是搜索、登录等非常简单的场景：

原因有 7 点：

1. 消失的占位符文本会使用户的短期记忆紧张。
2. 没有标签，用户无法在提交表单之前检查他们的工作。
3. 当出现错误信息时，人们不知道如何解决问题。
4. 将光标放在表单域中时消失的占位符文本对于使用键盘导航的用户来说是很烦人的。
5. 用户容易忽视已填写字段的文本框（眼追踪发现）。
6. 用户可能会将占位符误认为是自动填充的数据。
7. 有时用户必须手动删除占位符文本。

而 Material Design 的文本框，就刚好触犯了 N/N Group 的忌讳，用占位符来当标题了。

虽然这个占位符并不会消失，只是在获取焦点后移动位置而已。

N/N Group 更新文章时表示，Material Desgin 的这种文本框还是无法解决第 5、6 两个问题，所以并不看好。

Material Design 确实是努力平衡的审美和实用，但是偏偏忽略了技术成本。

N/N Group 的研究更接地气，但是却无法像 Google 那样包装宣传自己获得一大票粉丝支持。

但是不论如何，我看 Material Design 的文本框，我看近年内很难普及。