El futuro es oscuro.

Cosas a tener en cuenta al diseñar un modo oscuro para su aplicación o sitios web

2018 ya lo dejó bastante claro: se acercaban los modos oscuros. Ahora que ya estamos a mediados de 2019, podemos decir con seguridad: están aquí y están en todas partes.

Un ejemplo de un viejo monitor verde sobre negro

Comencemos diciendo que el modo oscuro no es un concepto completamente nuevo. Ya ha existido desde hace bastante tiempo. En los viejos tiempos, el modo oscuro era todo lo que había: los monitores eran de color verde sobre negro, pero solo porque el revestimiento de fósforo en el interior emitía un brillo verdoso cuando se golpeaba con radiación.

Pero incluso después de la introducción de los monitores en color, el modo oscuro perduró. Entonces, ¿por qué es eso exactamente?

Desplazarse todo el día, err'day

Hay dos motivos principales que explican por qué todos se apresuran a agregar un tema oscuro a su aplicación hoy en día. Primero que nada: las computadoras están en todas partes. Dondequiera que miremos, hay algún tipo de pantalla. Usamos nuestros dispositivos móviles durante todo el día y la noche. Tener un modo oscuro hace que sea más fácil para los ojos desplazarse por su alimentación por última vez en la cama antes de irse a dormir. (Si eres como yo, esa "última vez" podría significar un desplazamiento de 3 horas a través de r / EngineeringPorn. ¿Modo oscuro? ¡Sí, por favor! )

Otra razón es la tecnología constantemente innovadora detrás de las pantallas. Los modelos emblemáticos de las compañías más grandes -Apple, Google, Samsung, Huawei- tienen pantallas OLED que, a diferencia de las pantallas LCD, no requieren luz de fondo. Estas son realmente buenas noticias para la duración de la batería. Imagina que estás viendo una imagen de un cuadrado negro en tu teléfono; Con una pantalla LCD, la luz de fondo iluminaría toda la pantalla, aunque la mayor parte sea negra. Pero cuando se visualiza la misma imagen del cuadrado negro en una pantalla OLED, los píxeles que forman el cuadrado negro simplemente se desactivan. Consumir cero energía.

Este tipo de pantallas hacen que los modos oscuros sean muchísimo más interesantes. Al proporcionar una interfaz oscura, puede extender la duración de la batería de su dispositivo enormemente. Echa un vistazo a algunos datos y cifras de Android Dev Summit de noviembre pasado para ver por ti mismo. Los modos oscuros vienen con algunos ajustes de la interfaz de usuario, obviamente, ¡así que vamos a ponerte al día!

Modos oscuros 101

En primer lugar: "oscuro" no es igual a "negro". No solo cambie su fondo blanco por uno negro, ya que esto hará que sea imposible usar sombras en los objetos. Esto hará que su diseño se vea súper plano (aunque no es el buen tipo de plano)

Es importante tener en cuenta algunos principios básicos de sombreado de iluminación. Los objetos que están más elevados deben tener una sombra más clara, imitando la iluminación y la sombra de la vida real. De esta manera, es más fácil distinguir diferentes componentes y su jerarquía.

Dos cuadrados grises idénticos con una sombra, uno colocado sobre un fondo 100% negro y el otro en el # 121212. Al elevarse, el objeto se vuelve de un tono gris más claro.

En su tema oscuro, aún es posible trabajar con su color primario habitual, siempre que el contraste sea correcto. Vamos a explicar con un ejemplo.

En esta interfaz, su acción principal es un gran botón azul en la barra inferior. No hay ningún problema real en términos de contraste cuando se cambia entre el modo claro u oscuro, el botón todavía llama toda la atención, el ícono está claro, todo está bien.

Cuando ese mismo color se usa de manera diferente, en el texto, por ejemplo, surgirán problemas. Considere usar un tono (saturado) menos saturado de su color primario, o busque otras formas de incorporar los colores de su marca en su interfaz.

Lo mismo ocurre con todos los demás colores saturados que pueda usar, como los colores de advertencia o error. Google usa una capa blanca adicional del 40% sobre su color de estado de error predeterminado en sus Pautas de materiales para usar como un nuevo color cuando cambia al modo oscuro. Este es un punto bastante bueno para comenzar, ya que mejorará los niveles de contraste para pasar los estándares de nivel AA. Por supuesto, siempre puede ajustar estos colores a su elección, pero asegúrese de verificar sus niveles de contraste. Por cierto, una herramienta útil para esto es el complemento Stark para Sketch, que le dice exactamente cuánto contraste hay entre 2 capas.

