如何设计移动端的文本输入框？

基于移动设备的UX设计存在许多困难，其中最大的设计挑战之一是解决有限屏幕空间上的点击输入问题。对于UX设计师、开发人员和产品经理来说，使这个过程易于用户使用至关重要。本文阐述了提高数据输入体验的三个关键因素—速度（提高输入速度）、指导(为用户输入提供指导帮助)，反馈(直接有效地指出用户输入过程中的问题)。

输入

根据不同的输入信息匹配合适的键盘

用户更喜欢根据输入内容提供合适键盘的应用程序。实体键盘无法根据输入框的类型优化虚拟键盘。常见输入内容的类型包括：

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

• 文字：正确的名字，用户名

• 混合输入:电子邮件地址、街道地址、搜索关键词

请确保这种匹配键盘的设计在整个应用中是统一的，而不仅仅是在某些地方。

图1左侧，用户需要点击123键切换键盘类型，使用数字键盘

在图1的右侧，我们应该自动匹配需要输入数字的文本区域的合适数字键盘

合理使用自动大写功能

合理使用自动大写对提高移动表单的可用性至关重要。每个文本输入框的首字母和每个句子的首字母应自动大写。这特别适用于以下两种输入区域：

• 命名一个信息，比如用户的姓名和名字。

• 包含句子信息，如短信文本。

然而，当我们输入电子邮件地址时，应禁止自动大写功能。当用户发现电子邮件的首字母大写时，他们经常返回删除大写字母，因为他们担心这会导致电子邮件发送出现问题。

当用户在输入框中输入信息时，他们想知道输入信息的类型，提供清晰的标签文本是使用户界面更可用的好方法。标签告诉用户文本框的目的，当输入框获得焦点时，即使输入信息后，用户仍然可以确保对输入框的关注。

您还可以根据输入框的上下文提供有用的信息。上下文相关信息可以帮助用户更容易地完成任务。

限制标签长度

标签不是帮助信息。在设计中，我们应该使用简单、短的描述性标签（1-2个），以便用户能够快速浏览所有输入框的需求。

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

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

图7，‘phone文本框下的信息是为了帮助文本

简单的文案

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

图8左:生僻的文案会迷惑用户

图8右： 用户很容易理解清晰易懂的术语

输入框中的提示信息

页面标签(也称占位符文本)适用于简单的输入框，如用户名和密码。

当屏幕上有两个以上的输入框时，不适用于分开的文本标签。虽然它们看起来整洁有序，但有两个严重的问题：

• 当用户点击输入框时，行内标签就会消失，因此他们无法检查输入的内容是否正确

• 当用户在输入框中看到提示文本时，他们可能会认为这个文本框已经被成功地预先填写，而忽略了它。

处理占位符文本的好方法是－－浮动标签。 当用户填写当前文本框时，行内标签浮动到文本框顶部。

注意： 不要太依赖占用文本和标签。因为一旦内容输入到输入框中，就看不到占用文本。浮动标签可以用来确认用户随时填写的内容是否正确。

标签颜色

标签的颜色应与整个应用程序的颜色相匹配，并保持适当的对比度（不应太亮或太暗）。

校验

输入框验证意味着给用户反馈，引导他们纠正错误，消除用户的疑虑。这种验证的结果应该是人性化的，而不是像机器一样冷。数据处理过程中最重要和最容易感到疲倦的地方是错误的处理。错误是人性的，我们在填写输入框时是不可避免的。如果设计得当，验证可以使原本不清楚的交互行为清晰易懂。

实时校验

当用户输入数据时，他们不喜欢在最终提交时发现自己犯了错误。正确的方法是在用户填写信息后立即告诉他是否正确。

实时页面验证可以立即告知用户他们输入的信息是否正确。用户可以更快地修改错误，而不必等到按下提交按钮才知道错误的地方。设计师可以定义错误副本的鲜艳颜色，如红色或橙色。

上一篇：学习动效设计表达式，你应该从这5个开始

下一篇：为色盲用户提升网页可用性的实用设计技巧