提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
这是谷歌Material design的一系列译文,完全人工翻译,斟字琢句,让你从零开始了解Google material design。另外我会持续更新。
章 - 什么是Material(What is material)
节 - 环境(Environment)
Material design是包含光,材料(material),和投影的三维环境。
所有的材料都有x、y、z维度。
任何材料在z轴上都只有一个单一的位置。
主光源决定了阴影的方向,环境光则使阴影更加柔和。
材料厚度
1dp
阴影
由于材料在z轴上堆放时所处的高度不同,便产生了投影。
本节内容
3D世界(3Dworld)
Material环境是3D的空间,意味着所有对象都具有三维属性,z轴垂直于显示器屏幕,向着用户的视觉延伸。每个material单片(sheet)在z轴上只有一个单一的位置,且有一个标准的1dp单位的厚度,在像素密度为160dpi的屏幕上正好是1px。
在网页中,z轴用来分层而不是实现透视效果,通过操控y轴来模拟3D世界。
具有x,y,z三轴的3D世界
光与影(Light and shadow)
在material环境中,用虚拟的光线来照亮场景,主光源决定了阴影的方向,环境光则使阴影更加柔和。
阴影就是由于这两种光线的投射而产生的。在安卓开发中,由于在z轴上处于不同位置的单片(sheet)挡住了光而产生了阴影。在网页中,阴影仅仅只能通过操作y轴位置来描绘。下面的例子描绘的是高度为6dp的卡片的样式。
主光源产生的投影
环境光产生的投影
二者的混合投影
译者注:文章翻译自谷歌2016年5月最新官方文档,全部为本人人工翻译,本节部分用语和翻译有参考极客学院上已经发布的更新至2015年8月的的文档(地址:http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html)
我会持续更新,欢迎交流。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册