¥Understanding the scale
了解哪种比例步骤最适合每种用例。
¥Use cases
每个尺度有 12 个步骤。每个步骤都针对至少一个特定用例进行设计。
¥There are 12 steps in each scale. Each step was designed for at least one specific use case.
此表格简单概述了每个步骤的最常见用例。然而，也有许多例外和注意事项需要考虑，下文将详细介绍。
¥This table is a simple overview of the most common use case for each step. However, there are many exceptions and caveats to factor in, which are covered in further detail below.
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 |
¥Steps 1–2: Backgrounds
1
2
步骤 1 和 2 专为应用背景和细微组件背景而设计。你可以根据想要的氛围交替使用它们。
¥Steps 1 and 2 are designed for app backgrounds and subtle component backgrounds. You can use them interchangeably, depending on the vibe you're going for.
适用应用包括：
¥Appropriate applications include:
主应用背景
¥Main app background
条纹表格背景
¥Striped table background
代码块背景
¥Code block background
卡片背景
¥Card background
侧边栏背景
¥Sidebar background
画布区域背景
¥Canvas area background
¥Steps 3–5: Component backgrounds
3
4
5
步骤 3、4 和 5 是为 UI 组件背景设计的。
¥Steps 3, 4, and 5 are designed for UI component backgrounds.
步骤 3 适用于正常状态。
¥Step 3 is for normal states.
步骤 4 适用于悬停状态。
¥Step 4 is for hover states.
步骤 5 适用于按下或选中状态。
¥Step 5 is for pressed or selected states.
如果你的组件在默认状态下具有透明背景，则可以将步骤 3 用于其悬停状态。
¥If your component has a transparent background in its default state, you can use Step 3 for its hover state.
¥Steps 6–8: Borders
6
7
8
步骤 6、7 和 8 是为边框设计的。
¥Steps 6, 7, and 8 are designed for borders.
步骤 6 专为非交互组件上的细微边框而设计。例如侧边栏、标题、卡片、警报和分隔符。
¥Step 6 is designed for subtle borders on components which are not interactive. For example sidebars, headers, cards, alerts, and separators.
步骤 7 专为交互组件上的细微边框而设计。
¥Step 7 is designed for subtle borders on interactive components.
步骤 8 专为增强交互组件和焦点环的边框而设计。
¥Step 8 is designed for stronger borders on interactive components and focus rings.
¥Steps 9–10: Solid backgrounds
9
10
步骤 9 和 10 专为纯色背景而设计。
¥Steps 9 and 10 are designed for solid backgrounds.
步骤 9 在所有步骤中色度最高。换句话说，这是最纯粹的步骤，混合了最少量的白色或黑色。由于 9 是最纯粹的步骤，因此它具有广泛的应用范围：
¥Step 9 has the highest chroma of all steps in the scale. In other words, it's the purest step, the step mixed with the least amount of white or black. Because 9 is the purest step, it has a wide range of applications:
网站/应用背景
¥Website/App backgrounds
网站版块背景
¥Website section backgrounds
标题背景
¥Header backgrounds
组件背景
¥Component backgrounds
图形/徽标
¥Graphics/Logos
叠加层
¥Overlays
彩色阴影
¥Coloured shadows
强调边框
¥Accent borders
步骤 10 专为组件悬停状态而设计，其中步骤 9 是组件的正常状态背景。
¥Step 10 is designed for component hover states, where step 9 is the component's normal state background.
¥Steps 11–12: Text
11
12
步骤 11 和 12 专为文本而设计。
¥Steps 11 and 12 are designed for text.
步骤 11 专为低对比度文本而设计。
¥Step 11 is designed for low-contrast text.
步骤 12 专为高对比度文本而设计。
¥Step 12 is designed for high-contrast text.