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

University of Michigan - Ann Arbor

"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

Elevation in Design Science 

Material Design Documentation

"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

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."

Learn Before

Related