质感设计通过使用平面、层级、阴影等元素来展示其独特的三维特性。

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

环境

物理世界（自然环境）

在自然环境下，物体可以进行堆叠或者相互连接，但是不能相互穿过。实体可以投射阴影，反射光线。质感设计通过利用这些特性来设计用户界面中平面的显示与移动。

我们在质感设计中引入了三维空间的平面概念类似于现实世界中的纸张，质感设计中平面的移动，参考了自然环境下纸张的移动方式。这个空间模型同时也可以在应用程序中贯穿使用（保证一致性）。

In the physical world, objects can be stacked or attached to one another, but cannot pass through each other. They cast shadows and reflect light.
Material Design reflects these qualities in how surfaces are displayed and move across the Material UI. Surfaces, and how they move in three dimensions, are communicated in ways that resemble how they move in the physical world. This spatial model can also be applied consistently across apps.

进深

质感设计的用户界面通过引入光线、平面以及阴影投射来展现三维空间（3D）。

质感设计下的所有组件的在x、y轴上，只能进行二维移动；需要改变层级时，则会沿着z轴移动。

Material Design UIs are displayed in an environment that expresses three-dimensional (3D) space using light, surfaces, and cast shadows. All elements in the Material environment move horizontally, vertically, and at varying depths along the z-axis. Depth is depicted by placing elements at various points along the positive z-axis extending towards the viewer.
On the web, the UI expresses 3D space by manipulating the y-axis.

3D space with x, y, and z axes

特性

在质感设计中，平面的特性与行为是一致的，不可改变的。

Material surfaces have consistent, unchangeable characteristics and behaviors across Material Design.

尺寸

所有 Material 元素都具有 1 单位 DP 的厚度，“高度”度量的是从一个平面顶部到另一个平面顶部的距离。

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp).

阴影

平面在不同的层级拥有不同的阴影投射效果。

Material surfaces at different elevations cast shadows. DoShadows show the elevation of different Material surfaces.

1. Top view
   2. Isometric 3D view showing the shadow cast by light when the material moves upwards Don’tDon’t express shadows without changing a surface’s elevation.

2. Top view
   2. Isometric 3D view depicts a shadow using only color, rather than light and elevation

解析度

质感设计中的元素拥有无限的解析度。

Material has infinite resolution.

内容

• 内容可以展示在任何平面（与形状、色彩无关）上

Content is displayed in any shape and color on Material. Content does not add thickness to Material. Content is expressed without being a separate layer. 内容不会给平面添加厚度

Do
Material can display any shape and color. Content can behave independent of Material, but is limited within the bounds of Material. 内容本身是与平面融合的，行为与平面保持一致。

Do
Content behavior can be independent of surface behavior. Do
Content behavior can depend on Material behavior.

物理

材料是实物（实体）。输入事件不能穿过材料。

Material is solid. User input and interaction cannot pass through material.

Do
Input events only affect the surface of Material.

Don’t
Input events cannot pass through Material.

Multiple Material elements cannot occupy the same point in space simultaneously.

Do
Prevent multiple Material elements from simultaneously occupying the same point in space, such as by separating elements with elevation.

Don’t
Multiple Material elements cannot occupy the same point in space simultaneously.

Material cannot pass through other Material. For example, one Material surface cannot pass through another Material surface when changing elevation. Don’t
Material cannot pass through other Material.

Material does not behave like a gas.

Material enters and exits through changes in opacity, size, or position.

Material is not fluid like a liquid or gel, though it may display content with these properties.

Don’t
Material does not behave like a liquid or gel.

Don’t
Material does not behave like a liquid

变形

Material 能够改变形状。

Material can change shape. Material 能够改变透明度（包括渐变透明）。

1. Material can change opacity uniformly across its entire surface.
   2. Material can change opacity across a portion of its surface.

Material grows and shrinks only along its plane. Do
Material grows and shrinks only along its plane.

Material bends or folds within the depth of the UI. Don’t
Material never bends or folds in ways that exceed the depth of the UI.

Material 之间能够进行合并。

Material surfaces can join together to become a single Material surface. Multiple Material surfaces can join together to become a single surface.

Material 被割开时，它能够自动复原。例如，你从一片材料中移除了一部分，这一片材料剩余的部分可以通过合并再次变为一块完整的材料。

When split, Material can rejoin. For example, if you remove a portion of Material from a surface, the surface will become whole again. Material can split and become whole again.

移动

Material 能够在环境中任何地方出现或消失。

Material can be spontaneously generated or dismissed anywhere in the environment. Material can be spontaneously generated or dismissed.

Material can move along any axis.

Material 能够沿任何轴移动。 Material can move along various axes.

平面的属性会影响Material 的移动（类似于摩擦力）。

Material surfaces can coordinate their motion. Material surfaces can coordinate their motion.

Material 在z轴上的移动往往是交互才能产生的效果。

Material motion along the z-axis is typically a result of user interaction. Material surfaces exhibiting z-axis motion prompted by user interaction.

属性

基本的质感平面

基本的平面是有着 1dp 厚度的不透明的白色，并且会在环境中投射出阴影。质感设计 中所有的 UI 元素均来源于对平面的修改。

The basic Material surface is opaque white, with 1dp thickness, and casts a shadow. All UI elements in Material Design result from modifications to this surface.

行为

Material 的平面能够以下几种方式进行出现在设计中：

• 固化平面的大小不会受交互的影响；
• 弹性平面能够在尺寸允许的范围内扩张或收缩，但是扩张一旦超过尺寸限制，就会转化为固化平面；
• 可平移平面（交互只影响内容）能够在交互时（大部分情况是指用户翻看平面内的内容）保持大小不变，这种平面可以让区域内的内容滚动显示，直到达到内容限制。达到内容上限时，就会转化为固化平面。

