高度是两个平面之间的高度差，而不是厚度。

Elevation is the relative distance between two surfaces along the z-axis.

Component elevation values

1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp

高度

测量高度

Material 中的高度指的是两个平面之间正面（一个平面到另一个平面顶部的距离）的距离。平面会根据自己高度投射不同的阴影。

Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows

1. 从正面看，一个平面的高度为1dp，另一个平面的高度为8dp；
2. 从侧面看，两个平面之间的高度差为7dp。

1. One surface at 1dp elevation and another surface at 8dp elevation, as viewed from the front
   2. The difference in elevation between the two surfaces is 7dp, as viewed from the side

在比较复杂的环境中，相同高度处的平面投射出的阴影可能会不同。

1. 两个平面 A和B的高度都是 8dp。他们投射不同的阴影，因为B 在另一个表面（C）的前面，而 C 本身是具有高度的。
2. 从侧面看，表面（A），（B）和（C）之间的相对高度差异是不同的。

Surfaces at the same elevation can appear differently when other surfaces are behind them.

1. Both surfaces A and B are at the same 8dp elevation. They cast different shadows because Surface B is in front of another surface (C) that already has elevation.
   2. Elevation differences between surfaces (A), (B), and (C), as viewed from the side.

高度系统

所有材质设计曲面和组件都具有高程值。不同海拔的表面可以做到以下几点：

• 允许曲面在其他曲面前后移动，例如在应用栏后面滚动的内容反映空间关系
• 例如浮动动作按钮的阴影如何指示它与卡片集合分开将注意力集中在最高海拔处
• 例如临时出现在其他表面前的对话框可以使用阴影或其他视觉线索（如表面填充或不透明）来描绘高程

质感设计中所有的平面与组件都有高度。

All Material Design surfaces, and components, have elevation values.

Surfaces at different elevations do the following:

• Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
• Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
• Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities.

Material Design displays elevation using shadows.

Caution
Different surface fills can be used to express elevation instead of shadows.

Caution
Opacity can be used to express elevation instead of shadows.

预设高度

系统会给每个组件一个预设的高度。当程序响应用户或系统事件时，组件会直接出现在预设的高度。

同类型的组件的预设高度都是相同的，例如，同一环境下的卡片都必须保证处于同一预设高度，否则会干扰用户的认知。

Resting elevations are starting elevation values given to components by default. Components move from resting elevations in response to the user or a system event. All Material components have resting elevations that are the same for each type of component. For example, all cards have the same resting elevations as each other, and a dialog has the same resting elevation as other dialogs.

预设高度与环境

预设高度会根据环境、平台或者应用程序的不同而产生变化。

移动设备上的预设高度是用于提供视觉提示，如阴影投射可以提示该组件是否响应了用户输入。相比之下，桌面端的预设高度不会太高，大多数情况作为激活鼠标事件（一般是悬停操作）时的标志。

通过平面图可以根据阴影看出三个组件A、B、C 处于不同的高度（侧面图则可以看出，FAB 组件处于最高层级）。

Resting elevations vary based on the environment, platform, or app. The resting elevations on mobile are designed to provide visual cues, like shadows, to indicate when components are interactive. In contrast, resting elevations on desktop are shallower because other cues, like hover states, communicate when a component is interactive. For example, cards at 0dp elevation on desktop are outlined with a stroke.

1. Resting elevations on mobile for an app bar (A), cards (B), and a floating action button (C), as viewed from the front
2. The same components, as viewed from the side

1. Resting elevations on desktop for an app bar (A), floating action button (B), and cards (C), as viewed from the front
2. The same components, as viewed from the side

高度变化

响应用户输入或系统事件时，组件可以改变自己的高度，沿着z轴的方向根据预设的高度偏移量移动到指定位置（开发者还可以让组件在事件结束后回到原来的位置）。

同一种类型组件的高度偏移量是相同的。

例如，在同一环境下所有的卡片或按钮都具有相同的偏移量。如果没有特殊的设置，事件结束后组件会返回到预设高度。

