Material Design 谷歌设计语言 —— 环境

环境

质感设计在一个三维空间中,包含光、质感和投影三元素。

所有质感物体都有x, y, z三个维度。

所有质感物体都有唯一Z轴位置。

主光源使物体投射出有方向的清晰阴影,环境光使物体投射出柔和的阴影。

物体厚度

1dp

阴影

相互交叠的物体,因各自高度不同,投射出不同阴影。


3D 世界

质感设计是3D的,也就是说其中的所有物体都有x, y, z三个维度。Z轴垂直于展示平面,正向Z轴朝向用户。每一张单页都在Z轴上的坐标相同,并都占据了一个dp的厚度,在160像素屏上及等于1像素厚度。

在网页中,Z轴用来布局,而不是提供透视。通过变化Y轴来获取3D的效果。


3D空间中的X,Y,Z轴

光与影

在质感环境中,虚拟光线照亮场景。关键光在物体上投射出单一方向的清晰阴影,环境光投射各个方向的柔和阴影。

质感环境中的阴影由两个光源投射出来。在安卓开发中,单页在Z轴的不同位置挡住光源,从而产生阴影。在网页中,阴影只收到Y轴位置的影响。下面的例子中卡片厚度为6dp。


主光源在物体上投射出的阴影                ——                  环境光在物体周围投射出的柔和阴影                   ——                      两种阴影的结合               
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容