来源：Medium网站

作者：Tess Gadd

翻译：奥创

阅读时长：18min

除按钮外，文本字段可能是最常用的用户输入之一。当您登录Friendface，或在线订购Nicholas Cage枕头，或将您的银行详细信息发送到您的新在线笔友时，您可能会使用文本字段。

在后面的备忘单中，我们将查看预先确定的文本字段（也称为下拉列表）以及如何设置表单样式，但是现在，我们将查看旧的简单文本字段以及我们应该如何设置样式。

那么这个备忘单里有什么：

• 文本字段解剖
•  文本字段结构
• 常用文本字段样式
• 图标
• 文本字段状态
• 文本字段标签和提示文字
•   反馈
•   自动套用格式
•   触摸目标
•   辅助功能清单
•   文本领域名人堂
•   结束思想

1.文本字段解剖

文本字段具有多个位和片段，其中一些仅根据其所处的状态（默认，活动，输入等）可见。下图将所有内容分解。请记住，该领域的风格可能会改变，但它仍然可能具有大部分这些元素。

 文本字段解剖

2.文本字段结构

有两个主要的文本字段结构：标准和分离。

分离的文本字段传达所需的信息类型和格式。应该分开的字段的常见示例是电话号码，日期和一些代码。如果您决定使用标准字段，那么我肯定会建议将它们自动格式化（参见第8节）。

分离和标准文本字段结构的示例。

正如您在上面的示例中所看到的，分离的版本更好地传达了所需的数字格式，并且使用户更容易仔细检查他们所写的内容，因为人们倾向于记住组中的数字。

您可能还希望通过使用所需输入的长度作为容器的长度来向用户提示输入必须多长时间。

 具有两种不同长度的邮政编码文本字段的示例

3.常见文本字段样式

网络上出现了几种不同的文本字段变体，但在本节中，我将只重点介绍几种最常用的样式。

标准文本字段

这些文本字段是我们多年来在界面设计中使用的。虽然它们可能不是革命性的，但它们可以完成这项工作 - 在一天结束时，用户会关心这一切。

标准文本字段

我喜欢这些字段类型的两个方面是它们看起来像一个输入字段，并且标签始终可见。

带占位符标签的文本字段

这些文本字段看起来与标准类型非常相似，只是它们使用占位符文本作为标签。

带占位符标签的文本字段

虽然这是节省空间的一个很好的解决方案，但它对可用性来说并不好。经典示例是，如果您在单击输入字段后忘记了应该键入的内容。（完全披露 - 这从来没有发生在我身上，但是其他人似乎都非常关注）。

使用占位符标签比较标准文本字段和文本字段

然而，发生在我身上的是。如果您查看上图中右侧的示例，则无法确定姓氏字段中的第一个名称，而不删除类型以检查占位符标签。

专业提示：我一般主张不惜一切代价避免使用没有标签的输入字段。但是，我对登录界面并不介意，因为大多数人在线习惯了经典的电子邮件和密码布局。

水平对齐的标签

水平文本标签非常适合保存垂直空间。因此，您将看到它们在软件应用程序中更常用，而不是在线表单。

水平对齐的文本字段

但是，我倾向于避免使用它们，因为它们为用户创建了一个奇怪的流程。与阅读相反，你的眼睛必须在屏幕上曲折，这有点乏味。更糟糕的是：在非常长，间隔紧密的形式上，有时很难分辨哪个标签连接到哪个输入框。

水平和垂直对齐形式的比较

Material Design的行文本字段（旧）和填充文本字段（新）

Material Design不再讨论文本字段的“仅行”风格，但它仍然在互联网上广泛使用。这是一个时尚优雅的场地，没有任何装饰，使其在当时非常受欢迎。

行文本字段

我不确定为什么它不再在他们的模式库中，但我记得我的前同事说他发现用户不知道它是输入字段，因为它看起来不像传统输入或可点击。我很想知道是否有其他人有同样的问题，或者对此有更多了解。

