ux-buttons

按钮技能

此技能的行为方式（请先阅读）

这是一项生成式技能。默认的失误模式截然相反：千篇一律（每个操作都使用相同的通用按钮，没有层级，标签含糊地写着“提交／确定”，缺少状态）和过度装饰（每个按钮都凸起、有阴影、带品牌元素、塞满图标）。检查清单并非强制要求，因此此技能设有以下把关步骤：

1. 明确上下文——平台、屏幕上的操作层级、品牌个性，以及是否存在破坏性操作。
2. 应用始终适用的核心原则——根据层级选择类型、使用动作动词作为标签、覆盖所有状态、确保尺寸与对比度的无障碍性。
3. 呈现风格选项（形状、凸起效果、仅图标、FAB、宽度策略），将其作为需要权衡的决策，而非默认选择。

接着，交由 ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit 和 ux-microcopy-audit 进行验证。

---

步骤 0 — 设计前明确上下文

如果信息未知，请先询问；如果未得到答复便继续，请说明你的假设：

• 平台——移动端对所有方面的要求更严格：触控目标（≥48×48px）、相邻按钮之间的间距、纵向排列按钮的固定宽度，以及触觉反馈。桌面端则依赖悬停和光标提示。
• 此屏幕上的操作层级——用户来到这里要做的一件事是什么？只有该操作使用主要按钮；其他操作都应为次要或第三级操作。
• 品牌个性——严肃／可信还是友好／活泼，将决定形状（锐角 ↔ 圆角 ↔ 胶囊形）以及样式可以有多鲜明。
• 是否存在破坏性或不可逆操作？——这会改变默认做法：使用明确的动词标签（“删除项目”，绝不用“是”），采用语义色彩（红色系），绝不使用 FAB，默认情况下也绝不让按钮在视觉上占主导地位。

---

始终适用的核心原则（几乎适用于所有情况）

根据操作的重要性选择类型，而非外观

• 主要——界面希望用户执行的操作。每个视图只设一个，视觉上最突出（高饱和度、高对比度的填充色）。如果所有内容都很突出，就没有任何内容真正突出。
• 次要——替代操作（例如“提交”旁边的“取消”）。样式应更低调：描边或幽灵按钮效果良好，但描边需要有足够的对比度才能保持清晰可见。
• 第三级——少见或优先级较低的操作。使用文本按钮、柔和的颜色和较轻的字重；与主要按钮保持距离，以免用户误触。
• 分组类型：菜单／下拉按钮将重要性相同的相关操作收纳到列表中；分割按钮提供一个默认的一键操作以及一个下拉菜单——保留视觉分隔符，避免用户误以为整个按钮都会打开菜单；切换组将 2–3 个互斥选项同时显示，其中一个处于选中状态。
  • ❌ 将下拉菜单用作无关操作的收纳筐 ✅ 只放入相关操作，以简化选择

标签是命令

• 使用具体的动作动词说明操作结果：❌“是”／“否”／“确定”／“前往” ✅“删除项目”／“保存更改”／“订阅”
• **2–3 个词，单行显示。**两行标签会导致用户选错。不要使用斜体、下划线或句末标点；只需使用比正文更粗的字重即可。
• 标签字号至少为 16px，水平和垂直方向均居中。
• 在有助于识别时，将图标放在左侧（LTR 语言中）；尾随图标只是装饰，唯一下拉箭头除外，因为左侧图标需要为它留出空间。
• **图标 + 标签优于单独使用其中任一项。**软盘图标对部分受众毫无意义；标签能明确含义，也便于屏幕阅读器播报。

为每种状态进行设计，而不只是默认状态

启用、悬停、按下（提供简短但至关重要的反馈，让用户知道触控已生效）、聚焦（显示可见的环形边框——这对键盘用户和辅助技术用户至关重要；不要让聚焦样式与其他状态过于相似，以免难以区分），以及禁用（呈灰色，明确表示不可操作）。对于用于切换开／关状态的按钮，必须明确显示当前操作方向。

尺寸、留白和对比度不容妥协

• 移动端触控目标 ≥ 48×48px（约 9mm 指腹宽度，符合 WCAG/Material 指南）；桌面端应留出充足内边距，确保点击区域足够大。
• **内边距经验法则：**水平内边距 ≈ 垂直内边距的 2 倍；至少要能在标签和边缘之间放下一个大写字母 “W”。
• 为自适应内容宽度的按钮设置最小宽度——按钮过窄不仅达不到目标尺寸，看起来也不像按钮。
• 相邻按钮之间要留出足够间距，避免手指滑到错误的操作上。
• **对比度：**按钮与背景之间、标签与按钮之间的对比度都要符合 WCAG（普通文本 4.5:1，大号文本 3:1）。在图像背景上添加半透明图层。具体比例 → 参照 accessibility 审查。

保持一致且可预测

• 整个产品使用一套按钮样式系统——相同操作在各处都应使用相同的颜色、形状、字体和位置（最少意外原则）。
• **按钮必须看起来像按钮。**可供识别比追求创意更重要：用户不应需要猜测哪些元素可以点击。
• 将按钮放在用户预期的位置——阅读流程自然结束处（古腾堡 / Z 字形模式：主要操作放在其所结束内容的右下方），绝不隐藏。
• **颜色承载含义：**破坏性操作用红色，主要操作用品牌强调色。遵循惯例；不要让用户去学习一套私有的颜色规则。

---

依赖上下文的决策（展示选项，不要自动套用）

