Elevation（高度层级）是指两个界面表面在 z 轴上的相对距离。

一、概览（Overview）

1. 使用要求

• 高度层级（Elevation）适用于所有界面表面与组件。
• 高度层级令牌（Elevation tokens）用来规范组件在 z 轴上的距离，使它们在界面中保持一致的视觉层次关系。
• 高度层级令牌本身不包含阴影或颜色；具体每一层的阴影样式与视觉表现由各平台自行定义。
• 高度层级可以通过“表面明暗层级（Tonal elevation）”或“阴影（Shadow）”来呈现。
• 避免修改 Material 3 组件的默认高度层级值。
• 建议只使用少量的高度层级等级，以保持视觉系统简洁、一致。

高度层级以组件在 z 轴上的距离来衡量，单位为密度独立像素（density-independent pixels, dps）。

高度层级（Elevation）表示界面元素之间在空间上的距离。产品通过颜色来表达高度层级。① 从正面看：一个表层位于 1dp 的高度层级，另一个位于 8dp 的高度层级。② 从侧面看：这两个表层之间的高度层级差为 7dp。

2. 与 M2 的差异

• 阴影（Shadows）：不要为所有高度层级默认添加阴影；只有在需要强化与背景的区隔，或需要强化可交互性时才使用阴影。
• 颜色（Color）：使用全新的颜色映射方式，并支持动态色彩（dynamic color）。
• 层级（Levels）：高度层级现在以“层级 levels”来进行定义与描述。

3. 所有表面与组件都有高度层级值

不同高度层级（Elevation）的表面会带来以下作用：

1. 允许界面表面在视觉上前后穿插，例如内容可以在应用栏（App Bar）后方滚动。

2. 通过视觉关系体现空间结构，例如浮动操作按钮（FAB）的阴影会展示它独立于卡片集合之上。

3. 将用户注意力聚焦在最高高度层级上，例如对话框会短暂地浮在其他界面元素之上。

高度层级（Elevation）可以通过阴影或其他视觉线索来呈现，例如使用不同明度的表面填充色。

3.1 默认静止高度层级（Resting elevation / Default）

所有组件都有一个默认的静止高度层级。避免修改 Material 组件的默认高度层级。

所有组件都有一个默认的高度层级，应当使用这一默认值

3.2 改变高度层级（Changing elevation）

组件应当根据系统事件或用户交互（如悬停）来改变其高度层级（elevation）。这种高度层级的变化应在所有同类元素之间保持一致性。

例如，一个 FAB（悬浮操作按钮）在被悬停时，会临时提升 1 个高度层级，从 Level 3 升至 Level 4。所有 Material 按钮在悬停时都会统一增加 1 个高度层级（1 elevation level）。

将鼠标悬停在按钮上，会提升其高度层级（elevation），以体现用户交互。

二、如何应用高度层级（Applying elevation）

Material 3 的高度层级系统（Elevation system）被刻意限制为少量等级。这种“创意限制”意味着设计师需要更慎重地规划界面的高度层级叙事（elevation story）。

• Material 使用六个高度层级（elevation levels），每个层级都对应一个 dp 值。这些层级按与界面表面的相对距离命名：0、+1、+2、+3、+4 和 +5。
• 组件的静止态（resting state）通常处于 0 至 +3 层级，而 +4 和 +5 层级则保留给用户交互态（如 hover 悬停、拖拽 dragged）使用。

1. 呈现高度层级

高度层级（Elevation）可以通过阴影（shadows）或其他视觉线索表现，例如：使用不同色调差的表面填充（surface fills with a tone difference），或使用遮罩（scrims）。

要成功表现高度层级，一个表面需要具备以下特征：

• 表面边缘（Surface edges）：通过与周围表面形成对比，区分层级关系。
• 与其他表面的重叠（Overlap），无论在静止态（at rest）还是移动中（in motion），都能体现层级关系。
• 与其他表面之间的距离（Distance from other surfaces）：用于表现高度差与空间关系。

① 两个具有明显色调差（distinct tonal values）的重叠表面。② 两个色调相同（same tonal values）的表面，通过阴影（shadow）来区分高度层级。 ③ 两个色调相同的表面，通过遮罩（scrim）来区分高度层级。