无论原因如何，填充的文本字段似乎已经接管了。如果我的怀疑是真的，这将是有道理的，因为他们看起来更像传统的投入与背景填充。

 填充的文本字段

Material Design的概述文本字段

Material Design的概述文本字段是标准文本字段的现代版本。这种巧妙的设计可以节省空间并使标签始终可见。我是这个优雅的小文本领域的忠实粉丝。

概述的文本字段

4.图标

图标通常用于文本字段，但可能具有非常不同的含义，具体取决于图标本身及其位置。以下是表单字段中图标的最常见情况。

标准图标用法

您在使用表单时遇到的大多数图标都纯粹出于审美原因。这些图标将指示用户需要输入的内容; 例如，信封将指示电子邮件地址，geo-pin将指示地址，电话将指示电话号码等。 

审美图标用法

反馈图标

在尝试填写表单时，反馈图标非常适合向用户表明他们成功/不成功。你可能会说，“但我们可以用颜色来表示成功，”但是，唉，我的朋友们，红绿色盲的人将无法区分它们。因此，图标是指示成功或失败反馈的好方法。

反馈图标

清除图标

某些输入字段中会显示清除图标，并允许用户重置该字段。虽然这似乎是不必要的，但它实际上对触摸设备非常有帮助，因为它不像在桌面上那样容易删除输入的文本。

清除图标

语音输入

该图标向用户表明他们可以使用他们的声音输入字符。虽然我反对与我的手机通话，但此功能对于无法打字或有视力障碍的人非常有帮助。

语音输入图标

显示/隐藏图标

对于密码字段，隐藏字符有助于避免窥探，但您仍然可能想要检查您所写的内容，因此小显示/隐藏按钮非常有用。默认情况下，隐藏密码。

显示/隐藏图标

5.文本字段状态

文本字段必须更改其状态/外观，以便用户知道该怎么做。我们需要添加这些小视觉提示，以便朝着正确的方向推动用户。

默认和禁用

默认或活动状态是指您没有单击输入字段并且已准备好并等待操作。当用户知道它存在时，可以禁用输入字段，但由于业务或系统要求，不能与输入字段交互。

默认和禁用的文本字段

徘徊

与按钮一样，文本字段应向用户指示它们是交互式的或可点击的。大多数字段在悬停时会改变颜色或增加线条粗细。如果你将它悬停，它应该恢复到原始状态。

不要是n00b提示：触摸设备没有悬停状态。

焦点

焦点状态是指单击表单域并指示已选中它以便您可以开始键入。我们需要指出这种状态，以便用户知道他们可以开始输入，信息将出现在该框中，而不是出现在另一个框中。

 聚焦状态

我很少遇到的模式是焦点占位符。这里可能有一个没有占位符的标签，但是在焦点上，您可以看到一个占位符作为提示。不推荐，因为在我看来它不够“明显”，但值得知道是否有必要出现。

关注焦点占位符

我也听说过焦点状态被调出并被选中。

6.文本字段标签和提示文本

在本节中，我们将仅查看第一部分中描述的所有不同文本和标签元素。

标签

具有常量标签的文本字段是最容易访问的，因为标签使用户更容易仔细检查他们添加的信息是否正确。

文本字段标签

占位符标签

如前所述，我们也可以使用占位符作为标签。我个人避免使用它们，因为用户很难加倍检查他们是否已将正确的信息输入正确的方框。

文本字段占位符标签

标签和提示文字

占位符文本为用户提供了更多关于他们需要输入什么信息的上下文。有时似乎有点多余，但它可以帮助暗示需要什么。

标签和提示文字组合

助手文本

帮助文本有助于用户更好地了解他们需要填写的信息类型。这些额外信息通常由您的业务规则决定，可能非常特定于您的系统和产品要求。

带帮助文本的文本字段

工具提示图标

通过我们围绕隐私法进行的更新，向您的用户详细披露他们的信息将如何使用至关重要。虽然有几种方法可以做到这一点，但工具提示可以保持整洁。

