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

1.输入框的样式

2.输入框的设计要点

3.总结

输入框的样式

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

1.文本：包含标题，占位符，帮助提示，反馈；

2.文本框

3.图标：装饰性图标，功能性图标，反馈性图标。

文本框与标题文字的组合样式

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

2、垂直排列

3、标题内嵌：作为占位符

4、添加帮助提示

排版上需要注意多列内容如何展示才能在界面中显得更为和谐，因为它涉及到了用户的眼动行为。

 

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

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

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

2、垂直排列

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

3、标题内嵌

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

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

4、帮助提示

由左图可以看到， 输入框内默认文字可以作为一种帮助提示。但它不适用文字较多的情况，如果文字较多或者有几条帮助提示时，那么右图的展示形式会更合适。

帮助提示的另一种展现方式就是提供默认值。如姓名可这样展示：

文本框：

文本框的展现样式主要分为以下2种，整行输入或者分段输入

5.图标

图标可分为装饰性、功能性、反馈性三类。

装饰性图标：我们通常用它代替标题。

功能性图标：其中最为常见的一种就是(快捷删除)

此外还包括，语音、密码显示/隐藏等。

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

上面提到的帮助提示，在界面中空间不够，且又不能没有的情况下可以这样处理：

输入框的设计要点：

字符限制

大部分产品的登录注册页，当用户在输入手机号时，只要超过 11 位就会无法继续输入。这其实就是一种字符数限制，只是大家有了共识，所以并不疑惑为什么无法继续输入，甚至反而会觉得可以继续输入的产品做得不够好。包括在手机号输入框里可输入英文字母，这就是没有做好输入限制的典型问题。

输入反馈的规则逻辑

输入反馈可分为三个过程：输入前提示，输入中校验，输入后反馈。

输入前提示，很简单，看下面这张图：

这里输入验证码，看到后知道我的手机接收到了一条验证码信息，这条验证码是 4 位数的，所以只要在这个位置输入这个 4 位数验证码即可。

 

输入中校验：

那么在这个过程中，只需要校验验证码是否正确就可以了。

如果成功，则直接进入下一步；如果失败，则给予反馈提示：

这里的反馈样式要清晰易懂，利用反馈文本让用户知道为什么会出现问题，还可以增加反馈图标增强说明。

说完输入前中后的内容，我们再来细分下输入反馈包含哪些规则逻辑：

- 验证内容是否为空

- 验证内容是否违规

- 验证内容的格式

- 验证内容的长度

- 验证内容的唯一性

最后来个文章的小结：

一、输入框与标题的组成样式：

1.水平排列

2.垂直排列

3.标题内嵌：占位符

4.帮助提示

5.图标

二、.输入框的逻辑规则

1.字符限制

2.操作反馈