1. Introduction

我们挑战自己，只为给用户创造一种新的视觉设计语言，不但综合了过去优秀设计所遵循的经典原则，同时也融合了科技的创新与无限可能。这就是材料设计。这份说明是动态文档，我们不断完善材料设计的细节和设计原则，文档会随之更新。

Goals

创造一种新的视觉设计语言，不但综合了过去优秀设计所遵循的经典原则，同时融合了科技的创新与无限可能。

开发一个单一的基础系统，在不同平台不同尺寸设备上提供统一的体验。移动规范是基础的，但触摸、声音、鼠标和键盘都是首选的输入方式。

Principles

Material is the metaphor

材质隐喻是理性控件和动机系统的统一理论。（A material metaphor is the unifying theory of a rationalized space and a system of motion. ）材料以触觉现实为基础，灵感来自于纸和墨水的研究，但技术先进，为想象力提供施展空间。

材质的表面和边缘为我们提供了视觉线索，告诉我们它根植于现实。使用与触摸类似的属性帮助用户迅速理解功能启示。

Bold，graphic and intentional

Motion provides meaning

2. Environment

材质设计是一个三维设计环境，包含了光线、材质和投影。

所有材质的物体都有X、Y、Z三个维度

所有材质的物体都固定的Z轴位置

主光线产生方向性阴影，环境光线产生淡阴影。

材质厚度： 1dp

阴影：材质层叠，并存在高度差的时候，出现阴影

阴影的机理

3D World

材质环境是一个三维空间，意味着所有物体具有X、Y、Z三个维度。Z轴垂直于显示平面，Z轴正方向指向观察者。每一片材质占据Z轴上的一个位置，沿着Z轴有1dp的厚度，相当于在像素密度160的屏幕上1像素的厚度。

在网页上，Z轴是用于层叠显示而非透视。通过巧妙地控制Y轴来仿真3D世界。

3D space with x,y,z axes

Light and Shadow

在材质环境中，虚拟光照照亮设计场景。主光线创造方向性阴影，而环境光线从各个角度创造软阴影。

材质环境中的阴影由两类光源投影而来。在Android开发中，光源被Z轴上各个位置的材料薄片遮挡时，产生阴影。在web上，阴影仅仅通过操作Y轴来刻画。下面的例子展示了卡片高度为6dp时的情形。

光照及阴影示意

3. Material Properties

材质本身有不可改变的特点和固有的行为表现

理解这些材料的品质会帮助你利用与材质设计一致的观点去操控材质。

材质的特性：

• solid，固体
• Occupies unique points in space：占据空间中的特定位置
• Impenetrable：不可穿过
• Mutable shape：形状可变
• Changes in size only along its plane：仅在自己的平面上发生形变
• Unbendable：不可弯曲
• Can join to other material：可以连接其它材质
• Can separate，split and heal：可以分裂、复原
• Can be created and destroyed：可以被创造亦可被消灭
• Moves along any axis：沿着任何一个轴移动

Physical Properties

材质有不同的X和Y维度（用dp来衡量）以及统一的厚度（1dp）

材质厚度示意

不同材质元素之间在Z轴方向的相对提升自然会导致阴影出现。

正确阴影展示

错误阴影展示

内容可以以任何形式和颜色在材质上显示，内容不会增加材质的厚度。

内容与材质的关系

内容的行为独立于材质，但受到材质边界的约束。

内容受材质边界的约束

材质是固体。输入事件不能穿越材质。

输入事件不能穿越材质

多个材质元素不能同时占据空间中的同一位置。

层叠材质

材质不能穿越其它材质。

Transforming material

材质形状可以改变。

材质只在自己所在的平面上延展、收缩。

材质不能翘曲或折叠。

材质翘曲

多片材质可以连接在一起成为单片材质。

材质分裂后可以恢复。

Movement of Material

材质在环境中可以随时被创造或消灭。

材质可以沿着任何坐标轴运动。

z轴的移动是用户与材质交互后的典型结果。

4. Elevation and Shadows

材质设计中的物体具备与真实物理世界物体相似的性质。

物理世界中，物体可以堆叠或附着在另一个物体上，但不能穿越彼此。物体同样也会投射阴影或反射光线。

材质设计保留了这些特点，以构成一个用户熟悉的空间模型，可以在不同APP之间统一运用。

• Elevation：相对高度
  度量从一个物体表面到另一物体表面的距离，一个元素的相对高度表示了其表面到它投影之间的距离

• Resting Elevation：固定高度
  所以的材质元素尤其固定的高度。虽然各种组件在不同APP之间的高度一致，但他们在不同平台和设备上的高度不同。

• Dynamic Elevation Offsets：动态高度偏移
  动态高度偏移是组件移动的目标高度，相对于其固定状态而言。

Elevation （Android）

高度是两个表面之间沿着Z轴方向的相对距离或深度。

说明：

• 高度以与X轴、Y轴相同的单位测量，常用单位是density - independent pixels（dp）。因为材质元素有厚度（所有材质都是1dp厚度），高度以一个物体表面到另一个物体表面的距离来衡量。

• 子物体的高度是与父物体的相对高度。

下面的图和数值是Android应用中的情形。

高度和相对高度

