Material Design（一）——初识

Material Design

• 于Google I/O 2014 大会发布（谷歌出品，必属精品）。
• “原质化设计”，将物理世界的体验带进屏幕。

整体框架

设计原则

1. Material is the metaphor，实体感就是（通过设计方式来表达）隐喻
2. Bold， graphic， intentional。鲜明、形象、深思熟虑
3. Motion provides meaning，有意义的动画效果

环境

1. 图层(material,也称材料、材质、魔法纸片)

• 信息载体，容器

支持的能力	不支持的能力
伸缩、改变形状	一项操作同时触发两个图层的反馈
多张图层拼接	互相穿透
一张图层分裂成多张	弯折
在任何位置凭空出现	层叠的图层z轴值相同

1. 三维世界(3D world)

• 每个对象都有x，y，z三维坐标属性，z轴垂直于屏幕
• z的值越高，元素离水平面越远，投影就越重
• 网页中z轴用来表现元素的层叠关系

2. 光影关系(Light and shadow)

• 两种光：
  • 主光源投射出一个定向的阴影
    
  • 环境光从各个角度投射出连贯又柔和的阴影
    
• 混合投影
  

需要注意的几点

1. 图层具有变化的长宽尺寸和固定的厚度1dp
2. 内容并不会增加图层的厚度
3. z轴值的变化是由用户与图层交互产生的
4. 图层能自动产生或者消失
5. 图层不可弯曲和折叠

---

学习指南：
Material Design官网
Material Design中文文档