Material Design 基础 - Elevation（标高）
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边，避免模棱两可的重叠。
- 阴影显示Surface边缘、Surface重叠和标高。
- 不同的Surface颜色显示Surface边缘和重叠，但不显示标高距离感。
- “不透明度”显示Surface边和重叠，但不显示标高距离感。
8.3. 距离感
Surface之间的标高差程度可以使用遮罩背景或使用阴影来表示。
遮罩
当背景在 UI 中被遮罩化时，它表示其上方的内容处于较高高度。遮罩的背景表示大而未量化的高程。阴影
阴影可以以其他技术无法表示的方式表示表面之间的高程程度。
阴影的大小和柔和度或扩散量都表示两个表面之间的距离程度。例如，阴影较小且锐利的曲面表示曲面与其后面的曲面非常接近。更大、更柔和的阴影表示更多的距离。
阴影大小和扩散的细微差异传达了：
两个曲面之间的详细距离度
非重叠表面之间的高程差
8.4. 运动和标高
运动可以使用以下方法强调标高：
- 阴影变化
阴影大小和柔和度的变化强调了高程的变化。 - 显示重叠
一个曲面可能会在动画时部分或完全重叠，以显示哪个曲面在另一个曲面的前面。 - 推动
共享相同高程的表面可以在其路径中移动表面。 - 缩放
向上或向下缩放表面的大小可以强调高程变化。 - 视差
不同高程处以不同速度移动的多个表面可以创建深度感，并将焦点放在前景内容上。 - 组合动作技巧
组合动作技巧可以通过结合动作技巧来强调标高。
9. 标高层次
内容与其他内容的关系取决于它们位于相似还是不同的海拔高度。
9.1. 不同标高层次的内容
位于上层的标高通常意味着:
- 包含更重要的内容
- 集中注意力，例如对话
- 控制其后面的表面，例如应用程序栏中的操作
9.2. 共面曲面上的内容
将曲面放置在同一标高处会使它们共面，并可能表明它们包含彼此同等重要的内容。例如，一个集合中的所有卡片都具有同等的重要性。
不表达标高的曲面可以显示为共面。对于不表示标高的曲面，可以通过其内容以及通过调整其水平和垂直布局位置以建议其相对层次来传达层次差异。
10. 默认标高
所有元素都具有静止标高和动态标高偏移的默认值。某些构件的标高高于其他构件，从而在所有组件之间建立了一致的标高顺序。例如，对话框总是出现在所有其他组件的前面。
下表列出了静止标高和动态标高偏移的默认值。
默认标高值表
| 组件 | 默认标高值(dp) |
|---|---|
| Dialog | 24 |
| Modal bottom sheet Modal side sheet | 16 |
| Navigation drawer | 16 |
| Floating action button (FAB - pressed) | 12 |
| Standard bottom sheet Standard side sheet | 8 |
| Bottom navigation bar | 8 |
| Bottom app bar | 8 |
| Menus and sub menus | 8 |
| Card (when picked up) | 8 |
| Contained button (pressed state) | 8 |
| Floating action button (FAB - resting elevation) Snackbar | 6 |
| Top app bar (scrolled state) | 4 |
| Top app bar (resting elevation) | 0 or 4 |
| Refresh indicator Search bar (scrolled state) | 3 |
| Contained button (resting elevation) | 2 |
| Search bar (resting elevation) | 1 |
| Card (resting elevation) | 1 |
| Switch | 1 |
| Text button | 0 |
| Standard side sheet | 0 |
Material Design 系列文章
最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design
11. 参考文档
Material Design 基础 - Elevation（标高）