组件创新与吐槽：浮动式 Label 文本框

主要观点总结

文章讨论了Google的Material Design中文本框的设计演变，包括其用户研究和设计改进。文章介绍了文本框设计的主要问题，包括识别性、查找能力和用户偏好等方面。通过用户研究，Google设计团队发现了一些设计原则，如文本框应具有矩形框体封闭结构、线条对比度等。然而，一些设计师对浮动式Label的设计持批评态度，认为这种设计存在隐患，而传统的文本框更易于使用和阅读。尽管美观也很重要，但将Label藏进框体可能会导致组件更难使用。

关键观点总结

关键观点1: Google Material Design的文本框设计经历了改进，以解决用户识别和使用的问题。

改进内容包括矩形框体封闭结构、半透明填充和线条对比度的使用等。

关键观点2: 通过用户研究，Google找到了改善文本框设计的关键指标，如可识别性、查找能力和用户偏好。

测试过程中使用了热力图等数据分析工具。

关键观点3: 一些设计师对浮动式Label的设计持批评态度。

他们认为这种设计存在隐患，可能导致用户难以记住文本框的用途、误认为是已输入的文字等问题。

关键观点4: 传统的文本框被认为是更推荐的设计方案。

它提供了一个清晰、随时显示的Label，且易于阅读和易用性。

关键观点5: Google的测试未包括传统的文本框方案。

一些设计师认为这反映了Google可能过于关注美学而忽略了可用性。

文章预览

在2017年之前，Google 的 Material Deisgn 文本输入框，设计特点是仅显示底部线条，大概如下图： 这个设计受到了诟病，如下图：如果段落中夹杂着一个文本框，用户会误以为是分隔线，并不会想到存在可输入的表单域。 针对这个问题，Google的设计团队在2016年11月至2017年2月进行了两项用户研究： ※ 研究课题之一 包含3项测试，外加一项偏好排名，共有158+位参与者。 测试项目：在以上界面中找到目标输入框，比如 Item L 然后填写并清空它们。 测试目标：将原始设计与三种探索方案进行比较，找到其中的最佳方案。 结果：得到了4种设计方案的视觉偏好排名。 ※  研究课题之二 包含2项测试，外加一项偏好排名，共有400位参与者。 测试项目：基于 Label 位置、对比度、边框样式……等7个维度，产生了140种不同的样式组合。在规定的时间内，测试者对这些 ………………………………