之前在工作中我曾经跟产品就登录注册页面的输入框是否需要放图标而发生了争议。

那么我们来探讨一下放图标和不放图标的优缺点：

不放图标：

1、优点是界面干净简洁利落。

2、缺点用户有可能在输入内容的时候遗忘当前输入框所输入的内容。

放图标：

1、优点是信息识别性强，更易于用户理解。

2、缺点页面局促，零散。

那么根据以上分析，我们可以根据用户群体以及产品定位来择优使用。比如比较偏设计感的年轻化的用户，APP可以不放图标。偏常规大众的，年纪较大的用户建议还是在输入框前面加上图标或者文本进行提示。

内联标签

如上图不放图标的输入框内的占符文本又名为内联标签。对于简单的表单域非常合适，比如登陆页的用户名或者密码。

但是当页面超过两个表单域时，用占位符文本来代替分离的文本标签就不合适了。

1、一旦用户点击了文本域，标签文本就消失了，用户有可能在输入内容的时候遗忘当前输入框所输入的内容。

2、当用户看见文本框有内容的时候，可能会以为这个地方预先填充了内容，并因此而忽略填写。

那么如果非要用占位标签来设计，有什么优化方案么？

浮动内联标签

当用户填写这个表单域时，可浮动的内联标签就会移到表单域的上方，即可确保用户可以知道他们填写的内容是否正确。

搜索页面里的提示

我们在设计搜索页面的时候通常都会设计搜索前和搜索结果页。很容易忽略搜索过程是怎样的。

如上图土豆APP的搜索过程页，根据输入的文字对应相应的提示。还会显示搜索过的历史记录，方便用户快速查找内容。

清晰的反馈：纠错和鼓励

当我们输入错误的时候要及时提示，输入正确的时候要给予鼓励，这样清晰明确反馈会激励用户继续下一步操作。

输入的文本类型要与键盘相匹配

在输入号码的时候确放置了文字键盘，相信很多初入职场的设计师犯过这种马虎的问题，人家程序员哥哥可不帮你矫正这样的错误，你放什么人家就调用什么，后期走察的时候岂不尴尬啦！

舒适的点击区域

一般说来，拇指的触发区域应当控制在 45~57px之间，但是在移动端上文本框太大看起来很不舒服，所以适当缩小下文本框高度，大概在32~40px之间即可，同时拉宽一点输入框直接的间距，看起来会好很多。

多行文字输入规则

我们来看下上图微信的输入框，当输入多行文字的时候，输入框随着文字的高度而增高。但这里设计的有一个问题，当输入很多文字后，之前的文字都被这档掉了，会使用户产生错觉。我们再看看土豆的输入框，这里当行数多的时候会遮挡一部分，给用户以暗示，表面还有其他文字。这里就处理的很好。

输入框字数限制规则

发布微博文字的时候，会在右下角告诉你已经输入多少文字，如果超过140字后，数字的颜色会变成橙色，起到警示作用。

土豆视频的弹幕区域，限制字数为40字。超出字数将不显示。

结论：

在设计输入框的时候尽可能的降低用户的操作成本，让过程变得简单流畅就是最好的使用体验。