Material surfaces can behave in certain ways:

• Rigid surfaces remain the same size through all interactions.
• Stretchable surfaces can grow or shrink along one or more edges up to a size limit, then behave as rigid surfaces.
• Pannable surfaces remain the same size throughout interactions. They can display additional content upon scrolling within the area, until reaching a content limit. When this limit is reached, they behave as rigid surfaces in that scroll direction.

Material 平面的尺寸可以沿着一个或多个轴进行扩张以适应额外的内容。

Material surface dimensions can be fixed with all content initially visible. The surface retains that size through all interactions. Material surface dimensions can grow along one or more axes to accommodate additional content.

Material 平面的尺寸可以保持不变，但内容可以在表面上滚动或平移。

Material surface dimensions can remain rigid, but content can scroll or pan across the surface.

复合平面

一个平面上可以根据需要进行分区，不同区域采用不同类型的行为对内容进行展示。

Surfaces can be divided into areas which display different types of behavior. 一张卡片可以收起或者展开，展开部分可以显示与其他区域无关的内容。

A single surface can contain multiple pannable surfaces, such as an embedded map (1) that pans independently of a scrollable list (2).

A card can stretch to display a region that scrolls independently of other card content.

弹性平面

在达到极限之前，弹性表面可以一直被拉伸，此时整个弹性平面会转化成固化平面，无法继续拉伸。弹性平面可以沿着一个或多个轴进行扩张以适应额外的内容。

例如，点击“更多详情”可能会导致卡垂直增长并显示其他内容。

A stretchable surface can be stretched before reaching a limit, at which point the entire surface becomes rigid. Surfaces can stretch vertically, horizontally, or in both directions.
Typically, user interaction with a surface will stretch it in one direction. For example, tapping “more details” can cause a card to grow vertically and display additional content. 平面的拉伸方向可以是完全水平的。

Material stretch direction can be exclusively vertical. 平面的拉伸方向可以沿着x/y轴，既可以独立沿某一个轴拉伸，也可以几个方向同时进行拉伸。

Material stretch direction can be along both horizontal and vertical axes, either independently or simultaneously.

平面的定位与移动（仅限于 x、y轴）

平面 可以固定在二维坐标系（x、y轴）上，或者可以在任何方向上移动。平面移动可以限制在单个轴上，允许一次沿单个轴运动，或者允许同时沿两个轴运动。

平面 可以保持在一个固定的位置。顶部导航栏（1）保持在固定位置，而卡片收藏夹（2）仅在其下面垂直滚动。

Surfaces can remain in a fixed position on the x- and y-axes, or can be moveable in any direction.
Surface movement can be confined to a single axis, allow movement along a single axis at a time, or allow movement along both axes simultaneously. Surfaces can remain in a fixed position. The top app bar (1) remains in a fixed position while the card collection (2) scrolls only vertically behind it. 平面可以根据实际需求朝二维坐标系中的任何方向移动。

Surfaces (1,2) can move in any direction, although movement can be confined to a single axis at a time.

Surfaces can move in any direction.

表面可以彼此独立移动，或者它们的移动可以影响或取决于其他表面的移动。依赖关系可以基于各种力学，例如当另一个表面扩展时移动的附近表面或视差中移动的表面之间的移动比例。

平面可以彼此之间独立进行移动，也可以相互影响。依赖关系可以基于自然环境中的力学基础，比如当一个平面扩张时，相邻的平面会被挤压变形或者移动位置，又或者两个平面之间的相互运动会形成一定的视差效果。

Surfaces can move independently of each other, or their movement can affect or be dependent upon the movement of other surfaces.
A dependency can be based on a variety of mechanics, such as nearby surfaces moving when another surface expands, or the proportion of movement between surfaces moving in parallax. Surfaces can move independently of each other.

一个平面的移动会影响都另外一个平面。 One surface’s movement can depend upon another’s movement.

不透明度

Material 的平面 可以是透明的，半透明的或不透明的。

透明和半透明表面上的文字可能需要对背景进行处理才能保持易读性。透明表面缺乏清晰的边缘，难以确定表面的开始和结束位置以及表面内容隶属于哪个表面。

Material surfaces can be transparent, semi-transparent, or opaque.
Text on transparent and semi-transparent surfaces may require background treatment to preserve legibility.
Transparent surfaces lack clear edges, making it difficult to determine where surfaces begin and end, and which surface content belongs to.

Caution
1. Content on transparent or semi-transparent surfaces may need a background treatment to preserve legibility.
2. Isometric view

Don’t
1. Don’t use transparent surfaces, as they have no opacity, making it difficult to identify the surface on which content appears. This top app bar is transparent, making it unclear if the text appears on the app bar or the surface behind it.
2. Isometric view

遮罩

遮罩作为一种临时的解决办法，可以让用户更加专注于 Material 的平面上的内容而不会被其它平面的内容干扰注意
力。

遮罩可以应用于以下几种场景：

• 让平面以及上面的内容变亮或变暗；
• 减少平面以及上面的内容的不透明度。

遮罩可以出现在多个平面上；可以出现在任何层级。

Scrims are temporary treatments that can be applied to Material surfaces for the purpose of making content on a surface less prominent. They help direct user attention to other parts of the screen, away from the surface receiving a scrim.

Scrims can be applied in a variety of ways, including:

• Darkening or lightening the surface and its content
• Reducing the opacity of the surface and its content

Multiple surfaces on a screen at a time can display scrims. Scrims can appear at any elevation, whether in the foreground or background.

Foreground content attracts more attention when background content displays a scrim.

A scrim lightens content displayed on the front surface and directs attention to the surface behind it.