Material Design 高度和阴影

1. 概述

在 Materail Design 中，物体的行为和真实世界中很相似。

在真实世界中，物体堆放和叠加在一起，但是不能穿过彼此，并且会投射出阴影。
Material Design 的实体与之类似，也需要投射阴影。

Material Design 实体具有以下三个高度属性：

高度：指的是一个物体表面到另一物体表面的距离。物体的高度决定了它的阴影投射情况
默认高度：任何的实体都具有默认高度(Resting Elevation)，在一个平台中，组件的默认高度是 一致的，但是不同的平台或者设备可能具有不同的默认高度。
动态的高度偏移：这个属性指的是实体在 响应事件时 相对于 默认高度 的偏移量。

2. 高度（Android）

2.1 说明

高度的表示单位也是 dp，与 x 和 y 坐标一样。

需要注意的是，由于实体也具有厚度(1 dp)，所以高度指的是从一个实体表面到另一个实体表面的距离。

同时，一个子对象的高度，指的是其 相对于父对象的距离。

2.2 默认高度

默认高度是不会变化的，当一个组件的高度变化时，它应该尽快的恢复默认高度。

各个 Android 组件的默认高度可以到官网查看。

对于桌面环境来说，为了容纳鼠标和其他非触摸事件，它的组件的默认高度要比 Android 组件的默认高度低 2 dp。

组件的高度在不同的 App 之间应该相同，但是在不同设备之间不同。

比如说电视和 PC 就比手机具有更深的层次。

2.3 感应高度和动态的高度偏移

一些组件可能拥有感应高度，也就是说它会根据用户的输入（比如说触摸事件）来改变自己的高度。

一般来说，触摸，或者按压一个组件会使它的高度变高。

这些高度变化是通过 动态高度偏移 实现的。

动态高度偏移是相对于默认高度来说，组件需要移动的高度量。

动态高度偏移保证了在移动应用中组件高度偏移量的一致性。组件接受到触摸事件后，都能有一个不变的高度偏移量。

一旦触摸事件完毕，或者被取消，那么组件就必须恢复到其默认高度。

2.4 避免高度冲突

拥有感应高度的组件可能会导致其他组件随着其高度变化而变化，这是因为 组件不可以相互穿透。

避免冲突的方法有很多：

在某一元素水平上，元素可以在它们产生冲突前提前移动或者消失。比如说一个 FAB 就可以在用户选择一个卡片的时候消失或者移出屏幕。

在布局水平上，你需要通过设计你的 App 布局来减少冲突的可能性。

比如说将 FAB 置于卡片列表的一端来避免 FAB 与卡片出现的冲突。

2.5 组件高度比较

图中只有组件的高度是正确的，其他的属性(比如面积)不一定正确

![whatismaterial_3d_elevation3](https://ooo.0o0.ooo/2016/10/25/580f985cb48ba.png) 一个卡片，App Bar 和 FAB 的例子 ![whatismaterial_3d_elevation4](https://ooo.0o0.ooo/2016/10/25/580f989bbcbd6.png) 另一个 Navigation Drawer 的例子