表
表单体验最佳实践
作者：鹿Sir开发工具v1
面向注册、结账、设置和线索收集表单的体验与无障碍审查工作流，输出按优先级排序的改进清单、逐字段改写方案、校验与错误提示规格，以及可直接落地的 HTML/React 伪代码。当用户需要审查表单设计、优化表单转化、改进表单报错文案或表单无障碍合规时触发。触发词：表单审查、表单优化、表单无障碍、错误提示。
下载量
373
点赞
90
价格
免费
技能文档
--- name: form-ux-best-practices title: 表单体验最佳实践 category: 开发工具 description: 面向注册、结账、设置和线索收集表单的体验与无障碍审查工作流，输出按优先级排序的改进清单、逐字段改写方案、校验与错误提示规格，以及可直接落地的 HTML/React 伪代码。当用户需要审查表单设计、优化表单转化、改进表单报错文案或表单无障碍合规时触发。触发词：表单审查、表单优化、表单无障碍、错误提示。 --- # 表单体验最佳实践 ## 工作模式 - 默认以纯文本方式工作。 - 除非用户明确要求，不做以图片为主的点评、仪表盘或视觉重设计方向。 - 优先产出能改善完成质量、错误恢复、无障碍和信任感的决策。 ## 所需输入 审查前先收集以下信息： - 表单场景：注册、结账、设置、线索收集或其他。 - 业务目标与用户目标。 - 现状材料：规格说明、HTML、React、转成文字的截图截图描述，或混合形式。 - 字段清单及必填/选填状态。 - 当前校验行为（行内、失焦、提交、服务端）。 - 目标设备（桌面、移动、两者）。 ## 澄清问题 仅在关键输入缺失时提问；输入齐全时直接进入审查，不追问。 - 这个表单要支撑的具体决策是什么（创建账号、完成购买、更新设置、收集线索）？ - 完成该决策哪些字段是必填的？ - 提交后会发生什么（成功路径、重试路径、放弃路径）？ - 是否有法律或政策约束（年龄校验、账单信息、同意书、地区规则）？ ## 技能工作流 ### 步骤1：定义任务关键结果 用一句话描述用户侧的成功标准，再用一句话描述业务侧的成功标准。 ### 步骤2：映射摩擦点 找出每个多余字段、含糊标签、可避免的决策和中断。 ### 步骤3：审查字段架构 检查字段顺序、分组、必填/选填的清晰度和渐进式披露。 ### 步骤4：审查校验行为 检查校验时机、提示具体性、恢复路径，以及行内态与提交态的一致性。 ### 步骤5：审查无障碍语义 检查标签、说明文字、焦点顺序、键盘操作和错误关联。 ### 步骤6：审查移动端人体工学 检查输入类型、inputmode、键盘提示、间距、触控目标舒适度以及滚动/焦点行为。 ### 步骤7：审查信任信号 解释为什么需要请求敏感字段，并把隐私保证放在决策时刻。 ### 步骤8：按模板产出报告 严格使用 `assets/report_template.md` 的结构输出结果。 ## 参考资料加载 只在需要原则级依据、或在互相竞争的表单模式之间做裁决时，加载 `references/canon.md`。执行时优先按上述确定性工作流；canon 用来为建议提供理由，不替代直接分析。 ## 无障碍检查 - 确保每个控件都有来自可见标签的可编程名称，而不是仅靠占位文本。 - 确保 `label` 通过 `for`/`id` 或显式包裹模式与控件关联。 - 确保帮助文本和错误通过 `aria-describedby` 关联（如适用）。 - 确保校验失败后无效字段设置 `aria-invalid="true"`。 - 确保错误摘要（如使用）链接到每个无效字段，并在提交失败后获得焦点。 - 确保制表/焦点顺序与视觉、逻辑顺序一致。 - 确保仅用键盘即可完成填写和纠正，无需指针交互。 ## 移动端检查 - 使用正确的键盘提示（`type`、`inputmode`、`autocomplete`、`autocapitalize`）。 - 输入过程中保持标签持续可见。 - 避免在窄屏上压缩触控目标的多列字段排布。 - 帮助/错误文本贴近字段，且无需横向滚动即可见。 - 避免强迫上下文切换循环（字段失焦 → 页面跳动 → 键盘反复收起/弹出）。 ## 校验策略 - 必填校验放在提交时，而不是首次击键。 - 格式校验放在失焦时，或已输入足够字符可推断意图时。 - 实时校验只用于高价值、低噪声场景（例如密码强度条、用户名可用性）。 - 每条错误只给一个明确的恢复动作。 - 行内错误文案与提交时错误摘要文案保持一致。 - 多错误或长表单（首个错误可能在屏幕外）使用错误摘要。 ## 字段设计规则 - 优先使用字段上方的显式标签；不要把占位符当标签。 - 显式标注选填字段；除非产品政策要求显式必填徽标，否则默认视为必填。 - 只为当前决策请求最少的数据。 - 相关字段分组，并遵循用户心智模型顺序（结账：联系方式 → 配送 → 支付）。 - 可预测的约束（格式、长度、字符规则）在输入前说明。 ## 文案规则 - 使用直接、具体的表述，指出问题和下一步动作。 - 避免指责性语言和「输入无效」之类的含糊说法。 - 格式错误高发时，说明可接受的格式。 - 保持中性、面向恢复的语气。 - 标签与错误用语保持一致（同一字段在标签、帮助和错误中名称相同）。 ## 隐私与信任线索 - 在请求敏感信息的当下解释为什么需要它。 - 把信任线索放在承诺动作附近（提交/下单），不要埋在页脚。 - 对通讯类字段，澄清同意的范围和频率。 - 区分必要的运营性同意和可选的营销同意。 ## 转化与摩擦规则 - 从初始流程中移除非必要字段。 - 次要信息使用渐进式披露。 - 安全且可逆时优先使用智能默认值。 - 提交失败后保留用户已输入的值。 - 除非风险确有必要，尽量减少重复确认字段。 ## 优先级评定（P0/P1/P2） - P0：阻断完成、带来法律/合规风险，或使表单对辅助技术完全不可用。 - P1：造成明显困惑、可避免的错误，或可度量的放弃风险。 - P2：改善清晰度、速度和完成度，但不阻断任务。 ## 输出格式 始终按以下顺序填写 `assets/report_template.md` 的各节： 1. 主要问题（P0/P1/P2） 2. 逐字段改写 3. 校验与错误提示规格 4. 无障碍检查清单 5. 上线就绪清单 6. 可选：可直接使用的代码片段 ## 可选交付片段模式 用户要求可落地实现指引时： - 输出语义化 HTML 或 React 伪代码。 - 包含标签、帮助文本钩子、错误绑定和 `autocomplete` 属性。 - 可能同时出现 2 个以上错误时，包含提交时错误摘要模式。 - 片段只关注表单行为与语义，不涉及视觉样式。 ## 可选静态审查脚本 使用 `scripts/form_audit.py` 对 HTML 表单做快速静态检查。 ```bash python3 scripts/form_audit.py /path/to/form.html ``` 脚本检查项： - 缺失标签映射 - 重复 ID - 缺失 `name` 属性 - 占位符被当作标签使用 - 常见字段缺少 autocomplete - 可能的输入类型不匹配
使用说明
# 表单体验最佳实践 面向注册、结账、设置与线索收集表单的体验与无障碍审查工作流，产出按优先级排序的改进报告与可直接落地的字段方案。 ## 使用 ```bash # 对已有 HTML 表单做快速静态检查 python3 scripts/form_audit.py /path/to/form.html ``` 也可以直接把表单规格或代码发给助手，说「帮我审查这个注册表单的体验和无障碍问题」，即可获得按 P0/P1/P2 排序的改进清单、逐字段改写、校验与错误提示规格。 ## 工作原理 技能按确定性八步工作流审查表单：定义任务关键结果、映射摩擦点、依次审查字段架构、校验行为、无障碍语义、移动端人体工学和信任信号，最后按标准模板输出报告。审查依据内置的表单设计原则集（references/canon.md）与 WCAG 映射检查清单；输出模板见 assets/report_template.md，配套输入输出示例见 assets/。 ## 目录结构 - `SKILL.md`：工作流与审查规则 - `references/canon.md`：表单设计原则集 - `assets/report_template.md`：报告输出模板 - `assets/example_input_*.md`：示例输入 - `assets/example_output_report.md`：示例输出 - `scripts/form_audit.py`：HTML 表单静态检查脚本 ## 依赖 - 仅 `python3` 标准库
支持平台：Qoder · QoderWork · Claude · Codex 等 AI 编程助手