用途
Signature Pad（签名板）是一种用于让用户手写签名或进行同意签署的交互模式。它帮助团队以可靠的方式采集手写标记或同意签名，使整个过程显得合法、可恢复且能感知设备。该模式最适合需要采集同意与审批的场景，相比相邻的交互模式，它应在不隐藏状态、规则或恢复路径的前提下减少用户摩擦。
适用场景
- 同意与审批采集
- 交付确认
- 文档签署任务
应避免的场景
- 当值是二元的、微小的或完全受限时，应使用更简单的原生控件。
- 当原生浏览器输入已经能很好地解决主要任务时，避免使用自定义行为。
- 如果产品无法从中获益，不要添加额外的格式或验证。
实施工作流
- 在复制示例之前，确认该模式与问题和约束相匹配。
- 从 references/pattern.md 中的解剖结构和示例开始，然后选择最小的可行变体。
- 在叠加视觉打磨之前，先应用无障碍、性能和交互护栏。
- 使用测试指南验证键盘、屏幕阅读器、响应式和失败场景下的行为。
无障碍护栏
键盘交互
- 验证签名板能否仅用键盘完成。
- 当模式打开、更新或显示额外 UI 时，保持逻辑上的焦点顺序。
- 保留在高倍缩放时仍然可读的可见焦点状态。
屏幕阅读器支持
- 优先使用语义元素，仅在语义本身不足时才添加 ARIA。
- 在正确的位置以正确的礼貌级别宣布状态变化，如错误、加载或完成。
- 在有用时，通过 aria-describedby 或结构化标题连接标签、提示和状态文本。
视觉无障碍
- 不要仅依靠颜色来传达严重性、完成度或选中状态。
常见错误
使用错误的验证时机
问题：对部分输入的即时验证会让该模式显得苛刻且嘈杂。 修复方式：等到用户在该字段中已有足够信息后再验证，根据规则风险在失焦、暂停或提交时验证。
标签、提示和错误分离
问题：当文案在视觉上分离时，人们无法判断哪条消息属于哪个控件。 修复方式：将标签、帮助文本和验证消息紧密分组，并在适当处用 aria-describedby 连接。
忘记触摸与自动填充行为
问题：仅桌面端的样式掩盖了移动端键盘、自动填充和粘贴流程行为不同这一事实。 修复方式：在宣称模式完成之前，用自动填充、粘贴、缩放和屏幕键盘测试该控件。
相关模式
- https://uxpatterns.dev/patterns/forms/button
- https://uxpatterns.dev/patterns/forms/file-input
- https://uxpatterns.dev/patterns/forms/form-validation
完整实施细节、示例和测试说明见 references/pattern.md。
模式页面：https://uxpatterns.dev/patterns/forms/signature-pad