按钮与动作系统 是做什么的？
目的
按钮与动作系统提供了一种设计用户交互主要驱动力的方法论。按钮是用户意图与系统响应之间的基本纽带。该系统确保每个动作在视觉上得到恰当优先级排序（层次性）、风格一致（连贯性），并在所有设备上易于交互（可用性）。它超越了“制作一个按钮”的层面，而是定义了不同动作类型如何在布局中相互关联的逻辑框架。
使用场景
- 定义设计系统中的按钮组件库。
- 在 Hero 区域或页面标题中建立动作层次。
- 组织相关动作分组（例如：保存、取消、删除）。
- 设计图标按钮或浮动操作按钮（FAB）等专用触发器。
- 标准化按钮大小与布局密度之间的关系。
不适用场景
- 全局导航链接： 如需在主要站点部分之间导航，请使用
site-navigation-system。 - 文内超链接： 如需在段落文本中嵌入指向更多信息的链接，请使用标准排版处理。
- 纯装饰性元素： 不可点击或触摸的元素请勿使用按钮样式。
- 复杂表单输入： 如需选择选项（复选框、单选按钮、下拉列表），请使用
form-design-system。
输入
- 动作优先级： 任务是主要（级别1）、次要（级别2）还是三级（级别3）？
- 动作倾向： 动作为“正面”（提交）、“中性”（取消）还是“破坏性”（删除）？
- 上下文密度： 按钮位于哪里？（例如，宽敞的 Hero 区域 vs. 紧凑的数据表行）。
- 品牌令牌： 调色板、排版比例和圆角偏好。
输出
- 按钮变体矩阵： 主要的、次要的、幽灵的和危险变体的定义样式。
- 尺寸缩放： 一系列高度和内边距（例如，小、中、大）。
- 内部结构规格： 文本、图标和容器的内部间距规则。
- 动作分组规则： 多按钮之间的对齐、顺序和间距指南。
工作流程
1. 建立变体层次
根据按钮对用户目标的重要性分配视觉权重：
- 主要（级别1）： 高对比度，填充背景。通常是页面的“主要”目标。每个视图仅一个。
- 次要（级别2）： 轮廓或低对比度背景。用于替代或支持性操作。
- 三级/幽灵（级别3）： 默认状态下无背景或边框。用于低优先级任务或密集 UI（如表格）中。
- 危险： 高对比度颜色（通常为红色）。严格用于破坏性、永久性操作。
2. 定义尺寸缩放
使用 fluid-spacing-system 将按钮尺寸映射到布局上下文：
- 大（Hero/登录页）： 最大突出度。高垂直内边距。
- 中（默认）： 表单、模态框和标题的标准。
- 小（紧凑）： 用于空间有限的侧边栏、卡片和数据表。
3. 设计内部结构
标准化按钮容器的结构：
- 内边距： 保持一致的横向与纵向比例（通常横向 = 1.5 倍至 2 倍纵向）。
- 图标集成： 定义图标与文本之间的间隙（例如
--space-xs）。 - 圆角： 确定“圆润度”（尖锐、圆角或药丸形）以匹配品牌的视觉基调。
4. 创建按钮组
将多个动作放在一起时，遵循逻辑顺序：
- 顺序： 将主要动作放在“结论”位置（桌面端右侧，移动端垂直堆栈顶部）。
- 间距： 在按钮组中使用一致的间隙（例如
--space-s）。 - 对齐： 模态框/标题中右对齐动作；表单中左对齐；Hero 区域中居中对齐。
5. 定义响应式行为
确保动作在所有视口上仍可用：
- 全宽（块级）按钮： 在移动端，小按钮通常展开以填充容器宽度，方便拇指触及。
- 仅图标后备： 在极其紧凑的标题中，文本标签可能隐藏而仅显示图标（确保存在
aria-label）。
决策规则
- “一个主要”规则： 任何单个视口/上下文中只能可见一个主要（级别1）按钮，以避免“选择瘫痪”。
- 幽灵 vs. 链接： 当动作为功能性时（例如“关闭”、“取消”）使用幽灵按钮；当动作为导航性时（例如“了解更多关于我们的政策”）使用文本链接。
- 图标放置： 使用前置图标（左侧）来阐明动作（例如搜索图标）；使用后置图标（右侧）指示方向（例如用于“下一步”的箭头）。
- 危险对比度： 破坏性按钮必须与主要按钮外观显著不同，以防止意外点击。
约束条件
- 无障碍： 文本必须满足 WCAG AA 对比度（4.5:1）。交互元素必须有清晰的
focus状态（参见interactive-state-system）。 - 触摸目标： 所有按钮的最小交互区域必须为 24x24 像素（WCAG 2.2 SC 2.5.8），即使视觉元素较小；主要动作和移动端布局建议使用 44x44 像素作为舒适默认值。
- 截断： 按钮文本不应截断。如果标签过长，请重新评估文案或允许按钮换行/扩展。
常见失败模式
- 按钮汤： 在一个页面上使用 3-4 个主要按钮，稀释了主要 CTA 的重要性。
- “灰色区域”： 按钮因缺乏足够对比度或颜色而看起来像禁用元素。
- 缺失交互： 未能定义
hover或active状态，使用户不确定点击是否被记录。 - 微小目标： 设计小型、纯文本的幽灵按钮，在移动屏幕上几乎无法点击。
- 令人困惑的对齐： 在同一流程中混合不同的按钮对齐方式，迫使用户“寻找”下一个动作。
验证标准
- 每个页面/视图都有一个清晰的主要动作。
- 按钮变体（主要、次要、幽灵、危险）使用一致。
- 按钮满足 WCAG 2.2 24x24 像素最小触摸目标（2.5.8），主要和移动端动作使用 44x44 像素。
- 按钮组在一起时保持视觉层次。
- 焦点状态明显且高对比度。
- 按钮标签简洁并使用“动作动词”（例如“保存”、“创建”、“加入”）。
- 移动端视口在适当情况下使用全宽按钮以便于触及。