Material Design(2)

来源:互联网 发布:成都闪电seo 编辑:程序博客网 时间:2024/06/17 10:13

Material design


Environment

Material Design 是一个三维的环境,包括光线,实体和投影。

所有的实体对象包含x,y与z轴
所有的实体对象有一个单独的z轴位置
主光线创造有方向的阴影,周围光线创造温和的阴影

实体厚度
1dp

阴影
阴影被海拔创建,使层叠的实体区分开
what_is_material_environment

内容

3D 世界
光线与阴影

3D 世界

实体环境是一个3D空间,意味着所有的物体都有x,y和z轴。z轴是垂直调整平面的显示,正值表示向查看者延伸。实体的每一片沿着z轴出现在单独的位置且都有标准的1dp厚度,等同于1像素的厚度在像素密度为160的屏幕上。
在网页中,z轴用于分层而没有用于透视。3D世界通过操作y轴来仿真。

whatismaterial_environment_3d
拥有x,y和z轴的3D 空间

光线和阴影

在实体环境中,虚拟的光线操作着场景。主光线创造有方向的阴影,当周围的光线创造温和的阴影从所有的角度。
在实体环境中的阴影被两个光源操控方向。在安卓环境中,阴影出现在当光源被实体阻挡在不同的位置沿着z轴。在网页上,阴影只被y轴操控。下面的例子展示了卡片在6dp的高度。

whatismaterial_environment_shadow1
主光线投射的阴影
whatismaterial_environment_shadow2
周围光投射的阴影

whatismaterial_environment_shadow3
上述两种阴影的结合

0 0