2017 Material design 第一章第二节《环境》

997 阅读2分钟

二、环境(Environment)

Material design是基于三维空间的设计语言。在三维空间内包含有光照(light)、material、阴影(shadows)

所有material对象都存在于含有x、y、z轴坐标的三维空间中。
在三维空间下,所有material对象都有唯一,不与其他对象冲突的z轴位置。
物体受两种光源影响,主光源影响物体的投影方向,环境光照射物体产生柔和的投影。

Material的厚度
1dp

投影
投影还会受到z轴上相互重叠的material对象之间距离大小的影响


三维空间(3D world)

含有x、y、z轴坐标的三维空间
含有x、y、z轴坐标的三维空间

Material存在于三维空间内,因此所有的material对象都带有x、y、z轴坐标信息。z轴指示的方向垂直于屏幕并指向用户眼球。在z轴坐标方向上,每一material对象都有着唯一,不与其他对象冲突的坐标位置并且都只有1dp厚度,1dp和屏幕密度为160px的一个px相等

在web端上,z轴坐标主要用于区别对象的层级关系,而三维空间的营造主要通过y轴上的操作。


光照和投影(Light and shadow)

在material环境下,虚拟的灯光照亮整个场景。主光源影响物体的投影方向,环境光通过照射物体产生柔和的投影。

在material环境下,投影受这两个光源影响。在Android开发中,由于在z轴上各material对象位置的不同导致了不一样的投影效果产生。但在web上,投影只受y轴坐标变化的影响。下面的例子展示了一张卡片在6dp高度上光源对其的影响效果。

主光源的投射效果
主光源的投射效果

环境光的投射效果
环境光的投射效果

主光源和环境光共同投射下的效果
主光源和环境光共同投射下的效果