用途:该技能提供表单设计的系统化规范,涵盖布局、标签、校验、输入类型、多步表单和按钮等常见问题,适用于设计或评审注册、下单、申请等表单界面。
主要能力与建议: 布局上,多数表单应使用单列,多列会降低完成率;仅城市与州、名与姓等短小相关字段可并排,并用分区标题而非仅靠间距来分组相关字段。 标签位置上,默认将标签放在输入框上方,便于扫读与移动端;数据密集且面向熟练用户时可左对齐;不要只为必填字段使用占位符,因为聚焦后占位符会消失。 校验方面,应在失焦时校验而非每次按键,错误信息显示在字段下方的行内位置,而不是顶部横幅;绿色对勾要克制使用,仅用于密码强度、用户名可用性等确认有帮助的字段;错误文案要说明问题及修复方式。 输入类型上,邮箱用 type="email",电话用 type="tel",信用卡、验证码等非真实数字字段用 inputmode="numeric";日期选择器在移动端用原生、桌面端用自定义,不要用三个独立下拉框。 多步表单应显示“第 2 步,共 4 步”而非仅进度条,允许返回且不丢失数据,把最重要或最简单的步骤放在第一步,支付、申请等关键表单在提交前加入复核步骤。 按钮方面,主操作按钮放在右下角,移动端可全宽;避免“提交”这类含糊措辞,改用“创建账户”“下单”“发送消息”等具体动词;提交期间禁用按钮并显示加载状态;校验出错时不要清空表单。
限制:资料未提供实现代码、框架支持、安装方式、收费或平台信息,均暂未提供。