公司实在找不到新文章发布，只能弱弱地滚去翻译，所以作为一个英语渣和ux初学者，新翻了一篇，orz翻墙也好累，以下为译文：

---

6.28发现自己翻得好烂，有参照别人的文章修改了一下！！！！

---

移动设备涉及到用户体验的设计会面临很多挑战，在有限的屏幕中输入框会成为其中一个显而易见的设计问题。至关重要的是，这一过程会是产品设计师、开发人员和产品经理了解用户需求的最简单的最佳途径。

本文重点说明了，改进数据输入的三个关键因素：加速输入、为用户提供服务或帮助、标记用户输入直接相关的问题。

输入

匹配键盘与所需的文本输入框

用户都偏爱那些根据输入内容提供了合适键盘的应用。我们可以根据输入框的类型优化虚拟键盘，这是实体键盘不能做到的。用户可以填写不同的文本字段的类型在不同的属性范围内。你应该优化常用的输入类型包括：

数字：电话号码、信用卡号、PIN码

文字：适当的名称、用户名

混合格式：电子邮件地址，街道地址，关键字搜索查询

左，用户需要点击123键来切换键盘类型以便使用数字键盘；右，我们应该为需要输入数字的文本区域自动匹配合适的数字键盘

确保此匹配是整个应用程序，而不是只针对某些任务而不是一致性的实现。

配置自动大写适当

配置自动大写设置适应是对于移动表单领域的可用性非常重要。每一个文本框的第一个字母自适应与每个单词或者句子的第一个单词的首字母大写。这些是输入字段尤其相关的，例如：

1.给某信息命名，比如用户的姓和名。

2.包含句子式的信息，比如短信息文本。

然而，你应该在输入电子邮件时禁用自动大写，当用户发现邮箱首字母大写时，常常会退回去将大写字母删掉，因为他们担心这样会让邮件发送产生问题。

字典词库很弱的时候禁用自动更正功能

自动修正这个功能往往使大多数用户失望，甚至当用户没有注意到的时候，它会明显伤害用户。自动纠错功能对于以下这几种信息更是收效甚微：例如缩写、街道名称、电子邮件、人名、以及词典里没有出现过的词汇。

旧版的亚马逊移动app文本输入框在填写地址栏的时候也有自动纠正模式，原本正确的输入反而被自动纠错的内容代替了。

这种情况经常会发生，因为用户往往更关注他们正在输入的内容而不是已经输入的内容。如果输入的内容是地址类的信息，自动修改功能会悄悄篡改原本正确的输入内容，用户很难注意这点。

固定的输入模式

不要使用固定的输入模式。使用固定样式的最常见的理由是脚本校验限制。（后端可能不能判断用户输入的格式）。然而大部分情况下，这是开发者的问题，不应该让用户买单你应该尽可能从用户输入转化到你需要存储的格式，而不是强迫用户在输入过程中必须使用固定格式，比如电话号码的格式。

左，数据输入框的样式符合惯例（把电话号码分割成三个输入框），其余表单被键盘遮挡：右，输入框支持输入灵活的内容，并且输入完成后自动提高以便不会被键盘遮挡

默认值和自动完成

设计师们往往希望根据用户的历史记录为他们提供预设的默认值和提示语，从而使用户更便捷地输入信息。比如，可以根据用户所处的地理位置信息预设国家地区。

这种设计方法如果与自动完成功能配合使用，可以显著提高用户输入的效率。得益于自动填充提供了实时性的输入建议或是可以选择一项内容来完成输入的下拉菜单，用户可以更精确高效地输入信息。对于那些读写能力不佳、拼写困难、特别是使用非本国语言的用户来说，这具有很高的价值。

提供了搜索建议的文本域

标签和帮助信息

当用户在输入框输入信息时，他们想知道所输入信息的类型，提供清晰的标签文本是一个使UI更具有可用性的好办法。标签告知用户文本框的目的，当输入框获得焦点时发挥作用使用户即使输入完信息后，仍然保证对输入框的关注度。

你还可以在输入字段的上下间提供有用的信息。于此同时，相关的上下文信息能帮助用户更简便地完成任务。

