遵循原则

1. 减少用户操作

避免繁琐的表单给用户带来的过于复杂的步骤以及填写内容过多带来的厌倦感，所以减少一些不必要的标签字段以及减少用户填写信息的操作是很有必要的

这是我们公司的表单，第一个标签为生产计划，系统可以根据前面的操作数据显示出一个计划编号，一般编号由英文字母和数字组成，不是很容易记忆。可能需要拿手机拍下来或者拿纸记下来再过来填写，耗费了很多不必要的时间，直接显示则减少了用户填写信息的操作。

2. 减少用户思考

比如我们公司是做工业数据的，仓库内移动物料的时，A仓库一共有100件物料，移动到B仓库需要用户填写，如果用户填写40件，那么A仓库剩余就应会自动显示为60件，不需要用户再去计算然后填写进去，减少了用户的思考，也节省了用户需要调整的标签。

3. 减少用户误操作

用户日常输入银行卡号、金额、电话号码等，在输入时候自动生成空格、“-”、“，”等可以降低用户输入的错误率。

4. 相关信息编组

如果需要填写的表单很多且并不属于一个填写类别的，将相关信息编组可以有效的起到分类填写的作用，减少了用户一直填写表单的乏味感，而且填写内容的分类也可以让用户填写的更有秩序性。

表单的构成

表单的构成包括输入框、标签、表单字段、帮助信息、操作按钮、反馈信息

1. 输入框

输入框就字面意思是输入内容的边框，输入框的长度可以根据需要填写内容的长短进行适当的调整，当输入框内容字数较多时，可以在右下角显示一个极限值以及目前输入字数，给用户一个提示。输入框一般我们在设计的时候需要设计一个为输入时候的状态，输入时候的状态以及输入后给予用户一个反馈，三个状态。

2.标签

标签就是5w原则里面的what，也就是告诉用户在输入框内要填写什么。通常在标签旁边加上星号*来表示必须填写，但是也不是完全绝对的。有的标签都出于稳妥期间会在下面添加说明。在输入框旁边添加（可选项）的说明也是一个好办法，看起来却更加清晰，尤其当可选项较少时。标签设计时，需要考虑用户填写表单的逻辑，例如在设计登录页面时，登录名一定要在密码上，否则密码在登录名上方显然是不符合逻辑的。用户的浏览视线是由上至下的，所以应该尽量避免Z型视觉轨迹，引导用户去点击确定按钮后进入下一步操作。

标签对齐方式常见的有左对齐、右对齐、顶对齐、输入框内标签

根据马泰奥·彭佐的2006年的标签对齐眼动实验结果表明。标签的对齐方式在理论效率上比较：顶对齐>右对齐>左对齐。

① 顶对齐

优点：从上到下符合用户视觉浏览路径，填写速度快

缺点：占用垂直空间，不适用于输入框较多的表单。

② 右对齐

优点：占用垂直空间小。

缺点：可读性弱于顶对齐

③ 左对齐

优点：标签更容易浏览，占用垂直空间小。

缺点：和输入框有间隔，增加用户填写表单的时间。

④ 输入框内对齐

优点：占用水平和垂直空间小。

缺点：标签在输入内容后会消失，修改表单时，读取不到标签。

为了解决这个问题，我们可以在行内标签前加一个icon来标识这个标签，icon相对节省空间且增加了视觉感受。另外一个解决方面就是使用悬浮标签，即输入内容是标签悬浮在表单上，也起到提示作用。

3.表单字段

表单字段是在输入框内根据标签提示需要输入的内容，这个区域一定要注意减少用户思考的原则，如果可以在系统内调用的数据，就直接后台调用，减少用户的填写数量。让用户更高效的填写完整个表单内容。

4. 帮助信息

在用户不知道如何填写或者不知道如何操作时，给予的提示性的文字，解决用户5w/1H原则中how的问题，告诉用户如何填写，常见的是一个问号的icon。

5. 操作按钮

操作按钮是用户填写完毕表单后所需要点击的保存、取消、下一步等等的按钮

1.关于按钮的摆放位置

为了评估哪一种主次按钮对于用户的影响，Luck(Web表单设计作者)和伦敦的可用性测试公司Etre使用眼动跟踪和可用性指标对此进行了测试。

方案A、B、C可以使用户更快速的完成表单的填写。而E方案由于不符合人们的视觉浏览视线，经常会点错点击到取消按钮，F方案剧中显示，用户浏览到最下方还需要视线向右移，所以也不如A、B、C方案效果更佳。

综上所述，按钮应该主次按钮排列，和输入框左对齐摆放

2.主次按钮

主按钮是用户填写表单后主要像点击的操作按钮，主次按钮要有鲜明的对比。比如填写好表单后，用户需要点击保存按钮，取消按钮就需要弱化一下，遵循减少用户思考的原则进行点击。

6. 反馈信息

反馈信息是用户在输入框内输入字段后，给予用户错误或是正确的一个反馈，如果反馈是正确的，用户可以安心继续填写，如果是错误的，根据反馈以及提示的错误信息（给予用户解决方案），用户可以准确的修改。

根据用户心理学相关内容，一般通知用蓝色，警告用黄色，错误用红色，成功用绿色