Diseñar para Dark Mode en iOS requiere mucho más que invertir colores. Apple establece reglas muy específicas sobre profundidad, elevación y materiales que distinguen su enfoque del de Android. Comprender estas pautas te permitirá crear interfaces oscuras coherentes y fieles al sistema de diseño de Apple, trabajando directamente en Figma.
¿Cómo gestiona Apple la elevación en Dark Mode?
A diferencia de Android, que utiliza sombras y permite hasta veinticuatro niveles de elevación, Apple basa la elevación única y exclusivamente en el color [0:47]. Esto significa que no hay sombras para comunicar profundidad: todo se resuelve mediante tonos.
Además, Apple limita la jerarquía visual a solo tres niveles de elevación [1:00]. Si decides seguir su sistema de diseño, debes ceñirte a esos tres niveles:
- Nivel más profundo (fondo): negro puro.
- Nivel intermedio: un tono de gris que aporta ligera separación.
- Nivel superior: un gris más claro para los elementos que deben destacar.
Este detalle es peculiar porque Apple sí usa negro puro (#000000) como color de fondo [2:10], algo que muchos manuales de diseño desaconsejan para evitar un contraste excesivo. Sin embargo, las guidelines de iOS lo establecen como base del modo oscuro.
¿Por qué no basta con invertir los colores del modo light?
Uno de los errores más comunes es hacer una traslación directa de colores: cambiar el blanco por negro y un gris por otro gris [2:22]. Apple indica explícitamente que eso está mal. Es necesario entender la profundidad y asignar cada tono según la jerarquía de los tres niveles.
En la práctica, dentro de Figma el proceso sigue este orden [3:05]:
- Seleccionar el color de fondo del frame y aplicar negro puro.
- Identificar los elementos de navegación (barra superior y tab bar) y asignarles el primer tono de gris de elevación.
- Los textos que eran negros pasan a blanco.
- Las tarjetas o elementos que necesitan mayor protagonismo reciben el segundo tono de gris, comunicando que están por encima del resto [3:50].
- Los divisores también se actualizan: se localiza su código de color original y se sustituye por el tono correspondiente de la paleta oscura [4:18].
¿Qué paleta de colores proporciona Apple?
Apple define una gama muy concreta para Dark Mode [2:55]:
- Seis colores opacos de uso general.
- Cuatro colores translúcidos de relleno.
- Dos colores para separadores.
- Una gama cromática de resalte donde los tonos oscuros y claros se diferencian sutilmente, pero están cuidadosamente seleccionados.
Todos estos valores están disponibles en las Human Interface Guidelines de iOS.
¿Qué son los materiales en el diseño para iOS?
Aunque la elevación se limita a tres niveles, Apple ofrece un recurso adicional llamado materiales [4:52]. Los materiales permiten aplicar distintos grados de opacidad a elementos como barras de navegación o fondos, generando una sensación visual de capas translúcidas.
¿Cómo se aplican los materiales en la práctica?
- Por defecto, un elemento debe mostrarse opaco.
- Si se necesita mayor profundidad visual, se especifica al equipo de desarrollo el nivel de material deseado [5:15].
- Cada nivel de material ajusta la opacidad del fondo, permitiendo que el contenido inferior se perciba sutilmente.
Esta técnica aporta riqueza visual sin romper la simplicidad de los tres niveles de elevación.
Dominar estas reglas —elevación por color, tres niveles de profundidad, negro puro como base y materiales como recurso complementario— te dará una base sólida para diseñar aplicaciones iOS en Dark Mode que respeten las guidelines de Apple. Si ya estás trabajando en tu proyecto del refugio de animales, comparte tu avance en los comentarios.
