Material design 环境

环境

Material Design 是一个三维环境,包括环境光、材料以及投射的阴影。

所有的材料对象都包含 X、Y、Z 三个维度。

所有的材料对象都在 Z 轴上有一个单独的位置

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

材料的厚度

1dp

阴影

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

3D 空间 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

材料环境是一个三维空间,这意味着每个物体都有 X、Y、Z 三维坐标属性,Z 轴垂直于显示屏,并延伸向用户视角,每个材料元素都有 Z 坐标以及 1dp 标准的厚度。厚度相当于一个屏幕密度(Pixel Desity, PD)为 160 的设备上的一像素

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

具备 X、Y、Z 轴的 3D 空间

光线和阴影 展开或收起内容 当内容收起时,箭头向下,当内容展开时,箭头向上。

在材料环境中,虚拟光线的照射使物体投射出阴影,直射光投射出一个定向的阴影,而环境光从各个角度投射出连续而柔和的阴影。

材料环境中的所有阴影都是由这两种光投射产生的,物体会遮挡光线,不同的海拔高度投射出不同的阴影。在网页上,阴影的实现是在 Y 坐标上使用多重阴影。下面的案例中,卡片的海拔为 6dp。

直射光投射的阴影

环境光投射的阴影

直射光和环境光混合投影