完美的文本框需要清晰的表达、无障碍的阅读和良好的用户反馈

对于任何app或web应用来说，如果用户没有使用文本框输入内容，应用将不会有任何状态的改变。因此，产品设计人员，开发人员和产品经理必须了解允许用户这样做的最佳方法。

在本文中，我们将通过关注文本字段来检查改善数据输入的关键因素。请记住，这些是只是普遍的设计准则，并且每条设计准则都有例外。

文本框

减少用户输入是一个文本框的基本要求。无论你是用什么app，你都会遇到一点需要输入个人信息的需求，即使你仅仅是需要谷歌搜索一个简单的问题，也需要考虑文本框的设计要点。

清晰的文本提示语

文字提示语是最基本明确告知用户输入内容的方式。当然，用户在通常情况下页可以通过图标判断文本的含义。（例如：即使没有文本提示语，用户也可以知道放大镜意味着搜索功能）但是在绝大多数的设计中，你都必须为输入框提供文本提示语。清晰的文本提示语可以让用户对自己的理解更有自信，并且采取正确的行动。

Apple iOS中的搜索栏同时具有放大镜图标和搜索标签

简短的标签文字

标签和帮助文本的作用是不同的。通常我们使用简洁，精炼的一个词来充当标签，使用户快速扫描，反映出当前的内容。

但如果需要额外的信息加以解释说明，就需要使用帮助文本来提示用户，这时候就不可以使用冗长的标签文本。

· 亚马逊早期版本的注册界面包含许多额外的单词，导致注册效率低· 现在的版本更好，标签更短。

大小适当的文本输入区域

如果文本输入区域的尺寸符合用户预期，这样用户在使用app时就可以更加容易理解。

设计师在设计时应该给予足够的输入区域，以便用户可以看到更多有价值的信息。

专注于输入框的设计

当用户用鼠标点击输入框时，你需要有提供一个明确的视觉引导——改变输入框的颜色，输入框颜色淡出或光标闪烁，等等

输入提示

数据有多种格式。当然，您应该以一种用户习惯的输入信息的方式设计输入框。但是你设计的输入框并不总能满足这一点。

亚马逊的注册表给用户提供了良好的视觉提示。如您现在可以看到“电子邮件（移动帐户的电话）”。图片来源：亚马逊

例如，简单的电话号码可以用“+”，来表示国家代码，区号或任何关于数字的代号。设计师页可以通过展示说明、或者用示例或提示来帮助用户确定他们应该使用哪种格式的输入方法去在文本框中输入。例如：电话号码格式的问题可以通过以下方式解决：

电话号码字段可以自动格式化。这就可以更好的帮助用户解决客可能产生的的任何格式歧义。

尽管输入字段占位符文本具有随用户类型消失的固有缺点，但可以用于简短描述或者格式化示例

帮助信息

帮助信息(或随附文字)，应该用在需要它们的地方，例如为什么要填写信用卡数据或者出生日期的作用，以及链接到“条框和条件”，这在用户使用输入框时，是消除用户疑惑和一些可能性问题的很棒的方法，根据经验，解释信息不要超过100个字

“电话”和“签入”/“签出”字段的简洁说明信息可帮助用户继续前进。图片来源：thinkwithgoogle

仅限手机端-将键盘与所需的文本输入匹配

用户会非常欣赏那些为输入框提供适当行键盘的应用，在下面的示例中，您可以看到，当为需要输入数字的字段提供文本键盘时，用户需要点击键盘中的数字键以启用数字输入。

确保在整个应用程序中始终如一地实施适当的文本字段键盘，这样的设计不仅仅适用于当前这一种情况，也适用于其他情况。图片来源：thinkwithgoogle

无障碍

目标：对于不同的用户来说，输入框都需要容易扫描 / 填写。

避免标签使用全部的大写字母

应该尽量避免使用全部的大写字母作为文本框的提示标签，因为大写字母的字符高度没有差异，等高的字母使用户在阅读和快速浏览的时候产生障碍。

全部大写字母的文本方式特别难易阅读，因为所有文本都是矩形的，用户根本不习惯。

字体大小

文本想要清晰必须字体足够大，一个相对安全的字号大小标准是16像素。但是，具体情况还是得衡量你的界面里的内容有多少。

毫无疑问的是，尽量在保证美观可读性的基础上，让文本足够大。

标签颜色

 标签的颜色应该符合你app的主题色，同时在适当的调节对比度。（太亮或者太暗都不好）W3C组织建议正文文本使用以下对比度：

·小文本与背景的对比度至少是4.5:1

·大文本（通常字重在14/18）与背景的对比度是3:1

提供容易点击的区域

现在，大多数人都在移动的可触摸的设备上使用文本框。所以，在设计移动设备的界面时，我们应该使我们的目标区域足够大，并且轻松点击。对于一个可触摸的目标来说，经验规则告诉我们，它的大小应该在45-57px之间。但是，这个区间对于移动设备来说，会显得异常大，而且影响美观。所以文本框的高度应该调整为32-40px之间，这样做才会使界面重的文本框显得友好而美观，同时，而不会产生大而笨重的感觉。

Bootstrap 3 中规定了一个很好的文本框基本规范，就是默认输入字段高度为34px，

输入文本框不应小于易于点击的字段大小。

仅限桌面端-友好的使用键盘输入

用户应该只能使用键盘触发和编辑每个字段。倾向于大量使用键盘的高级用户，应该能够轻松地浏览字段并进行必要的编辑，而无需将手指从键盘上抬起。您可以在W3C的设计模式创作实践中找到键盘交互模式的详细要求。

即使是简单的日期选择器也应该与W3C指南相关。图片来源：Salesforce

用户工作量

目标：最大限度的减少用户的输入

智能默认值

将数据输入字段是一件苦差事，而不是有趣的活动。因此，您应该通过提供具有预先填充的智能默认值的字段来预测频繁选择的项目并使用户更容易数据输入 - 您可以根据其他信息（例如基于邮政编码的状态）计算它们 - 或者根据先前输入的提示数据。

例如，根据用户的IP地址预先选择用户的国家/地区。WhatsApp是一个可以轻松输入电话号码的应用程序。如果您从美国访问该应用程序，则默认情况下会根据位置服务预填充国家/地区代码。

自动填充和自动提示

自动填充功能会在下拉列表中显示实时的建议或者完成情况，所以用户才可以更有效准确的输入信息。它对于在书写或拼写方面有障碍极为有效，特别是针对不是母语的使用用户来说，更加便利。

自动提示的目的在于以列表的方式显示关键词和习惯用语，这些关键字和习惯用语可能与精确查询的文字所匹配，也可能不匹配。

自动填充虽然可以帮助用户完善最初的搜索词语，但是自动提示则会给出与搜索词语最具有关联的词语。

适当的自动填充和自动提示功能都可以加快用户的操作速度。

Google就是使用自动填充和自动提示功能为用户提供极为高效的搜索体验。

总结

结论：您应该尽可能简单地输入数据。即使是微小的变化，例如有用的文本或指示每个字段中的信息，也可以显着增加输入字段的可用性以及整体用户体验。