O qué tener en cuenta al desarrollar un modo oscuro para una aplicación o sitio web
El año 2018 demostró: los modos oscuros están en camino. Ahora que ya estamos a medio camino en 2019, podemos afirmar con confianza: están aquí y están en todas partes.
Empecemos por aclarar que el modo oscuro no es un concepto nuevo. Se ha utilizado durante bastante tiempo. De hecho, en el pasado solo se usaba eso: los monitores eran del tipo "verde sobre negro", pero solo porque el revestimiento fluorescente en su interior emitía un brillo verdoso cuando era activado por radiación.
Pero incluso después de la introducción de monitores en color, el modo oscuro continuó existiendo. ¿Por qué es eso?
Hay dos motivos principales que explican por qué hoy en día cualquiera se apresura a agregar un tema oscuro a su aplicación. Primero: las computadoras están en todas partes. Donde quiera que miremos, hay alguna pantalla. Usamos nuestros dispositivos móviles desde la mañana hasta casi la medianoche. Tener un modo oscuro reduce la carga en los ojos cuando revisamos la red social "una última vez" en la cama antes de dormir. (Si eres como yo, entonces "una última vez" puede significar desplazamiento de 3 horas. . ¿Modo oscuro? ¡Claro que sí!
Otra razón son las nuevas tecnologías de fabricación de pantallas. Los modelos insignia de grandes empresas como Apple, Google, Samsung, Huawei, todos están equipados con pantallas OLED, que, a diferencia de las LCD, no requieren retroiluminación. Y esta es una gran noticia para la duración de tu batería. Imagina que estás viendo una imagen de un cuadrado negro en tu teléfono; con una pantalla LCD, la retroiluminación iluminará toda la pantalla, aunque gran parte de ella sea negra. Pero al ver la misma imagen en una pantalla OLED, los píxeles de los que se compone el cuadrado negro simplemente se apagan. Así que, en resumen, no consumen energía.
Estos tipos de pantallas hacen que los modos oscuros sean mucho más interesantes. Al usar una interfaz oscura, puedes prolongar significativamente la vida útil de la batería de tu dispositivo. . Los modos oscuros, por supuesto, van de la mano con cambios en la interfaz de usuario, así que ¡refresquemos nuestros conocimientos!
Modos oscuros 101
Primero que nada: «oscuro» no es igual a «negro». No intentes reemplazar un fondo blanco por negro, ya que esto hará que las sombras sean imposibles de usar. Un diseño así sería súper plano (en el mal sentido).
Es importante tener en cuenta los principios básicos de sombreado/iluminación. Los objetos que están más elevados deben ser más claros en la sombra, imitando la iluminación y el sombreado reales. De este modo, es más fácil distinguir los diferentes componentes y su jerarquía.
Dos cuadrados grises iguales con sombra, uno en un fondo negro al 100%, el otro en #121212. Al elevar el objeto, adquiere un matiz de gris más claro.
En un tema oscuro, aún puedes trabajar con tu color base habitual, siempre que el contraste sea adecuado. Vamos a explicarlo con un ejemplo.
En esta interfaz, la acción principal es un gran botón azul en el panel inferior. No hay problema en cuanto al contraste al cambiar entre el modo claro o oscuro, el botón sigue atrayendo la atención, el ícono es nítido, en general, todo es excelente.
Cuando se utiliza el mismo color de manera diferente, como en el texto, habrá problemas. Intenta usar un tono (mucho) menos saturado del color base o busca otras formas de incluir los colores de la marca en la interfaz.
A la izquierda: el rojo sobre negro se ve mal. A la derecha: reducimos la saturación y todo se ve bien. — nota del traductor.
Lo mismo se aplica a todos los demás colores saturados que pudiste haber usado, como los colores de advertencia o error. Google utiliza una superposición de una capa blanca al 40% sobre el color de error predeterminado en sus al cambiar al modo oscuro. Este es un buen punto de partida, ya que mejorará los niveles de contraste para cumplir con los estándares AA. Por supuesto, siempre puedes ajustar la configuración a tu gusto, pero no olvides comprobar los niveles de contraste. Por cierto, una herramienta útil para este propósito es un complemento para Sketch — , que muestra exactamente cuánto contraste hay entre 2 capas.
¿Qué tal el texto?
Aquí todo es simple: nada debe ser 100% negro sobre 100% blanco y viceversa. El blanco refleja ondas de luz de todas las longitudes, el negro absorbe. Si colocas texto 100% blanco sobre un fondo 100% negro, las letras reflejarán la luz, se difuminarán y se volverán menos legibles, lo que afectará negativamente la legibilidad.
Lo mismo ocurre con un fondo 100% blanco, que refleja demasiada luz como para concentrarse completamente en las palabras. Intenta suavizar un poco el blanco, utiliza un gris claro para los fondos y textos sobre fondos negros. Esto reducirá la carga en los ojos, previniendo
El modo oscuro aquí no se va a ir
La cantidad de tiempo que pasamos frente a las pantallas va en aumento constantemente, y cada nuevo día, nuevas pantallas aparecen en nuestras vidas, desde que nos despertamos hasta que nos dormimos. Este es un fenómeno bastante nuevo, nuestros ojos aún no se han acostumbrado a este incremento del tiempo de pantalla por la noche. Aquí es donde entra en juego el modo oscuro. Tras la introducción de esta función en macOS y Material Design (y, probablemente, en iOS), creemos que, tarde o temprano, se convertirá en el predeterminado en todas las aplicaciones, tanto móviles como de escritorio. Y es mejor estar preparado para ello.
La única razón para no implementar el modo oscuro es cuando estás absolutamente 100% seguro de que tu aplicación se utilizará exclusivamente a plena luz del día. Esto, la verdad, no ocurre a menudo.
Vale la pena mencionar algunas cosas que requerirán atención especial al implementar el modo oscuro, además de los principios básicos resumidos anteriormente.
Desde el punto de vista de la accesibilidad, el modo oscuro no es el más conveniente, ya que el contraste, en general, es menor, lo que, a su vez, no mejora la legibilidad.
Pero, imagina que te estás preparando para dormir, tienes mucho sueño, pero justo antes de quedarte dormido, recuerdas que tienes que enviar un mensaje súper importante a alguien que no puede esperar ni siquiera una noche. Tomas tu teléfono, lo enciendes y ¡AAAAAAH! el fondo claro de tu iMessage no te dejará dormir durante otras 3 horas. Aunque el texto claro sobre un fondo oscuro no se considera el más accesible, tener el modo oscuro en este momento aumentaría la comodidad al millón. Todo depende de la situación en la que se encuentre el usuario en ese momento.
Por eso creemos modo oscuro automático una idea tan genial. Se activa por la noche y se desactiva por la mañana. El usuario ni siquiera tiene que pensar en ello, lo que es muy conveniente. Twitter ha hecho un gran trabajo con la configuración del modo oscuro. Además, tienen tanto un modo oscuro simple como un modo aún más oscuro para todas esas pantallas OLED, ahorro de batería y todo lo relacionado. Aquí es importante notar: permite al usuario cambiar manualmente cuando lo desee; no hay nada peor que un cambio automático de la interfaz sin opción de revertir.
Twitter tiene un modo oscuro automático que se activa por la noche y se desactiva por la mañana.
También al desarrollar el tema, es importante tener en cuenta que algunas cosas simplemente no se pueden hacer oscuras.
Toma un editor de texto, por ejemplo, Pages. Puedes hacer la interfaz oscura, pero la hoja siempre será blanca, imitando una hoja de papel real.
Pages con el modo oscuro activado
Lo mismo ocurre con todos los tipos de editores para crear contenido, como Sketch o Illustrator. Aunque se puede hacer oscura la interfaz, el panel de trabajo con el que trabajas siempre será blanco por defecto.
Sketch en modo oscuro y aún así con un panel de trabajo blanco brillante.
Por lo tanto, independientemente de la aplicación, creemos que los modos oscuros se volverán nativos para el sistema operativo que estés usando, así que es mejor prepararse para el futuro. será oscuro.
Si deseas saber más sobre el desarrollo de interfaces oscuras, asegúrate de revisar las pautas , esta fue nuestra principal fuente de información para este artículo.
Fuente: habr.com
