Você já deve ter passado por essa situação: antes de dormir e já com as luzes apagadas, você resolve dar uma última checada no celular para ver se alguém te enviou alguma mensagem ou até mesmo para se distrair até pegar no sono. Então, ao abrir um app qualquer, o clarão vindo da tela te deixa cego por alguns segundos e a alternativa é colocar o brilho no mínimo. Pois é, o modo noturno chegou com tudo para resolver esse problema.
O crescente aumento do tempo de uso de dispositivos eletrônicos (principalmente em tempos de pandemia), e o crescente aumento da preocupação com a UX (User Experience), tem levado as empresas de software a desenvolverem o modo noturno, que auxilia quem já está cansado de olhar para uma tela o dia todo ou quem faz esse uso em ambientes escuros.
Como funciona e como criar um aplicativo mobile com esse recurso, é o que veremos a seguir.
Saiba mais: os aplicativos mais baixados em 2019 e 2020.
O que é o modo noturno?
O modo noturno nada mais é que uma versão da interface onde as cores predominantes possuem tons escuros e próximas do preto, com alguns de destaques em cores claras. O objetivo do modo noturno é diminuir a luz emitida pela tela do dispositivo utilizado. Isso nos traz dois benefícios diretos:
- Redução do uso da bateria: o brilho é o principal fator que influencia o gasto de energia de telas OLED, que representam cerca de 61% do mercado global de displays, segundo o Korean Herald.
- Conforto visual: lembra da situação mencionei no início do artigo? Então, com cores escuras predominantes na tela, sua visão não é surpreendida com um brilho excessivo em ambientes escuros.
Como fazer o modo noturno de um app?
Antes de explicar o processo de criação do modo noturno, é importante destacar que em alguns casos esse modo é o padrão da plataforma, enquanto em outros tem-se como opcional a ativação ou não dessa função.
A UX é a principal influenciadora na tomada de decisão de quando é necessário a elaboração de um modo noturno. O design de UX é etapa onde toda essa questão é analisada. Perguntas como “ usuário utiliza nosso app de forma relevante à noite?” e “nosso público-alvo faz uso contínuo de dispositivos eletrônicos durante todo dia?” devem ser levadas em consideração quanto a viabilidade da elaboração dessa funcionalidade, seja ela opcional ou padrão.
É importante que o objetivo do produto seja mantido, por isso, atenção aos detalhes é algo fundamental. O equilíbrio entre emoção passada às pessoas ao utilizar o produto e o conforto, e até o apelo visual dado pelo modo noturno, são talvez os maiores desafios desse processo.
Características
A elaboração de uma UI (Interface do usuário) que possui a aparência de um modo noturno requer algumas características que podem influenciar em questões como legibilidade e conforto visual.
Não adianta muito se, apesar de bonita, uma interface dificultar a leitura de alguns elementos e ferir padrões de acessibilidade que devem sempre ser considerados.
Por isso é sempre bom dar umas conferidas nas diretrizes de acessibilidade.
Esquema de cores base
A principal característica observável em interfaces noturnas é a predominância de tons escuros, próximos do preto ou o próprio preto. É comum encontrar em alguns apps tons de azul escuro ou outras variações.
Essas cores que “dominam” a maior parte da tela são chamadas de cores base (ou básicas).
Um esquema de cores base é constituído, em média, de 4 cores:
- Cor de fundo
- Cor de primeiro plano
- Cor do texto principal
- Cor do texto secundário
Em casos em que é possível ativar e desativar o modo noturno, fazer uma relação do esquema de cores básico do modo claro com o modo noturno, facilita todo esse processo (tanto para os designers quanto para os desenvolvedores!).
Os textos também são um importante fator, afinal todos os elementos devem estar legíveis.
A dica é não utilizar branco (#FFFFFF) para textos em um fundo preto (#000000), isso porque o texto terá sua luz refletida tornando a leitura mais difícil. Portanto, podemos usar cores próximas do branco e ter uma experiência de leitura mais agradável.
Substituição da representação da elevação
A partir de um esquema de cores básico, podemos representar itens primeiro plano ou que esteja disponível para seleção (clicáveis) por exemplo. No esquema de cores claro, podemos representar um item em primeiro plano com a utilização de sombras. Essa impressão de elevação nos dá a sensação de hierarquia sob os demais elementos da tela.
Mas e no modo noturno? Bem, sem luz, sem sombras, então esse conceito de elevação é alterado para que tons de cinza ilustrem quais itens estão “em cima” de outros. Então, quanto mais claro, mais acima dos demais itens aquele elemento se encontra.
Em casos em que o item se encontra em um fundo não tão escuro, pode-se fazer uso de sombras, mas lembre-se que elas serão poucas ou quase nunca visíveis a depender do contexto de uso do seu app.
Cores de destaque suavizadas e dessaturadas
O uso das cores em destaque no modo noturno é uma importante questão a ser equilibrada com os demais elementos da UI.
Além do esquema de cores básico, temos também o esquema de cores de destaque, que pode ter em média de 3 cores, sendo elas a cor primária, uma cor secundária e uma cor de alerta/erro por exemplo.
No modo noturno, todo cuidado com acessibilidade é pouco, isso porque é comum apps fazerem uso de cores vivas e saturadas no modo claro e, ao passar para o modo noturno, se não adaptadas. Isso pode gerar tanto desconforto visual como também violar diretrizes de acessibilidade.
Essa adaptação é feita ao aumentar o brilho e/ou dessaturar as cores de destaque. Com isso temos um equilíbrio visual, com cores suaves e que não vibram, atendendo o objetivo de gerar um conforto visual maior ao usuário.
Modo noturno ou Modo escuro?
É comum que, ao pesquisar ambos os termos, você possa encontrar resultados similares. O que ocorre é que não há de fato uma padronização de qual o termo a ser utilizado para essa função. Algumas empresas adotam “modo noturno” para retratar essa funcionalidade quando a mesma é opcional e “modo escuro” quando adotada por padrão.
Há também o caso de alguns dispositivos que utilizam o termo “modo noturno” para indicar a função de filtro de luz azul, com o intuito de causar menos cansaço visual aos usuários, mas não há alteração no esquema de cores da UI.
Outra situação é do termo em inglês ser, na maioria das vezes, tratado como dark theme ou dark mode e mais raramente como night mode. E isso pode acabar influenciando em qual termo utilizar em português.
Conclusão
O modo noturno chegou e veio pra ficar. O aumento do uso de dispositivos no dia a dia e o cansaço visual resultado disso sempre estará presente nas nossas vidas.
A crescente adoção nos mais diversos sites, apps e sistemas confirmam que o futuro talvez seja sombrio, mas de um jeito bom.
E você? vai se juntar ao lado sombrio da força dos apps? Me conte nos comentários a sua impressão sobre o modo noturno!