¿Qué pasa con el texto?

Las reglas son simples aquí: nada debe ser 100% negro sobre 100% blanco y viceversa. El blanco refleja todas las longitudes de onda de la luz, el negro lo absorbe. Si coloca texto 100% blanco sobre un fondo 100% negro, las letras reflejan la luz, se dispersan y se vuelven más difíciles de distinguir entre sí, lo que afecta la legibilidad.

Lo mismo ocurre con un fondo 100% blanco, que refleja demasiada luz para enfocarse completamente en las palabras. Intente suavizar un poco los blancos, use grises claros para fondos y para textos sobre fondos negros. Esto será más fácil para los ojos y evitará la fatiga visual.

El modo oscuro está aquí y está aquí para quedarse

Nuestro tiempo de pantalla diario aumenta todos los días, y todos los días, se agregan nuevas pantallas a nuestras rutinas diarias, desde el momento en que nos despertamos hasta que nos volvemos a dormir por la noche. Esto es bastante nuevo, nuestros ojos no están acostumbrados a tanto tiempo de pantalla tan tarde en la noche. Aquí es donde entra el modo oscuro. Con la introducción de esta función tanto en macOS como en Material Design (y probablemente en iOS) creemos que se convertirá en una función predeterminada en todas las aplicaciones, tanto móviles como de escritorio. Mejor prepárate!

La única razón para no implementar un modo oscuro es cuando está absolutamente seguro al 100% de que su aplicación se usa exclusivamente durante la luz del día, pero esto es bastante excepcional.

Hay algunas cosas que requieren atención adicional al implementar el modo oscuro, aparte de los principios básicos que resumimos anteriormente.

En términos de accesibilidad, el modo oscuro no es el más fácil de usar, ya que el contraste es en general más bajo, lo que realmente no mejora la legibilidad.

Fuente

Pero imagina que estás listo para la cama, con mucho sueño, pero justo antes de quedarte dormido, te acordaste de enviarle a alguien un mensaje de texto súper importante que no podía esperar otra noche. Toma su teléfono, lo enciende y AHHHHH ... El fondo claro de su iMessage lo mantiene despierto durante otras 3 horas. Si bien el texto claro sobre un fondo oscuro no se considera accesible al máximo, tener un modo oscuro justo en ese momento habría mejorado la usabilidad en un millón. Todo depende de la situación en la que se encuentre su usuario en ese momento.

Es por eso que creemos que el modo oscuro automático es una característica tan agradable. Se enciende por la tarde y se apaga nuevamente por la mañana. Su usuario ni siquiera tiene que pensarlo, lo cual es una usabilidad realmente excelente. Twitter hace un trabajo maravilloso con su configuración de modo oscuro. Además de eso, tienen un modo oscuro Y un modo aún más oscuro, para esas pantallas OLED, ahorrando batería y todo. Importante agregar: sin embargo, ofrezca a su usuario la opción de volver a cambiar manualmente cuando lo desee, nada más frustrante que un cambio automático de toda la interfaz que no se puede anular.

Twitter tiene un modo oscuro automático, que se enciende por la tarde y se apaga nuevamente por la mañana.

Otra cosa a tener en cuenta al diseñar la función para su aplicación es que algunas cosas simplemente no se pueden oscurecer.

Tome un editor de texto como Páginas por ejemplo. Puede oscurecer la interfaz, pero su hoja siempre será blanca, parecida a una hoja de papel de la vida real.

Páginas con modo oscuro activado

Lo mismo ocurre con todo tipo de creadores de contenido, como Sketch o Illustrator. Si bien el entorno en el que está trabajando puede cambiar a oscuro, la mesa de trabajo en la que está trabajando siempre será blanca de forma predeterminada.

Dibuje en modo oscuro, sigue siendo una mesa de trabajo blanca brillante.

Entonces, sin importar la aplicación, creemos que los modos oscuros se convertirán en nativos del sistema operativo que está utilizando, así que mejor prepárese para el futuro, será oscuro.

Si desea leer más sobre el diseño de interfaces oscuras, asegúrese de consultar las pautas de Diseño de materiales, esta fue nuestra principal fuente de información para este artículo.

Somos Digiti, ¡encuéntranos en Twitter, Facebook, LinkedIn o Instagram!