Ou o que você deve ter em mente ao desenvolver um modo escuro para um aplicativo ou site
2018 mostrou: modos escuros a caminho. Agora que estamos no meio de 2019, podemos dizer com confiança: eles estão aqui e estão em toda parte.
Um exemplo de um monitor verde-preto antigoPara começar, o modo escuro não é um conceito novo. Tem sido utilizado há algum tempo. E uma vez, de fato, foi usado apenas por um longo tempo: os monitores eram "verde-pretos", mas apenas porque o revestimento luminescente no interior emitia um brilho esverdeado quando exposto à radiação.
Mas, mesmo após a introdução de monitores coloridos, o modo escuro continuou ativo. Porque assim?
Existem dois motivos principais que explicam por que cada segunda pessoa se apressa em adicionar um tema sombrio à sua aplicação hoje. Primeiro de tudo: os computadores estão em toda parte. Em todo lugar que olhamos, há algum tipo de tela. Usamos nossos dispositivos móveis de manhã até tarde da noite. A presença de um modo escuro reduz a carga nos olhos quando você está na cama antes de ir para a cama "pela última vez" folheando o soc. rede. (Se você se parece comigo, "última vez" pode significar uma rolagem de 3 horas do
R / EngineeringPorn . Modo escuro? Sim, por favor!)
Outro motivo é a nova tecnologia de exibição. Os principais modelos de grandes empresas - Apple, Google, Samsung, Huawei - estão todos equipados com telas OLED, que, diferentemente das telas de LCD, não exigem iluminação de fundo. E esta é realmente uma boa notícia para a sua bateria. Imagine que você está visualizando uma imagem quadrada preta no seu telefone; com uma tela LCD, a luz de fundo iluminará a tela inteira, embora a maior parte seja preta. Mas, ao visualizar a mesma imagem no visor OLED, os pixels dos quais o quadrado preto consiste simplesmente desligam. E isso significa que eles não consomem energia.
Esses tipos de telas tornam os modos escuros muitas vezes mais interessantes. Usando uma interface escura, você pode aumentar significativamente a vida útil da bateria do seu dispositivo. Confira os fatos e números do Android Dev Summit em novembro passado para ver por si mesmo . Os modos escuros, é claro, andam de mãos dadas com as alterações na interface do usuário, então vamos atualizar nosso conhecimento!
Modos escuros 101
Primeiro de tudo: "escuro" não é igual a "preto". Não tente substituir o fundo branco por preto, pois isso tornará impossível o uso de sombras. Um design semelhante será super plano (de uma maneira ruim).
É importante ter em mente os princípios básicos de sombreamento / iluminação. Objetos mais elevados devem ficar mais claros na sombra, simulando iluminação e sombreamento reais. Assim, é mais fácil distinguir entre diferentes componentes e sua hierarquia.
Dois quadrados igualmente cinzentos com uma sombra, um em um fundo 100% preto e outro no # 121212. Ao levantar, o objeto adquire um tom mais claro de cinza.
Em um tema escuro, você ainda pode trabalhar com a cor principal habitual, se o contraste for bom. Vamos ilustrar com um exemplo.
Nesta interface, a ação principal é o grande botão azul no painel inferior. Não há problema em termos de contraste ao alternar entre o modo claro ou escuro, o botão ainda atrai a atenção, o ícone é claro, em geral, está tudo bem.
Quando a mesma cor é usada de maneira diferente, por exemplo no texto, haverá problemas. Tente usar um tom (muito) menos saturado da cor de base ou procure outras maneiras de incorporar as cores da marca na interface.
Esquerda: vermelho no preto parece ruim. Certo: reduza a saturação - e tudo fica bom. - aprox. perev.
O mesmo vale para todas as outras cores saturadas que você poderia usar, como cores de aviso ou erros. O Google usa uma sobreposição de 40% de branco sobre a cor do erro padrão nas diretrizes de design de materiais para mudar para o modo escuro. Este é um bom ponto de partida, pois melhorará os níveis de contraste para atender aos padrões de AA. Obviamente, você sempre pode alterar as configurações como desejar, mas não se esqueça de verificar os níveis de contraste. A propósito, uma ferramenta útil para esse fim é o plug-in Sketch- Stark , que mostra com precisão quanto contraste há entre as duas camadas.
E o texto?
Tudo é simples aqui: nada deve ser 100% preto, 100% branco e vice-versa. O branco reflete ondas de luz de todos os comprimentos, o preto - absorve. Se você colocar texto 100% branco em um fundo 100% preto, as letras refletirão luz, manchas e se tornarão menos legíveis, o que afetará negativamente a legibilidade.
O mesmo vale para um fundo 100% branco que reflete muita luz para focar totalmente nas palavras. Tente suavizar um pouco a cor branca, use cinza claro para fundos e textos em fundos pretos. Isso reduzirá a tensão nos olhos, impedindo- os de sobrecarregar.
O modo escuro aqui não vai desaparecer
A quantidade de tempo que passamos nas telas está em constante crescimento e, a cada novo dia, novas telas aparecem em nossas vidas, desde o momento em que acordamos até adormecermos. Esse é um fenômeno relativamente novo, nossos olhos ainda não estão acostumados a esse aumento de tempo na tela no final da noite. É aqui que o modo escuro entra em jogo. Depois de introduzir essa função no macOS e no Design de materiais (e, provavelmente, no iOS), acreditamos que mais cedo ou mais tarde ela será padronizada em todos os aplicativos, móveis e computadores. E é melhor estar preparado para isso!
O único motivo para não introduzir o modo escuro é quando você tem 100% de certeza de que seu aplicativo é usado exclusivamente à luz do dia. Isso, no entanto, acontece com pouca frequência.
Vale mencionar algumas coisas que requerem atenção especial na implementação do regime sombrio, além dos princípios básicos resumidos anteriormente.
Do ponto de vista da acessibilidade, o modo escuro não é o mais conveniente, pois o contraste geralmente é mais baixo, o que, por sua vez, não melhora a legibilidade.
Fonte
Mas, imagine que você está se preparando para dormir, realmente quer dormir, mas logo antes de adormecer, você lembrou que precisa enviar a alguém uma mensagem super importante que não pode esperar nem uma noite. Você pega o telefone, liga-o e AAAAAA ... o fundo claro do seu iMessage não permitirá que você durma por mais 3 horas. Embora o texto claro contra um fundo escuro não seja considerado o mais acessível possível, a presença de um modo escuro neste segundo aumentaria sua conveniência em um milhão. Tudo depende da situação em que o usuário está atualmente.
É por isso que consideramos o modo escuro automático uma idéia interessante. Acende-se à noite e apaga-se pela manhã. O usuário nem precisa pensar sobre isso, o que é muito conveniente. O Twitter fez um ótimo trabalho com as configurações do modo escuro. Além disso, eles têm apenas um modo escuro e um modo ainda mais escuro para todas essas telas OLED, economizando bateria e tudo relacionado a ela. É importante observar aqui: deixe o usuário alternar manualmente quando quiser: não há nada pior do que alterar automaticamente a interface sem a capacidade de retornar.
O Twitter tem um modo escuro automático que liga à noite e desliga pela manhã.
Além disso, ao desenvolver um tema, deve-se ter em mente que algumas coisas simplesmente não podem ser obscurecidas.
Tome um editor de texto, como páginas. Você pode escurecer a interface, mas a própria folha sempre estará branca, simulando uma folha de papel real.
Páginas com o modo escuro ativadoO mesmo vale para todos os tipos de editores de conteúdo, como Sketch ou Illustrator. Embora a interface possa ficar escura, a placa de montagem com a qual você está trabalhando sempre será branca por padrão.
O esboço está no modo escuro e ainda possui uma prancheta branca brilhante.
Portanto, independentemente do aplicativo, acreditamos que os modos escuros se tornarão nativos do sistema operacional que você está usando, o que significa que é melhor se preparar para o futuro com antecedência, pois estará escuro.
Se você quiser saber mais sobre o desenvolvimento de interfaces escuras, verifique as diretrizes de Design de materiais , esta foi a nossa principal fonte de informações para este artigo.