为每项说明权衡，并给出与第 0 步相关的建议。默认应用所有这些做法，是导致装饰过度的常见原因。

决策	适用场景	避免 / 调整场景	默认建议
形状：锐角 ↔ 圆角 ↔ 胶囊形	锐角 = 严肃、稳健（金融、保险）；圆角 = 友好、安全；胶囊形 = 活泼、随意	温暖的消费品牌使用锐角；正式 / 企业级 UI 使用胶囊形	采用略带圆角的矩形——熟悉且可靠的折中方案；胶囊形圆角半径 = 高度的 ½，并增加水平内边距
立体感 / 阴影	用凸起按钮突出主要操作；其他按钮均采用扁平样式	透明按钮或靠近标签的按钮使用阴影（会降低可读性）；默认使用大块深色近黑阴影	阴影颜色接近按钮本身，透明度 <40%，面积小于按钮——用于提示深度，而非装饰
纯图标按钮	空间紧张时，用于配有通用图标的常见操作（编辑、删除、搜索、主页）	任何需要用户解读的图标；未提供可访问名称的场景	图标 + 标签；若仅使用图标，则采用通用符号 + 可访问名称
FAB	应用中一个固定的、建设性的、使用频率最高的操作（撰写、添加）	破坏性操作；每页多个；会遮挡内容	最多一个，且仅在应用只有一个占主导地位的创建操作时使用
品牌按钮（“使用 Google 登录”）	第三方身份验证 / 集成入口	将其重新设计为符合自有 UI 的样式——这会破坏信任并违反品牌指南	原样使用品牌官方素材，并放置在相应操作发生的位置
自定义形状	形状能强化功能（箭头形“下一步”）	新奇造型会掩盖其可点击性	遵循惯例；若使用自定义样式，应通过对比度 / 尺寸 / 阴影强化可供识别性
宽度：自适应 vs. 固定	移动端垂直堆叠的主要 / 次要按钮采用固定宽度——视觉均衡、一目了然	固定宽度导致长标签被截断（国际化）	Web 端采用自适应宽度并设置最小宽度；移动端垂直堆叠按钮组采用固定宽度
触觉反馈	移动端：轻微振动可在轻触时确认操作已被识别	同时叠加所有视觉 + 触觉效果（会让人应接不暇）	始终提供视觉状态变化；将触觉反馈作为轻量的移动端增强功能

---

验证结果（编排）

交接时使用各审查视角对应的可安装技能 name。只有在该技能已安装时才调用；若未安装，此技能本身的核心规则已涵盖这些要求——无需因此中断，继续执行即可。

生成或修改结果后，应将其交给各审查视角审核，而不是直接宣布完成。这些都是候选审查视角——具体策略由 docs/orchestration-policy.md 规定，也可以将全部内容交由 ux-design-review 审查。在这里，heuristics 和 microcopy 属于 A 级（自动运行）；accessibility、aesthetics 和 mobile-responsiveness 属于 B 级（可选）——在现有设计系统下，aesthetics 会被抑制，accessibility 的审查范围会缩小到使用方式；mobile-responsiveness 仅适用于移动设备。如果用户调用此技能是为了处理某个特定问题，请尊重其范围。

• ux-heuristics-audit （A 级）——系统状态的可见性（状态／反馈）、一致性，以及破坏性按钮的错误预防。
• ux-accessibility-audit （B 级——可选；在设计系统下缩小范围）——对比度、触控目标尺寸、焦点可见性，以及仅含图标按钮的无障碍名称。
• ux-aesthetics-audit （B 级——可选；在设计系统下抑制）——层级是否清晰，以及样式是否过度装饰（多个主要操作彼此争夺注意力、阴影泛滥）。
• ux-microcopy-audit （A 级）——标签是否清晰、措辞是否使用行动动词，以及整个产品中的命令用语是否一致。
• ux-mobile-responsiveness-audit （B 级——可选；仅适用于移动设备）——在移动设备场景中检查目标尺寸、间距和按钮堆叠布局。

如果各项审核发现冲突（例如，品牌表现力与操作提示性之间的冲突），应优先满足主要任务：用户必须能立即识别并成功触发正确的操作。

---

常见的正确与错误做法

❌ 不要	✅ 应该
在同一屏幕上放置三个视觉权重相同的按钮	设置一个主要操作；次要／第三级操作应明显弱化
使用“Yes”／“No”／“OK”标签	使用能说明结果的行动动词：“删除项目”“保存更改”
使用含义巧妙却晦涩的纯图标按钮	使用通用图标加标签（或至少提供无障碍名称）
只设计静止状态	启用、悬停、按下、聚焦、禁用状态都应有所区别
在移动设备上设置高 32px 的可点击区域	触控目标至少为 48×48px，按钮之间留出充足间距
将 FAB 用于“删除帐户”	FAB 仅用于应用的主要建设性操作——或者完全不使用 FAB
为了匹配调色板而重新设计“使用 Google 登录”	保留官方品牌素材，不作改动
为了营造“深度感”而给每个按钮都加阴影	仅在阴影能体现优先级时使用；阴影应采用色调柔和的样式，且尺寸小于按钮
同一操作在不同屏幕上使用不同样式	在整个产品中使用统一的按钮系统
未经检查就发布	交由启发式、无障碍、美学和微文案审查

---

参考资料（Uxcel）

• UI 按钮及其使用场景
• UI 按钮的类型
• UI 按钮设计最佳实践
• 按钮标签编写最佳实践
• 移动端按钮设计的 11 条建议
• UI 组件状态