移动开发解决方案之玩转输入框

在手机的世界里，一个应用程序的一个输入框它所承载的内容正好反映了交互设计的各种知识。
它所承载的内容正好反映了交互设计的各种知识。

比如如何输入，输入前要注意什么，输入的过程中要如何校验，输入完成会有哪些反馈。这一串内容其实就包含设计师设计一个功能时，所需要注意的所有信息。

1 输入框的组成部分

通常一个「输入框」包含的内容有两种：载体、文本。但随着用户使用产品的场景复杂化，输入框的内容也逐渐变得更为丰富，现在也包括了图标。

文本：包含标题，占位符，帮助，反馈；
载体：文本框；
图标：展示型图标，操作型图标，反馈型图标。

2 最简单的输入框

这样一个组合，至少能确保用户知道需要在文本框中输入什么信息。

需要注意的是，虽然这看起来很简单，但在排版上需要注意多列内容如何进行正确展示才能在界面中显得更为和谐的问题，因为它也涉及到了用户的眼动行为。

右图中折线代表了用户的眼动行为路线
上面两类，左图虽然左对齐，但是标题与输入框的间距从整体上看，显得不够协调；右边采取了右对齐，但是标题与外框的距离又显得参差不齐，且用户在查看的过程中，会显得较为吃力。

所以出现了下图这样的组合：

这样的组合适用于少数内容的排版。

3 内嵌标题的输入框

这种样式的输入框，节省了占用空间，但是在用户输入的时候就缺少了提示，很多用户会习惯性点击输入框，但往往会忘了标题是什么，再想返回去看，也不知道如何才能让其恢复再出现了。

所以又出现了这样的形式：内嵌标题，输入时标题上移

4 占位符与标题

如果文字较多，那么右图的展示形式会更可取。

占位符的概念很大，不仅仅是占用某个位置，在占用的同时它需要提供自己的作用，因此除了代替标题，作为帮助提示，它还可以提供默认值

5 反馈型文本输入框

当我们填写完内容，脱离输入框后，系统开始校验，并给出反馈的图标。

除此之外，我们还能看到的一类图标是操作型图标，其中最为常见的还是要数「清除」了

6 总结

一个输入框，组成的部分如下

标题，应该始终可见。
载体，文本框，样式可根据场景变化。
占位符，可作为提示，也可以提供默认值。
帮助提示，内容多可拆分，也可以融入操作图标中。
反馈提示，有正确与错误两种。
图标，分为展示型图标，操作型图标，反馈型图标。

而在一次输入过程中，输入前提示，输入中校验，输入后反馈结合输入框的组成部分而达到一种协合质感。