Diseño de interfaces: Guía para modo oscuro en iOS

¿Cómo diseñar para Dark Mode en iOS según las guías de Apple?

Diseñar para el modo oscuro implica algo más que simplemente cambiar colores. Apple tiene pautas específicas que debes seguir para garantizar que tus aplicaciones en iOS se vean consistentes y estéticamente agradables en modo oscuro. Aquí te explico cómo trabajar con estas guías usando Figma, una herramienta que ofrece una cuenta gratuita y es multiplataforma. Veamos cómo transformar un diseño en modo claro a modo oscuro de manera efectiva.

¿Qué debes considerar al cambiar de Light a Dark Mode?

Cuando conviertes un diseño de modo claro a modo oscuro para iOS, existen varias consideraciones esenciales a tener en cuenta:

• Profundidad del color: Apple se enfoca únicamente en el uso del color para indicar la profundidad, a diferencia de Android, que también utiliza sombras y marca hasta 24 niveles de elevación. En iOS, solo trabajamos con tres niveles de elevación.
• Uso del negro puro: Apple rompe con los manuales de buen diseño utilizando negro puro para el nivel más profundo, que es el fondo.
• No translación directa de colores: No basta con cambiar los colores claros a oscuros de manera directa. Se debe entender la profundidad e implementar la gama correcta de grises y negros.
• Gama cromática: Apple define seis colores opacos de uso y cuatro colores translúcidos. Además, proporciona dos colores para los separadores.

¿Cómo aplicar adecuadamente los colores en Figma?

Para adaptar un diseño al modo oscuro, sigue estos pasos:

1. Duplicar el frame y renombrarlo: Esto permite trabajar sobre una copia e ir visualizando los cambios.
2. Seleccionar fondo negro: Para el elemento más profundo.
3. Trasladar colores gradualmente: Cambia la barra de navegación y otros elementos al gris adecuado según su nivel de elevación.
4. Destacar elementos importantes: Utiliza un tono de gris más claro para los elementos que deben resaltar más.
5. Actualizar los divisores y textos: Cambiar al tono correcto basándote en el selector de colores, asegurando que todos los elementos se vean coherentes.

¿Qué son los materiales y cómo afectan al diseño?

Además de la profundidad de color, Apple introduce el concepto de materiales. Aunque hay solo tres niveles de profundidad, se puede jugar con materiales para darle un toque distintivo a una barra o elemento específico, utilizando opacidad para añadir un efecto de caída. Por defecto, los elementos deben ser opacos, pero los desarrolladores pueden ajustar el nivel de material para definir visualmente la importancia o el relieve de un componente en la interfaz.

Recuerda que diseñar en modo oscuro no es simplemente una cuestión estética; es crucial para la experiencia del usuario. Tener en cuenta las guías establecidas por Apple asegurará que tu aplicación no solo cumpla con los estándares sino que también ofrezca una navegación agradable y visualmente atrayente para tus usuarios.

Siguientes pasos en tu aprendizaje de diseño para iOS

Espero que esta guía te ayude a transformar tus diseños con confianza y precisión. No dudes en volver a esta lección las veces que necesites para afianzar lo aprendido. Te animo a que sigas explorando y experimentando con diferentes conceptos de diseño. Utiliza este conocimiento para seguir desarrollando la aplicación del refugio de animales y comparte tus avances. ¡Nos vemos en la próxima lección!