Question

表单设计

Answer 1

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

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

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

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

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

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

优点：占用垂直空间小

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

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

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

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

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

优点：节省一半空间

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

所有标签分散对齐

优点：页面排版整齐

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

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

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

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

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

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

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

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

•混合对齐慎用

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

输入框的种类

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

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

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

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

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

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

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

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

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

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

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

表单的动作

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

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

用法：

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

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

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

服务条款

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

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