Elevación
Las elevaciones son superficies en capas que forman la base de la interfaz de usuario.Las elevaciones son las superficies en capas que forman la base de la interfaz de usuario. Crean un lienzo en blanco donde se colocarán otros elementos de la interfaz, como texto, iconos, fondos y bordes.
La mayoría de las elevaciones se componen de superficies y sombras. Juntas, ambas crean la sensación de elevación o profundidad. Las elevaciones pueden guiar el enfoque mediante capas o indicar que la interfaz de usuario se puede desplazar, deslizar o arrastrar.
Aplicación de elevaciones
Las elevaciones utilizan tokens de diseño para aplicar diferentes niveles de superficie. Las dos elevaciones más altas (la elevada y la superpuesta) se combinan con sombras para crear mayor profundidad.
Elevaciones en tema oscuro
Las sombras pueden ser más difíciles de ver en el modo oscuro, por lo que las elevaciones en modo oscuro también dependen de los diferentes colores de la superficie. Imagine que las superficies están iluminadas de forma distante desde el frente: cuanto mayor sea la elevación, más clara se verá la superficie.
Las superficies elevadas y superpuestas aún se combinan con sombras para lograr mayor profundidad y consistencia en el modo oscuro.
Tipos de elevaciones
Hay cuatro niveles básicos de elevación:
También hay una elevación de “overflow” para casos especiales.
Sunken
La elevación hundida es la más baja disponible. Esta superficie hundida crea un fondo (o pozo) donde se ubica el resto del contenido. Las columnas de un tablero Kanban son un buen ejemplo de elevación hundida.
Utilice únicamente superficies hundidas en el nivel de superficie predeterminado. No aplique elevaciones hundidas en elevaciones elevadas o superpuestas. Para diferenciar áreas de la interfaz de usuario de otras maneras, utilice espacios en blanco o bordes.
Usando elevation.surface.sunken vs color.background.neutral
Aunque los tokens elevation.surface.sunken y color.background.neutral pueden parecer similares en el modo claro, se comportan de forma distinta en el modo oscuro. Estas son las principales diferencias entre ambos:
elevation.surface.sunkenes un token opaco (sólido) que se oscurece tanto en modo claro como oscuro. Úselo como fondo para agrupar contenido o elementos en la superficie predeterminada.
color.background.neutrales un token que usa un color transparente. Se oscurece en modo claro y se aclara en modo oscuro. Úsalo cuando necesites que el fondo se adapte a diferentes elevaciones, lo cual es relevante en modo oscuro, ya que las superficies cambian según la elevación.
Default
La elevación predeterminada es la línea base con respecto a todas las demás capas. Representa una interfaz de usuario plana sin elevación visual, como una página de Confluence.
Usa esto elevation.surface como punto de partida para el contenido del cuerpo al crear una interfaz de usuario. Para crear tarjetas planas, combínalo con un borde.
Raised
Las elevaciones elevadas son ligeramente superiores a las predeterminadas. Están reservadas para tarjetas movibles, como las de Jira y Trello. En circunstancias especiales, se pueden usar para tarjetas como una forma de proporcionar mayor jerarquía o énfasis.
Emparejar siempre elevation.surface.raised con elevation.shadow.raised. Esto es especialmente importante en el modo oscuro, donde las superficies elevadas se iluminan para diferenciar las elevaciones.
Overlay
La superposición es la elevación más alta disponible. Está reservada para interfaces que se superponen a otras, como ventanas modales, diálogos, menús desplegables, barras de herramientas flotantes y botones flotantes de una sola acción.
Emparejar siempre elevation.surface.overlay con elevation.shadow.overlay. Esto es importante en el modo oscuro, donde las superficies superpuestas son más claras para diferenciar las elevaciones.
Las superposiciones se pueden apilar encima de otras superposiciones.
Overflow
El desbordamiento es una sombra que indica que el contenido se ha desplazado fuera de la vista. Puede usarse para desplazamiento vertical u horizontal. Un ejemplo de sombra de desbordamiento es el desplazamiento horizontal en las tablas de una página de Confluence.
Si las sombras de cuadro no son técnicamente factibles, utilice la combinación de elevation.shadow.overflow.spread y elevation.shadow.overflow.perimeter para replicar la sombra de desbordamiento.