今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面，值得我们探讨学习。下面从以下两大块来跟大家一起分析。
1.输入框的样式
2.输入框的设计要点
输入框的样式要了解输入框的样式，首先要知道输入框的组成部分，这里我们将输入框分为三部分：
- 文本：包含标题，占位符，帮助提示，反馈等；
- 文本框
- 图标：装饰性图标，功能性图标，反馈性图标。
- 水平排列：左对齐/右对齐
- 垂直排列
- 标题内嵌：作为占位符
- 添加帮助提示
排版上需要注意多列内容如何展示才能在界面中显得更加和谐。
1、水平排列：左对齐/右对齐
适用于展示页面内容较多的情况
上面两类，右边采取了右对齐，标题与外框的距离显得参差不齐。且用户在阅读的过程中，会显得比较费力。
2、垂直排列
适用于展示页面内容较少的情况
3、标题内嵌
当上面两种状态都无法满足某个场景时，也可以把标题内嵌，作为「占位符」来使用。
这种方式虽然节省了空间，但只要用户点击输入框后，就看不到标题了。很多用户在点击输入框后会忘了标题是什么。所以可以尝试点击输入框后标题文字置于输入框上方。
4、帮助提示
