RULE: Input events cannot pass through material boundaries.

Physical properties rule

RULE: Multiple elements cannot occupy the same space simultaneously.


Rule: One Material surface cannot pass through another Material surface when changing elevation.

Rule: Material enters and exits the screen through changes in opacity, size, or position and should not behave like a gas, liquid, or gel.

There are 4 main rules regarding physical properties.

University of Michigan - Ann Arbor

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

Properties

Material Design Documentation

Material has varying x & y dimensions (measured in dp) and a uniform thickness (1dp). You can, and should, show 3D-ness without adding thickness to elements.

Dimensions

RULE: The opacity and spread of an object’s shadow indicate how close or far it is from the surface underneath.
DONT: express shadows without changing surface elevation (ex: using only color change, rather than color and height change)

Shadows show elevation

RULE: No matter how close you zoom in, it is remains clear without any pixilation.

Infinite Resolution

RULE: Adding content does not add thickness to the element (the element remains at 1dp thickness).


Content

Physical properties

Material CAN:
- Change shape
- Change opacity (can be uniform across the entire surface, or can change opacity across a portion of the surface)
- Grow or shrink along its plane
- Join together to become a single surface
- Split, and become whole again

Material CANNOT:
- Bend or fold in ways that exceed the depth of the UI


Transformation

Materials CAN:
- Spontaneously generate or be dismissed anywhere in the environment
- Move along any axis
- Have coordinated motion

*material that exhibits z-axis motion is usually in response to user interaction*


Movement

Measurements

A divider is a line used to separate content, such as in lists or layouts. Its purpose is to create a clear visual distinction between different groups of information, which helps to organize the interface and makes it easier for users to process the content.

Learn Before

Related

Learn After