【译文】移动端的输入

在为移动设备做设计时，会存在很多的问题。其中一个常见的问题就是如何在有限的屏幕下进行文本输入。产品设计师、开发者以及产品经理都需要思考如何让这个过程变得简单，使得用户能更好的进行输入。

这篇文章将从三个方面来思考如何提升文本输入的用户体验，分别是：提升输入的速度、为用户提供帮助以及根据用户的输入直接给予反馈。

1、输入

为相应的文本输入匹配合适的键盘

用户会很乐意当在进行输入的时候，应用已经为他们准备好了合适的输入键盘。不像物理键盘，移动设备上的触摸键盘可以根据用户所在的特定输入区域以及该区域限定的文本格式，进行适应性的优化。你需要着重注意的输入类型有下面几种：

• 数字：电话号码、卡号、PIN
• 文字：名称、姓名
• 混合式的：邮件地址、街道地址、搜索

同时需要注意的是，在整个应用中相同功能需要采用相同的处理方式，而不是仅仅针对某一个任务而已。

固定输入格式

不要使用固定输入格式。固定输入格式的最常见的原因一般都是程序上的限制（后台程序无法判断其他格式的输入是正确的）。像电话号码这类的输入不应该在用户输入的时候去固定它们的格式，而应该在用户输入了以后，自动转变成相应的格式。

默认值和自动补全

通过智能推荐的默认值或之前的输入记录的帮助，可以使用户去选择一个选项并更加快速的输入数据。比如，你可以根据用户的位置数据智能的为用户预先填好相应的国家名称。

通过智能匹配功能，可以有效的提升用户的操作效率。而且推荐的选项都是实时对应的，保证了用户在输入数据时，可以更加的准确。同时这对于输入困难的或则有限制的用户而言，是十分有价值的。

2、标签和帮助信息

用户需要了解该输入框可以输入什么样的信息，同时一个清晰的标签名也是保证你的UI界面更具有可用性的基本方法。标签名可以告诉用户这个输入区域的目标，需要保证标签名在获取焦点时以及输入了数据以后都是可见的。

你也可以通过在输入框中提供帮助性的文案。通过具有关联性或解释性的信息确实可以帮助用户更好的完成输入流程。

限制标签名的字数

标签名不是帮助信息，所以应该使用简短、解释性的名称（一个或则两个字）来帮助用户快速的浏览输入区域。

如果你需要更多的文字来解释，帮助信息是一个不错的办法，可以使用户在输入的时候更加的明确，减少了错误的发生。

简单的语言

使用用户熟悉的语言。偏僻的短语或术语会提高用户的理解成本。清晰的功能信息展示应该始终优先于专业术语和品牌信息。

标签在输入框内

对于像用户名或密码这种简单的输入而言，标签放在输入框内（或占位符）可以起到不错的效果。

但如果有超过两个的输入区域时，这种方式没有原先的输入框和标签名分离方式好。虽然这种方式很流行，在视觉表现上更具有优势，但它存在两个严重的问题:

• 一旦用户定位到输入框中时，标签名消失将导致用户无法二次确认输入的内容是否是所规定的内容。
• 当用户发现输入框中已经有内容的时候，用户会误以为这个区域已经填写了而忽略它们。

针对这种标签在输入框内的，有一种比较好的解决方式就是浮动标签。当用户输入了内容以后，标签名将从输入框中移出到框外面。

不能太依赖占位符，包括标签名本身。一旦输入区域填写了以后，占位符就隐藏了。你可以使用浮动标签去帮助用户去判断输入是否正确。

标签颜色

当需要设计出合适的差异性时，标签颜色应该依据你产品的颜色规范来制定（不应该太亮或太暗）

3、验证

输入验证意味着和用户沟通并指导他们如何处理异常的情况，这个过程通常更多的是情感上的而非技术。其中最重要但又最不希望碰上的就是对于错误的处理。人性使然错误是很容易产生的，你的输入框也无法避免错误的产生。当处理得当的时候，验证可以使模糊的交互变得更加清晰。

实时验证

要避免点击提交以后才告知存在错误的验证方式，因为用户不会喜欢这种方式。验证是否正确的最好时机应该是在用户填写完成以后。

实时的框内验证可以很直接告知用户输入的数据是否正确。这种方式可以加快用户整个输入的流程。使用一个相对差异性的颜色去表达错误的状态，比如红色或则橘色。

验证的结果不应该仅仅告诉用户他们那里做错了，同时也应该告诉他们怎么改正。这将给予用户更多信心进行接下去的输入流程。

明确的信息

应该给予用户更加明确的验证结果，注意下面两点：

• 哪里错了以及可能的原因
• 用户接下去该如何修复这个错误

再一次提醒大家，应该避免使用技术性的术语。说起来虽然简单，但做起来很容易被忽视。

正确的色彩

在设计验证流程时，色彩是一个非常好的表达工具。依据人的本能特性，用红色表示错误，黄色表示警告以及绿色表示成功。下面就是一个很好的例子。

另外一个关于色彩使用的优秀案例是输入框的字数限制。当超过字数的时候，用红色横线去告知用户。

但是不要仅仅依赖色彩去传达验证信息。对于优秀的视觉设计而言，是否能保证交互流程对于用户而言是简单易用的是十分关键的。

4、总结

你应该保证数据的输入尽可能的简单。对于提升整体的可用性，即使是一些细微的部分也会产生巨大的影响。深入的思考用户是在怎样的情形下使用你的移动端应用进行输入，确保你在设计时没有遗忘掉某些显而易见的点。

原文地址：https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.aqawby1wu

网易云新用户大礼包：https://www.163yun.com/gift

本文来自网易实践者社区，经作者胡震宇授权发布。