1. Elevation（面距）

Elevation（面距）是沿 z 轴的两个Surface之间的相对距离。

2. 测量面距

Material Design中的面距为Material surfaces之间的距离。从一个Material surface的前部到另一个Material surface前面的距离沿 z 轴以与dps(density-independent pixels)为单位进行测量，并使用阴影进行描绘（默认情况下）.

3. elevation系统

所有Material surfaces和组件都具有面距值。

不同面距的surfaces执行以下操作：

• 允许surfaces在其他surfaces的前面和后面移动，例如内容在app bars后面滚动
• 反映空间关系，例如浮动操作按钮的阴影如何指示它与卡片集合分开
• 将注意力集中在最上层的surface上，例如对话框暂时出现在其他Surface的前面

可以使用阴影或其他视觉提示（如Surface填充或不透明度）来描绘面距。

注意：
不同的surface填充也可以用来描绘面距而不仅仅是阴影.
不同的透明度也可以用来描绘面距而不仅仅是阴影.

4. 静止面距

静止面距是默认情况下为组件指定的起始面距值。组件从静止面距移动以响应用户或系统事件。所有Material组件都具有对于每种类型的组件都相同的静止面距。例如，所有卡片彼此具有相同的静止面距，并且对话框具有与其他对话框相同的静止面距。

5. 静止面距和环境

静止面距因环境、平台或应用程序而异。移动设备上的静止面距旨在提供视觉提示（如阴影），以指示组件何时是交互式的。相比之下，桌面上的静止面距较浅，因为其他提示（如悬停状态）在组件交互时会进行通信。例如，桌面上 0dp 面距的卡片用描边勾勒轮廓。

6. 更改面距

组件可以更改面距以响应用户输入或系统事件。发生这种情况时，组件将移动到预设的动态面距偏移，这是组件在非静止状态时移动到的默认面距。

每种类型的元件之间的动态面距偏移相同。例如，所有卡片都使用与其他卡片相同的偏移量，并且所有浮动操作按钮都使用与其他浮动操作按钮相同的偏移量。

一旦用户输入（或系统事件）完成或取消，组件就会迅速返回到其静止面距。

7. 面距干扰

当元件在其静止面距和动态面距偏移之间移动时，它不应与其他元件碰撞。

为了避免这些类型的碰撞，组件可以移开。例如，如果增加卡片的高度会将其定位为通过浮动操作按钮，则该按钮可能会在碰撞发生之前消失或移出屏幕。

你还可以设计应用的布局以避免冲突，例如将浮动操作按钮放在卡片旁边，而不是直接放在卡片上方。

8. 描绘面距

要成功描绘面距，surfaces必须显示：

Surface边缘，使Surface与周围环境形成对比
与其他Surface 重叠，无论是静止还是运动
与其他Surface 的距离

8.1. Surface边缘

边缘有助于表达Material surfaces的触觉质量。它们显示一个图面的结束位置，另一个surface通过将 UI 的不同部分分隔为可识别的组件来开始。例如，应用栏的边缘显示它与网格列表是分开的，从而向用户传达网格列表独立于应用栏滚动。

默认情况下，材质surfaces使用阴影来指示边缘。其他方法可用于指示边，例如：

赋予Surface不同的颜色
为Surface提供不同的透明度

边必须在Surface之间产生足够的对比度（通过达到或超过可访问的对比度），以便将它们视为彼此分开。

8.2. Surface重叠

当一个Surface部分或完全重叠另一个Surface时，它表示两个Surface占据不同的面距（但不是它们之间的差异程度或数量）。较高面距处的Surface显示在较低面距处的Surface的前面，这意味着它们位于沿 z 轴的不同面距处。默认情况下，Surface可能会相互重叠，或者由于运动而导致其在 UI 中的位置而重叠。

当Surface具有不同的不透明度或彼此对比度不足时，可能会很难分辨哪个Surface在另一个Surface的前面。通过确保明确定义Surface边，避免模棱两可的重叠。

1. 阴影显示Surface边缘、Surface重叠和面距。
2. 不同的Surface颜色显示Surface边缘和重叠，但不显示面距距离感。
3. “不透明度”显示Surface边和重叠，但不显示面距距离感。

8.3. 距离感

Surface之间的面距差程度可以使用遮罩背景或使用阴影来表示。

• 遮罩
  当背景在 UI 中被遮罩化时，它表示其上方的内容处于较高高度。遮罩的背景表示大而未量化的高程。

• 阴影
  阴影可以以其他技术无法表示的方式表示表面之间的高程程度。

阴影的大小和柔和度或扩散量都表示两个表面之间的距离程度。例如，阴影较小且锐利的曲面表示曲面与其后面的曲面非常接近。更大、更柔和的阴影表示更多的距离。

阴影大小和扩散的细微差异传达了：

两个曲面之间的详细距离度
非重叠表面之间的高程差

8.4. 运动和面距

运动可以使用以下方法强调面距：

• 阴影变化
  阴影大小和柔和度的变化强调了高程的变化。
• 显示重叠
  一个曲面可能会在动画时部分或完全重叠，以显示哪个曲面在另一个曲面的前面。
• 推动
  共享相同高程的表面可以在其路径中移动表面。
• 缩放
  向上或向下缩放表面的大小可以强调高程变化。
• 视差
  不同高程处以不同速度移动的多个表面可以创建深度感，并将焦点放在前景内容上。
• 组合动作技巧
  组合动作技巧可以通过结合动作技巧来强调面距。

9. 面距层次

内容与其他内容的关系取决于它们位于相似还是不同的海拔高度。

9.1. 不同面距层次的内容

位于上层的面距通常意味着:

• 包含更重要的内容
• 集中注意力，例如对话
• 控制其后面的表面，例如应用程序栏中的操作

9.2. 共面曲面上的内容

将曲面放置在同一标高处会使它们共面，并可能表明它们包含彼此同等重要的内容。例如，一个集合中的所有卡片都具有同等的重要性。

不表达面距的曲面可以显示为共面。对于不表示面距的曲面，可以通过其内容以及通过调整其水平和垂直布局位置以建议其相对层次来传达层次差异。

10. 默认面距

所有元素都具有静止面距和动态面距偏移的默认值。某些构件的面距高于其他构件，从而在所有组件之间建立了一致的面距顺序。例如，对话框总是出现在所有其他组件的前面。

下表列出了静止面距和动态面距偏移的默认值。

默认面距值表

Material Design 系列文章

更多Material Design相关文章请访问 鹏叔的技术博客空间-Material Design

11. 参考文档

Elevation