1.1 色调差异

界面中不同表面的**色调差异（tonal difference）**有助于表达 Material 表面的触感特质，让用户视觉上感知到“材质的质感”和“层级的分界”。

通过在表面之间制造色调差异，界面能明确展示“这一块结束、另一块开始”，从而把 UI 的不同部分分割成可识别的组件。例如，App Bar 与 Grid List（网格列表）之间的色调边界，会告诉用户：它们是两个独立的层级，Grid List 会独立滚动，而 App Bar 不会随之移动。

在默认情况下，Material 3 的所有表面都会使用色调差异来表示界面中的层级分离。当然，除了色调差异之外，你也可以用其他方式来表现边缘，例如：

• 为表面添加阴影（drop shadow）
• 在表面后方放置一层遮罩（scrim）

① FAB（浮动操作按钮）的海拔高度（elevation）可以将它与页面主体内容区分开来。

② 在模态窗口（modal）下方会出现一层遮罩（scrim），以强调其重要性。

③ 顶端应用栏（top app bar）与正文内容之间的色调差异（tonal differences）表明它们属于不同的界面表面。

对于交互组件来说，组件的边缘必须与其所在表面之间形成足够的对比度（达到或超过可访问性对比度标准），这样用户才能清楚地分辨不同的表面是彼此独立的。

1.2 表面颜色角色与高度层级

你可以从多种 表面（surface） 和 表面容器（surface container） 的颜色角色中进行选择。这些颜色角色并不与高度层级（elevation）绑定，因此在定义界面中的“容器区域”时具有更大的灵活性。任何相互重叠的容器区域或组件，都应该采用不同的颜色角色，以视觉方式清晰传达它们之间的分离关系。表面颜色角色的使用指南

①表面 、②表面容器

2. 阴影

阴影能够表达表面之间的高度层级差异，这是其他视觉手段无法完全替代的。

阴影的大小、以及它的柔和度/扩散程度（softness or diffusion），都能够用来表示两个表面之间的距离感——也就是它们的高度层级差异。例如，当一个表面的阴影又小又锐利时，就说明它与其下方的表面距离非常近（高度层级差异很小）。而更大、更柔和的阴影，则表示两个表面之间存在更大的距离（更高的高度层级差异）。

在使用阴影时，“少即是多”，界面中的高度层级越少，阴影用来引导注意力与行为的力量就越强。

2.1 何时使用可见阴影

2.1.1 保护界面元素

当背景带有纹理、图案，或整体视觉较为繁杂时，单靠极细的发丝线（hairline）边界往往不足以保护前景元素的可见性。在这种情况下，应使用高度层级（elevation）来让前景元素（如卡片、chips、按钮等）从背景中分离并被强调，就像下图示例那样。

交互元素通过高度层级得到强调

2.1.2 促进交互发生

元素在获得焦点、被选中，或在其他交互（例如滑动）过程中，可以暂时提升其高度层级，呈现“被抬起”的效果。当界面中出现高度层级更高的元素时，当前被抬起的元素也会随之降低高度层级，让新的高层级元素更易被感知。

高度层级能激发用户的交互行为

3. 遮罩层

遮罩层（scrim）通过提升大面积分层界面的视觉对比度，能够帮助用户将注意力集中在特定元素上。应在模态窗口（modal）或展开状态的导航菜单下方使用遮罩层，以突出这些前景元素。

遮罩层使用 scrim 颜色角色，并以 32% 的不透明度 进行呈现。

遮罩层能帮助用户将注意力集中到重要元素上，例如导航抽屉（navigation drawer）

三、高度层级令牌（Tokens）

1. 令牌

高度层级（Elevation levels）可以通过令牌（tokens）来实现。表面色调（surface tint color）已被弃用——请改用高度层级令牌（0–5），了解更多关于设计令牌（design tokens）的信息

2. 组件的高度层级

大多数组件都有各自的默认高度层级。组件的高度层级仅用于确定它在界面中相对于其他组件所处的层级关系，包括在悬停（hover）或聚焦（focus）时的变化（通常会使高度层级上升一级）。默认情况下，高度层级本身不直接带有阴影或视觉表现，它只是一个用于描述界面层级的语义值。