O qué tener en cuenta a la hora de desarrollar un modo oscuro para una aplicación o sitio web
2018 demostró que los modos oscuros están en camino. Ahora que estamos a mediados de 2019, podemos decir con confianza: están aquí y en todas partes.
Comencemos con el hecho de que el modo oscuro no es un concepto nuevo en absoluto. Se utiliza desde hace bastante tiempo. Y de hecho, una vez, durante mucho tiempo, esto fue lo único que usaron: los monitores eran del tipo “verde sobre negro”, pero solo porque la capa luminiscente del interior emitía un brillo verdoso cuando se exponía a la radiación. .
Pero incluso después de la introducción de los monitores en color, el modo oscuro siguió existiendo. ¿Por qué esto es tan?
Hay dos motivos principales que explican por qué hoy en día una de cada dos personas tiene prisa por añadir un tema oscuro a su aplicación. En primer lugar: las computadoras están en todas partes. Dondequiera que miremos hay una especie de pantalla. Usamos nuestros dispositivos móviles desde la mañana hasta altas horas de la noche. La presencia de un modo oscuro reduce la fatiga visual cuando estás en la cama antes de acostarte por "última vez" desplazándote por tus redes sociales. redes. (Si eres como yo, "la última vez" podría significar un desplazamiento de 3 horas . ¿Modo oscuro? ¡Sí, por favor! )
Otra razón son las nuevas tecnologías de producción de pantallas. Los modelos emblemáticos de las grandes empresas (Apple, Google, Samsung, Huawei) están equipados con pantallas OLED que, a diferencia de las pantallas LCD, no requieren retroiluminación. Y esas son realmente buenas noticias para tu batería. Imagina que estás viendo la imagen de un cuadrado negro en tu teléfono; Con una pantalla LCD, la luz de fondo iluminará toda la pantalla aunque la mayor parte esté negra. Pero cuando se ve la misma imagen en una pantalla OLED, los píxeles que forman el cuadrado negro simplemente se apagan. Esto significa que no consumen energía en absoluto.
Este tipo de pantallas hacen que los modos oscuros sean mucho más interesantes. Al utilizar una interfaz oscura, puede extender significativamente la duración de la batería de su dispositivo. . Los modos oscuros, por supuesto, van de la mano con los cambios en la interfaz de usuario, ¡así que repasemos nuestros conocimientos!
Modos oscuros 101
En primer lugar: “oscuro” no es lo mismo que “negro”. No intentes reemplazar un fondo blanco por uno negro, ya que esto imposibilitará el uso de sombras. Un diseño como este quedará 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 las sombras, simulando la iluminación y las sombras de la vida real. Esto facilita la distinción entre los diferentes componentes y su jerarquía.
Dos cuadrados grises idénticos con una sombra, uno sobre un fondo 100% negro y el otro sobre #121212. A medida que el objeto se eleva, adquiere un tono de gris más claro.
En un tema oscuro, aún puedes trabajar con tu color base habitual siempre que el contraste sea correcto. Expliquemos con un ejemplo.
En esta interfaz, la acción principal es el gran botón azul en la barra inferior. No hay ningún problema en términos de contraste al cambiar entre el modo claro u oscuro, el botón sigue siendo llamativo, el ícono es claro y, en general, todo está bien.
Cuando el mismo color se utiliza de diferentes maneras, por ejemplo en un texto, habrá problemas. Intente utilizar un tono (mucho) menos saturado del color principal o busque otras formas de incorporar colores de marca en la interfaz.
Izquierda: El rojo sobre negro se ve mal. Derecha: reduce la saturación y todo se verá bien. — aprox. traducción
Lo mismo ocurre con cualquier otro color fuerte que haya utilizado, como los colores de advertencia o de error. Google utiliza una superposición de capa blanca del 40% sobre el color de error predeterminado en su al cambiar al modo oscuro. Este es un buen punto de partida, ya que mejorará los niveles de contraste para que coincidan con los estándares AA. Por supuesto, siempre puedes cambiar la configuración como mejor te parezca, pero asegúrate de comprobar los niveles de contraste. Por cierto, una herramienta útil para este propósito es el complemento Sketch: , que muestra exactamente cuánto contraste hay entre 2 capas.
¿Qué pasa con el texto?
Aquí todo es sencillo: nada debe ser 100% negro y 100% blanco y viceversa. El blanco refleja ondas de luz de todas las longitudes de onda, el negro las absorbe. Si coloca texto 100 % blanco sobre un fondo 100 % negro, las letras reflejarán la luz, se borrará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 centrarse completamente en las palabras. Intente suavizar un poco el color blanco, use gris claro para fondos y texto sobre fondos negros. Esto reducirá la fatiga visual, previniendo
El modo oscuro está aquí y no desaparecerá
La cantidad de tiempo que pasamos frente a las pantallas crece constantemente, y cada nuevo día aparecen nuevas pantallas en nuestras vidas, desde que nos despertamos hasta que nos dormimos. Este es un fenómeno bastante nuevo; nuestros ojos aún no están acostumbrados a este aumento del tiempo frente a la pantalla a última hora de la noche. Aquí es donde entra en juego el modo oscuro. Con la introducción de esta característica en macOS y Material Design (y muy probablemente en iOS), creemos que tarde o temprano se convertirá en la predeterminada en todas las aplicaciones, tanto móviles como de escritorio. ¡Y es mejor estar preparado para esto!
La única razón para no implementar el modo oscuro es cuando está absolutamente 100% seguro de que su aplicación se utiliza exclusivamente a plena luz del día. Sin embargo, esto no sucede a menudo.
Vale la pena mencionar algunas cosas que requerirán atención especial al implementar el modo oscuro, más allá de los principios básicos resumidos anteriormente.
En términos de accesibilidad, el modo oscuro no es el más conveniente, ya que el contraste generalmente es menor, lo que a su vez no mejora en absoluto la legibilidad.
Pero imagina que te estás preparando para ir a la cama, tienes muchas ganas de dormir, pero justo antes de quedarte dormido, recuerdas que necesitas enviarle a alguien un mensaje súper importante que no puede esperar ni una noche. Tomas tu teléfono, lo enciendes y AAAAAAH... el fondo claro de tu iMessage te mantendrá despierto por otras 3 horas. Si bien el texto claro sobre un fondo oscuro no se considera el más accesible, tener un modo oscuro en este segundo sería aumentar la comodidad en un millón. Todo depende de la situación en la que se encuentre el usuario en ese momento.
Por eso pensamos modo oscuro automático Qué idea tan genial. Se enciende por la tarde y se apaga por la mañana. El usuario ni siquiera necesita pensar en ello, lo cual resulta muy conveniente. Twitter ha hecho un gran trabajo con su configuración del modo oscuro. Además, cuentan tanto con un modo oscuro como con un modo aún más oscuro para todas estas pantallas OLED, ahorrando batería y todo lo relacionado con ella. Es importante tener en cuenta aquí: brinde al usuario la oportunidad de cambiar manualmente cuando lo desee: no hay nada peor que cambiar automáticamente la interfaz sin poder volver atrás.
Twitter tiene un modo oscuro automático que se activa por la noche y se apaga por la mañana.
Además, al desarrollar un tema, vale la pena tener en cuenta que algunas cosas simplemente no se pueden oscurecer.
Tomemos como ejemplo un editor de texto como Pages. Puedes oscurecer la interfaz, pero la hoja en sí siempre será blanca, simulando una hoja de papel real.
Páginas con el modo oscuro habilitado
Lo mismo ocurre con todo tipo de editores de creación de contenidos, como Sketch o Illustrator. Aunque la interfaz se puede oscurecer, la mesa de trabajo con la que trabajas siempre será blanca de forma predeterminada.
Dibuja en modo oscuro y aún tendrás una mesa de trabajo blanca brillante.
Entonces, independientemente de la aplicación, creemos que los modos oscuros serán nativos del sistema operativo que uses, lo que significa que es mejor prepararse para el futuro. estará oscuro.
Si desea obtener más información sobre el desarrollo de interfaces de usuario oscuras, asegúrese de consultar las pautas , esta fue nuestra principal fuente de información para este artículo.
Fuente: habr.com