Material 中的平面在光照作用下会投射阴影。

Material surfaces cast shadows when they obstruct light sources.

光

在质感设计的环境中，我们虚构了光源来照亮用户界面。主光源下的阴影更加锐利清晰，称之为主阴影。

环境光会出现在各个角度，投射出的阴影更加柔和，称之为环境阴影。

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.

1. 定向光源
2. 环境光
3. 定向光源 + 环境光
4. 深色背景上元素的投影

光源

Material 中的阴影由主光源与环境光组合投射。在 Android 与 iOS 开发中，光源被不同高度的平面阻挡时，会投射不同的阴影。而在网页端，仅从y轴 来展示阴影。

以下示例是一张高度为 6dp 的卡片，平面不会只在某一种光源下投射阴影，而是在主光源与环境光组合的条件下进行投射。

Shadows in the Material environment are cast by a key light and ambient light. In Android and iOS development, shadows occur when light sources are blocked by Material surfaces at various positions along the z-axis. On the web, shadows are depicted by manipulating the y-axis only. The following example shows a card with an elevation of 6dp.

Don’t
Shadow cast by key light

Don’t
Shadow cast by ambient light

Do
Combined shadow from key and ambient lights

阴影

阴影可以帮助用户去环境的深度、运动的方向、平面的边界。平面的阴影由自己的高度以及其他平面的关系决定。

Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.

用法

与高度的定义类似，在同一个系统中，阴影的样式必须要保持一致。

Because shadows express the degree of elevation between surfaces, they must be used consistently throughout your product.

Elevation is depicted by consistent use of shadow.

阴影的大小与柔和度反映了对应组件的高度。

Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.

如果应用程序没有引入阴影的概念，那么需要采用其它的方式来区分层级。 Caution
If your product doesn’t use shadows, convey elevation in other ways, such as through parallax motion.

Do
The appearance of a shadow indicates the list item has been picked up and can move in front of its peers during this reorder interaction

阴影的出现表示列表项已被拾取，并且在重新排序交互期间可以在其对等方前面移动。下面的例子中，阴影出现代表列表中被选中的那一项已经被拖动，并且在“排序期间”中，可以在其它项所在的平面上方移动。

阴影与动效

用户可以通过阴影来判断平面的运动方向是向上还是向下，平面之间的距离是增加还是减小。

当一个平面只是大小或者比例发生变化时，阴影不会变化。

Shadows provide useful cues about a surface’s direction of movement and whether the distance between surfaces is increasing or decreasing. When a surface changes shape or scale, but its elevation remains the same, its shadow should not change.

如果一个平面的高度改变，那么阴影也会随之变化。

When a surface changes shape or scale, but its elevation remains the same, its shadow should not change.

研究

Material Design conducted 36 interviews with fifteen low-vision participants to better understand how shadows and outlines impact an individual’s ability to identify and interact with a component.

Research findings included:

• Shadows and outlines are just one of many attributes of an element that impacts a user’s ability to identify it. Other attributes that affect the ability to identify an element include font characteristics, elevation, color, layout among surrounding elements, and context of use.
• Using shadows and outlines increases the ease and speed of finding a component when scanning pages.
• Using a shadow or stroke outline around a component improves one’s ability to determine whether or not it can be interacted with.