design-button-hierarchy

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Skill: Design Button Hierarchy

Skill：按钮层级设计

Purpose

目的

Create clear distinctions between primary, secondary, and tertiary actions so users know which action to take.

明确区分主要、次要和第三级操作，让用户清楚知道该执行哪项操作。

Type

类型

Generative + Evaluative

生成式+评估式

Input

输入

List of actions/buttons needed
Relative importance of each action (primary, secondary, tertiary)
Context (form, modal, page, toolbar)

所需操作/按钮列表
每个操作的相对重要性（主要、次要、第三级）
使用场景（表单、模态框、页面、工具栏）

Output

输出

Button style specifications for each level
Pass/Fail assessment of existing button hierarchy

每个层级的按钮样式规范
现有按钮层级的通过/未通过评估结果

Transformation Performed

执行的转换

Maps action importance to visual treatment: primary = filled brand color, secondary = outline or subtle (including grey solid), tertiary = text-only or link style.

将操作重要性映射为视觉表现：主要操作=品牌色填充，次要操作=轮廓或低饱和度样式（包括灰色填充），第三级操作=纯文本或链接样式。

Decision Criteria

判断标准

PASS (Good Button Hierarchy)

通过（优秀的按钮层级）

One clear primary action per screen/section (filled, high contrast, brand color)
Secondary actions visually subordinate (outlined, ghost, or lower contrast solid including grey)
Tertiary actions minimal (text link or subtle)
Clear visual distinction between levels (not subtle 10% differences)
Destructive actions (delete) use red but don't compete with primary

每个屏幕/区域仅有一个清晰的主要操作（填充样式、高对比度、品牌色）
次要操作在视觉上处于从属地位（轮廓、幽灵按钮或低对比度填充，包括灰色）
第三级操作样式极简（文本链接或低饱和度样式）
各层级间视觉区分清晰（不是细微的10%差异）
破坏性操作（如删除）使用红色，但不与主要操作争夺注意力

FAIL (Poor Button Hierarchy)

未通过（糟糕的按钮层级）

Multiple buttons with equal visual weight
Primary action not obvious
Very light grey (200) secondary looks disabled
Destructive actions draw more attention than primary
All buttons filled with same color

多个按钮视觉权重相同
主要操作不明显
浅灰色（200色值）的次要按钮看起来像禁用状态
破坏性操作比主要操作更吸引注意力
所有按钮使用相同颜色填充

Button Style Patterns

按钮样式模式

Level	Background	Border	Text	Use Case
Primary	Brand color (solid)	None	White/light	Main CTA, save, submit
Secondary	Grey (solid) or transparent	Brand color (if outline)	Brand color or grey	Alternative action, cancel
Tertiary	Transparent	None	Brand color or gray	Optional actions, learn more
Destructive	Red	None	White	Delete, remove (not competing)
Disabled	Gray 200	None	Gray 400	Cannot proceed

层级	背景	边框	文本	使用场景
主要	品牌色（填充）	无	白色/浅色	主要CTA、保存、提交
次要	灰色（填充）或透明	品牌色（若为轮廓样式）	品牌色或灰色	备选操作、取消
第三级	透明	无	品牌色或灰色	可选操作、了解更多
破坏性	红色	无	白色	删除、移除（不与主要操作竞争）
禁用	灰色200	无	灰色400	无法执行操作

Visual/UX Signals Used

使用的视觉/UX信号

Fill vs outline: Filled = primary, outline = secondary
Color saturation: More saturated = more important
Size: Primary can be slightly larger
Position: Primary often on right or bottom (reading pattern)

填充 vs 轮廓：填充=主要操作，轮廓=次要操作
色彩饱和度：饱和度越高，重要性越高
尺寸：主要操作可略大一些
位置：主要操作通常位于右侧或底部（符合阅读习惯）

Common Failure Modes

常见失败模式

Failure	Description	Fix
Button Battle	Save and Cancel both filled brand	Make Cancel outline or grey solid
Gray Button Confusion	Very light grey (200) secondary looks disabled	Use grey 400-500 or outline, not near-white grey
Red Alert	Delete button more prominent than primary	Make delete text-only or smaller
Primary Overload	3+ "primary" buttons	Choose one primary, demote others
Invisible Tertiary	Text links same color as body	Use brand color or underline

失败类型	描述	修复方案
按钮竞争	保存和取消均使用品牌色填充	将取消改为轮廓或灰色填充样式
灰色按钮混淆	浅灰色（200色值）的次要按钮看起来像禁用状态	使用灰色400-500色值或轮廓样式，避免接近白色的灰色
红色警示过度	删除按钮比主要操作更突出	将删除改为红色文本或缩小尺寸
主要操作过载	3个及以上“主要”按钮	选择一个作为主要操作，降级其他按钮
第三级操作不可见	文本链接与正文颜色相同	使用品牌色或添加下划线

Prerequisites

前提条件

Visual hierarchy established
Color palette defined

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

Dependencies

依赖项

```
build-color-palette
```
(needs brand and semantic colors)
```
establish-visual-hierarchy
```
(buttons are part of hierarchy)

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

Refactoring UI References

《Refactoring UI》参考内容

"Make primary actions obvious"
"Destructive actions shouldn't dominate"
"Secondary actions should be clear but not prominent - outline styles or lower contrast background colors are great options"

“让主要操作显而易见”
“破坏性操作不应占据主导地位”
“次要操作应清晰但不突出——轮廓样式或低对比度背景色是绝佳选择”

Example Assessment

评估示例

Input: Modal with "Save Changes" (filled blue), "Cancel" (filled grey), "Delete" (filled red)

Evaluation: PARTIAL

Cancel: Grey filled is acceptable secondary treatment (lower contrast solid)
Delete: Filled red competes with Save (should be text red)
Issue: Two actions with solid fills competing

Recommendation:

Save: Keep filled blue (primary)
Cancel: Grey filled is acceptable, but could be outline for clearer distinction
Delete: Change to text red (destructive shouldn't compete)

输入： 包含“保存更改”（蓝色填充）、“取消”（灰色填充）、“删除”（红色填充）的模态框

评估结果： 部分通过

取消：灰色填充是可接受的次要操作样式（低对比度填充）
删除：红色填充与保存操作争夺注意力（应改为红色文本）
问题：两个填充样式的操作存在竞争

建议：

保存：保留蓝色填充（主要操作）
取消：灰色填充可接受，但改为轮廓样式区分更清晰
删除：改为红色文本（破坏性操作不应与主要操作竞争）