表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

• 用于创建一个实体或收集信息。
• 需要对输入的数据类型进行校验时。

设计目标

帮助用户明确当前页面任务，快速查找和定位修改目标，轻松准确地理解表单项含义及生效后果，同时简化填写流程，确保用户准确、轻松、快速地完成任务。

设计原则

• 高效：通过合理的信息组织和组件的使用，使用户可以快速完成表单页任务。
• 安全：通过记忆、防错等原则，保障用户不出错。
• 明确：标题、选项、提示等内容准确传达含义；操作后及时响应反馈。

表单布局

常见对齐方式有三种，标签水平左对齐、标签水平右对齐、标签与控件顶对齐。据眼动仪数据 (opens new window)研究：

对齐方式	优点	缺点	适用场景
顶对齐	填写速度快，标签离输入区很近，扫描路径垂直单一	增加了垂直空间	填写项少，如注册表单
右对齐	填写速度快，标签离输入区很近，缩短了垂直空间	标签的可读性有所降低	填写项较多，标签都较长，如常规数据表单
左对齐	标签扫描更容易，缩短了垂直空间	标签离输入区很远，填写速度降低	复杂表单，需要谨慎填写的高级表单

顶对齐

最适合快速浏览操作。标签和输入区垂直依次排列，从而降低了对页面宽度的要求。

右对齐

标签右对齐和输入区水平排列，从而降低了对页面高度的要求。但与标签垂直顶对齐相比，由于标签文字左侧参差不齐，对问题的认知和扫描时间变得更长。右对齐不适合复杂表单，视觉形态会很乱。

左对齐

操作用时最久，适合布局复杂表单。

表单可用性设计评审准则

序号	细则	说明
1	打开输入界面，光标自动focus到第一项必填的输入框	如，用户点击“新建项目”，光标应在“项目名称”输入框闪动，用户可以直接输入。
2	表单名称符合期望	如，“新建项目”一般采用动宾短语。
3	提供键盘辅助操作	如，键盘切换行、按回车提交，可以提高表单的效率。
4	标签（Label）简洁直观	标签（Label）简洁直观 如，label避免过长，可在控件内置文案（placeholder）说明代替。
5	使用合适的控件	如，清楚radio、checkbox、select等控件使用场景并合理应用。对于选项超过20的选择框，建议使用可搜索的类型。详见SandUI Form类控件 (opens new window)。
6	明确标明必填/非必填	如，用*或placeholder标明必填项。
7	合适的默认值	如，选择框认选中用户频率使用或需重点引导用户使用的选择项，以减少用户操作。
8	控件顺序符合用户期望	信息组织符合亲密性原则，非必填排序低于必填项。
9	合适的控件长度	输入框长度暗示可用输入字符长度，如验证码长度一般短语名称。
10	输入框后有合适的单位	如，金额的单位是“元”。
11	选项按选择几率的高低先后排序	如，用户经常筛选“未完成”任务较“已完成”更多。
12	有提示信息明确指导用户填写	如，提示字符规则等。
13	输入错误时，及时明确指导用户	如，明确出错位置且给出修改建议。
14	按钮主次分明	如，“保存”为主要动作按钮使用主按钮，“取消”是次要按钮使用一般按钮。
15	防止用户多次提交	如，用户习惯双击按钮，表单会提交2次重复的数据，若请求时间较长，点击按钮后提供全局加载避免再次点击。
16	填写时有实时校验	如，格式错误、未输入必填项等前端可校验的，提供及时报错，不需要到提交时才提示。
17	提交后的响应，符合用户预期	如，提交成功返回到列表页，提交失败停留在当前页。
18	多步操作时，用户能返回到上一步	如，分布表单，通常有「上一步」「下一步」。
19	选择框提供完整的选项辅助用户判断	如，选择用户时，选项显示“帐号（昵称）”。
20	便捷的“增加选择项”功能	如，在选择时没有用户所需的选项，提供「新建」，不中断当前任务，打开浏览器新标签直达新建页面。保存后，点击选择控件读取最新数据。
21	切换选项时保留已选项	如，切换tab表单或步骤表单时，记录切换前已填写的内容。
22	表单未保存时做好防错	如，页面表单已填写欲离开当前页，会弹出内容未保存的二次确认；模态对话框表单，点击遮罩时不会关闭。