工具提示不仅需要用于隐私; 他们还可以向用户提供有关他们需要填写的内容的更多信息（密码长度，日期格式等）。

带有工具提示的文本字段

在选择工具提示中应该包含的内容以及不应该选择的内容时，请问自己“不知道这些信息会使表单难以填写吗？” 如果答案为“否”，请将其设为工具提示，否则请考虑使用帮助文本。

最小字符限制

没有针对最小字符限制的设定规则，只要它与用户沟通，无论他们说得够多。

最小字符文本字段

就个人而言，我倾向于赞美用户，当他们有足够的角色时给予他们微妙的积极反馈，而不是在他们开始时给他们失败的反馈。

最大字符限制

顾名思义，最大字符限制与最小字符限制相反。因此，与确保有足够的字符相反，在这种模式中，我们必须让用户知道他们写得太多了。

最大字符文本字段

我最喜欢的最大字符限制文本字段是Twitter的。要了解我在说什么，请向下滚动到名人堂。

7.反馈

反馈状态是指用户需要被通知他们输入的文本是对还是错。例如，如果已使用用户名或密码不正确，或者您输入了有效的生日日期等。

提供反馈有两种方法; 两者都有用，具体取决于具体情况。在第一种方法中，你的阿姨Mildred告诉你，你应该多穿化妆。在第二种方法中，你问你的姨妈米尔德里德，如果你看起来没问题，她告诉你要多化妆。

所以，从这个比喻继续：

方法1：告诉用户他们在填写表格时犯了错误。

方法2：告诉用户提交时出错。

就我们目前而言，结果看起来都一样。

失败反馈

失败反馈可用于突出显示错误，例如空的必填字段，错误的密码，无效的电子邮件（例如，当电子邮件不包含“@”时），错误的电子邮件（当电子邮件不在数据库中时）等。

失败反馈

样式提示失败反馈：

•    利用反馈文本让用户知道问题的原因。
•   确保反馈文本清晰（AAA标准）。
•   我建议使用图标来指示哪些字段不正确，因为色盲人员可能无法区分红色。

正面反馈

积极反馈不像负反馈那样经常给出。我们可以对此进行长期的哲学辩论。（'也许交通警察应该在我们开车的时候告诉我们，而不仅仅是当我们不在时。'）但是，在这种情况下，我们希望大多数用户能够正确填写他们的详细信息，并且只有错误应该是个例外。

但是，您可以考虑将正反馈添加到系统可以检查的位置，如果用户知道某个信息是正确的，那么这将使应用程序的其余部分更容易。

成功/积极的反馈

设计积极反馈的提示：

•    使用图标，因为colourblind人可能无法区分绿色。
•    您只应在填写表格时看到积极的反馈，而不是在提交时。

电子邮件地址反馈无效（注册）

当用户注册时，系统必须确保电子邮件有效。我们希望用户输入正确的地址，以便我们可以联系他们，以便他们以后可以登录。这对任何注册过程都至关重要。

非可选：检查电子邮件是否遵循模式

每个电子邮件地址都遵循一种模式，“本地部分”后跟@符号，然后是“域”。有检查可以运行输入字段以确保模式正确。

电子邮件地址反馈无效

可选：使用确认字段仔细检查电子邮件地址

虽然我们经常看不到这种情况，但有些表格要求您确认电子邮件地址以避免错误和错误。

电子邮件地址与反馈不符

毕竟，如果用户在将电子邮件键入注册表单时出错，则重置它非常困难。

可选：发送验证电子邮件以确认地址

这种确认方法变得越来越流行，原因很明显：您可以知道地址是否真实，因为用户能够回复您发送的电子邮件。以下是电子邮件确认验证的标准流程。

•    用户注册并输入他们的电子邮件地址。
•    他们看到的下一页告诉他们按照通过电子邮件发送给他们的链接。
•    他们打开电子邮件帐户并打开电子邮件。
•   他们按照电子邮件中的链接打开浏览器页面，并提醒他们他们的电子邮件已经过验证。
•    他们现在可以继续访问该网站的其余部分。

