表单设计

2015-12-19 本文已影响291人马老师0000

一、概述

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端更适合右对齐，手机端更适合左对齐。