了解哪个色阶步骤最适合各种用例。
每个色阶有 12 个步骤。每个步骤都为至少一个特定用例而设计。
此表简要概述了每个步骤最常见的用例。但是，其中包含许多例外情况和注意事项，将在下面详细介绍。
步骤 | 用例 |
|---|---|
1 | 应用背景 |
2 | 柔和背景 |
3 | UI 元素背景 |
4 | 悬停 UI 元素背景 |
5 | 激活/选中 UI 元素背景 |
6 | 柔和边框和分隔线 |
7 | UI 元素边框和焦点环 |
8 | 悬停 UI 元素边框 |
9 | 纯色背景 |
10 | 悬停纯色背景 |
11 | 低对比度文本 |
12 | 高对比度文本 |
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 专为高对比度文本而设计。