了解哪个色阶步骤最适合每个用例。
每个色阶都有 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 用于高对比度文本。