输入框的类型有许多种，输入框使用场景多，交互频次高，是基本的界面控件之一。本文主要从九个方面跟你聊聊，关于输入框的一些细节。

输入框类型：包括信息输入框、注册、登录输入框、搜索输入框、原创输入框、对话输入框以及其它。

文本输入框使用场景多，交互频次高，是基本的界面控件之一。每一个界面都分别对默认、输入和反馈三个状态进行设计。输入的结果我们常常用颜色来反馈，比如：蓝色代表链接、灰色代表失效、绿色代表正确黄、色代表提示、红色代表错误。

下面是一些设计中需要注意的细节:

一、标注键盘类型

根据输入框的不同数据类型，为用户提供不同的键盘标注，比如：输入手机号是标注数字键盘等等，用户会偏爱那些根据输入内容提供了合适键盘的应用。

二、考虑键盘唤起状态

左图：这样布局看起来没问题，但没有考虑到键盘调起的状态，因为键盘调起来的时候登录按钮会被挡住，操作成本就会增加。

中图：不管键盘有没有被唤起，页面的布局都不会改变。

右图：当键盘唤起时，页面向上提，漏出登录按钮。

三、减少用户输入

（1）增加一次性清除按钮：当输入框内容不为空的时候获得焦点，显示一次性清除内容的按钮，而不需要用户一直按删除键，一个个字符删。

（2）智能预设：需要填写、选取的表单最好有预设的初始值或者内容填充在其中，可以是建议，也可以是相关推荐，这样可以帮助用户更准确、高效地填写信息。常见的使用场景有搜索联想输入，地址定位等。

四、输入提示

数据的呈现方式多种多样，所以，当你在设计输入框的时候，应当与用户输入信息的类型、格式相互匹配。

1. 选中输入框准备输入的时候，应当提供清晰的视觉提示，这样让用户明确知道自己的位置，而不是迷失在茫茫表格中，这种细微的反馈会让用户更有掌控力。比如：外发光的输入框，或者闪动的光标，变颜色、加粗等都行。
2. 金额输入：当用户输入的金额超过千时，出现最高分位提示，每多输入一位，最高分位随之增加。
3. 通过设计输入框格式来“格式化”输入内容，让用户可以清楚的知道应该输入哪种类型、多少位。
4. 对于手机的输入设置成3-4-4格式，身份证的输入设置成6-8-4格式，便于用户能够清楚及时了解到自己输入的号码有无缺漏。【对于身份证与手机，保存后可将中间几位数变成*号，毕竟是敏感信息】
5. 输入框的输入记录：对部分输入框的内容进行记录，比如登录用户名、手机号，无需用户二次登录时输入，提高输入速率，优化用户体验。

五、必要的说明

（1）不要过于依赖占位文本和标签。

一旦在输入框里输入内容，占位文本就无法被看到了——一则用户无法检查输入的内容是否正确；二则当用户在输入框中看到提示文本，他们有可能认为这个文本框已被预填成功从而忽略它。

可以使用浮动标签，当用户填写当前文本框时，行内标签即浮动到文本框顶部，这样可以使用户随时确认他们填写的内容是否正确。

一般当屏幕中多于两个输入框时，行内标签就不适用了。

具体标签说明可查看：http://www.woshipm.com/pd/931662.html

本文由威海软件公司半岛科技转载整理2018.05.03