3.2 环境-海拔（Material基础）

海拔

海拔是指两个表面在z轴上的相对距离。

注：海拔（elevation）在整个Material Design中多次出现，根据场景也被称作高度、深度（depth）、厚度（thickness）等。

组件海拔高度值

1. 抽屉导航：16dp

2. 应用栏：4dp

3. 卡片：1dp~8dp

4. FAB（浮动操作按钮）：6dp

5. 按钮：2dp~8dp

6. 对话框（弹框）：24dp

目录

简介

描述

结构

默认

简介

海拔测量

Material Design中的海拔高度以表面间的距离来衡量。表面距离使用z轴上的独立密度像素（dps）表示，使用阴影（默认）来表现。

1. 从前面看，一个表面的海拔高度为1dp，另一个表面的海拔高度为8dp。

2. 从侧面看，这两个表面的海拔高度差为7dp。

当有其它表面在下层时，相同海拔高度的表面呈现方式会有不同。

1. A表面和B表面的海拔高度都为8dp，但产生的阴影不同，因为B表面下还有已具备海拔的C表面。

2. A、B、C表面的侧视图。

海拔系统

所有Material Design的表面和组件都有海拔高度值。

不同海拔高度的表面用法如下：

• 所有表面可在其它表面之前或之后移动，例如内容在应用栏后面滚动。

• 反映空间关系，例如浮动操作按钮的投影方式可以表示它与卡片集的不同。

• 聚焦最高层，例如临时出现在所有表面之上的对话框。

海拔高度可以使用阴影或其他视觉标识来表示，例如填充和不透明度。

Material Design使用阴影来表示海拔。

谨慎使用

不同的表面可以使用填充代替阴影来表示海拔差异。

谨慎使用

不透明度可以用来代替阴影表示海拔差异。

静止海拔

静止海拔指的是组件的默认海拔高度值。组件从静止海拔开始移动，以响应用户或系统事件。每种组件类型的海拔高度都相同，例如所有卡片的海拔与其它的卡片的海拔高度一致，所有对话框的海拔与其它对话框的海拔高度一致。

静止海拔与坏境

静止海拔在不同的环境、平台和应用程序下会有所不同。移动端的静止海拔会使用视觉提示（例如阴影），可用于表示组件的可交互性。相比之下，桌面端的静止海拔阴影较为轻微，因为其它效果（如悬浮（hover）状态）也可在组件为可交互时出现。例如，带边框的卡片在桌面端的海拔为0dp。

1. 从正面看一个移动端界面的静止海拔，应用栏（A）、卡片（B）、浮动操作按钮（C）。

2. 对应侧视图。

1. 从正面看一个移动端界面的静止海拔，应用栏（A），卡片（B），浮动操作按钮（C）。

2. 对应侧视图。

改变海拔

组件可以通过改变海拔来响应用户输入或系统事件。当这些发生时，组件会进行预设动态海拔偏移，即组件从默认静止海拔移动到非静止海拔。

每一类组件的动态偏移海拔高度都相同。例如，所有卡片的动态偏移海拔与其它卡片的一致，所有FAB的动态偏移海拔与其它FAB的也一致。

一旦用户输入（或系统事件）完成或取消，组件将回归静止海拔。

一些组件通过提升海拔高度来响应用户输入。

1. 用户输入时，海拔从2dp上升到8dp。

2. 对应侧视图。

海拔冲突

当组件在静止海拔与动态偏移海拔之间移动时，不应该与其它的组件发生碰撞。

为避免这类冲突，可以将组件移出执行路径。例如，在提升卡片海拔高度后移动通过一个浮动操作按钮时，按钮可以在碰撞将要发生时消失或者移出屏幕。

可以通过布局设计来避免冲突，例如将浮动操作按钮放置在卡片旁边，而非上方。

临时改变位置或移动组件可能会与转换组件产生冲突。上图移动端卡片流的正视图（1）和侧视图（2）展示了在提起卡片（A）时浮动操作按钮（B）的消失方式。

通过设计尽可能地减少海拔冲突

海拔描述

为成功描述海拔，表面必须显示：

1. 表面边缘，能与周边环境产生对比。

2. 与其它表面有重叠，不管是处于静止还是动态。

3. 与其它表面的距离。

表面边缘

边缘有助于表现表面的触感。它们通过将UI的不同部分区分成可识别的组件来表示表面的开端和结尾。例如，应用栏的边缘表示它与网格列表有区别，告知用户网格列表可以独立于应用栏而滚动。

表面默认使用阴影来表现边缘，也可以使用其他形式：

• 给表面不同的颜色

• 给表面不同的透明度

边缘必须在表面间创造出足够的对比（达到或超过易用性对比率），确保能相互区分。

1. 没有边缘显示，不清楚这是一个还是两个表面。

2. 表面填充提供了足够的对比，明确了此图有两个表面。

表面重叠

