优化输入框，让填写如丝般顺滑

填写是一件麻烦事，我们或多或少感受糟糕体验。设计开发者也很无奈，感觉身体被掏空。怎么办？

让我们从优化输入框开始吧！看着简单的框，对用户体验的影响很大。特别是在非常有限的手机屏幕中，怎么帮助用户顺利的填写完呢？值得我们好好研究。

视觉层面

舒适的填写区域

常用的数值是：拇指的滑动触发区域在宽高45px左右，图标的操作区域是48dp，输入框行高在80dp左右，行间距在8dp。

左图行距过于拥挤，而且文字大小不统一，给用户一种填写内容很多的感觉

简洁的描述

填写标签要简洁， 过长的标签有两个问题：

1.使填写的内容压缩。

2.影响整页对齐。

平行排布优点是：符合视线规律。阅读更快。如果要填写的标签实在过长，检查一下是否说不清楚的可以用占位符描述？或者采取垂直排布的方式。平行排布优点是：对标签字数限制不严格。

恰当的颜色

输入的结果我们常常用颜色来反馈，比如蓝色代表链接，灰色代表失效，绿色代表正确，黄色代表提示，红色代表错误。红色的使用要慎重，因为红色默认为最高等级警告，如果红色的提示出现过多会对用户造成紧张感，想到试卷上满篇的厚叉了么？所以把提示分级吧。

对于大家公认的色彩暗示，如果随意交换容易造成误解，特别红色和灰色。这有点像我们默认为穿裙子的形象是女，穿裤子是男，如果有天你看到穿裙子标识的男厕所，会困惑吗？

对于约定俗成的事，走寻常路才更易用

明确的指示

当用户选中准备输入的时候，应当提供清晰的视觉提示，这样让用户明确知道自己的位置，而不是迷失在茫茫表格中，这种细微的反馈会让用户更有掌控力。

交互层面

标注键盘类型

手机上的键盘触摸点非常小，触摸键盘需要随时调整，根据每个表单域的不同数据类型，为用户提供不同的键盘布局。输入方式有三种。对于第一种纯数字的我们可以锁定为数字键盘。

1. 纯数字: 电话号码、邮编、各种号码

2. 纯文本: 用户名、地址等

3. 混合格式: 评论、备注等等

上图填写电话号码，如果如右图默认好数字键盘，填写时就节省一次切换键盘的功夫。

对于一些固定选项我们常常使用控件帮助用户更快填写，比如日期，性别，地区等等。尽量在当前页面调用控件。如果填写内容范围广，需要进入二级页面另一页来选择适合，尽量提供快速检索方式。还有一种情况是对于容易填错的选项，使用控件，减少用户的填写错误，从而减少心理负担。

但是我们要思考使用控件是否更快速，下图这个例子，填写还款日的时候进入另一个选择，把1—28以及月末安行排开，初衷应该是为了容错，但是使用起来繁琐。

及时验证

当你好不容易填写完长长的信息，点击提交，这时候界面提示：你有20项填错......虽然我知道作为金融产品，这项的目的是为了限制错误。然而这种处理方法显然不是最好的。

没有人喜欢后知后觉的反馈，特别是错误。告知用户输入内容是否正确的最佳时机，是在用户填完内容后立刻告知用户。内联验证可以马上告知用户输入的正确性。帮助用户及时改正，无需等到点击提交按钮。如果只有一个错误要修正，那就很容易，能降低用户放弃的可能性。

清晰的反馈

关于填写错误的描述应该非常清晰，比如注册时密码填写，不要说密码安全性过低，而要说，密码必须超过8位，或者密码必须包含大小写和数字。总结为两点：

1. 发生了什么错误，可能原因是什么。

2. 用户应该做什么来改正错误。

必要的说明

有两种输入项目常常要加入说明：

1. 专业性强，大众可能不清楚

2. 安全隐私或者金钱相关，有心理顾虑

针对第一种，说明能减少输入错误，例如银行转账不是及时就到，而是需要两小时，金额不是任意的，每天有上限，并且和所剩的余额相关。如果这些是在用户输入完才告知，或者报错，那么这个锅用户当然不愿意背。

针对第二种，有心理顾虑的，可以承诺不会对用户造成损失，或者找背书，该方案已经通过XXX安全认证。消除顾虑之后才能顺利进行下一步。

上图转说明了限额，以及限额原因，能让用户在正确范围内使用

减少用户输入

说了那么多，最让用户舒心的莫过于帮助他们填写，因此，许多需要填写、选取的表单最好有预设的初始值或者内容填充在其中，这样可以让用户用起来更加方便，这就是智能预设。常见的使用场景有搜索联想输入，地址定位等。

总的来说，优化输入框设计主要有三个方向：

1. 提高输入速度

2. 为用户输入提供引导帮助

3. 直接有效的指出用户输入过程中的问题

重视每一个接触点的用户的感受，这样我们的产品才被打磨的越来越精致。

---

如果你喜欢我的分享记得给我留言或者点赞哦，

也可以把你的问题写在下面的评论区。

更多相关的文章记得去我的主页查阅哦。