一、概述
1、用户行为模式
- 入口设计：引导用户进入表单。
- 给出填写表单的理由（why）：有什么用，并给出快捷逃离入口。
- 填什么、怎么填(what、how)：包括填写前的帮助、填写后的验证。
2、应用场景
- 场景类型：注册与登录、填写（个人信息、提交订单）、发布（商品、内容）等。
- 场景设计：如注册时不强制要求填写资料，先进行引导；支付时提前验证：先提示余额是否足够。
二、表单组成部分
1、标题和附加图文
2、标签
- 标签后面是否加冒号对UX影响不大，视情况而定。
3、表单域
- 控件类型包括：输入框-单行文本框/多行文本框/密码框、单选按钮/复选框、单选/多选下拉选择框（或称下拉列表）、文件上传框、滑块等。
- 同一表单项，涉及控件的选择。如在PC端，与其在输入框中限制格式，不如使用下拉列表。但在移动端，应减少使用下拉列表，以分段控件、开关、滑块等代替。
4、操作：包括按钮和链接
- 按钮包括提交按钮、复位按钮、一般按钮（如“更多”）。
- 提交按钮属于主要操作、复位按钮等属于次要操作——误操作往往带来不愉快。尽量只用主要操作，非得使用次要操作时，淡化处理。
三、表单设计：框架层
1、多步骤表单（导航）
2、逻辑分组与排序
- 可见表单项分组
- 隐藏内容关联的表单项
- 隐藏部分表单项并以其他条件触发：隐藏内容为高级/额外输入，可满足部分用户需求。隐藏则又不干扰其他用户。
3、必填/必选项
- 用户基本熟悉“*”，具体则看目标用户群
- 登录等全部必填的表单不需要“*”
- 若只有少部分表单项为非必填，也标注必填——标注非必填若太弱则无法区分、太强则本末倒置
3.1 icon为*
*的位置一般为标签左侧、标签右侧、标签和表单域中间、表单域右侧。
标签和表单域同行且相隔太远时，*放在标签和表单域中间——视觉保持可水平直线'
必填icon在标签左侧：与表单域太远
必填icon在标签和表单域中间
3.2 icon非*
- 如设计为书签、木牌
3.3 无必填icon
- 全是必填，如登录注册等表单
3.4 文字标注
- 分框内注释、框外注释
4、填写前的帮助
4.1 系统直接输入：默认值
- 默认值即缺省值，分为整体默认和个性默认。一般用户有修改权限。如输入框默认值、下拉列表默认选项、单选按钮/复选框默认勾选、进步器默认数字等。
4.2 系统辅助输入：分框内、框外
- 框内分注释和操作——如输入框的数字微调、文件上传框的上传和取消。
- 框外分图文和操作，包括直接展示、点击触发、hover触发，其显示位置包括表单域右侧、下方或当前页弹出框等。
5、填写后的验证
表单验证四要素：时间、位置、颜色、反馈信息。
5.1 时间——何时验证
- 提交后验证：（填写所有信息）提交表单后，正确/错误信息同时验证显示。
- 即时验证：每完成一项即显示验证的反馈信息。
即时验证的目标：提高成功率/减少错误率、缩短时间/减少视觉停留、提高满意度、提升转化率。
5.2 位置——显示信息/提示条的位置
- 表单项右侧或下方、表单顶部、气球状提示、弹层、对话框。
- 若采用提交后验证，web表单用锚定位到首个错误项并获取焦点。
5.3 颜色
- 表单域高亮、字体颜色、提示条边框和底色
5.4 反馈信息
- 可分为两大类：当前状态和下一步操作。
- 每大类可分三小类：成功提示、报错、无对错的友情建议。
* 成功后给出鼓励，包括提交成功后跳转页面时的成功反馈
* 反馈方式包括可视化效果，如以进度条展示密码安全程度。
* 报错以积极的引导方式，考虑给出解决方案。
* 自动纠错，记住得告知用户。
6、表单对齐方式
目的：清晰的视觉浏览线、减少停留时间
6.1 顶端对齐（又称垂直对齐）
- 优点：标签和表单域接近，视觉垂直下移即可。
-
缺点：增加垂直空间，表单项较多时增加页面滚动。
垂直对齐建议：标签字体加粗，以区分表单域内的文字
6.2 右对齐
- 优点：减少标签和表单域距离，减少垂直空间。
-
缺点：左边标签参差不齐，给通览标签造成障碍。
右对齐
6.3 左对齐
- 优点：便于浏览标签，减少垂直占用空间；帮用户快速通览标签而不被表单域干扰；适用于标签长度接近的表单。
-
缺点：标签和表单域相隔太远时，用户目标须来回在标签和表单域跳转。
2.png
对齐方式小结：
- 根据眼动仪定量研究（即热点图），垂直对齐用户视线集中，停留点少；右对齐视觉移动距离较少，且视线停留点较少；左对齐用户视线移动较快，视觉停留点较多。
- 如果主目标是减少填表时间，可采用垂直对齐；若想尽量减少垂直空间，可采用右对齐；若须用户仔细浏览标签、了解每个表单域，可采用左对齐——pc端更适合右对齐，手机端更适合左对齐。
