Muokkaa

Jaa

Layering and elevation in Windows 11

  • Artikkeli

Windows 11 uses layering and elevation as its foundation for app hierarchy. Hierarchy communicates important information about how to navigate within an app while keeping the user's attention focused on the most important content. Layering and elevation are powerful visual cues that modernize experiences and help them feel coherent within Windows.

Layering

An application window with a single content area

An application window with multiple content areas

Layering is the concept of overlapping one surface with another, creating two or more visually distinguished areas within the same application.

Note

Layering in Windows 11 is tightly coupled with the use of materials. Please reference the materials section for specific guidance on how those are applied.

Windows 11 uses a two-layer system for applications. These two layers create hierarchy and provide clarity, keeping users focused on what's most important.

  • The base layer is an app's foundation. It is the bottommost layer of every app, and contains controls related to app menus, commands, and navigation.
  • The content layer focuses the user on the app's central experience. The content layer may be on contiguous element, or separated into cards that segment content.

Elevation

A variety of overlapping UI elements, each at a different elevation

Elevation is the depth component of the spatial relationship one surface has to another with respect to their position on the desktop. When two or more objects occupy the same location on the screen, only the object with the highest elevation will be rendered at that location.

Shadows and contour (outlines) are used on controls and surfaces to subtly communicate an object's elevation, and to help draw focus where needed within an experience. Windows 11 uses the following values to express elevation with shadow and contour.

An application window

Window
Elevation value: 128
Stroke width: 1

A modal dialog box

Dialog
Elevation value: 128
Stroke width: 1

A flyout menu

Flyout
Elevation value: 32
Stroke width: 1

A tooltip for a combo box

Tooltip
Elevation value: 16
Stroke width: 1

A UI surface that contains several content areas

Card
Elevation value: 8
Stroke width: 1

A combo box

Control
Elevation value: 2
Stroke width: 1

An empty UI surface

Layer
Elevation value: 1
Stroke width: 1

Controls in Windows 11 vary their elevation and contour to indicate state. The intensity of the rendered shadow changes depending on the theme at parity of value.

A button in the default state

Rest
Elevation value: 2
Stroke width: 1

A button in the hover state

Hover
Elevation value: 2
Stroke width: 1

A button in the pressed state

Pressed
Elevation value: 1
Stroke width: 1