Camadas e elevação em Windows 11

O Windows 11 usa disposição em camadas e elevação como base para a hierarquia de aplicativos. A hierarquia comunica informações importantes sobre como navegar dentro de um aplicativo, mantendo a atenção do usuário focada no conteúdo mais importante. Camadas e elevação são indicações visuais poderosas que modernizam experiências e as ajudam a se sentirem coerentes dentro do Windows.

Camadas

Camadas é o conceito de sobrepor uma superfície com outra, criando duas ou mais áreas visualmente distintas dentro do mesmo aplicativo.

Observação

As camadas em Windows 11 são firmemente acopladas ao uso de materiais. Consulte a seção de materiais para obter diretrizes específicas sobre como eles são aplicados.

Windows 11 usa um sistema de duas camadas para aplicativos. Essas duas camadas criam hierarquia e fornecem clareza, mantendo os usuários focados no que é mais importante.

• A camada base é a base de um aplicativo. É a camada mais inferior de cada aplicativo e contém controles relacionados a menus de aplicativo, comandos e navegação.
• A camada de conteúdo concentra o usuário na experiência central do aplicativo. A camada de conteúdo pode estar em elemento contíguo ou separada em cartões que segmentam conteúdo.

Elevação

Elevação é o componente de profundidade da relação espacial que uma superfície tem com a outra em relação à sua posição na área de trabalho. Quando dois ou mais objetos ocuparem o mesmo local na tela, somente o objeto com a elevação mais alta será renderizado nesse local.

Sombras e contorno (contornos) são usados em controles e superfícies para comunicar sutilmente a elevação de um objeto e para ajudar a desenhar o foco quando necessário dentro de uma experiência. Windows 11 usa os valores a seguir para expressar a elevação com sombra e contorno.

Window
Valor de elevação: 128
Largura do traço: 1

Diálogo
Valor de elevação: 128
Largura do traço: 1

Submenu
Valor de elevação: 32
Largura do traço: 1

Dica de ferramenta
Valor de elevação: 16
Largura do traço: 1

Cartão
Valor de elevação: 8
Largura do traço: 1

Controle
Valor de elevação: 2
Largura do traço: 1

Camada
Valor de elevação: 1
Largura do traço: 1

Os controles em Windows 11 variam sua elevação e contorno para indicar o estado. A intensidade da sombra renderizada muda dependendo do tema com paridade de valor.

Rest
Valor de elevação: 2
Largura do traço: 1

Passar o mouse
Valor de elevação: 2
Largura do traço: 1

Pressed
Valor de elevação: 1
Largura do traço: 1