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

数据输入体验中三个关键因素：

1、速度（提高输入速度）

2、引导（为用户输入提供引导帮助）

3、反馈（直接有效的指出用户输入过程中的问题）

一、提高速度方法：

1、根据输入框类型，优化虚拟键盘。

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

2）文字：正确的名字、用户名

3）混合输入：电子邮件地址、街道地址、搜索关键词。

信用卡号匹配数字键盘

2、合理使用自动大写功能，首字母或者每句话的首字母自动大写

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

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

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

3、当词典不好用时关闭自动纠错功能

自动纠错功能对于以下这几种信息更是收效甚微：例如缩写、街道名称、电子邮件、人名、以及词典里没有出现过的词汇。

旧版本的亚马逊手机app在文本输入框中应用了自动修改模式，原本正确的输入反而被自动纠错的内容代替了。

3、固定的输入模式

不要使用固定的输入模式，想办法将用户的输入转化成可以存储或显示的格式，而不是强迫用户输入固定的格式。

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

4、默认值和自动完成

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

5、标签和有用的信息

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

签并不是帮助信息。我们在设计中应当使用简洁的、短的具有描述性的标签（2-4个字），如果你需要更多关于输入框的信息，提示文本可以帮助用户解除困惑、并避免犯错。

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

输入框内的提示信息  页内标签（也叫占位符文本）适用于简单的输入框，比如用户名和密码。

如果输入框内容很少而且为人熟知，可 以用这种模式

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

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

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

好的解决办法：浮动标签。 当用户填写当前某文本框时，行内标签即浮动到文本框顶部。

http://www.woshipm.com/ucd/361227.html

6、简单的文案

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

7、标签颜色

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

二、合理引导反馈

1、实时校验

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

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

http://www.woshipm.com/ucd/361227.html

2、清晰的校验提示信息

校验信息应该清晰地说明：

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

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

3、适当的颜色

当设计校验信息时，颜色是一个可利用的好工具。根据惯例，红色表示错误信息，黄色表示警告信息，绿色表示成功。