移动App中的输入框设计

移动设备在用户体验设计面前有许多挑战。一个最明显的挑战是在有限的屏幕空间中处理输入。而对产品设计师、开发人员和产品经理来说，能够理解为用户使这个过程很简单的方法则是非常关键的。

本文强调了能够提升数据输入的三个主要因素,分别是加快输入,为用户提供帮助和说明，以及直接指出问题。

一、输入

1、按输入类型匹配键盘

App用户欣赏那些能够提供一个适当的用来输入的键盘。不像物理键盘，触摸键盘可以被充分利用在用户需要输入的每个表单项上，而且输入框的类型决定了哪种字符可以显示其中。你应该优化的常见的输入类型有：

数字型：电话号码，信用卡号码，

文本型：专有名词，用户名

混合型：邮件地址，街道地址，搜索词条

确保这个匹配是持续应用在整个应用程序中,而不是只对特定的任务。

2、适当的配置自动大写

适当的设置自动大写对移动表单输入框的可用性是很重要的。如果区域设置要求，那么每个文本框的第一个字母应该大写，每句话的第一个字母也是。这对以下这样的输入框尤其相关：

问名字的地方，如用户的姓和名

包含句子的信息,比如短信

无论如何，你不应该使用自动大写在邮件地址输入时，因为当它作用时，用户可能返回并删除第一个大写字母,他们担心电子邮件发送产生问题。

3、词典弱时不要开启自动矫正功能

当用户注意到不好的自动矫正时，他们会很失望，而当他们注意不到时，可能会彻底的出错。自动矫正功能通常在缩略语，街道名称，邮件地址，人名以及其他不在词典中的词组中表现很差。

Amazon老版本的移动app在地址输入框中有自动矫正功能，导致原本有效的地址被自动覆盖。

这种情况常常发生是因为用户一般注意在他们正在输入的内容而非他们已经输入了哪些。在地址信息场景下，这就导致有效的地址被自动矫正成无效的并且被提交，因为用户没有注意到自动矫正功能。

4、固定的输入格式

不要使用固定的输入格式。使用固定输入格式的最常见原因是验证脚本的缺陷（你的后台系统不能决定它需要的格式）。在大多数情况下，这是产品开发的问题，而非用户的。不像在输入如手机号这样的内容时限制格式，你应该尽可能的转换用户输入的任何格式到你希望显示或储存的格式。

5、默认值和自动完成

你应该对经常被选项做出预期，为用户提供智能默认值或者基于先前数据的提示来简化用户在数据上的输入。比如，你可以根据用户的地理位置数据来事先帮他们选定·国家。

这个方案可以和能够明显加快用户行为的自动完成功能配对使用。自动完成提供了实时的建议或在下拉列表中显示完成后的效果,所以用户可以更加准确和有效的输入信息。它对那些只有有限文字素养或有拼写困难的用户尤其有用,尤其是如果他们使用非母语。

二、标签和帮助信息

用户想知道在一个输入框中应该输入什么类型的数据，一个清晰的标签是让你的UI更加易于理解的最主要方法之一。标签告诉用户这个输入框的目的，且在用户将焦点放置输入区域中时应持续有效，甚至在输入完成时同样有效。

你也可以在输入框中提供有用的说明信息。有相关的语境信息能够使用户更容易的通过这一步。

1、单词数的限制

标签不是帮助文本。你应该使用简明的，短的，描述性的标签（一两个单词）来使用户快速的浏览你的文本框。

如果你需要更多的输入框的信息，帮助信息是一个很好的方法来消除用户困惑和可能面对的错误。

2、简单的语言

使用跟你的用户一样的语言。未知的术语或词组将会增加用户的认知成本。清晰的沟通与功能应该始终优先于专业行话和品牌标语。

3、行内标签

行内标签（或占位符文本）对于简单地如用户名和密码输入框来非常有效。

但对于屏幕上显示超过2个文本框的情况，行内标签则不是独立文本标签的一个好的取代方案。虽然它很流行，看起来也还不错，但实际上它有两个很严重的问题：

一旦用户点击了输入框，标签就消失了，这样用户就不能二次检查他们输入的内容是不是他们应该输入的类型。

当用户看那些已经写在文本框的内容，他们可能会认为它以被填写并因此忽略它们。

解决这种占位符标签的方法是使用漂浮标签，当用户选取了文本输入框，漂浮标签移动到输入框上面。这样，可以保证用户填入正确格式的内容。

4、标签颜色

标签的颜色应该反映你的app的调色板，同时满足适当的对比度（不应该太亮或太暗）。

三、校验

输入框校验意味着跟用户会话并指导他们纠正错误和不确定性。这个过程的输出是情感,而不该是技术。一个最重要的不为人喜欢的数据处理过程就是错误处理。犯错误是人的天性，你的输入框可能并不能免除人为错误。如果做得好,校验可以把一个模棱两可的互动变成一个清晰的。

1、实时校验

用户不喜欢当他们经历了输入在提交数据输入才发现,他们犯了一个错误。正确通知用户数据的成功/失败的时间应该是提交后立刻呈现。

实时的行内校验迅速的告诉用户数据的对错。这种方法允许用户更快的改正错误而不是非得等到他们按下提交按钮的时候再看到错误。使用一个对比性的颜色来表示错误状态，如暖色调红色或橘色。

校验不应该只告诉用户他们哪里错了，也应该告诉他们什么时候对了。这就给了用户更多的信心来通过这一步。

2、明确的信息

对比如用户的疑问“刚刚发生了什么？为什么发生”，系统应该给与直接的回答。你的校验信息应该明确状态：

错哪了，大概是为什么;

要修正这个错误用户下一步应该做什么;

再次强调，应该避免使用技术行话。规则很简单,但他们很容易忽视。

3、正确的颜色

颜色是设计校验校验时所使用的最好的工具之一。它按照我们的本能认识起到难以置信的作用，红色来表示错误信息，黄色表示警告信息，绿色表示成功。下图就是一个密码输入框校验的很好的例子：

另外一个使用颜色的很好地例子是文本输入框的字符限制。字符数和红线表示已经超出限制。

但是别只依赖于颜色来表示校验信息。一定要确保用户界面是可以理解的，这是执行视觉设计很重要的一个点。

四、结论

你应该使数据输入尽可能更简单。即使如自动大写或在每个输入框显示帮助信息这样小的变化，都可以显著提高输入框的可用性和整体的用户体验。深入思考下用户实际如何使用你的应用程序输入信息，并确保你在设计APP时没有遗漏掉一些明显的注意事项。

译自：https://uxplanet.org/text-fields-in-mobile-app-11d41f13e31#.x3c4fqbzx