错误的电子邮件地址反馈（登录）

如果用户输入了错误的电子邮件地址，或者该数据库不在数据库中，则系统必须让他们知道。通常，输入错误的电子邮件没有惩罚（例如有限尝试）。在某些用户输入错误电子邮件地址的情况下，您可能希望建议他们使用该地址重新注册。

错误的电子邮件地址反馈

用户名反馈不可用（注册）

创建一个用户名是最糟糕的，因为那里的人总是先到那里，所有很酷的人都已经被拿走了。（也许有一天我会在有人窃取用户名'croft'之前注册游戏，但它还没有发生。）所以你坐在那里尝试各种随机组合，直到其中一个可用。（克罗夫特，lcroft，laracroft，1aracroft，14racroft，14racroft - 成功！等等，为什么到底是我的名字14racroft？）

注册用户名反馈

继续我的用户名rant，如果用户在选择确认按钮之前可以使用他们想要的用户名，则需要始终与用户进行即时通信，否则这将成为一个繁琐的过程。虽然它可能有点老派，但系统推荐类似且可用的用户名有时会很好。

错误的用户名反馈（登录）

用户必须在此输入用户名才能登录其帐户。如果用户忘记了用户名，建议他们使用自己的电子邮件地址进行检索。

 错误的用户名反馈。

弱密码反馈（注册）

如果用户提供的密码不够强，则界面必须告诉他们。它还必须告诉他们为什么它不够强大以及如何使它更强大。

根据您的行业或业务要求，您可能具有特定的密码规则。例如，银行应该拥有比在线论坛更强的密码，因为它包含的信息非常重要。但是，标准密码模式为：8个字符长，至少有一个大写字母，一个小写字母，一个特殊字符和一个数字。话虽这么说，如果你做的比任何更复杂，你的用户会生气。毕竟，每个人都只使用一个密码吗？

反馈显示用户如何改进他们的密码

如果您的用户正在努力改进他们的密码，您应该非常清楚地告诉他们如何加强密码。有些人在帮助文本中执行此操作，有些在工具提示中执行此操作 - 无论解决方案如何，都要让用户知道。

密码强度指示器

有些网站向用户表明他们的密码有多强，具体取决于密码的复杂程度。如果想要一个很酷的方法，请在下面的名人堂部分查看Dropbox的解决方案。

 允许用户检查其密码的文本字段

您的用户可能还想确认他们的密码 - 特别是看到它被隐藏了。一种方法是添加显示/隐藏符号。另一个是让他们两次写出密码。虽然确保密码正确非常重要，但我个人认为确保电子邮件地址正确更为重要，因为您可以随时重置密码，而不能使用错误的电子邮件地址。

错误的密码反馈（登录）

密码字段通常将输入的文本显示为非字母数字符号。（这是为了阻止你的爱管闲事的配偶凝视你的肩膀，看看你的Facebook登录细节是什么。）

登录密码只应在用户点击提交后显示错误。在此之前你不想告诉别人他们的密码错误，因为你只会让坏人（或你的配偶）变得容易。

密码尝试错误的反馈

您可能希望限制用户可以输入的错误尝试次数 - 尤其是在信息敏感的站点上。

8. Autoformat

自动格式化文本框有助于用户输入正确的值，并通过正确分组字符帮助他们检查输入的内容是否正确。

货币

根据您的货币和国家/地区，您可能会以不同的方式写出长数字（1 000.00 vs 1,000.00 vs 1000,00），因此创建一个标准化长数字格式的输入会很有帮助 - 特别是在处理货币时。

自动格式化货币的文本字段 来自https://webdesign.tutsplus.com/tutorials/auto-formatting-input-value--cms-26745（2019年 7月7日）

这些输入字段也应该阻止您使用字母和标点符号。

电话号码

