Material Design 拾荒记（一） what's is material design

官方链接：http://www.google.com/design/spec/material-design/introduction.html#
中文翻译：http://wiki.jikexueyuan.com/project/material-design/whatis-material-design/material-properties.html
We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.
material design 是一种新的设计语言，符合自然特性，给用户友好的反馈体验，我觉得她very nice。

什么是Material design
环境
三维世界（3D world）
在她的定义中存在着 3D world ，x ，y ，z轴，不同的材料在 z轴占着不同的比例。3D空间提供对Y轴的仿真。

光影关系（Light and shadow） 在 material 环境中，虚拟的光线照射使场景中的对象投射出阴影，主光源投射出一个定向的阴影，而环境光从各个角度投射出连贯又柔和的阴影。
不同角度的光线提供了，不同的视觉体验，介于 ios扁平化设计和3D之间的一种视觉效果。

Material 属性
物理属性
物理特性
材料具有变化的长宽尺寸（以 dp 为计）和均匀的厚度（1dp）。

这是一种标准的设计，下面的一个不符合设计规范在z轴的厚度不为1dp。

材料为什么会形成阴影，是因为在不同视角上的投影不懂，造成了效果不同。
在材料上的内容是不会增加材料的厚度的。
材料能展示任何形状和颜色。
内容的展示能够独立于材料,但要被限制在材料的范围里。
内容的行为能独立于材料的行为。
材料是实物。
输入事件不能穿过材料。
输入事件只影响材料的前景。
输入事件不能从材料下面穿过。
多个材料元件不能同时占用相同的空间点。
利用不同的高度区分材料元件是防止多个材料元件同时占用相同空间点的一个方法。
多个材料元件不能同时占用相同的空间点。
材料不能穿过其他材料。
例如，一片材料不能在改变高度时穿过另一片材料。
材料不能穿过其他材料。
材料的变化
材料能改变形状。
材料仅沿着它的水平面增长和收缩。
材料决不能弯曲或折叠。
材料能改变形状。
材料能自动产生或消失。
材料能沿任何轴移动。
材料可以沿各个轴移动。
Z轴产生运动一般都是用户与材料交互而产生的。
Z 轴的运动是由于用户的交互而产生的提示。
Material design 中的对象与现实生活中的对象具有相似的性质。在现实生活中，不同对象可以被堆积或粘贴起来，但是不能彼此交叉。对象自身塑造了自己的阴影并返回自己的光影。

依据这些性质所构造出来的空间模型对于用户来说是非常熟悉的，这一模型也可以被长期应用于移动应用当中。支撑这一空间模型的正是“高度”（Elevation）和“光影”（Shadows）这两个概念。
高度和阴影

Material design 中的对象与现实生活中的对象具有相似的性质。在现实生活中，不同对象可以被堆积或粘贴起来，但是不能彼此交叉。对象自身塑造了自己的阴影并返回自己的光影。

依据这些性质所构造出来的空间模型对于用户来说是非常熟悉的，这一模型也可以被长期应用于移动应用当中。支撑这一空间模型的正是“高度”（Elevation）和“光影”（Shadows）这两个概念。

高度（安卓）
阴影
元素关系
高度（安卓）
高度是在 Z 轴上两个不同平面之间的一种相对深度或距离。

详述：

“高度”的度量单位与 XY 轴的度量单位相同，主要是 DP。由于所有 Material 元素都具有 1 单位 DP 的厚度，所以“高度”度量的是从一个平面顶部到另一个平面顶部的距离。
一个子对象的高度与其父对象的高度相关。

静止高度
所有 Material 对象除去大小之外，还有一个“静止高度”，或者称“默认高度”，它是不会变化的。当一个对象的高度产生变化时，它将会尽快恢复到自身的静止高度。
组件高度

某一元素类型的静止高度在移动应用中是一个常量。（比如，FAB 高度不会在某一个应用中是 6 dp 而在另一个应用中是 16 dp）

元素在某一平台中可能会存在多种静止高度，这取决于环境的深度。（比如，TV 相比于移动端和桌面来说就具有更深的层次）
感应高度与动态高度偏移
一些元素类型拥有感应高度，也就是说它们会根据用户的输入（比如常规的、关注的和压制的）或系统事件来改变高度。这些高度的变化会通过动态高度偏移而不断生成。
动态高度偏移是某一元素移动的目标高度，它与该元素的静止状态有关。可以确定的是高度的变化在事件和元素类型中是持久发生的。比如说，所有通过按压来提升的元素相对于其静态高度来说都具有相似的高度变化。
一旦输入事件完成或被取消，那么元素将会恢复到它的静止高度上。
避免高度冲突
处于感应高度的元素当它在静止高度与动态高度偏移之间移动的时候可能会遇到其他的元素。由于 Material 不能相互交叉，没有任何一种方式能够让元素之间产生冲突，无论是基于均元素基础（per-component basis）还是通过使用完整应用布局。
设计高度

Elevation (dp) Component 24 Dialog 24 Picker 23 21 20 19 18 17 16 Nav drawer 16 Right drawer 16 Modal bottom Sheet 15 14 13 12 Floating action button (FAB - pressed) 11 10 9 Sub menu (+1dp for each sub menu) 8 Menu Card(picked up state) 8 Card(picked up state) 8 Raised button (pressed state) 7 6 Floating action button (FAB - resting elevation） 6 Snackbar 5 4 App Bar 3 Refresh indicator 3 Quick entry / Search bar (scrolled state) 2 Card (resting elevation) 2 Raised button (resting elevation) 2 Quick entry / Search bar (resting elevation) 1

Component elevation comparisons
The following diagram compares various component resting elevations and dynamic elevation offsets.

元素参考阴影
下面的元素阴影应被用于标准参考。如果在说明中涉及任何关于下面的参考阴影和元素阴影的不同情况出现，那么都归于参考阴影。

应用条
4dp

浮动按钮
静态：2dp 敲击状态：8dp

浮动动作按钮（FAB）
静态：6dp 敲击状态：12dp

卡片
静态：2dp 选中状态：8dp

菜单和子菜单
菜单：8dp 子菜单：9dp（为子菜单增加 1dp）

对话框
24dp

导航抽屉和右抽屉
16dp

底部单页
16dp

刷新按钮
3dp

快速查询/搜索条
静止状态：2dp 滚动状态：3dp

Snackbar
6dp

切换按钮
1dp