Partilhar via

Camadas e elevação no Windows 11

  • Artigo

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 em um aplicativo, mantendo a atenção do usuário focada no conteúdo mais importante. Camadas e elevação são dicas visuais poderosas que modernizam as experiências e as ajudam a parecer coerentes no Windows.

Disposição em camadas

Uma janela do aplicativo com uma área de conteúdo

Uma janela de aplicativo com várias áreas de conteúdo

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 no Windows 11 estão fortemente associadas ao uso de materiais. Consulte a seção de materiais para obter orientações específicas sobre como eles são aplicados.

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

Elevação

Uma variedade de elementos de interface do usuário sobrepostos, cada um em uma elevação diferente

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

Sombras e contornos (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 em uma experiência. Windows 11 usa os valores a seguir para expressar elevação com sombra e contorno.

Uma janela de aplicativo

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

Uma caixa de diálogo modal

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

Um menu suspenso

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

Uma dica de ferramenta para uma caixa de combinação

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

Uma superfície de interface do usuário que contém várias áreas de conteúdo

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

Uma caixa de combinação

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

Uma superfície de interface do usuário vazia

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

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

Um botão no estado padrão

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

Um botão no estado de foco

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

Um botão no estado pressionado

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