Material foundation 

一、Environment

Material Design has three-dimensional qualities that are reflected in its use of surfaces, depth, and shadows.

material design 是现实中的物质，所有的元素在x ,y ,z轴上运动，依据现实中物体运动原理。

卡片厚度一致，投影一致，并且卡片运动不能变形，如烟雾，融化，可以平稳的运动。

卡片分层，可以一起运动，单独运动，一个不动、另一个运动。

卡片可以扩大，可以缩小，内容可以随着卡片缩小而减少。

卡片是矢量的，高清的，不会因为放大而有锯齿。

卡片不能像纸一样，卷起一角。

卡片可以上下运动 卡片内地图单独运动，并且右侧评论可以上下滚动

二、Elevation

The elevation system:

1.允许卡片置于其他页面之前或者之后

2.悬浮按钮置于顶层，代表与主要内容是独立存在的

3.提示性通知对话框，引起注意

当有点击事件或者输入事件发生时，元素的坐标大小会发生变化。

为了避免元素发生碰撞，可以悬浮于上方。

Edges help to express the tactile quality of Material surfaces. 

清晰的边缘用于区分两种不同元素，不应该混淆，两种方式：颜色区分、透明度区分

当两个表面有重叠关系时，表现Z轴的前后关系，用投影表现，透明度无法表现出来

当使用黑色蒙版时，表示前面一层置于很高的高度，但是高度不明确。

阴影大小用来表示界面之间高度差，阴影小而锐利，代表距离越近，阴影越大，表示距离越远

当选中卡片，阴影变大，表示卡片被抬起，Z轴高度发生变化

选中卡片 黑色蒙版，卡片高度缓缓扩展 卡片缩放效果，打开时缓慢，收起时迅速

视差，当很多表面在运动时候，可以互相变化，转化，产生深度和位置的变化

通过微交互，可以强调高度

根据内容重要性，在不同位置展现

二、Light and shadows 

In the Material Design environment, virtual lights illuminate the UI. Key lights create sharper, directional shadows, called key shadows. Ambient light appears from all angles to create diffused, soft shadows, called ambient shadows.

虚拟灯光照亮界面，清晰阴影称为关键阴影，从其他方向打来的光线称之为环境光

卡片高度变化，投影一定也要变化