Compartir a través de


Capas y elevación en Windows 11

Windows 11 usa la capas y la elevación como base para la jerarquía de aplicaciones. La jerarquía comunica información importante sobre cómo navegar dentro de una aplicación mientras mantiene la atención del usuario centrada en el contenido más importante. Las capas y la elevación son indicaciones visuales eficaces que modernizan las experiencias y les ayudan a sentirse coherentes dentro de Windows.

Capas

Ventana de aplicación con una única área de contenido

Una ventana de aplicación con varias áreas de contenido

La superposición de capas es el concepto de superposición de una superficie con otra, creando dos o más áreas visualmente distintivos dentro de la misma aplicación.

Nota:

La capa en Windows 11 está estrechamente acoplada con el uso de materiales. Consulte la sección de materiales para obtener instrucciones específicas sobre cómo se aplican.

Windows 11 usa un sistema de dos capas para aplicaciones. Estas dos capas crean jerarquía y proporcionan claridad, manteniendo a los usuarios centrados en lo que es más importante.

  • La capa base es la base de una aplicación. Es la capa inferior de cada aplicación y contiene controles relacionados con los menús, comandos y navegación de la aplicación.
  • La capa de contenido centra al usuario en la experiencia central de la aplicación. La capa de contenido puede estar en un elemento contiguo o dividirse en tarjetas que segmentan el contenido.

Elevation

Una variedad de elementos de interfaz de usuario superpuestos, cada uno en una elevación diferente

La elevación es el componente de profundidad de la relación espacial que tiene una superficie con respecto a su posición en el escritorio. Cuando dos o más objetos ocupan la misma ubicación en la pantalla, solo se representará el objeto con la elevación más alta en esa ubicación.

Las sombras y el contorno (contornos) se usan en controles y superficies para comunicar subtmente la elevación de un objeto y para ayudar a dibujar el foco cuando sea necesario dentro de una experiencia. Windows 11 usa los siguientes valores para expresar la elevación con sombra y contorno.

Una ventana de aplicación

Window
Valor de elevación: 128
Ancho del trazo: 1

Cuadro de diálogo modal

Diálogo
Valor de elevación: 128
Ancho del trazo: 1

Un menú flotante

control flotante
Valor de elevación: 32
Ancho del trazo: 1

Información sobre herramientas para un cuadro combinado

Tooltip
Valor de elevación: 16
Ancho del trazo: 1

Superficie de la interfaz de usuario que contiene varias áreas de contenido

Tarjeta
Valor de elevación: 8
Ancho del trazo: 1

Un cuadro combinado

Control
Valor de elevación: 2
Ancho del trazo: 1

Una superficie de interfaz de usuario vacía

Nivel
Valor de elevación: 1
Ancho del trazo: 1

Los controles de Windows 11 varían su elevación y contorno para indicar el estado. La intensidad de la sombra representada cambia según el tema en paridad de valor.

Un botón en el estado predeterminado

Reposo
Valor de elevación: 2
Ancho del trazo: 1

Un botón en estado de desplazamiento

Mantener presionado
Valor de elevación: 2
Ancho del trazo: 1

Un botón en estado presionado

Pressed
Valor de elevación: 1
Ancho del trazo: 1