Ou o que hai que ter en conta ao desenvolver un modo escuro para unha aplicación ou sitio web
2018 mostrou que os modos escuros están en camiño. Agora que estamos a metade de 2019, podemos dicir con confianza: están aquí e están en todas partes.
Comecemos co feito de que o modo escuro non é un concepto novo en absoluto. Utilizouse durante bastante tempo. E noutrora, de feito, durante moito tempo, isto era o único que usaban: os monitores eran da variedade "verde sobre negro", pero só porque o revestimento luminiscente no interior emitía un brillo verdoso cando se expuña á radiación. .
Pero mesmo despois da introdución dos monitores de cor, o modo escuro continuou existindo. Por que é así?
Hai dúas razóns principais polas que hoxe cada segunda persoa ten présa por engadir un tema escuro á súa aplicación. Primeiro de todo: os ordenadores están en todas partes. Por onde miremos hai algún tipo de pantalla. Usamos os nosos dispositivos móbiles desde a mañá ata ben entrada a noite. A presenza dun modo escuro reduce a fatiga ocular cando estás na cama antes de durmir por "última vez" desprazándose polo teu feed social. redes. (Se es coma min, "última vez" pode significar un desprazamento de 3 horas . Modo escuro? Sí por favor! )
Outra razón son as novas tecnoloxías de produción de pantallas. Os modelos emblemáticos das grandes empresas - Apple, Google, Samsung, Huawei - están todos equipados con pantallas OLED, que, a diferenza das pantallas LCD, non precisan retroiluminación. E é unha boa noticia para a túa batería. Imaxina que estás vendo unha imaxe dun cadrado negro no teu teléfono; cunha pantalla LCD, a luz de fondo iluminará toda a pantalla aínda que a maior parte sexa negra. Pero ao ver a mesma imaxe nunha pantalla OLED, os píxeles que forman o cadrado negro simplemente desactivan. Isto significa que non consomen enerxía en absoluto.
Este tipo de pantallas fan que os modos escuros sexan moito máis interesantes. Ao usar unha interface escura, podes prolongar significativamente a duración da batería do teu dispositivo. . Os modos escuros, por suposto, van da man dos cambios na IU, así que imos revisar o noso coñecemento!
Modos escuros 101
En primeiro lugar: "escuro" non é o mesmo que "negro". Non tente substituír un fondo branco por outro negro, xa que isto fará imposible o uso de sombras. Un deseño coma este será súper plano (de mala maneira).
É importante ter en conta os principios básicos de sombreado/iluminación. Os obxectos que están máis elevados deberían ser máis claros na sombra, simulando a iluminación e a sombra da vida real. Isto facilita a distinción entre os distintos compoñentes e a súa xerarquía.
Dous cadrados grises idénticos cunha sombra, un nun fondo 100 % negro, o outro no #121212. A medida que o obxecto se eleva, faise un ton de gris máis claro.
Nun tema escuro, aínda podes traballar coa túa cor base normal sempre que o contraste sexa correcto. Expliquemos cun exemplo.
Nesta interface, a acción principal é o botón azul grande na barra inferior. Non hai ningún problema en canto ao contraste ao cambiar entre o modo claro ou escuro, o botón segue chamando a atención, a icona é clara e, en xeral, todo está ben.
Cando a mesma cor se usa de diferentes xeitos, por exemplo no texto, haberá problemas. Proba a usar un ton (moito) menos saturado da cor principal ou busca outras formas de incorporar as cores da marca á interface.
Esquerda: o vermello sobre o negro parece mal. Dereito: reduce a saturación e queda todo ben. - aprox. tradución
O mesmo ocorre con calquera outra cor forte que puidese usar, como as cores de advertencia ou de erro. Google usa unha superposición de capa branca do 40 % encima da cor de erro predeterminada ao cambiar ao modo escuro. Este é un punto de partida bastante bo xa que mellorará os niveis de contraste para que coincidan cos estándares AA. Por suposto, sempre podes cambiar a configuración como desexes, pero asegúrate de comprobar os niveis de contraste. Por certo, unha ferramenta útil para este fin é o complemento Sketch - , que mostra exactamente canto contraste hai entre 2 capas.
E o texto?
Aquí todo é sinxelo: nada debe ser 100% negro e 100% branco e viceversa. O branco reflicte ondas luminosas de todas as lonxitudes de onda, o negro absorbe. Se colocas texto 100 % branco sobre un fondo 100 % negro, as letras reflectirán a luz, mancharán e serán menos lexibles, o que afectará negativamente á lexibilidade.
O mesmo ocorre cun fondo 100 % branco, que reflicte demasiada luz para centrarse completamente nas palabras. Proba a suavizar un pouco a cor branca, usa gris claro para fondos e texto sobre fondos negros. Isto reducirá a fatiga ocular, previndo
O modo escuro está aquí e non desaparecerá
O tempo que pasamos diante das pantallas está en constante crecemento e cada novo día aparecen novas pantallas nas nosas vidas, desde que espertamos ata que nos durmimos. Este é un fenómeno bastante novo; os nosos ollos aínda non están afeitos a este aumento do tempo ante a pantalla a última hora da noite. Aquí é onde entra en xogo o modo escuro. Coa introdución desta función en macOS e Material Design (e moi probablemente en iOS), cremos que tarde ou cedo pasará a ser a predeterminada en todas as aplicacións, tanto móbiles como de escritorio. E é mellor estar preparado para iso!
O único motivo para non implementar o modo escuro é cando estás absolutamente seguro ao 100% de que a túa aplicación se usa exclusivamente á luz do día. Non obstante, isto non ocorre a miúdo.
Paga a pena mencionar algunhas cousas que requirirán especial atención á hora de implementar o modo escuro, máis aló dos principios básicos resumidos anteriormente.
En canto á accesibilidade, o modo escuro non é o máis cómodo, xa que o contraste é xeralmente menor, o que á súa vez non mellora en absoluto a lexibilidade.
Pero imaxina que te estás preparando para a cama, queres de verdade durmir, pero xusto antes de durmir, lembras que tes que enviar a alguén unha mensaxe super importante que non pode esperar nin unha noite. Colles o teu teléfono, acéndeo e AAAAAAH... o fondo claro do teu iMessage manterache esperto durante outras 3 horas. Aínda que o texto claro nun fondo escuro non se considera o máis accesible, ter un modo escuro neste segundo aumentar a comodidade nun millón. Todo depende da situación na que se atope o usuario neste momento.
Por iso pensamos modo escuro automático unha idea tan chula. Acende pola noite e apágase pola mañá. O usuario nin sequera ten que pensar niso, o que é moi cómodo. Twitter fixo un gran traballo coa súa configuración de modo escuro. Ademais, teñen só un modo escuro e un modo aínda máis escuro para todas estas pantallas OLED, aforrando batería e todo o relacionado con el. É importante ter en conta aquí: dálle ao usuario a oportunidade de cambiar manualmente cando queira: non hai nada peor que cambiar automaticamente a interface sen a posibilidade de volver atrás.
Twitter ten un modo escuro automático que se acende pola noite e se apaga pola mañá.
Ademais, ao desenvolver un tema, vale a pena ter en conta que algunhas cousas simplemente non se poden escurecer.
Toma un editor de texto como Páxinas. Podes escurecer a interface, pero a folla en si será sempre branca, simulando unha folla de papel real.
Páxinas co modo escuro activado
O mesmo ocorre con todo tipo de editores de creación de contido, como Sketch ou Illustrator. Aínda que a interface pódese escurecer, a mesa de traballo coa que traballas sempre estará branca por defecto.
Debuxa en modo escuro e aínda tes unha mesa de traballo branca brillante.
Polo tanto, independentemente da aplicación, cremos que os modos escuros serán nativos do sistema operativo que use, o que significa que é mellor prepararse para o futuro. estará escuro.
Se queres obter máis información sobre o desenvolvemento de interfaces de usuario escuras, asegúrate de consultar as directrices , esta foi a nosa principal fonte de información para este artigo.
Fonte: www.habr.com