Resting Elevation

所有的材质物体，无论尺寸如何，都有固定高度，或不会改变的默认高度，它应该尽快回到其固定高度。

桌面的固定高度比列表中的数值低2dp，以容纳鼠标和无法触摸的环境元素。

list 1

list 2

Component Elevation：组件高度

• 组件在不同APP之间有相同的固定高度。比如，浮动操作按钮的高度在不同APP中一致。
• 组件在不同平台和设备上有不同的固定高度，取决于环境的高度。例如，电视与电脑桌面相比具有更大的深度，因其有更大的屏幕以及用户从更远的地方观看。类似的，电视和电脑桌面与手机相比，有更大的深度。

Responsive elevation and dynamic Elevation offsets

一些组件类型具有响应式的高度，即它们依据用户的输入或系统事件（如，普通状态、获取焦点、按下）改变高度。这些高度的变化使用动态高度偏移来实现。

动态高度偏移是组件移动的目标高度，相对于其固定状态而言。它们保证不同操作和组件类型具有一致的高度变化。比如，所有的组件按下后改变同样的高度，与其固定高度相比。

输入事件取消或结束后，组件回到其固定高度。

Avoid component interference

拥有响应式高度的组件在其固定高度和动态高度偏移之间移动时可能会与其他组件相遇。由于材质不能穿越其它材质，组件无论如何也要避免和其它组件发生干涉。( Because [material cannot pass through other material, components avoid interfering with one another any number of ways, whether on a per-component basis or using the entire app layout.)

在组件层面，当发生干涉时，组件可以移动或去除。比如，当用户选择卡片时，浮动按钮会消失或移出屏幕，或者当snack-bar出现时发生移动。

在整体布局层面，设计APP布局时要尽量减少发生组件干涉的概率。例如，可以将浮动按钮放置在卡片流的一边，如此一来，当用户选择其中一个卡片时就不会和浮动按钮发生干涉。

Component elevation comparisons

下面的图比较了各组件的固定高度和动态高度偏移。

Shadows

阴影提供了关于物体深度和方向性运动的重要视觉线索。阴影是表现两个物体表面分离程度的唯一视觉线索。物体的高度觉得了阴影的外观。

阴影外观给出物体的高度信息

在运动中，阴影提供了有关物体运动方向的有用信息，告知用户两个表面之间的距离是增大还是减小。

阴影的变化展示高度的变化

Component reference shadows

以下组件的阴影应该被当做标准参考使用。如果后续的参考阴影出现不一致的地方，或文档中其它地方的组件阴影与这里冲突，以这里的参考阴影为准。

APP Bar：4 dp

APP Bar的高度

Raised Button：上浮按钮
固定状态：2 dp
按压状态：8 dp

桌面上，上浮按钮高度为
固定状态：0 dp
按压状态：2 dp

上浮按钮

Floating action Button：浮动按钮
固定状态：6 dp
按压状态：12 dp

浮动按钮

Card：卡片
固定状态：2 dp
上浮状态：8 dp

卡片

Menu and sub menus：菜单和子菜单
菜单高度：8 dp
子菜单高度：9 dp（子菜单比父菜单加 1 dp）

菜单和子菜单

Dialog：对话框
对话框高度：24 dp

对话框

Nav Drawer and Right Drawer：导航抽屉和右侧抽屉
高度：16 dp

导航抽屉

Modal bottom sheet：模态底部表单
高度：16 dp

模态底部表单

Refresh indicator：刷新指示器
高度：3 dp

刷新指示器

Quick entry/Search bar：快速输入或搜索栏
固定状态：2 dp
滑动状态：3 dp

快速输入或搜索栏

Snackbar：小讯栏
高度：6 dp

小讯栏

Switch：开关
高度：1 dp

开关

Object Relationships

Object hierarchy

你如何组织、归集物体，决定了他们在APP中如何与其它物体发生联系。物体可以独立于彼此移动，也可以受高层级物体限制。

所有物体都是层级关系中的一部分，这种层级关系以父子关系来描述。在这些关系中，“子”是指附属于“父”元素的元素。物体既可以是系统的“子”元素，也可以是其它物体的“子”元素。

父 - 子说明：

• 每个物体均有一个“父”元素
• 每个物体有任意数量的“子”元素
• 子元素从父元素那里继承了可变化的属性，如位置、旋转、尺寸和高度
• 兄弟元素是在同一层级上的物体

Exceptions

以根为父元素的物体，如基本的 UI 元素，独立于其它物体移动。例如，浮动按钮不会随内容一起滚动。其它类似元素包括：

• APP的侧边导航抽屉
• 操作栏
• 对话框

Interaction

物体如何与其它物体交互取决于他们在父子层级中的位置。例如：

• 子元素与父元素之间具有最小的Z轴间隔，其它物体无法插入父子元素之间。
• 在可滑动的卡片集合中，各个卡片是彼此的兄弟元素，所以他们一个接一个地串联移动。他们是卡片集合物体的子元素，卡片结合物体控制他们的运动。

Elevation

物体的高度，即他们在Z轴的位置，取决于你想传达的内容层级以及物体是否需要独立与其它物体运动。

5. What's new

参见链接：Material Design重要更新说明