根据您所在的地区，您可能会以不同的方式格式化电话号码 - 即使您的所有用户来自同一个国家/地区，用户也可能无法确定是否要添加国际或地区代码 - 因此拥有自动格式化的电话号码确实有帮助。

 自动编码电话号码的文本字段| 来自https://nosir.github.io/cleave.js/（2019年 7月7日）

对于类似电话号码的内容，您还可以使用单独的字段强制用户以正确的格式输入数字，如本文第一部分所述。

日期

不同的国家/地区以不同的方式写日期（DD / MM / YYYY与MM / DD / YYYY对比YYYY / MM / DD），因此在下面的示例中，将模式写在焦点占位符文本上确实很有帮助。

带有autoformatting和焦点提示文本的文本字段| 来自https://nosir.github.io/cleave.js/（2019年 7月7日）

文字掩蔽

文本屏蔽类似于autoformatting但有一个加号：它不仅可以正确地格式化值，还可以指示您需要输入多少。

字段与文本掩蔽| 图片来自Josh Morony

我肯定会建议查看Josh Morony的网站，以了解有关文本屏蔽的更多信息。

根据您的需求，您可能需要为不同的原因autoformatted文字，如信用卡号码，许可证代码等。有了这些autoformatted只是让这一切容易得多。

9.触摸目标

触摸屏的输入字段大小（点击）

一个MIT触摸实验室研究表明，用于触摸屏的手指的部分是8-10mm的，所以最低目标尺寸需要10mm以上，如果你想避免用户做出更大的粗手指失误。

材料设计 表明触摸目标应为48dp x 48dp，不同触点之间的距离为8dp。

虽然我找不到有关iOS设计系统目标尺寸的任何文档，但一般的理解是其最小目标尺寸为44 x 44pts。

如果你正在努力维度和使用的尺寸，我强烈推荐Zac Dickerson 关于可访问性的故事。

桌面的输入字段大小（单击）

由于桌面上的光标小于触摸屏上的手指，因此可以使触摸目标更小。但是你想要吗？

10.辅助功能清单

你做到了！您已经完成了文本字段婴儿的设计，现在是时候将它发送给开发人员了。但是等等！...你检查过你的文本字段是否可以访问？

•    您的文本字段是否符合WCAG AAA颜色对比标准？有些设计师比较使用AA标准，但我对此非常偏执。我目前最喜欢的对比度检查器是WebAIM。
•   您的文本字段（包含标签）是否大于44px的触摸屏？我喜欢将标签包含在触摸区域中，因为如果单击标签，容器仍应切换到焦点状态。
•    标签始终可见吗？
•   相关字段是否包含有用的反馈文本（“错误”与“您的电子邮件格式不正确”）？

如果您对开发感兴趣，最好了解屏幕阅读器的工作原理。在这里了解更多。

此部分是在发布后创建的。谢谢你牛逼的建议吧！

11.文字场名人堂

在本节中，我对可爱的互动和文本领域的掌握感到震惊。如果你有任何建议或喊叫，请让一个女孩知道，对吗？

推特

我喜欢这个最大字符限制字段。它以图形方式显示您与限制的接近程度 - 然后在您达到限制之前向下计数 - 然后突出显示字符数。辉煌。爱它。周围的五人。

Twitter的最大字符限制输入| 从Twitter捕获（2019年7月6日）

Material Design的浮动标签

Material的浮动标签非常好看。它不仅始终保持标签，而且它也是如此优雅的动画。性感。

Material Design的带浮动标签的输入字段| 捕获材料设计（2019年7月7日）

Dropbox的

Dropbox的“创建密码”字段为用户提供了密码安全性的指示。而且，亲爱的读者对这个故事，他们也构建了它，以便有色盲的人仍然可以阅读它。我也喜欢他们如何给用户提供一个安全性较低的密码，如果他们想要的话。这种简单而人性化的解决方案。

Dropbox的密码字段| 图片来自https://littlebigdetails.com | 通过rammionline