MD规范-What is mater...

  • 经验类型规范/资料原作者:google

  • 经验属性自译外文
  • 经验版权署名
3440 0 6 2016-05-19

这是谷歌Material design的一系列译文,完全人工翻译,斟字琢句,让你从零开始了解Google material design。另外我会持续更新。


章 - 什么是Material(What is material)


节 - 环境(Environment)


Material design是包含光,材料(material),和投影的三维环境。


所有的材料都有x、y、z维度。


任何材料在z轴上都只有一个单一的位置。


主光源决定了阴影的方向,环境光则使阴影更加柔和。



材料厚度


1dp



阴影


由于材料在z轴上堆放时所处的高度不同,便产生了投影。Image title



本节内容

  • 3D世界
  • 光与影


3D世界(3Dworld)


Material环境是3D的空间,意味着所有对象都具有三维属性,z轴垂直于显示器屏幕,向着用户的视觉延伸。每个material单片(sheet)在z轴上只有一个单一的位置,且有一个标准的1dp单位的厚度,在像素密度为160dpi的屏幕上正好是1px。


在网页中,z轴用来分层而不是实现透视效果,通过操控y轴来模拟3D世界。


Image title

具有x,y,z三轴的3D世界



光与影(Light and shadow)


在material环境中,用虚拟的光线来照亮场景,主光源决定了阴影的方向,环境光则使阴影更加柔和。


阴影就是由于这两种光线的投射而产生的。在安卓开发中,由于在z轴上处于不同位置的单片(sheet)挡住了光而产生了阴影。在网页中,阴影仅仅只能通过操作y轴位置来描绘。下面的例子描绘的是高度为6dp的卡片的样式。


Image title

    主光源产生的投影      


Image title

    环境光产生的投影


Image title

    二者的混合投影





译者注:文章翻译自谷歌2016年5月最新官方文档,全部为本人人工翻译,本节部分用语和翻译有参考极客学院上已经发布的更新至2015年8月的的文档(地址:http://wiki.jikexueyuan.com/project/material-design/material-design-intro/introduction.html)

我会持续更新,欢迎交流。

全部评论:0条

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票