除了按钮，文本框可能是最常用的用户交互之一。当你登录Friendface，或在线订购尼古拉斯凯奇(Nicholas Cage)枕头，或将你的银行信息发送给新的在线笔友时，你都可能会使用到文本框。
在后面的备忘录中，我们将讨论预设文本框(也称为下拉列表)，以及如何对表单进行样式设置，但现在，我们将讨论一些简单的文本框以及如何对它们进行样式设置。
这个备忘录包含以下内容：
1. 分析文本框
2. 文本框结构
3. 常见文本框样式
4. 图标
5. 文本框状态
6. 文本框标题和提示信息
7. 反馈
8. 自动套用格式
9. 触摸屏范围
10. 可用性检查表
11. 文本框名人堂
1.分析文本框
文本框有多个元素组成部分，其中一些仅在它处于某种状态(默认、活动、输入等)时才可见。下面的图片把这一切都分解了。文本框的风格可能会变化，但仍然会包括这些元素中的大部分。
Text field anatomy
2.文本框结构
有两种主要的文本框结构:标准和分组。
分组文本框传达需要的信息及其形式，常见需要分组的文本框的例子如电话号码、日期和一些区号编码。如果您决定使用标准格式，那么我肯定会建议让它们自动格式化(参见第8节)。
Example of a separated and standard text field structure.
正如您在上面的例子中所看到的，分组的版本可以更好地传达所需的数字格式，而且用户可以更容易地重复检查他们所写的内容，因为人们倾向于分组记忆数字。
您还可以根据输入内容的长度设置容器的长度来提示用户。
Example of a zip code text field with two different lengths.
3.常见文本框样式
web上出现过几种不同的文本字段变体，但在本节中，我将突出显示几种最常用的样式。
标准文本框
这些文本框我们已经在界面设计中使用多年了，可能不具备革命性，但很实用——无论如何，这才是用户真正关心的。
Standard text field
我喜欢这些字段类型的两个原因是它们看起来像一个输入字段，并且标题总是可见的。
带提示文本的文本框
这些文本框除了用占位符文本当作标签以外，其他看起来标准样式很相似。
Text field with a placeholder label
虽然这是一个节省空间的很好的解决方案，但对于可用性却不是很好。最典型的例子是，一旦单击输入框，就会忘记应该输入什么。(这从未发生在我身上,但这似乎是其他所有人都担心的)。
Horizontally aligned text field
然而，我遇到的情况是这样的。如果你按照上图右边的示例，你不删除填写内容以检查占位符标题，就不能确定是否把名字字段写在了姓氏的框里。
专业提示:我通常提倡极力避免使用没有标题的输入框。不过，我不太在意登录界面，因为大多数在线用户都习惯了经典的电子邮件和密码布局。
标题和输入框水平对齐
标题水平对齐对于节省垂直空间非常有用。正因为如此，您将看到它们在软件应用程序中使用得比在线表单更频繁。
Horizontally aligned text field
然而，我倾向于避免使用它们，因为它们为用户创建了一个奇怪的流。相对于向下阅读，你的眼睛必须在屏幕上曲折移动，这有点沉闷乏味。更糟糕的是:对于非常长的、紧密间隔的表单，有时很难分辨哪个标题对应哪个输入框。
Comparison of horizontally and vertically aligned forms.
Material Design的线条输入框（老）和填充输入框（新）
Material Design不再提倡“仅线条”样式的文本框，但它仍然在互联网上广泛使用。这是一个时尚优雅的文本框，没有任何装饰，使它在当时非常受欢迎。
Line text field
我不确定为什么它不再在他们的规范库中，但我记得我的一位前同事说，他发现用户不知道它是一个输入字段，因为它看起来不像传统的输入框或是可点击的。
我很想知道是否有其他人也有同样的问题或知道更多关于这方面的事情。
不管什么原因，填充文本框似乎已经替代了老的样式。如果我的怀疑是正确的，这将是有意义的，因为他们看起来更像传统的有填充背景的输入框。
Filled text field
Material Design带边框的文本框
带边框的Material Design文本框是对标准文本框的时尚处理。这种巧妙的设计节省了空间，并使标题始终可见。我非常喜欢这个优雅的小文本框。
Outlined text field
4.图标
文本框会经常使用图标样式，但是根据图标本身和它的位置会有非常不同的含义。下面是表单字段中图标最常见的情况。
图标标准使用方法
使用表单时遇到的大多数图标纯粹是出于美化原因。这些图标将指示用户需要输入什么;例如，信封表明电子邮件地址，定位标表明地址，电话图标表明电话号码，等等。
Aesthetic icon usage
反馈图标
反馈图标可以很好地向用户显示他们在试图完成表单时成功了/失败了。你可能会说，“但是我们可以用颜色来表示成功，”但是，唉，我的朋友们，患有红绿色盲的人是分辨不出来的。因此，图标是显示成功或失败反馈的好方法。
Feedback icons
清除图标
一些输入框中会出现清除图标，允许用户重置该字段。虽然这看起来似乎没有必要，但它实际上对触摸设备非常有用，因为在触摸设备上，删除已输入的文本并不像在桌面设备上那样容易。
Clear icon
语音输入
此图标指示用户可以使用语音输入字符。虽然我讨厌对着手机说话，但这一功能对那些不能打字或有视力障碍的人确实很有帮助。
Voice input icon
显示/隐藏图标
对于密码字段，隐藏字符有助于避免窥探，但是您仍然可能想检查您所写的内容，因此显示/隐藏按钮非常有用。默认情况下要隐藏密码。
Show/hide icon
5. 文本框状态
文本框必须有不同的状态/样式，以便用户知道该做什么。我们需要添加这些视觉提示来将用户推向正确的方向。
默认和不可点
默认或可点击态是当您还没有单击输入框，它处于等待操作状态。当用户知道输入框在那但因为业务或系统需求无法与之交互时，输入框可能是被禁用了。
Default and disabled text field
Hover
与按钮一样，文本框应该向用户表明它们是可交互的或可单击的。大多数文本框在悬停时改变颜色或增加线条厚度。如果您将鼠标移开，它应该恢复到原来的状态。
提示:触摸设备没有悬停状态。
焦点
焦点状态是当您单击表单字段时，它提示您选择了该字段，以便您可以开始输入。我们需要指出这种状态以便用户知道他们可以开始输入，信息将出现在该框中，而不是其他框中。
Focus state
我很少遇到的一种模式是焦点占位符。这是一个没有显示占位符的标题，但在光标聚焦时，就能看到一个充当提示的占位符。在我看来这还不够“明显”，所以不推荐，但有需求出现时还是有必要了解的。
On focus placeholder
我还听说焦点状态被称为高亮显示和选中。
6. 文本框标题和提示信息
在本节中，我们将只研究第一节中描述的所有不同的文本和标题元素。
标题
具有固定标题的文本框是最容易访问的，因为标题使用户更容易再次检查他们添加的信息是否正确。
Text field label
标题在输入框内（占位符标签）
如前所述，我们还可以把标题放在输入框内（我们还可以把占位符当作标签）。我个人避免使用它们，因为用户很难检查自己是否在正确的框中输入了正确的信息。
Text field placeholder label
带标题和提示文本
提示文本为用户提供了关于他们需要输入什么信息的更多说明。有时这似乎有点多余，但它可以帮助提示用户需要做什么。
Text field with helper text
辅助说明
辅助说明有助于让用户更好地了解他们需要填写什么类型的信息。这些额外的信息通常由您的业务规则决定，并且非常贴合您的系统和产品需求。
Text field with helper text
提示图标
随着我们对隐私法的更新，向您的用户披露他们的信息将如何被使用是至关重要的。虽然有几种方法可以做到这一点，但是提示图标可以使界面保持整洁。
提示图标不仅可以用于隐私方面;它们还可以为用户提供更多关于他们需要填写什么的信息(密码长度、日期格式等)。
Text field with tooltip
当谈到选择哪些要用提示哪些不用时，问问自己“不知道这些信息会不会让表单更难填写?”如果答案是“会”，可以使用图标提示用户，或者可以考虑使用帮助文本。
最小字符的限制
对于最小字符限制没有固定的规则，只要告诉用户他们是否说得足够多了。
Minimum characters text field
就我个人而言，我宁愿在用户有足够的字符时给予他们微妙的积极反馈，以鼓励他们，而不是在他们开始时给予消极的反馈。
最大字符限制
顾名思义，最大字符限制是最小字符限制的对立面。因此，与最小字符限制相反，在这种模式中，我们必须让用户知道他们已经写得太多。
Maximum character text field
我一直最喜欢的最大字符限制文本框是Twitter的。想知道我在说什么，往下滚动到名人堂。
7. 反馈
反馈状态是指需要通知用户他们输入的文本是正确的还是错误的。例如，用户名是否存在，或者密码是否正确，或者是否输入了有效的生日日期，等等。
反馈有两种方法，这两种方法都是有用的，取决于环境。在第一个方法中，你的Mildred阿姨告诉你应该多化妆。在第二种方法中，你问你的Mildred阿姨你看起来怎么样，她告诉你要多化妆。
那么，让我们从这个比喻继续:
方法1:告诉用户他们在填写表单时犯了一个错误。
方法2:告诉用户提交时有错误。
对于我们当前的目的来说，结果看起来是一样的。
负面反馈
负面反馈可用于突出显示错误，如空的必填字段、错误的密码、无效的电子邮件(例如，当电子邮件不包含“@”时)、错误的电子邮件(当电子邮件不在数据库中时)等。
Fail feedback
设计负面反馈的技巧:
· 利用反馈文本让用户知道为什么会出现问题。
· 确保反馈文本清晰易读(AAA标准)。
· 我建议使用图标来指出哪些字段是不正确的，因为色盲的人可能无法区分红色。
正向反馈
正反馈不如负反馈来得频繁。我们可以就此展开长期的哲学辩论。(也许交警应该告诉我们什么时候开得好，而不仅仅是什么时候开得不好。)然而，在这种情况下，我们希望大多数用户能够正确地填写他们的详细信息，出错应该只是一个例外。
但是，您可以考虑在系统可以检查的地方添加积极的反馈，如果用户知道某个信息是正确的，那么将使其他的申请部分变得更容易。
Success/positive feedback
设计正面反馈的技巧:
· 使用图标，因为色盲的人可能无法区分绿色
· 您应该只在填写表单时看正面反馈，而不是在提交时。
无效的电子邮件地址反馈(注册)
当用户注册时，系统必须确保电子邮件是有效的。我们希望用户输入正确的地址，这样我们就可以联系他们，也可以让他们稍后登录。这对于任何注册过程都是至关重要的。
必选:检查电子邮件是否符合格式
每个电子邮件地址都遵循一个格式，“本地部分”后面跟着@符号，然后是“域名部分”。可以运行输入框来检查格式是否正确。
Invalid email address feedback
可选:重复检查带有确认字段的电子邮件地址
虽然我们不经常看到这种情况，但有些表单要求您确认电子邮件地址，以避免输入错误。
Email addresses don’t match feedback
毕竟，如果用户在注册表单中输入电子邮件时犯了一个错误，则很难重新设置它。
可选:发送验证电子邮件来确认地址
这种确认方法变得越来越流行，原因很明显:你可以知道一个地址是否真实，因为用户能够回复你发给他们的电子邮件。以下是电子邮件确认验证的标准流程。
1. 用户注册并输入他们的电子邮件地址。
2. 他们看到的下一页告诉他们点击电子邮件发送给他们的链接。
3. 他们打开他们的电子邮件帐户，打开电子邮件。
4. 他们点击电子邮件中的链接，它会打开一个浏览器页面，提醒他们电子邮件已被验证。
5. 他们现在可以继续到网站的其他部分。
错误的电子邮件地址反馈(登录)
如果用户输入了错误的电子邮件地址，或者它不在数据库中，系统必须让他们知道。通常，输入错误的电子邮件不会受到惩罚(比如有限的尝试)。在某些情况下，如果用户输入了错误的电子邮件地址，您会想建议他们重新注册该地址。
Wrong email address feedback
不可用用户名反馈(注册)
创建用户名是最糟糕的，因为总是有人快人一步，而且所有酷的用户名都已经被注册过了。(也许有一天我会在有人盗用用户名“croft”之前注册一款游戏，但这还没有发生。)所以你坐在那里尝试各种各样的随机组合直到其中一个可行。(克罗夫特，lcroft,laracroft, 1aracroft, 14racroft, 14racr0ft –成功!)等等，为什么我的名字是14racr0ft?)
Registering a username feedback
继续我对用户名的抱怨，在用户选择确认按钮之前，如果他们想要的用户名是可用的，那么您需要一直即时的与他们互动，否则这将成为一个乏味的过程。虽然这可能有点老派，但有时系统推荐相似且可用的用户名是不错的。
错误的用户名反馈(登录)
在这里，用户必须输入他们的用户名才能登录到他们的帐户。如果用户忘记了他们的用户名，建议他们用电子邮件地址来检索。
Wrong username feedback.
弱密码反馈(注册)
如果用户提供的密码不够强，界面将不得不告诉他们。它还必须告诉他们为什么它不够强，以及他们如何才能让它变得更强。
根据您的行业或业务需求，您可能有特定的密码规则。例如，银行应该有一个比在线论坛更强的密码，因为它包含的信息很重要。然而，标准的密码模式是:8个字符长，至少有一个大写字母、一个小写字母、一个特殊字符和一个数字。也就是说，如果你让它变得更复杂，你的用户会很生气。毕竟，每个人只用一个密码，对吗?
Feedback showing the user how they can improve their passwords.
如果你的用户正在努力加强他们的密码，你应该非常清楚地告诉他们如何加强它。有些使用帮助文本，有些使用图标提示——不管解决方案是什么，都要让用户知道。
Password strength indicator
有些站点根据密码的复杂性向用户显示密码的强度。想要一个很酷的方法，请看下面的名人堂部分Dropbox的解决方案。
Text fields allowing users to check their passwords
您的用户可能还想确认他们的密码——特别是看到它是隐藏的。一种方法是添加显示/隐藏符号。另一种方法是让他们把密码写两遍。虽然确保密码是正确的很重要，但我个人认为更重要的是确保电子邮件地址是正确的，因为你总是可以重置密码，但用错误的电子邮箱不能做任何事情。
错误密码反馈(登录)
密码字段通常将输入的文本显示为非字母数字符号。(这是为了防止你爱管闲事的伴侣越过你的肩膀窥视你的Facebook登录细节。)
只有当用户单击submit时，登录密码才应该显示错误。在此之前，您不想告诉别人他们的密码是错误的，因为这样做只会让坏人(或您的伴侣)更容易获得密码。
Feedback on a wrong password attempt
您可能会希望限制用户可以输入的错误尝试的数量——特别是在信息敏感的站点上
8.自动套用格式
自动格式化文本框可以帮助用户输入正确的值，并通过正确地分组字符帮助他们检查输入的内容是否正确。
货币
根据您的货币和国家，您可能会以不同的方式写出长数字(1000.00 vs 10000.00 vs 1000,00)，因此创建一个标准化长数字格式的输入是有帮助的——尤其是在处理货币时。
Text field that autoformats currency | Captured from https://webdesign.tutsplus.com/tutorials/auto-formatting-input-value–cms-26745 (7 July 2019)
这些输入字段还应该阻止您使用字母表中的字母和标点符号。
电话号码
根据您来自哪里，您可能会以不同的格式设置电话号码——即使您的所有用户来自同一个国家，用户也可能不确定是添加国际代码还是区号——因此，拥有自动格式化的电话号码确实很有帮助。
Text field that autoformats phone numbers | Captured from https://nosir.github.io/cleave.js/ (7 July 2019)
对于电话号码之类的东西，还可以使用单独的字段强制用户以正确的格式输入电话号码，如本文第一部分所述。
日期
不同的国家以不同的方式书写日期(DD/MM/YYYYvs . MM/DD/YYYY vs . YYYY/MM/DD)，因此在下面的示例中，将模式写在暗文本上确实很有帮助。
Text field with autoformatting and focus prompt text | Captured from https://nosir.github.io/cleave.js/ (7 July 2019)
文本遮罩
文本遮罩类似于自动格式化，但它还有一个优点:不仅正确格式化值，而且会提示您还需要输入多少内容。
我绝对推荐你去JoshMorony的网站了解更多关于文本遮罩的知识。
根据您的需要，您可能出于不同的原因需要自动格式化的文本，例如卡号、许可证代码等。有了这些自动格式化让这一切太容易了。
9. 触摸屏范围
触摸屏输入字段大小(点击)
麻省理工学院触摸实验室的一项研究表明，手指用于触摸屏幕的部分是8-10mm，因此，如果你想避免用户犯胖手指的错误，最小目标尺寸必须是10mm或更大。
MaterialDesign建议触摸目标为48dp x 48dp，不同触点之间为8dp。
虽然我找不到任何关于iOS设计系统目标大小的文档，但一般的理解是它的最小目标大小是44 x 44pts。
如果您正在与维度和使用什么大小作斗争，我强烈推荐Zac Dickerson的关于可访问性的故事。
桌面电脑输入字段大小(单击)
因为桌面电脑上的光标比触摸屏上的手指小，所以你可以让你的触摸目标小很多。但你愿意吗?
10. 可使用性检查表
你已经做到了!您已经完成了文本字段初级的设计，现在是时候将其交付开发了。但是等等! 首先您是否检查了文本字段是可以使用的?
1. 您的文本字段是否符合WCAG AAA颜色对比度标准?有些设计师宁愿使用AA标准，但我对此过于偏执。我目前最喜欢的对比检查器是WebAIM。
2. 您的文本字段(包括标签)是否大于触摸屏的44px ?我喜欢将标题作为触摸区域的一部分，因为如果单击标题，容器仍然应该切换到焦点状态。
3. 标题总是可见的吗?
4. 相关字段是否有有用的反馈文本(“错误”vs“您的电子邮件格式不正确”)?
如果您对开发感兴趣，最好了解屏幕阅读器的工作原理。
11. 文本框名人堂
在这一部分，我沉迷于可爱的交互和文本框设计。如果你有什么建议或呼声，让大家知道，对吗？
我喜欢这个最大字符限制字段。它以图形的方式向您显示您与极限的距离有多近——然后给您一个倒数，直到您达到极限——然后突出显示超出字符的数量。完美，爱它，大家鼓掌。
Twitter’s max character limit input | Captured from Twitter (6 July 2019)
Material Design的浮动标题
Material Design的浮动标题非常好看。它不仅总是保持标题可见，而且它还有如此优雅的动画。
Material Design’s input fields with floating labels | Captured on Material Design (7 July 2019)
Dropbox
Dropbox“创建密码”字段向用户显示密码的安全性。而且，亲爱的读者们，他们还设计了这样的结构，让色盲患者仍然可以阅读。我也喜欢他们给用户提供一个不太安全的密码的方式，如果这是他们想要的。如此简单而人性化的解决方案。
Dropbox’s password field | Image via https://littlebigdetails.com | via rammionline
链接：https://uxdesign.cc/ui-cheat-sheet-text-fields-2152112615f8
原文作者：Tess Gadd
翻译：然若
本篇文章来源于微信公众号: TripDesign
