做过中后台的人都知道，和前端不一样，中后台的大部分内容都由表格和表单组成；表单设计直接决定后台操作的体验性，下面我们来聊聊后台表单应该如何设计。

一、表单的构成

一个完整的表单由标签、表单字段、占位符、帮助信息、操作按钮、及时验证等元素构成

二、表单标签的四种对齐方式

1.右对齐（Web端主流对齐方式）

优点 ：标签与输入框联系较为紧密，较少占用垂直空间

缺点：标签可读性一般，浏览完表单效率不高

2.左对齐（不常用、不推荐）

优点 ：标签可读性强

缺点：标签与输入框联系不紧密，视觉跳动大，填表不流畅

2.顶对齐（适用于表单不多的情况）

优点 ：标签与输入框联系非常紧密，视觉流畅

缺点：大量占用垂直空间，移动端可以考虑使用

4、输入框内标签（移动端表单设计常用）

优点 ：标签与输入框联系非常紧密，视觉流畅，空间占用小

缺点：输入后标签消失，增加用户记忆成本，不易复核

5、输入框内标签，输入时转换为顶标签

优点 ：标签与输入框联系非常紧密，视觉流畅，空间占用小，易复核

缺点：开发成本高，适用于高频输入界面（例如登录注册页面）

三、表单设计规范

1.尽量简短

从业务上优化表单，删除不必要表单字段

2.合理分组

当表单字段过多时，合理运用分组，使表单结构更清晰

3.浏览线清晰

清晰的浏览线能极大提高表单填写效率

4.表单验证

表单验证要及时、清晰，不要在提交的时候才验证表单，建议在用户键入停止1s后，或光标离开后进行验证

5.合理使用颜色

由设计心理学色彩对视觉的影响我们可以知：通知为蓝色，警告为黄色，错误为红色，成功确认为绿色。

6.减少用户输入成本

可以通过以下几种方式：

1）提供默认值

2）选择代替输入

3）自动联想，一键填充

7.提供友好的引导

图片由PS制作，欢迎转载

原创不易，点个赞支持一下呗~