美文网首页
Material Design 谷歌设计语言 —— 环境

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

作者: Andie_Notebook | 来源:发表于2017-05-18 16:18 被阅读0次

    环境

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

    所有质感物体都有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。

    主光源在物体上投射出的阴影                ——                  环境光在物体周围投射出的柔和阴影                   ——                      两种阴影的结合               

    相关文章

      网友评论

          本文标题:Material Design 谷歌设计语言 —— 环境

          本文链接:https://www.haomeiwen.com/subject/dqbsxxtx.html