超全后台表单设计规范,让用户不再恐惧表单!

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

一、表单的构成

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

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

1.右对齐(Web端主流对齐方式)

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

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

2.左对齐(不常用、不推荐)

优点 :标签可读性强

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

2.顶对齐(适用于表单不多的情况)

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

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


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

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

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

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

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

缺点:开发成本高,适用于高频输入界面(例如登录注册页面)

三、表单设计规范

1.尽量简短

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

2.合理分组

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


3.浏览线清晰

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


4.表单验证

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


5.合理使用颜色

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


6.减少用户输入成本

可以通过以下几种方式:

1)提供默认值

2)选择代替输入


3)自动联想,一键填充



7.提供友好的引导


图片由PS制作,欢迎转载

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


往期回顾:移动端设计十大原则

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。