¿Cómo ajustar la sombra en mi app?

Así se ajusta la sombra en una app GoodBarber, desde el gesto que la activa hasta el ajuste fino, al píxel.

En el panel de diseño de una lista, de un widget o de una barra de categorías, siempre que el layout lo permita, poner una sombra es cosa de un gesto: «Activar efecto de sombra». La ruta: Mi App › Estructura › tu sección › Editar el diseño › OPCIONES DE ESTILO. Los ajustes por defecto de GoodBarber hacen el resto (3 px de desplazamiento, 6 px de desenfoque, un negro al 20 %). Discreta, la sombra despega cada elemento del fondo sin llamar la atención.

La TabBar y el botón flotante llevan su sombra desde el principio, más alta (6 px de desplazamiento, 12 px de desenfoque), porque pasan por delante del contenido.

Una sombra necesita una superficie que levantar, como el fondo de una celda, una miniatura o un botón. Nunca se pone sobre un texto ni sobre un icono, para no estorbar su lectura.

Tú activas la sombra; el sistema sabe dónde puede ir, y a qué nivel. Este ajuste por defecto te simplifica la vida y mantiene tus sombras coherentes en toda la app. Es nuestro principio «No design burden», para que el diseño nunca sea una carga.

En la vida real, una sombra nunca es del todo negra. Toma el color de la luz y de la superficie que toca. Nuestra sombra por defecto es negra por una buena razón: combina con todas las paletas, y eso es lo que la hace segura desde el primer gesto. Una sombra con tono va un paso más allá. Sobre un fondo crema, una sombra marrón se queda en el tono del fondo.

Aquí tienes la misma pantalla dos veces. Solo ha cambiado un valor, el color de la sombra, del negro por defecto al marrón de la paleta (la clave color del paso 3). Mismo desplazamiento, mismo desenfoque, misma fuerza. A la izquierda, las celdas se despegan del fondo. A la derecha, parecen posadas sobre la página, y la página entera va a juego con la paleta. Por una sola clave, la app parece dibujada de una pieza.

Para juzgar un ajuste, haz como aquí. Cambia un valor cada vez, guarda, y juzga en la vista previa, con la página entera a la vista. Una sombra lograda se siente más de lo que se ve.

La misma celda, en la misma app, puede llevar sombras muy distintas. Al 5 %, la sombra casi no se ve: despega la celda y nada más. Sin desenfoque, se recorta nítida detrás de la celda, y la app gana carácter. La imagen muestra cuatro, de la más discreta a la más marcada, todas en type custom salvo la de por defecto:

La fila por defecto solo recuerda sus valores: no tienes que escribir nada para obtenerla. Las otras tres se copian tal cual en el editor, clave por clave.

Ninguna de estas sombras es mejor que otra. Cada una da un carácter a la app, y todas se ajustan con las mismas claves. La sombra dura, por sí sola, cambia el carácter de una app, como en nuestra maqueta de app de galería de arte, en neobrutalismo, en Dribbble, con un desplazamiento en los dos ejes, desenfoque cero y un color pleno.

Bajo un botón de color, una sombra del mismo color. Es mi ajuste favorito: 10 px de desplazamiento, 24 de desenfoque, una fuerza del 38 %. No pesa sobre el botón, lo hace brillar, como un halo, y el ojo entiende que esa es la acción que cuenta. La reservo a una sola acción por pantalla. Si todo brilla, ya nada destaca.

El botón flotante se ajusta una sola vez para toda la app, en Estilo de App, con el mismo botón { EDICIÓN }, bajo floatingButton, luego button, luego shadow, con las mismas claves.

La sombra en resumen

• Un gesto para activarla, «Activar efecto de sombra», en el panel de diseño de una lista.
• Tres ajustes, el desplazamiento, el desenfoque, el color y su fuerza.
• Por defecto, 3 px de desplazamiento, 6 px de desenfoque, negro al 20 %; 6 y 12 px bajo la TabBar y el botón flotante.
• Una extensión gratuita para el ajuste fino, Edición avanzada, botón { EDICIÓN }.
• Una clave para dar tono a la sombra sin tocar el resto, color.
• Dos posiciones, exterior (relieve) o interior (hueco, reservada a los campos de formulario).
• Una trampa, la opacidad se escribe con punto, 0.2 y no 0,2.