恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
MD规范-What is material篇
0.0°
2016-05-19 自译外文 规范/资料 原作者: google 举报 2940 5 8 0

这是谷歌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

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

更新:2016-05-19

收藏

5人已收藏

  • 18

    作品

  • 75

    粉丝

  • 23

    关注

  • 作品集整理
  • 几幅原创小插画
  • 乐学 - 有一个快乐的地方叫乐学
  • 云中间-动效设计

    猜你喜欢

      2016-05-19 自译外文 规范/资料 原作者: google 举报 2940 5 8 0

      MD规范-What is material篇

      0.0°

      你确定要举报MD规范-What is material篇

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年05月19日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      5
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录