Sombras

Descripción general

Las sombras proporcionan profundidad visual a los objetos y permiten a los usuarios identificar elementos importantes en la superficie de las páginas. Las sombras son importantes para comunicar la profundidad, la dirección del movimiento y los bordes de las superficies. Ayudan a los usuarios a comprender la jerarquía y hacen que la interfaz sea más intuitiva.

Anatomía

1. Contenedor de sombra

2. Sombra interior

3. Sombra exterior

Las sombras se ubican detrás de varias formas de página, que tienen un color de relleno (incluido el blanco). Se pueden configurar como sombras exteriores o interiores.

Las sombras constan de los siguientes elementos:

Sombra (contenida)

1. Contenedor de sombra: Un contenedor en la aplicación.
2. Sombra interior: Las sombras interiores se muestran dentro de un contenedor.
3. Sombra exterior: Las sombras exteriores se muestran sobre los contenedores.

Prácticas recomendadas

• Utilice sombras exteriores para indicar elementos de página interactivos, por ejemplo, botones.
• Utilice sombras exteriores para resaltar elementos de contenido importantes para la atención de los usuarios, por ejemplo, tarjetas de objetos.
• Utilice sombras internas para indicar contenedores destinados al ingreso de información por parte de los usuarios, por ejemplo, un campo de texto.
• Use sombras consistentemente a lo largo de su diseño y asegúrese de que los valores de las sombras también sean consistentes.
• Cuando los elementos se apilan uno encima del otro, use la misma profundidad de la sombra.
• Si un elemento está en la tercera capa sin nada debajo, la sombra deberá ser el doble de profunda y difusa.
• Las sombras deben contribuir a la experiencia del usuario de manera útil, como llamar la atención de los usuarios sobre elementos importantes de la página, por ejemplo, un conjunto de opciones de precios para la suscripción de un producto.
• Cuando utilice sombras exteriores e interiores combinadas, asegúrese de que las páginas no se vean recargadas o confusas.