design-button-hierarchy

技能：设计按钮层级

目的

清晰区分主要、次要和第三层操作，让用户知道该执行哪个操作。

类型

生成式 + 评估式

输入

• 所需操作／按钮列表
• 每个操作的相对重要性（主要、次要、第三层）
• 上下文（表单、模态框、页面、工具栏）

输出

• 各层级按钮的样式规范
• 对现有按钮层级进行通过／不通过评估

执行的转换

将操作的重要性映射为视觉样式：主要按钮 = 填充品牌色；次要按钮 = 描边或低调样式（包括灰色实心）；第三层按钮 = 纯文本或链接样式。

决策标准

通过（按钮层级良好）

• 每个屏幕／区域只有一个明确的主要操作（实心填充、高对比度、品牌色）
• 次要操作在视觉上弱于主要操作（描边、幽灵样式或低对比度实心填充，包括灰色）
• 第三层操作保持低调（文本链接或不显眼的样式）
• 不同层级之间有清晰的视觉区分（不能只有细微的 10% 差异）
• 删除等破坏性操作使用红色，但不会与主要操作争抢注意力

不通过（按钮层级不佳）

• 多个按钮的视觉权重相同
• 主要操作不明显
• 浅灰色（200）的次要按钮看起来像已禁用
• 破坏性操作比主要操作更醒目
• 所有按钮都使用相同颜色填充

按钮样式模式

层级	背景	边框	文本	使用场景
主要	品牌色（实心）	无	白色／浅色	主要 CTA、保存、提交
次要	灰色（实心）或透明	品牌色（描边时）	品牌色或灰色	替代操作、取消
第三层	透明	无	品牌色或灰色	可选操作、了解更多
破坏性	红色	无	白色	删除、移除（不抢占注意力）
已禁用	灰色 200	无	灰色 400	无法继续

使用的视觉／UX 信号

1. 填充与描边：实心填充 = 主要，描边 = 次要
2. 颜色饱和度：饱和度越高 = 越重要
3. 尺寸：主要按钮可以略大一些
4. 位置：主要按钮通常位于右侧或底部（符合阅读顺序）

常见失败模式

失败模式	说明	修复方法
按钮争抢	保存和取消都使用品牌色实心填充	将取消按钮改为描边或灰色实心
灰色按钮混淆	浅灰色（200）的次要按钮看起来像已禁用	使用灰色 400–500 或描边，不要使用近乎白色的灰色
红色警报	删除按钮比主要按钮更醒目	将删除按钮改为纯文本样式或缩小尺寸
主要按钮泛滥	有 3 个或更多“主要”按钮	选一个作为主要按钮，将其他按钮降级
第三层操作不可见	文本链接与正文颜色相同	使用品牌色或添加下划线

前置条件

• 已建立视觉层级
• 已定义调色板

依赖项

• build-color-palette（需要品牌色和语义颜色）
• establish-visual-hierarchy（按钮是层级的一部分）

Refactoring UI 参考

• “让主要操作一目了然”
• “破坏性操作不应喧宾夺主”
• “次要操作应该清晰但不突出——描边样式或对比度较低的背景色都是不错的选择”

评估示例

**输入：**模态框中有“保存更改”（蓝色实心填充）、“取消”（灰色实心填充）、“删除”（红色实心填充）

**评估：**部分通过

• 取消：灰色实心填充可作为次要样式（低对比度实心）
• 删除：红色实心填充会与保存按钮争抢注意力（应改为红色文本）
• 问题：两个实心填充按钮彼此争抢注意力

建议：

• 保存：保留蓝色实心填充（主要）
• 取消：灰色实心填充可以接受，但可改为描边以便更清晰地区分
• 删除：改为红色文本（破坏性操作不应争抢注意力）