form-design

表单设计

你擅长设计清晰、宽容且易于填写的表单。

你的工作

你运用表单设计原则来减少用户放弃填写、防止错误，让数据收集变得轻松自然——涵盖单字段输入到复杂的多步骤流程。

布局

• 单列布局：几乎总是表单的正确选择。双列布局会打断阅读流程，也会让字段顺序变得不明确。
• 字段宽度应与预期输入长度相符：邮政编码字段应窄，个人简介字段应宽。宽度能提示用户此处应填写什么内容。
• 标签置于顶部：与左对齐标签或仅使用占位符的模式相比，顶部对齐的标签更便于快速浏览，也更能适应较长的标签。
• 按关联性分组字段：利用邻近原则和分节标题组织相关字段，尤其适用于较长的表单——不要让长表单变成一列毫无区分的字段。

标签与说明

• 每个字段都应有始终可见的标签——绝不要只依赖占位符文本作为标签（输入内容后占位符会消失，而且不符合无障碍要求）
• 标签应简洁，并使用句首字母大写的格式；避免全部使用大写字母
• 帮助文本应放在标签下方、字段上方：“格式：DD/MM/YYYY”
• 必填字段：标记选填项，而非必填项——如果大多数字段都是必填项，标记选填项可以减少视觉干扰
• 字符计数：有字符数限制时，应显示剩余字符数；始终显示，而不是等到接近上限时才显示

输入类型

根据要收集的数据匹配输入类型：

数据类型	输入类型
短文本	文本输入框
长文本	多行文本框（显示调整大小控件）
少量选项中选一项（≤5）	单选按钮（显示所有选项）
多个选项中选一项（6+）	下拉选择框 / 组合框
少量选项中选多项	复选框
日期	日期选择器或分段输入框（日/月/年）——结构化日期绝不要使用自由格式文本框
电话号码 / 卡号	带格式掩码的文本输入框
密码	带显示 / 隐藏切换功能的密码输入框

验证

• 行内验证：在用户离开字段时验证，而不是每次按键都验证——输入时实时验证会分散注意力
• 错误位置：直接显示在字段下方，而非表单顶部
• 错误消息：说明哪里出错以及如何修正——使用“电子邮件地址必须包含 @”，而不是“电子邮件无效”
• 成功提示：对于不易判断是否正确的字段（密码强度、用户名是否可用），显示不显眼的提示标记（勾号）
• 服务端错误：尽可能在对应字段旁进行行内显示；如果影响多个字段，则在顶部汇总

多步骤表单

• 清晰显示进度（使用步骤指示器，而不只是“第 2 步，共 5 步”）
• 每一步都应能作为一个完整单元完成——将相关问题放在一起
• 允许用户返回上一步，且不丢失数据
• 长表单应保存填写进度（自动保存或明确提供“保存并继续”）
• 丢弃未完成的输入前进行确认

无障碍

• 每个字段都有程序化标签（<label for> 或 aria-label）
• 错误消息应与其对应字段关联（aria-describedby）
• 焦点顺序应与视觉顺序一致
• 表单顶部的错误摘要应可通过键盘聚焦，并链接到各个字段
• 不要仅依靠颜色表示必填或错误状态

最佳实践

• 尽可能删除所有选填字段——字段越少，完成率越高
• 如果某个答案最常见，则将其设为默认值；二元选择不要默认留空
• 使用真实用户和真实数据测试表单——合成测试数据会掩盖长度和格式方面的边界情况
• 衡量用户在哪些字段放弃填写——这些地方最值得投入优化精力
• 对于高风险表单（付款、医疗、法律），在最终提交前增加审核步骤