了解哪个色阶步骤最适合每种使用案例。
每个色阶共有 12 个步骤。每个步骤都设计用于至少一种特定的使用案例。
这张表提供了每个步骤最常见使用案例的简单概述。然而，实际上有许多例外和注意事项需考虑，下面将进一步详细说明。
Step | Use Case |
|---|---|
1 | App background |
2 | Subtle background |
3 | UI element background |
4 | Hovered UI element background |
5 | Active / Selected UI element background |
6 | Subtle borders and separators |
7 | UI element border and focus rings |
8 | Hovered UI element border |
9 | Solid backgrounds |
10 | Hovered solid backgrounds |
11 | Low-contrast text |
12 | High-contrast text |
1
2
步骤 1 和 2 适用于应用程序背景和细微的组件背景。你可以根据想要的氛围互换使用它们。
适当的应用场合包括：
3
4
5
步骤 3、4 和 5 适用于 UI 组件背景。
3 用于正常状态。4 用于悬停状态。5 用于按下或选中状态。如果你的组件在默认状态下有透明背景，可以在悬停状态下使用步骤 3。
6
7
8
步骤 6、7 和 8 用于边框。
6 适用于非交互组件上的细微边框，例如边栏、头部、卡片、提示和分隔线。7 适用于交互组件上的细微边框。8 适用于交互组件和焦点环上的较强边框。9
10
步骤 9 和 10 适用于实心背景。
步骤 9 的色度是所有步骤中最高的。换句话说，这是最纯的一个步骤，混合了最少数量的白色或黑色。因为 9 是最纯的步骤，所以它的应用范围很广泛：
步骤 10 用于组件的悬停状态，步骤 9 是组件的正常状态背景。
11
12
步骤 11 和 12 适用于文本。
11 适用于低对比度文本。12 适用于高对比度文本。