> 1. Upon user input, this button increases its elevation from 2dp to 8dp

1. The same component, as viewed from the side

高度冲突

在组件高度发生变化时，要避免与其它的组件发生碰撞。

例如，我们拖动一张卡片时，如果周围处于同一高度还有有其它的组件，我们需要改变被拖动的卡片的高度，避免组件的高度（层级）发生冲突。

Components can change elevation in response to user input or system events. When this happens, components move to preset dynamic elevation offsets, which are the default elevations components move to when not resting.
Dynamic elevation offsets are the same across each type of component. For example, all cards use the same offset as other cards, and all floating action buttons use the same offset as other floating action buttons.

Once the user input (or system event) is completed or cancelled, the component swiftly returns to its resting elevation. Some components respond to user input with increases in elevation.
1. Upon user input, this button increases its elevation from 2dp to 8dp
2. The same component, as viewed from the side

Elevation interference

When a component moves between its resting elevation and dynamic elevation offset, it shouldn’t collide with other components.
To avoid these kinds of collisions, components can move out of the way. For example, if increasing a card’s elevation positions it to pass through a floating action button, that button can disappear or move off-screen before the collision occurs.
You can also design your app’s layout to avoid collisions, such as placing a floating action button beside cards, instead of directly above them. Temporarily reposition or remove components which might collide with transitioning components. Front (1) and side (2) views of a card stream on a mobile device, demonstrating how a floating action button (B) disappears when a card (A) is picked up.

Design your app to minimize opportunities for elevation-based interference.

定义高度

要成功定义高度，一个平面必须要满足以下条件：

• 合理利用平面边界，将平面与周围环境区分开来
• 在平面静止或运动时，保持与其他平面的层级清晰，避免出现无法判断的交叠
• 合理利用高度差

To successfully depict elevation, a surface must show:

1. Surface edges, contrasting the surface from its surroundings
2. Overlap with other surfaces, either at rest or in motion
3. Distance from other surfaces

平面边界

在Material 中引入边界的概念，能够展示出平面可触的特性。边界是一个平面结束的地方，可以帮助用户区分界面中不同的组件。

例如，顶部导航栏为了与网格列表区分开来，会采用大的色块。

默认情况下，Material 中的平面采用阴影来作为边界。当然，还有一些其它的方法：

• 填充不同的颜色
• 采用不同的不透明度

边界必须明显到可以迅速区分出不同的平面。

Edges help to express the tactile quality of Material surfaces. They show where one surface ends and another begins by separating different parts of a UI into identifiable components. For example, the edges of an app bar show that it is separate from a grid list, communicating to the user that the grid list scrolls independently of the app bar.

By default, Material surfaces use shadows to indicate edges. Other methods can be used to indicate edges, such as:

• Giving surfaces different colors
• Giving surfaces different opacities

Edges must create sufficient contrast between surfaces (by meeting or exceeding accessible contrast ratios) for them to be seen as separate from one another

Without showing edges, it’s unclear if this image contains one or more surfaces.
Contrasting surface fills provide enough contrast to make it clear that this image has two surfaces.

平面交叠

当两个平面有交叠时，这两个平面必须位于不同的高度。

When a surface overlaps another surface, either partially or completely, it indicates that the two surfaces occupy different elevations (but not the degree, or amount, of difference between them). Surfaces at higher elevations appear in front of those at lower elevations, meaning they are positioned at different elevations along the z-axis. Surfaces may overlap one another by default, or become overlapped as a result of motion that changes their position in the UI.

When surfaces have different opacities or insufficient contrast from one another, it can make it difficult to tell which surface is in front of another. Avoid ambiguous overlap by ensuring surface edges are clearly defined.

1. Shadows show surface edges, surface overlap, and the degree of elevation.
2. Different surface colors show surface edges and overlap, but not the degree of elevation.
3. Opacity shows surface edges and overlap, but not the degree of elevation.

