今天这篇文章想跟大家聊一聊输入框的一些设计心得。这个看似简单的输入框也有一些门道在里面,值得我们探讨学习。下面从以下两大块来跟大家一起分析。
1.输入框的样式
2.输入框的设计要点
输入框的样式
要了解输入框的样式,首先要知道输入框的组成部分,这里我们将输入框分为三部分:
- 文本:包含标题,占位符,帮助提示,反馈等;
- 文本框
- 图标:装饰性图标,功能性图标,反馈性图标。
1、文本框与标题文字的组合样式
- 水平排列:左对齐/右对齐
- 垂直排列
- 标题内嵌:作为占位符
- 添加帮助提示
排版上需要注意多列内容如何展示才能在界面中显得更加和谐。
1、水平排列:左对齐/右对齐
适用于展示页面内容较多的情况
![0ccf5078a037a5d47512625af22315c8.png](https://i-blog.csdnimg.cn/blog_migrate/0e6a1e08fea629ec2b825b48eafbac79.jpeg)
上面两类,右边采取了右对齐,标题与外框的距离显得参差不齐。且用户在阅读的过程中,会显得比较费力。
2、垂直排列
适用于展示页面内容较少的情况