表单设计系统 是做什么的？
目的
表单设计系统技能提供了一套设计 Web 表单视觉与空间框架的方法论。技术实现处理“如何做”，增长优化处理“为什么做”，而设计系统则定义了“做什么”和“在哪里做”。它确保表单元素——标签、输入框、选择项和操作按钮——被组织成一个可预测、可访问、高信任度的界面，从而降低认知负荷并防止用户出错。
使用场景
- 为表单设计 UI 套件或设计系统组件库。
- 为复杂的多步骤数据输入界面建立视觉标准。
- 审计现有表单的视觉不一致性或空间交互问题。
- 设计在多种设备上保持层级结构的响应式表单布局。
- 标准化错误与验证的可视化模式。
何时不应使用
- 通用搜索框： 简单的单输入搜索字段通常不需要完整的设计系统处理。
- 实验性交互媒体： 当类似表单的交互是叙事或艺术体验的次要部分时。
- 低风险微交互： 例如“赞/踩”或简单的开关按钮，不附带数据输入。
输入
- 信息结构： 要收集的具体数据点及其关系。
- 设备断点： 来自
responsive-grid-system的响应式需求。 - 品牌样式： 来自
fluid-spacing-system的排版尺度、颜色调色板和间距标记。 - 交互需求： 表单是否需要实时校验、文件上传或复杂选择项。
输出
- 输入组件规范： 标签、输入框、帮助文本、图标和错误消息的视觉定义。
- 布局蓝图： 字段分组、对齐方式（顶部 vs. 左侧）和操作按钮放置的空间规则。
- 选择组件映射图： 定义何时使用单选按钮、复选框、开关或下拉选择框。
- 反馈与状态矩阵： 悬停、聚焦、禁用、成功和错误状态的视觉处理方式。
工作流程
1. 定义组件结构
为每个“字段组”建立一致的结构。一个字段应包含：
- 标签： 清晰、简洁的文本，用于标识字段。
- 输入框： 交互容器（文本、下拉选择等）。
- 帮助/说明文本： 持续存在的指导信息（例如“密码必须为 8 个字符”）。
- 错误消息： 仅在验证失败时出现的上下文反馈。
2. 确定空间布局与对齐
确定标签与输入框之间的关系：
- 顶部对齐标签（推荐）： 最适合可扫描性和移动端响应式。
- 左侧对齐标签： 仅用于垂直空间紧张的数据密集型桌面界面。
- 分组： 组之间使用逻辑间距（例如
--space-l），组内使用较小间距（例如--space-s）。
3. 选择交互模式
为数据类型分配 UI 模式：
- 二选一选择： 使用复选框表示“是/否”或多选。
- 互斥选择： 2–5 个选项使用单选按钮；6 个以上选项使用下拉选择框。
- 即时开关： 使用开关按钮表示无需“提交”操作即可立即生效的设置。
4. 设计反馈循环
创建验证的视觉层级结构：
- 聚焦状态： 使用高对比度环指示当前活动字段。
- 错误状态： 使用颜色（通常为红色）、图标和边框粗细来提示错误。
- 成功状态： 对高重要性字段（例如用户名的可用性）使用细微提示（如绿色勾号）。
5. 规划响应式适配
映射表单在较小视口下的适应方式：
- 堆叠： 桌面端的多列布局必须在移动端堆叠为单列。
- 触摸目标： 确保所有交互区域（单选按钮、复选框、按钮）至少为 24x24px（WCAG 2.2 SC 2.5.8 最低要求）；首选为 44x44px，对于主要提交操作应设为默认。
决策规则
- 单列规则： 大多数表单使用单列布局，以保持清晰的垂直扫描路径并减少眼部疲劳。
- 标签对齐： 默认使用顶部对齐标签。它们可减少处理表单所需的眼部注视次数。
- 占位符 vs. 标签： 切勿将占位符用作标签。标签必须在用户开始输入后仍然可见。
- 按钮层级： 主要“提交”操作应视觉上最突出。次要操作（例如“取消”）应为文本链接或低对比度按钮。
- 邻近性： 将帮助文本和错误消息尽可能靠近输入框放置（通常在其正下方）。
约束条件
- 可访问性： 标签必须以编程方式与输入框关联（
<label for>或包裹）。文本和边框的对比度必须满足 WCAG AA（文本 4.5:1，UI 组件 3:1）。错误消息必须通过aria-describedby以编程方式与其输入框关联，无效字段必须设置aria-invalid="true"。焦点指示器不得被固定页眉、提示框或覆盖层遮挡（WCAG 2.4.11 焦点不被遮挡）。 - 响应式： 表单字段不得溢出其容器，也不得具有超过移动端视口的固定宽度。
- 视觉层级： 错误消息必须在视觉上与帮助文本区分，以确保不会被忽略。
常见失败模式
- “占位符标签”陷阱： 使用占位符代替标签，导致用户输入时丢失上下文。
- 过多列布局： 使用多列布局，打乱用户自然的从上到下扫描路径。
- 模糊的错误提示： 仅使用颜色显示错误（例如仅将边框变为红色），而没有图标或文本消息。
- 小触摸目标： 设计的单选按钮或复选框过小，不适合在移动端用拇指交互。
- “隐形”焦点： 未能提供清晰的焦点环，导致键盘用户无法导航。
验证标准
- 每个输入框都具有持续可见的标签。
- 表单遵循逻辑的单列垂直扫描路径。
- 错误状态结合使用颜色、图标和文本。
- 焦点指示器为高对比度且清晰可见。
- 交互元素（输入框、按钮）满足 WCAG 2.2 24x24px 触摸目标最低要求（首选 44x44px）。
- 布局在移动端视口下平滑过渡到单列。
- 主要、次要和第三级操作具有清晰的视觉层级。