En la WWDC de junio ,Mike Stern, Platform Experience and Design Evangelism Manager en Apple, nos presentó las novedades en torno al diseño de interfaz y experiencia de usuario de la nueva actualización del sistema operativo iOS 13. A saber:
- Menús contextuales
- Modeales
- Dark mode
Después de tanta espera.. ¡ya lo tenemos aquí! En el post de hoy, nuestra Slashgirl Helena Hernández, DEO de Slashmobility, nos dará 5 consejos para aplicar correctamente el dark mode en vuestras aplicaciones. ¡Vamos a por ello!
¿Qué es el dark mode y por qué es importante?
Las IU de temas oscuros utilizan superficies predominantemente oscuras. Emiten bajos niveles de luz mientras mantienen un alto nivel de usabilidad. Normalmente es un modo complementario que el usuario puede activar (o desactivar), pero en los próximos años veremos cómo cogerá mayor protagonismo dejando de lado el modo normal. ¿Por qué? La tecnología evoluciona constantemente pero parece ser que se han olvidado de las baterías. Actualmente, la autonomía de las baterías es el mayor pain point y el dark mode es una solución potencial para este problema. El ahorro entre el modo oscuro y el normal es de un 14% si uno tiene la pantalla con el brillo a la mitad de brillo. Sin embargo, llega a ser del 60% si tenemos la pantalla al máximo de brillo posible.
¿Cómo aplicar correctamente el dark mode?
Y ahora que ya tenemos claro su importancia, veamos esos 5 consejos para aplicarlo correctamente.
Superficie en gris oscuro
Un tema oscuro usa gris oscuro, en lugar de negro, como el color de superficie principal para los componentes. Las superficies gris oscuro también reducen la fatiga visual. Esto se debe a que el texto claro en una superficie gris oscura tiene menos contraste que el texto claro en una superficie negra. Se recomienda usar el color #121212. Sin embargo, en los dispositivos con pantallas OLED, se puede usar negro #000000, ya que dichas pantallas pueden apagar los píxeles mostrándose en negro para ahorrar energía de la batería.
Por otro lado, para crear superficies oscuras teniendo en cuenta la identidad de marca se recomienda usar esta fórmula:
«Superponer el color primario de la marca con una opacidad baja (8%) sobre el color de superficie oscuro recomendado (#121212). El color #151E21 es el resultado de combinar el color de superficie del tema oscuro #121212 y el 8% de color primario.»
¡Pero cuidado! Asegúrate de que el color de fondo sea lo suficientemente oscuro para que el texto del cuerpo cumpla con un nivel de contraste de al menos 4.5: 1.
Mayor elevación, superficie más clara
En una UI de los temas predeterminados (fondo blanco) se usan sombras para expresar la elevación de los componentes y jerarquizar la información. Sin embargo, en el tema oscuro se representa la elevación añadiendo mayor claridad a los componentes.
Accesibilidad y contraste
Anteriormente, ya os hemos hablado sobre el diseño de interfaz accesible y las directrices de accesibilidad (WCAG) En el modo oscuro es vital la relación de contrastes y aplicar el color correctamente.
Las superficies de temas oscuros deben ser lo suficientemente oscuras para mostrar texto blanco. Deben usar un nivel de contraste de al menos 15.8: 1 entre el texto y el fondo. Esto asegura que el texto del cuerpo pase el estándar AA de WCAG de al menos 4.5: 1 cuando se aplica a superficies en la elevación más alta (y más clara).
Colores desaturados
Evita los colores saturados, ya que en superficies oscuras no pasarán el estándar de accesibilidad de 4.5: 1. También los colores saturados producen vibraciones ópticas en un fondo oscuro, lo que provoca fatiga visual. Por ello, los colores desaturados (colores en el rango 200-50) son una buena alternativa como color primario; ya que tienen una mejor legibilidad en superficies de temas oscuros.
Identidad de marca
Para conservar la identidad de marca en el modo oscuro se recomienda utilizar el color primario saturado en uno o dos elementos, como por ejemplo un botón o un logotipo. Y usar en el resto de la interfaz el mismo color primario pero en el tono 200. En el ejemplo que se muestra a continuación, se aplica un color de marca totalmente saturado al botón de acción flotante (2), mientras que el color primario del tema oscuro desaturado se aplica al texto (1).
Y vosotros, ¿tenéis algún consejo más? ¿Os pasáis ya al lado oscuro?
Si quieres estar al día de todas las novedades sobre diseño mobile, suscríbete a nuestra newsletter (prometemos no hacer spam). Por otra parte, Apple y Google tienen mucha documentación sobre el funcionamiento de los sistemas de color y cómo aplicarlo al dark mode. ¡Échale un vistazo!