当一个表面与另一个重叠时，不管是部分还是全部，都表明两个表面占据了不同的海拔高度（非角度、数量的差异）。高海拔的表面在低海拔的之前，意味着它们在z轴上的海拔高度不相同。表面可能默认处于重叠状态，也可能通过位移达到重叠状态。

当表面有多种不透明度或者对比不充分时，很难区分表面的前后关系。通过清晰定义边缘可有效避免模棱两可的重叠关系。

1. 阴影表示了表面边缘、表面重叠和海拔高度。

2. 颜色差异可以表示表面边缘和重叠，不能表示海拔高度。

3. 透明度可以表示表面边缘和重叠，不能表示海拔高度。

正确示例（绿色）

顶部应用栏重叠在卡片之上，没有表现出表面间的海拔高度差。

错误示例（红色）

没有表面边缘和重叠的视觉指示，就不可能知道有多少个表面，哪些表面在另外一些之上，以及表面间的海拔高度差。

距离

表面间的海拔高度差可以使用背景遮罩或阴影来表现。

背景遮罩

当背景在UI中被遮罩时，表面上边的内容具有更高的海拔高度。背景遮罩表现了大量但不具体的海拔高度。

正确示例

背景遮罩可以表示表面重叠，不能表明海拔高度。

错误示例

缺少阴影和背景遮罩使对话框和背景难以区分。

阴影

阴影可以使用其它形式难以表现的方法来表现表面之间的海拔高度。

阴影大小以及柔和或扩散的程度表现了表面间的距离差。例如，小而锋利的阴影表示表面靠的很近。大而柔和的阴影表明表面间有一定的距离。

阴影大小和扩散的微妙变化表达了：

• 表面间的精确距离

• 非重叠表面间的海拔差异

阴影显示了表面的边缘以及相对于背景的海拔高度。它们也给非重叠表面之间的创造了可察觉的差异。

正确示例

阴影使海拔高度差异易于察觉。应用栏（1）上较小、锋利的阴影表示它比有较大、柔和阴影的菜单（2）的海拔更低。

错误示例

缺少了阴影及其它视觉提示，说明没有给表面间的边缘和重叠创造出充分的对比。因此，我们很难知晓哪些UI属于一组。

错误示例

不要仅仅为了样式效果而使用阴影。

动效与海拔

动效能通过以下几种方式来突出海拔高度：

• 阴影变化

• 显示重叠

• 推动

• 缩放

• 视差

阴影变化

阴影大小和柔和度的改变突出了海拔高度的变化。

阴影的扩大突出了卡片的高度提升。

显示重叠

一个表面可以通过动画来与另一个相重叠，不管是部分还是完全重叠，都能表示前后关系。

扩展时，一个表面通过覆盖临近的表面来表现其海拔高度。

推动

相同海拔高度的表面可以在其路径上相互推动。

已选列表扩展时，推动了周边的其它选项。

缩放

缩放表面可以突出海拔高度的变化。

前景和背景表面的缩放突出了海拔高度变化。

视差

不同海拔高度的多个表面以不同速度移动时可以创造出深度感和聚焦前景内容。

前景表面比背景图片移动更快，创造出了深度感。

结合动效技巧

可以结合动效技巧来突出海拔高度。

视差动效和缩放突出了表面间的层次差异。

结构

内容间的相互关系取决于它们是否处于相似还是不同的海拔高度。

不同海拔上的内容

最前层的表面通常：

1. 包含更重要的信息

2. 吸引集中了注意力，例如对话框

3. 控制了它后面的表面，例如应用栏上的操作

在桌面端，正视图（1）和侧视图（2）说明了主焦点（B）上的内容比次焦点上的内容（脚注）更加重要。

在移动端，正视图（1）和侧视图（2）表明了将内容置于更高海拔（如底部面板A）可以使操作上下文时更能集中注意力。

在一个移动端界面上，正视图（1）和侧视图（2）表明底层表面（A）通常被其前面的表面所控制，例如抽屉导航（B）。

共表面的内容

将多个表面置于相同海拔高度便形成了共面，同时也表明了它们的内容具有相同的重要性。

1. 正视图中，卡片（A，B）具有相同的海拔并且一起移动，强调它们的内容为相同的等级

2. 对应侧视图

不表现海拔高度的表面可以形成共面。对于无海拔高度的表面，你可以通过它们的内容来表现结构差异，通过调整水平和垂直布局来暗示它们的层级关系。

例如，在一个含有共面的仪表盘上 ，根据语言文字的方向将详细内容置于父级内容旁。

1. 桌面端UI的正视图，基于从左到右的英语内容说明了相同海拔高度（A、B、C）表达的层级关系。

2. 对应侧视图

默认

所有元素都有静止海拔和动态偏移海拔的默认值。一些组件的海拔比另一些的要高，在所有组件中形成了统一的海拔高度次序。例如，对话框总是显示在别的组件之前。

以下表格列出了静止海拔和动态偏移海拔的默认值。

默认海拔高度表

默认海拔高度图

多个组件的静止海拔与动态偏移海拔截面图

*原文作者为谷歌设计团队，本文为个人翻译作品，仅供学习参考