"Content relates to other content depending on whether they are at similar or different elevations"

Elevation Hierarchy

"Elevation in Material Design is measured as the distance between Material surfaces. The distance from the front of one Material surface to the front of another is measured along the z-axis in density-independent pixels (dps) and depicted (by default) using shadows."

Measuring elevation

"Surfaces at different elevations do the following:

- Allow surfaces to move in front of and behind other surfaces, such as content scrolling behind app bars
- Reflect spatial relationships, such as how a floating action button’s shadow indicates it is separate from a card collection
- Focus attention on the highest elevation, such as a dialog temporarily appearing in front of other surfaces

Elevation can be depicted using shadows or other visual cues, such as surface fills or opacities."

Material Design shows elevation using shadows.

The elevation system

"To successfully depict elevation, a surface must show:

1. Surface edges, contrasting the surface from its surroundings
2. Overlap with other surfaces, either at rest or in motion
3. Distance from other surfaces"

Depicting elevation

- Changes in shadows
- Displaying overlap
- Pushing
- Scaling
- Parallax

Motion and elevation

"All elements have default values for resting elevation and dynamic elevation offsets. Certain components are positioned at higher elevations than others, establishing a consistent elevation order across all components."

Default elevations

"Elevation is the relative distance between two surfaces along the z-axis."

Component elevation values:
- Nav drawer: 16dp
- App bar: 4dp
- Card: 1dp to 8dp
- FAB: 6dp
- Button: 2dp to 8dp
- Dialog: 24dp

University of Michigan - Ann Arbor

Arizona State University

Material Design mirrors the material world in the way objects and elements move and interact on the interface. 

- Surfaces
- Elevation
- Light and Shadows

Environment

Material Design Documentation

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

Surfaces

In the Material Design environment, the UI illuminated by virtual light sources called key lights and ambient lights. Material surfaces cast shadows when they obstruct light sources.

Learn Before

Related

Learn After