你或许没有注意到，但Material Design一直在进化和迭代。

刚好最近有人问起2017年的一次文本框改版，借此机会，我们跟大家分享一下这次设计背后的研究过程。

来源： 「贩卖知识」

为什么要重新设计文本框

用户在输入对话或者填写表单时都会用到文本框，但一些用户却根本不知道这些方框框还可以点击和交互，还以为就是个空白框。

旧文本框下面的横线很不显眼，不注意都看不到，看到了还以为是分隔线。提示标签和输入的文字也很容易跟正文搞混淆，特别是当文字排列很密集的时候。

来源： 「贩卖知识」

Material Design是为了方便用户点击——让文本易识别、易阅读、易理解，让用户迅速而正确地填写表单。

调研

为了提高设计易用性，确定哪些内容需要调整，我们的研究人员和设计团队在2016年底到2017年初招募用户进行了两项研究。

研究一包括有三个测试和一个优先排名，一共招募了158名用户。

来源： 「贩卖知识」

测试者被要求找到某个特定的文本框，比如“Item L”，然后点击空文本框，已经填写的文本框也要再点击一下。

研究一的目的很明确——比较原来的设计和三个改良后的设计。

给测试者提供多个设计，让他们依次点击简单、复杂、甚至是基于真实场景的表单，我们尝试找到一种最优的设计范式，而不是仅仅是设计一个漂亮的文本框。

在测试过程中，研究人员记录下测试者找到并且正确点击指定表单的时间。为了避免测试者找到其中的规律，我们特地打乱了表单的顺序。

在研究一的最后，测试者需要根据他们的视觉喜好对候选的四个文本框样式作一个优先排名。

研究二包括两个测试和一个优先排名，一共招募了400名用户。

研究一是为了找到大的设计方向，研究二则需要确定设计的具体样式。

在研究二中，我们设计了一个工具来测定每个文本框具体的样式。例如，改变文本框的样式、提示语的位置、对比度、边框样式，等等。

总共有7个样式类别，相互组合，可产生140多种不同的样式。

同样，做完20个问题的测试之后，用户也需要按视觉喜好给这些文本框样式排序。

来源： 「贩卖知识」

为了确定哪种样式是最有效、最符合用户习惯的，研究人员和设计团队从以下三个方面对用户行为进行了归类：

可识别性：正确点击数和错误点击数

可见性：用户找到并点击某个特定元素所花的时间

喜好：用户对文本框样式的喜好排名

测试没有时间限制，测试者可以通过邮件寻求帮助（尽管没人这样做）。团队通过热图搜集了用户点击的相关数据。

研究成果

新的文本框样式：矩形框+半透明填充+颜色对比+圆角+内部标签。

来源： 「贩卖知识」

两个研究的结果表明，最重要的元素是：

闭合的文本框：矩形比一条线好

文本框：要么是半透明的填充加底部横线、要么是全透明填充加不透明边框

颜色对比：文本框下划线跟背景颜色的对比度最低要求是3:1

提示标签需要放在文本框内部

文本框需要做倒角

来源： 「贩卖知识」 来源： 「贩卖知识」

结论：

以上就是这次设计改版的分享内容。

这次改版共有两个设计师、一个用户研究员、600名用户参与。

如今，从登录页到谷歌表单，这些文本框被应用在谷歌全线产品上。

使用上面的方法，我们不单单可以解决老版本可用性的问题，还能够一次性检测全部文本框的问题、验证某个样式有用的还是没用的。

我们给设计师提供的不仅是一个漂亮的文本框，而是一套解决方案——每一个都比以前的美观、可用性也比以前更强。