1. 顶部导航栏即使与网格列表发生交叠，但是用户仍然可以判断这两个平面的高度不同
2. 当边界消失时，用户则无法进行判断

Do
The top app bar overlaps the cards, indicating it is in front of the cards. This overlap doesn’t express the degree of elevation between the surfaces.

Don’t
Without visual cues of surface edges and overlap, it’s not possible to determine how many surfaces are present, which surfaces are above the others, nor the degree of elevation between surfaces

高度差

平面之间的高度差可以用阴影或者遮罩背景来表示。

The degree of elevation difference between surfaces can be expressed using scrimmed backgrounds, or using shadows.

遮罩背景

当界面上出现遮罩背景时，遮罩以上的组件处于更高的高度。

When the background is scrimmed in a UI, it expresses that the content above it is at a higher elevation. Scrimmed backgrounds express large, but unspecified, amounts of elevation

Do
A scrimmed background can indicate surface overlap, but not the degree of elevation.

Don’t
The lack of shadows or scrimmed background makes it difficult to distinguish the dialog box from the background.

阴影

Material 的阴影能够展现出不同平面的高度。

例如，小而尖锐的阴影代表两个平面之间的高度差小，大而柔和的阴影代表两个平面之间的高度差大。

Shadows can express the degree of elevation between surfaces in ways that other techniques cannot.

Both a shadow’s size and amount of softness or diffusion express the degree of distance between two surfaces. For example, a surface with a shadow that is small and sharp indicates a surface’s close proximity to the surface behind it. Larger, softer shadows express more distance.

Subtle differences in shadow size and diffusion communicate:

• A detailed degree of distance between two surfaces
• Elevation differences between non-overlapping surfaces

Shadows show the edges of a surface and its degree of elevation against the background. They also make differences in surface elevations perceptible between non-overlapping surfaces.

1. 通过给（2）一个阴影投射，用户能够轻松判断出（1）、（2）这两个平面的高度不同
2. 当阴影消失时，用户则无法进行判断

Do
Shadows make differences in surface elevation perceptible. The smaller, sharper shadow of the app bar (1) indicates it is at a lower elevation than the menu (2), which has a larger, softer shadow.

Don’t
The lack of shadows or other visual cues to indicate edges and surface overlap creates insufficient contrast between surfaces. As a result, it’s difficult to understand which pieces of this UI are grouped together.

Don’t
Don’t use shadows for style only.

动效与高度

动效可以通过以下几种方法来强调平面高度：

• 阴影变化
• 交叠
• 推展
• 缩放
• 视差滚动

Motion can emphasize elevation using the following methods:

• Changes in shadows
• Displaying overlap
• Pushing
• Scaling
• Parallax

阴影变化

阴影的大小与柔和度反映了组件的高度变化。

Changes in shadow size and softness emphasize changes in elevation. The shadow grows to emphasize the card is rising.

交叠

当两个平面发生交叠时，通过动效可以展示出两个平面的高度差。

A surface may overlap another upon animation, either partially or completely, showing which surface is in front of the other. As it expands, a surface may show elevation by overlapping nearby surfaces.

推展

当某一个平面需要展开时，通过推展动效可以展示出两个平面的高度差。

Surfaces that share the same elevation can move surfaces in their path. A selected list item expands, pushing surrounding items away.

缩放

通过对平面进行缩放，可以展示出两个平面的高度差。

Scaling the size of a surface up or down can emphasize elevation changes. Foreground and background surfaces scale up and down to emphasize elevation changes.

视差滚动

多个位于不同高度的平面以不同的速度移动，可以营造出一种有深度的感觉，并且能够让用户把注意力放在处于前景的平面上。

Multiple surfaces at different elevations that move at different speeds can create a sense of depth and place focus on foreground content. The foreground surface moves faster than the background image, creating a sense of depth.

动效技术

Material 可以利用动效来表现平面的高度。

Elevation can be emphasized through a combination of motion techniques. Parallax motion and scaling emphasize which surfaces are in front of others.

