SuperAPI AI 工具集

form-design

设计与创作

查看项目

更新于 10-16 07:46

技能介绍

Form Design 是一个表单设计技能,面向“清晰、宽容、高效填写”的表单设计目标。当产出物是一个表单时可使用该技能;若需要产品级的错误策略,则另有其他途径(资料未具体说明)。

主要用途 将表单设计原则应用于从单字段输入到复杂多步骤流程的场景,以减少放弃率、预防错误,让数据收集过程更省力。

根据所提供的资料,其覆盖内容包括以下几个方面。

布局

  • 单列布局:几乎总是表单的正确选择。两列布局会破坏阅读流,并使字段顺序产生歧义。
  • 字段宽度应反映预期输入长度:邮编字段应窄,个人简介字段应宽。宽度是对该处应填内容的可供性提示。
  • 顶部对齐标签:相较左对齐或仅用占位符的模式,更易于扫读,且对长标签更具适应性。
  • 使用接近性(接近律)对相关字段分组,较长表单使用分节标题——不要使长表单呈现为一整列未经区分的字段。

标签与说明

  • 每个字段都有常驻标签——绝不将占位符文本作为唯一标签(占位符在输入时会消失,且不符合可访问性要求)。
  • 标签应简洁并使用句首大写;避免全部大写。
  • 辅助文本位于标签下方、字段上方,例如“Format: DD/MM/YYYY”。
  • 必填字段处理:标记可选而非必填——若大多数字段为必填,标记可选项能减少视觉噪音。
  • 字符计数:存在长度限制时显示剩余字符数;应始终显示,而非仅在接近上限时显示。

输入类型 应使输入类型与所收集的数据相匹配:

  • 短文本:文本输入
  • 长文本:文本域(带可见的调整大小)
  • 从少量选项(≤5)中选一:单选按钮(全部可见)
  • 从较多选项(6+)中选一:下拉选择 / 组合框
  • 从少量选项中多选:复选框
  • 日期:日期选择器或分段输入(日/月/年)——结构化日期绝不使用自由文本字段
  • 电话 / 卡号:带格式化的文本输入与掩码
  • 密码:密码输入并带显示/隐藏切换

校验

  • 内联校验:在失焦时(用户离开字段时)校验,而非每次按键时——输入时的实时校验会造成干扰。
  • 错误位置:直接位于字段下方,而非表单顶部。
  • 错误信息:说明出了什么问题以及如何修正——例如“Email address must include @”,而非“Invalid email”。
  • 成功提示:对正确性不明显的字段(密码强度、用户名可用性)给出细微提示(勾选标记)。
  • 服务端错误:尽可能内联呈现到对应字段;若影响多个字段,则在顶部汇总。

多步骤表单

  • 清晰显示进度(步骤指示器,而不仅是“Step 2 of 5”)。
  • 每一步应感觉可作为独立单元完成——相关问题放在一起。
  • 允许返回导航且不丢失数据。
  • 为长表单保存进度(自动保存或明确的“保存并继续”)。
  • 在丢弃已填写内容前进行确认。

可访问性

  • 每个字段都有程序化标签(<label for> 或 aria-label)。
  • 错误信息与对应字段关联(aria-describedby)。
  • 焦点顺序遵循视觉顺序。
  • 顶部错误摘要可被键盘聚焦,并链接到每个字段。
  • 不要仅用颜色来指示必填或错误状态。

最佳实践

  • 尽可能删除每一个可选字段——字段越少,完成率越高。
  • 存在最常见答案时默认选中该答案;二元选择不要默认留空。
  • 用真实用户输入真实数据来测试表单——合成测试数据会掩盖长度与格式的边界情况。
  • 测量字段级放弃率(用户在哪个字段离开表单?)——这是值得投入优化工作的地方。
  • 对高风险表单(支付、医疗、法律),在最终提交前增加复核步骤。

适用场景 适用于产出物为表单的设计任务,从单字段输入到复杂的多步骤流程,尤其是需要降低放弃率、预防错误、提升可访问性的数据收集场景。

限制与暂未提供 资料未提供该技能的安装方式、运行环境、价格或收费信息、任何量化效果数据,也未说明其具体实现细节与依赖,这些内容暂未提供。