Elevation and shadows

Material Design 中的物体和现实中的物体具有相同的性质。在现实世界中，物体可以堆叠，或两个物体之间可以进行粘贴，但同时，物体之间是无法相互穿透。物体的阴影是光线投射到它身上所产生的。

这些特质行程的空间模型来自于现实，所以用户对此会非常熟悉熟悉，所以我们可以直接将这些特性运用到整个应用中。而高度和阴影的概念就是为了支撑这种空间模型。

高度（安卓）

高度指的是两个物体之间在z轴的相对高度或距离。

规范

• 高度的测量单位与x轴y轴的测量单位是相通的，主要是使用dp这个单位。因为所有的材料元素都有着1dp的厚度，所以高度的测量，是从一个材料到另一个材料的顶部之间的距离。
• 一个子对象的高度与他的父对象的高度息息相关。

以下是一些Android应用相关的事例图像。

两个物体之间的多个高度测量

静止高度

Material 中所有的对象，不论是多大的尺寸，都有静止高度，有的是默认高度，这高度是不能改变的。如果有物体改变了它的高度（因为操作），等操作完成后它也会尽快返回到这个静止高度。

桌面的静止高度应该小于2dp，用来适应鼠标和非触摸环境。

组件高度

• 组件应该在应用程序中，保持着一定的静止高度。例如，一个浮动的按钮高度，不会因为不同的程序而改变。
• 在不同的平台和不同的设备中，组件的可能有着不同的静止高度，这是根据环境的深度来改变的。例如，电视具有比显示器有着更大的深度，并且会在更远的地方进行观看。同样，电视和显示器都比移动设备有着更大的深度。

响应高度和动态偏移高度

有一些组件有这响应的高度，这意味着它们可以对用户操作（例如，正常状态、点击状态、按压状态）或者系统的事件有所反馈。这些高度的变化始终根据__动态高度偏移__来实现。

动态高度偏移是指物体移动的目标高度，它是与该元素的静态高度有关。它确保了整个组件高度变化和组件类型的一致性。例如，所有lift组件按压时的都有相同的动态高度偏移。

一但一个事件的完成或者取消，这个组件将返回它的静止高度。

避免高度干扰

有的时候组件在移动时候的从静止高度转移像响应高度的时候可能会和其他组件有所冲突。因为在 Material Design 中两个材料是无法相互穿透的，所以不管是单个的组件还是系统的结构都应该想办法避免相互之间的冲突。

在组件层次中，可以通过移入或移除当组件，进行避免组件的冲突。例如，当用户移动屏幕或者点击卡片时，上面浮动的按钮可以消失或者移出屏幕，也可成为snackbar组件展现。

在布局层次中，设计你的应用布局，尽可能的减少发成冲突的可能性。例如，在你的信息流的一侧设置固定浮动按钮，防止你在选择信息流卡片时触碰干扰。

组件高度对照

下图是各个组件的静止高度和动态高度偏移对照表。

在这个图中，只有静止高度的尺寸和组件之间的布局是准确的。其它尺寸和组件的布局仅供说明。

一个应用例子，应用布局包含卡片流组件和FAB，沿着z轴横切面示例展示。

再上一个应用布局的基础上增加了抽屉导航栏，沿着z轴横切面示例展示。

阴影

阴影提供了有关对象的深度和定向运动的重要视觉线索。阴影是各个表面之间分离的视觉线索。一个对象的高度直接决定了阴影的外观呈现。

错误：没有阴影，是没办法表明浮动按钮操作是与背景分开的。

错误：清晰的阴影表示浮动操作按钮和蓝色面板是相互独立的部分。然而它们的阴影效果太过相似，这是在暗示，他们是在同一个高度。

正确：更柔软，更大的阴影表示浮动按钮是比蓝色背景更高的位置，这样比之前有了更明确的阴影效果。

在物体的运动中，阴影提供关于移动对象的方向以及是否增加或缩小与表面之间距离的线索。

错误：如果没有阴影表示高度，是无法确定方块到底是增加高度还是减少了高度。

正确：增加阴影的柔和度，面积，能够得知蓝色方块增加了高度。当高度缩小时，阴影将变得蜷缩和缩小。

正确：这个案例，使用一致的阴影能够让用户明白这个物体与之前相比是改变了形状，而不是改变了高度。

组件阴影参考

组件的阴影应该引用典型的效果。如果在以下的阴影说明中与组件的阴影效果有任何的差别，请以参考阴影为主。

App bar

• 4dp

Raised button

• 静止高度：2dp
• 点击时高度：8dp
• 仅限于桌面设备
• 静止高度：0dp
• 点击时高度：2dp
• 请查看组件 Flat raised button 获取更多内容

Floating action button (FAB)

• 静止高度：6dp
• 点击时高度：12dp

Card

• 静止高度：2dp
• 点击时高度：8dp
• 只针对桌面设备，查看 Content Blocks 组件

Menus and sub menus

• 菜单高度：8dp
• 次级菜单：9dp（每增加一个次级菜单，dp数＋1）

Dialogs

• 24dp

Nav Drawer & Right drawer

• 16dp

Modal bottom sheet

• 16dp

Refresh indicator

• 3dp

Quick entry/Search bar

• 静止高度：2dp
• 滚动高度：3dp

Snackbar

• 6dp

Switch

• 1dp

对象关系

对象层次

你如何整理你的对象，或者说如何收集你的对象，在一个应用中确定如何将它们移动到另一个应用中。对象可以独立运动，或者根据高层次对象一起移动。

所有的对象都可以通过一个“父子”关系进行描述。“子”层的中的所有对象的关系都是“父”对象的下属元素。对象可以是另一个对象的子元素或者是系统的子元素。

“父－子”元素关系细节

• 每一个对象只有一个父元素。
• 每一个对象可以拥有多个子元素
• 子元素能够从父元素继承属性，如位置，旋转，缩放，和高度。
• 兄弟层的对象都处在同一个层级

例外

项目元素的父元素为系统元素，比如主要的UI元素，它们是可以自主移动。比如说，浮动按钮不会根据滑动内容移动而移动。其它元素包括

• An app’s side nav drawer
• The action bar
• Dialogs

相互作用

对象与其它对象之间的交互方式，是根据他们所在“父子”层次中所处的位置决定的

比如:

• 子对象在z轴上与它的父元素距离最短，其他对象无法插入到他们中间。
• 在一个滑动的卡片集合中，移动一张卡片，则它的同类对象都会跟随一起移动。他们是卡片集合对象，所以会一起移动。

高度

如何确定对象的高度，通过它们在z轴的位置，取决于你想要表达的内容层次和对象是否独立于其他对象进行移动。

由于父元素在滚动，所以凸起按钮（子元素）会随着父元素进行滚动。

由于卡片集合滑动到屏幕外，所以卡片集合里面的子元素会随着移动到屏幕外。而浮动按钮没有移动，是因为他的父元素（系统）没有被移动。