表单设计

表单作为用户和产品之间的媒介，能够让用户高效、轻松完成填写同时满足产品目的是一个表单设计的基础。

表单的组成

标签、输入框、行为、帮助、信息、验证

一、标签的对齐方式

1、顶对齐

标签顶对齐

标签在输入框上方（国外大多数表单采用顶对齐）

优点：对长标签很有用，和输入框联系最紧密，输入效率最高

缺点：占用垂直空间大，不利于长表单

2、右对齐

右对齐

标签与输入框列，标签右对齐

优点：占用垂直空间小

缺点：破坏页面布局，整体可读性不强

3、左对齐

表单左对齐

标签与输入框列，标签左对齐

优点：浏览问题更容易，不会被右侧的输入框打断

缺点：距离大和输入框联系不紧密，增加填写表单的时间，

4、输入框内标签

输入框内对齐

标签在输入框内，把标签和输入框组合为一个元素

优点：节省一半空间

缺点：在输入时用户容易迷失，复核表单比较困难

5、混合对齐

所有标签分散对齐

优点：页面排版整齐

缺点：标签的识别性很差，慎用

6、灵活应用标签

灵活对齐

输入框内标签和顶标签的组合方式

优点：用户的交互强，识别性好，目前较为推崇的一种方式

总结

（根据马泰奥·彭佐的2006年的标签对齐眼动实验，顶对齐标签移动到输入框需要50毫秒，右对齐标签需要240毫秒，而左对齐标签则需要500毫秒。顶对齐标签的效率是左对齐标签的10倍之多）

•填写时间短，长度灵活可变，用顶对齐

•填写时间短，空间有限，右对齐

•方便浏览标签，快速区分必填和非必填项，左对齐

•表单很短，空间很有限，输入框内对齐

•混合对齐慎用

•时间短，交互性强，可用灵活应用标签

二、输入框

ui kit

输入框的种类

常规的有：文本框、单选框、复选框、下拉框，

衍生出来：滑块，微调钮，开关钮，tab选框，搜索框

1、输入框长度

输入框长度

输入框的长度根据内容来定（用户不容易迷失），地址的输入框长度应该比验证码的长

2、表单的输入

为了让用户更加快速的完成表单

1、尽量简洁，去除无用的输入

2、设置默认输入或者改为选择、减少用户的思考（注意默认的选项用户是否喜欢）

3、即时校验与帮助

即时的反馈可以帮助用户更好的填写表单，不至于在提交时出现错误，影响体验。

校验与帮助

1、自动及时校验并帮助（当鼠标获取焦点时提示，失去焦点时自动验证）

2、用户不熟悉的场景在标签旁边提供帮助性的文字，帮助性的提示可采用按钮、问好、文字链接、图片等。

说明：1、长表单不适合做即使校验，用户会反感，

          2、校验的反馈应该告知问题所在和解决方案，同时，提示信息种类不能超过四种

表单的动作

主次按钮

1、主动作：表单的主要目的（保存、提交）

2、次动作：和主动作相反的，次要的处理页面的方式（取消、删除、返回）

用法：

1、主动作btn，次动作链接文字

 2、都是btn，再颜色大小上区分

按钮的相应：免重复提交可以修改状态『正在提交…』，变为灰色不可用，或者显示动画，进度条

服务条款

1、用复选框、用户可以自己选

2、去掉复选框、btn改为『同意并注册』，这样更加方便用户填写表单