今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面，值得我们探讨学习。下面从以下两大块来跟大家一起分析。

1.输入框的样式

2.输入框的设计要点

要了解输入框的样式，首先要知道输入框的组成部分，这里我们将输入框分为三部分：

• 文本：包含标题，占位符，帮助提示，反馈等；
• 文本框
• 图标：装饰性图标，功能性图标，反馈性图标。

• 水平排列：左对齐/右对齐
• 垂直排列
• 标题内嵌：作为占位符
• 添加帮助提示

排版上需要注意多列内容如何展示才能在界面中显得更加和谐。

1、水平排列：左对齐/右对齐

适用于展示页面内容较多的情况

上面两类，右边采取了右对齐，标题与外框的距离显得参差不齐。且用户在阅读的过程中，会显得比较费力。

2、垂直排列

适用于展示页面内容较少的情况

3、标题内嵌

当上面两种状态都无法满足某个场景时，也可以把标题内嵌，作为「占位符」来使用。

这种方式虽然节省了空间，但只要用户点击输入框后，就看不到标题了。很多用户在点击输入框后会忘了标题是什么。所以可以尝试点击输入框后标题文字置于输入框上方。

4、帮助提示