版权申明：本文出自“呆总丶”原创，感谢“呆总丶”的原创文章分享！
对于「输入框」的解析，市面上有非常多的文章都讲得很不错。但是为什么它总是被拿出来说，却又总是说不完呢？
主要是因为它所承载的内容正好反映了交互设计的各种知识。
比如如何输入，输入前要注意什么，输入的过程中要如何校验，输入完成会有哪些反馈。这一串内容其实就包含设计师设计一个功能时，所需要注意的所有信息了。
类比用户使用功能前，如何清楚地知道这个功能的使用方式；使用过程中，明确地了解自己的行为正确与否；使用完成后，如何快速地得知结果。
所以针对「输入框」这个问题，我想着还是有必要写一篇文章来具体聊聊「输入框的组成部分」以及它的「正向逻辑与逆向逻辑」。
通常一个「输入框」包含的内容有两种，载体、文本。但随着用户使用产品的场景复杂化，输入框的内容也逐渐变得更为丰富，现在也包括了图标。
细分下来是这样的：
文本：包含标题，占位符，帮助，反馈；
载体：文本框；
图标：展示型图标，操作型图标，反馈型图标。
虽然输入框在随着场景的变化而越发丰富，但内容再怎么变化也基本离不开这三类。
接下来，我们对「输入框」做一个详细的拆解。
最常见的组合，就是文本框与标题的组合了。
这样一个组合，至少能确保用户知道需要在文本框中输入什么信息。
需要注意的是，虽然这看起来很简单，但在排版上需要注意多列内容如何进行正确展示才能在界面中显得更为和谐的问题，因为它也涉及到了用户的眼动行为。
上面两类，左图虽然左对齐，但是标题与输入框的间距从整体上看显得不够协调；右边采取了右对齐，但是标题与外框的距离又显得参差不齐。且用户在查看的过程中，会显得较为吃力。
所以出现了下图这样的组合：
但这样的组合也有问题，就是纵向展示空间变小了，上图能放下三个输入框，到这里就只能放下两个了。所以对于输入框展示形式的选择也很关键，如果页面内容较多，可选择水平排列的，但如果内容较少，就可以选择纵向排列的。
而当这两种状态都无法满足的某个场景出现时，也就出现了其它变化。也就是把标题内嵌，作为「占位符」来使用。
这种方式虽然节省了空间，但只要用户点击输入框后，就看不到标题了。很多用户会习惯性点击输入框，但往往会忘了标题是什么，再想返回去看，也不知道如何才能让其恢复再出现了。
所以又出现了这样的形式：
这种展示形式的唯一问题就是点击后显示的标题太小，从而导致在展示类表单复查时难以阅读的问题。
到这里已经提到三块内容，文本框、占位符、标题，下面我们再来延伸一种：帮助。
由左图可以看到，占位符的作用相对较大，上面既可以代替标题，这里同样可以作为一种帮助提示。但它不适合在文字较多的情况下来使用，如果文字较多，那么右图的展示形式会更可取。毕竟我们经常还能看到好几条帮助提示的输入框，就不适合用占位符来代替了。
说到这里可能需要理一下占位符，占位符的概念很大，不仅仅是占用某个位置，在占用的同时它需要提供自己的作用，因此除了代替标题，作为帮助提示，它还可以提供默认值。如姓名，可这样展示：
如果你玩游戏的话，现在很多手游刚注册登录后，会自动填充一个姓名，你可以选择替换，也可以就用这个自动填充的，比如我就是 @杭州彭于晏。
包括例如淘宝，在搜索输入框里，会自动填充一个商品，用户可以直接点击搜索，也可以输入替换。这就是占位符作为默认值的作用。
当然，对于文本框来说，它也有几种不同的样式，比如：
类似的还包括验证码的输入。所以文本框的形式，也是需要依据需填写内容的变化而改变。
那么到这里，我们讲了文本框、标题、占位符、帮助提示，然后我们继续延伸，下面我们来聊字符限制。
每次讲到字符限制，很多人都会列举譬如微博，告诉读者在特殊场景下要做好字符限制，但现在微博已经不限制字符数，所以这里讲一个常见但很少人提及的隐性字符限制。
飞特游客
委托设计