标签长度限制

标签并不是帮助文本。我们在设计中应当使用简洁的、短的具有描述性的标签（1-2个），好让用户可以快速浏览所有的输入框的需求。

输入框的标签是 ‘电话’、’入住’、‘退房’

如果你需要更多关于输入框的信息，提示文本可以帮助用户解除困惑、并避免犯错。

‘phone’文本框下方的信息是帮助文本

简单的文案

设计用户易于理解的语言。表意不明的术语和句子会给用户增加认知负担， 清晰的沟通和功能应该始终优先于专业的术语。

左：生僻的文案会迷惑用户；右： 清晰易懂的术语易于用户理解

输入框内的提示信息

内嵌标签、页内标签（或占位符文本）适用于简单的输入框，比如用户名和密码。

当屏幕中存在多于两个输入框时，对于那些分隔开的文本标签，行内标签就不适用了。虽然他们看起来整洁有序，但存在两个严重的问题：

当用户点击了输入框，行内标签就会消失，所以他们不能再检查所输入的内容是否正确

当用户在输入框中看到提示文本，他们有可能认为这个文本框已被预填成功从而忽略它。

对于占位符文本输入框的一个好的解决方案是把它做成一个浮动标签——当用户在文本输入字段时，当用户填写当前某文本框时，行内标签即浮动到文本框顶部，如图所示：

顺便说一句：

不要过于依赖占位文本和标签。因为一旦在输入框里输入内容，占位文本就无法被看到了。可以使用浮动标签，这样可以使用户随时确认他们填写的内容是否正确。

标签颜色

标签的颜色应该与整个应用的颜色匹配，同时也要满足合适的对比度（不宜太亮或太暗） 。

校验

输入框校验意味着给用户反馈，引导他们通过输入流程，避免错误和不确定信息。这个过程的输出是情感，而不仅仅是技术。一个数据处理中最重要的，是对错误的处理方式。犯错误是人之常情，输入字段可能是不能避免人为错误的。如果设计得当，校验可以使原本表意不清的交互行为变得清晰易懂。

实时校验

当用户在输入数据的过程中，他们不喜欢在最后提交时才发现自己犯了错误。正确的做法是，我们应该在用户刚刚刚填写完某条信息后就立刻告知他是否正确。

实时的页内校验可以立刻告知用户他们输入的信息是否正确。用户可以更快地修改错误，而不必等到按下提交按钮后才知道哪里错了。设计师可以给错误文案定义鲜明的颜色，比如红色或者橙色这种暖色调。

左，表单输入内容直到点击提交后才报错，并且错误信息在输入框之外；右，输入框下方实时显示了错误信息

校验不仅应该告知用户错误，还应告诉他们怎么做才是正确的，用户才会更有信心完成输入过程。

清晰的信息

用户时常有这样的困惑“刚才发生了什么？为什么会这样？”。此时应该提供一个直接了当的答案。因此校验信息应该清晰地说明：

错误是什么以及可能产生错误的原因

用户下一步应该做什么来改正错误

再次强调，应避免使用技术术语。这很简单能做到，但很容易被忽视。

适当的颜色

当设计校验信息时，色彩是设计验证流程时使用的最佳工具之一。来自认知本能的适用，红色的为错误信息提示，黄色为警告消息提示，绿色为成功信息提示。这项提示的方法非常有效。下面是一个校验密码输入框的好案例：：

Warning state for password field

另一个运用颜色的优秀案例是对文本输入框做出字数限制。红色的字符计数器及红色下划线说明该输入框字数已超限。

Image credit: Material Design

界面中颜色的应用应该符合用户认知，这是衡量优秀视觉设计的重要标准之一。

总结

你应该把数据输入的过程中尽可能的变得容易，即使像是首字母自动大写或给每个输入框提供合理的指示这种简单的办法都会大大提高输入框的可用性。设计师应该多考虑用户输入时的真实使用行为从而在设计时确保没有忽视某些重要的信息。

原作者：Nick Babich

原文：https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.914wa1yw3