Material Design– 环境

环境

Material design 是一个包含光线、材料和投射阴影的三维环境。

所有的材料对象都包含 x、y、z 三个维度。

所有的材料对象都有一个 Z 轴厚度。

主光源投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。

材料的厚度

1dp

阴影

阴影是不同高度的材料相互叠加所产生的。

Material Design 具备三维环境、光线、材料和阴影效果

3D 世界 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

材料所处的环境是一个 3D 空间，这意味着每个对象都有 x、y、z 三维坐标属性，z 轴垂直于显示平面，并延伸向用户视角，每个材料都有 z 轴厚度，标准是 1dp，相当于一个屏幕密度为 160 的设备上的一像素。

在网页上，z 轴被用来分层而不是为了视角。3D 空间通过操纵 y 轴进行仿真。

Material Design 中的 3D 空间包含 x、y、z 三维坐标

具有 x、y、z 轴的 3D 空间

光线和阴影 Expand and collapse content An arrow that points down when collapsed and points up when expanded.

在材料环境中，虚拟的光线照射使场景中的对象投射出阴影，直射光投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。

材料环境中的所有阴影都是由这两种光投射产生的，阴影是光线照射不到的地方，因为各个元素在 z 轴上占据了不同大小的位置，遮住了这些光线。在网页上，阴影的实现是在 y 轴上使用多重阴影。下面的案例中，卡片的高度是 6dp。

Material Design 直射光下的投射阴影

直射光投射的阴影

环境光投射阴影，符合 Material Design 规范

环境光投射的阴影

直射光与环境光的混合效果，体现 Material Design 风格

直射光和环境光混合投影