层级

不同类型的内容会有不同的高度。

Content relates to other content depending on whether they are at similar or different elevations.

不同高度的内容

平面的高度优先于其它平面的原因有以下几点：

• 拥有更重要的内容
• 吸引用户注意力，比如对话框
• 控制位于该平面后面的平面，比如应用程序中的顶部导航栏

Surfaces in front of other surfaces typically:

1. Contain more important content
2. Focus attention, such as a dialog
3. Control the surfaces behind it, such as actions in an app bar

A 作为抽屉菜单，为了控制底层的平面必须优先显示在上面。

Front (1) and side (2) views of a desktop interface demonstrate how more important content that is of primary focus (B) appears in front of content that is of secondary focus, like footnotes (A).

Front (1) and side (2) views of a mobile interface demonstrate how placing content on a higher surface, like a bottom sheet (A), can focus attention while maintaining context.

Front (1) and side (2) views of a mobile interface demonstrate how content on a lower surface (A) is usually controlled by the surface in front of it, such as a navigation drawer (B)

同一高度的内容

位于同一平面的内容的高度是一致的，代表着这些内容的优先级相同。

Positioning surfaces at the same elevation makes them coplanar, and may indicate they contain content of equal importance as one another. For example, all cards in a collection have equal importance. 1. Cards (A, B), as viewed from the front, have the same elevation and move together, reinforcing that their content has similar hierarchy
2. The same components, as viewed from the side

如果几个平面不需要强调高度，Material 是允许这几个平面处于同一高度的，它们可以通过内容来传递层级差异，并且它们可以根据二维空间的布局来标明这几个平面相对层级。

例如处于同一高度的平面，可以根据文本的显示方向，把详细内容放在标题附近来对层级进行区分。下图中三个平面虽然位于同一高度，但是根据其内容的优先级以及排版，用户可以推断出这几个平面其实是有相对层级差异的。

Surfaces that don’t express elevation can appear coplanar. For surfaces that don’t express elevation, you can communicate hierarchy differences through their content and by adjusting their horizontal and vertical layout position to suggest their relative hierarchy levels.
For example, on a dashboard with coplanar surfaces, detail content is placed next to parent content, based on the direction a language’s text is displayed.

1. A desktop UI, as viewed from the front, demonstrates how the left-to-right positioning of surfaces at the same elevation (A, B, C) communicates hierarchy based on English language content.
2. The same components, as viewed from the side

位于同一高度的元素，层级相同。例如，集合中的所有卡片都具有同等的层级。

默认层级

Material 中所有的组件都有其默认的高度以及动态偏移量，这样保证了同一个应用程序中，层级划分能够保持一致，形成统一的视觉风格，帮助用户更快地适应这个应用。

例如，应用程序中的对话框总是显示在其它组件的上方。

All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components. For example, dialogs always appear in front of all other components.

下面将会列出部分组件的默认高度以及动态偏移量：

The following table lists default values for resting elevation and dynamic elevation offsets.

默认高度以及动态偏移量（表格）

Modal side sheet |

16 | | 侧栏导航 | 16 | | FAB（按下状态） | 12 | | Standard bottom sheet

Standard side sheet |

8 | | 底部导航栏 | 8 | | 菜单/子菜单 | 8 | | 卡片（激活状态） | 8 | | 内容按钮（按下状态） | 8 | | FAB（默认状态） | 6 | | 顶部导航栏（滚动状态） | 4 | | 顶部导航栏（默认状态） | 0 或 4 | | 刷新指示图标

搜索栏（滚动状态） |

3 | | 内容按钮（默认状态） | 2 | | 搜索栏（默认状态） | 1 | | 卡片（默认状态） | 1 | | 开关 | 1 | | 文本按钮 | 0 | | Standard side sheet | 0 |

默认高度以及动态偏移量（侧视图）

Cross-section diagram showing the resting elevation and dynamic elevation offsets for multiple components.