一对一免费咨询： 13913005726 025-66045668
全部导航
客户案例 
看似简单的输入框，实际上对用户体验有着十分明显的营销，那么如何优化?看文章如何解读。
填写是一件麻烦事，我们或多或少感受糟糕体验。设计开发者也很无奈，感觉身体被掏空。怎么办?
让我们从优化输入框开始吧!看着简单的框，对用户体验的影响很大。特别是在非常有限的手机屏幕中，怎么帮助用户顺利的填写完呢?值得我们好好研究。
视觉层面
舒适的填写区域
常用的数值是：拇指的滑动触发区域在宽高45px左右，图标的操作区域是48dp，输入框行高在80dp左右，行间距在8dp。
左图行距过于拥挤，而且文字大小不统一，给用户一种填写内容很多的感觉
简洁的描述
填写标签要简洁， 过长的标签有两个问题：
使填写的内容压缩。
影响整页对齐。
平行排布优点是：符合视线规律。阅读更快。如果要填写的标签实在过长，检查一下是否说不清楚的可以用占位符描述?或者采取垂直排布的方式。平行排布优点是：对标签字数限制不严格。
恰当的颜色
输入的结果我们常常用颜色来反馈，比如蓝色代表链接，灰色代表失效，绿色代表正确，黄色代表提示，红色代表错误。红色的使用要慎重，因为红色默认为最高等级警告，如果红色的提示出现过多会对用户造成紧张感，想到试卷上满篇的厚叉了么?所以把提示分级吧。
对于大家公认的色彩暗示，如果随意交换容易造成误解，特别红色和灰色。这有点像我们默认为穿裙子的形象是女，穿裤子是男，如果有天你看到穿裙子标识的男厕所，会困惑吗?
对于约定俗成的事，走寻常路才更易用
明确的指示
当用户选中准备输入的时候，应当提供清晰的视觉提示，这样让用户明确知道自己的位置，而不是迷失在茫茫表格中，这种细微的反馈会让用户更有掌控力。
交互层面
标注键盘类型
手机上的键盘触摸点非常小，触摸键盘需要随时调整，根据每个表单域的不同数据类型，为用户提供不同的键盘布局。输入方式有三种。对于第一种纯数字的我们可以锁定为数字键盘。
纯数字: 电话号码、邮编、各种号码
纯文本: 用户名、地址等
混合格式: 评论、备注等等
上图填写电话号码，如果如右图默认好数字键盘，填写时就节省一次切换键盘的功夫。
对于一些固定选项我们常常使用控件帮助用户更快填写，比如日期，性别，地区等等。尽量在当前页面调用控件。如果填写内容范围广，需要进入二级页面另一页来选择适合，尽量提供快速检索方式。还有一种情况是对于容易填错的选项，使用控件，减少用户的填写错误，从而减少心理负担。
但是我们要思考使用控件是否更快速，下图这个例子，填写还款日的时候进入另一个选择，把128以及月末安行排开，初衷应该是为了容错，但是使用起来繁琐。
及时验证
当你好不容易填写完长长的信息，点击提交，这时候界面提示：你有20项填错……虽然我知道作为金融产品，这项的目的是为了限制错误。然而这种处理方法显然不是最好的。
没有人喜欢后知后觉的反馈，特别是错误。告知用户输入内容是否正确的最佳时机，是在用户填完内容后立刻告知用户。内联验证可以马上告知用户输入的正确性。帮助用户及时改正，无需等到点击提交按钮。如果只有一个错误要修正，那就很容易，能降低用户放弃的可能性。
清晰的反馈
关于填写错误的描述应该非常清晰，比如注册时密码填写，不要说密码安全性过低，而要说，密码必须超过8位，或者密码必须包含大小写和数字。总结为两点：
发生了什么错误，可能原因是什么。
用户应该做什么来改正错误。
必要的说明
有两种输入项目常常要加入说明：
专业性强，大众可能不清楚
安全隐私或者金钱相关，有心理顾虑
针对第一种，说明能减少输入错误，例如银行转账不是及时就到，而是需要两小时，金额不是任意的，每天有上限，并且和所剩的余额相关。如果这些是在用户输入完才告知，或者报错，那么这个锅用户当然不愿意背。
针对第二种，有心理顾虑的，可以承诺不会对用户造成损失，或者找背书，该方案已经通过XXX安全认证。消除顾虑之后才能顺利进行下一步。
上图转说明了限额，以及限额原因，能让用户在正确范围内使用
减少用户输入
说了那么多，最让用户舒心的莫过于帮助他们填写，因此，许多需要填写、选取的表单最好有预设的初始值或者内容填充在其中，这样可以让用户用起来更加方便，这就是智能预设。常见的使用场景有搜索联想输入，地址定位等。
总的来说，优化输入框设计主要有三个方向：
提高输入速度
为用户输入提供引导帮助
直接有效的指出用户输入过程中的问题
重视每一个接触点的用户的感受，这样我们的产品才被打磨的越来越精致。
作者：Uki加菲喵
来源：http://www.jianshu.com/p/aba4bf4de862
*请认真填写需求信息，我们会在24小时内与您取得联系。
