Ou o que lembrar ao desenvolver o modo escuro de um aplicativo ou site
O ano de 2018 mostrou: modos escuros estão se aproximando. Agora, quando já estamos a meio caminho de 2019, podemos afirmar com confiança: eles estão aqui, e estão em todo lugar.
Comecemos pelo fato de que o modo escuro não é uma nova conceito. Ele tem sido utilizado há bastante tempo. De fato, antigamente, era praticamente o único usado: monitores eram da variedade "verde sobre preto", mas isso ocorria porque o revestimento fluorescente interno emitia uma luz esverdeada quando exposto à radiação.
Mas mesmo após a adoção de monitores coloridos, o modo escuro continuou a existir. Por que isso acontece?
Existem duas principais razões que explicam por que hoje em dia cada segundo está apressado para adicionar um tema escuro ao seu aplicativo. Em primeiro lugar: computadores estão por toda parte. Olhando ao redor, sempre há uma tela de algum tipo. Usamos nossos dispositivos móveis da manhã até tarde da noite. Ter um modo escuro reduz a carga sobre os olhos quando você está na cama, rolando a rede social pela "última vez" antes de dormir. (Se você é como eu, a "última vez" pode significar uma rolagem de 3 horas. . Modo escuro? Sim, por favor! )
Outro motivo é as novas tecnologias de produção de displays. Os modelos principais das grandes empresas — Apple, Google, Samsung, Huawei — todos vêm com telas OLED, que, ao contrário dos displays LCD, não exigem retroiluminação. E isso é realmente uma boa notícia para a sua bateria. Imagine que você está visualizando uma imagem de um quadrado preto no seu telefone; com um display LCD, a retroiluminação iluminaria toda a tela, mesmo que a maior parte estivesse preta. Mas ao visualizar a mesma imagem em um display OLED, os pixels que compõem o quadrado preto simplesmente se desligam. Portanto, não consomem energia.
Esses tipos de displays tornam os modos escuros muito mais interessantes. Usando uma interface escura, você pode prolongar significativamente a vida útil da bateria do seu dispositivo. . Modos escuros, claro, andam de mãos dadas com alterações na interface do usuário, então vamos refrescar nosso conhecimento!
Modos escuros 101
Antes de tudo: "escuro" não significa "preto". Não tente substituir o fundo branco por preto, pois isso tornará impossível usar sombras. Um design assim ficará super plano (no sentido ruim).
É importante ter em mente os princípios básicos de sombreamento/iluminação. Objetos que estão mais elevados devem ser mais claros na sombra, imitando iluminação e sombreamento reais. Dessa forma, é mais fácil diferenciar os diversos componentes e sua hierarquia.
Dois quadrados cinzentos iguais com sombra, um em fundo preto 100%, o outro em #121212. Ao ser levantado, o objeto adquire um tom de cinza mais claro.
Em um tema escuro, ainda é possível trabalhar com sua cor base usual, desde que o contraste esteja em ordem. Vamos explicar com um exemplo.
Nesta interface, a ação principal é um grande botão azul na parte inferior. Não há problema em termos de contraste ao alternar entre o modo claro ou escuro, o botão ainda chama a atenção, o ícone é claro, no geral, tudo está ótimo.
Quando a mesma cor é usada de maneira diferente, por exemplo, no texto — surgirão problemas. Tente usar um tom (muito) menos saturado da cor principal ou busque outras maneiras de incluir as cores da marca na interface.
À esquerda: vermelho em preto parece ruim. À direita: diminuímos a saturação — e tudo fica bom. — nota do tradutor.
O mesmo se aplica a todas as outras cores saturadas que você poderia ter usado, como por exemplo, cores de aviso ou erro. O Google utiliza uma sobreposição de camada branca a 40% sobre a cor padrão de erro em suas ao alternar para o modo escuro. Isso é um bom ponto de partida, pois melhora os níveis de contraste para atender aos padrões AA. Claro, você pode sempre ajustar as configurações conforme sua conveniência, mas não se esqueça de verificar os níveis de contraste. Aliás, uma ferramenta útil para isso é o plugin para Sketch — , que mostra exatamente quanto contraste existe entre 2 camadas.
E quanto ao texto?
Aqui, tudo é simples: nada deve ser 100% preto em um fundo 100% branco e vice-versa. O branco reflete ondas de luz de todos os comprimentos, enquanto o preto absorve. Se você colocar texto 100% branco em um fundo 100% preto, as letras refletirão a luz, borrando-se e tornando-se menos legíveis, o que afetará negativamente a legibilidade.
O mesmo se aplica a um fundo 100% branco, que reflete luz demais para que possamos nos concentrar completamente nas palavras. Experimente suavizar um pouco o branco, utilizando um cinza claro para fundos e textos em fundos pretos. Isso reduzirá a carga sobre os olhos, prevenindo
O modo escuro não está indo a lugar nenhum.
A quantidade de tempo que passamos em telas está crescendo constantemente, e a cada novo dia, novas telas entram em nossas vidas, desde o momento em que acordamos até o momento em que vamos dormir. Este é um fenômeno relativamente novo, e nossos olhos ainda não se acostumaram a essa crescente quantidade de horas em frente à tela à noite. É aqui que o modo escuro entra em ação. Após a introdução dessa função no macOS e no Material Design (e, provavelmente, no iOS), acreditamos que, mais cedo ou mais tarde, ele se tornará o padrão em todos os aplicativos, tanto para dispositivos móveis quanto para desktop. E é melhor estarmos preparados!
A única razão para não implementar o modo escuro é quando você tem 100% de certeza de que seu aplicativo será usado exclusivamente à luz do dia. Isso, na verdade, é raro.
Vale mencionar algumas coisas que exigirão atenção especial ao implementar o modo escuro, além dos princípios básicos que foram resumidos anteriormente.
Do ponto de vista da acessibilidade, o modo escuro não é o mais confortável, pois o contraste, em geral, é mais baixo, o que não melhora a legibilidade.
Mas imagine que você está se preparando para dormir, está muito cansado, mas logo antes de adormecer, você se lembrou que precisa enviar uma mensagem super importante para alguém, que não pode esperar nem uma noite. Você pega seu telefone, o liga e AAAAHHH… o fundo claro do seu iMessage não permitirá que você durma por mais 3 horas. Enquanto o texto claro em um fundo escuro não é considerado o mais acessível, ter um modo escuro neste momento aumentaria o conforto em um milhão. Tudo depende da situação em que o usuário se encontra neste momento.
É por isso que acreditamos que modo escuro automático essa ideia incrível. Ele é ativado à noite e desativado pela manhã. O usuário nem precisa pensar nisso, o que é muito conveniente. O Twitter fez um ótimo trabalho com as configurações do modo escuro. Além disso, eles têm tanto um modo escuro simples quanto um modo ainda mais escuro para todas essas telas OLED, economizando bateria e tudo mais relacionado. É importante notar: permita que o usuário mude manualmente quando desejar: não há nada pior do que a mudança automática da interface sem a opção de voltar atrás.
O Twitter tem um modo escuro automático que é ativado à noite e desativado pela manhã.
Ao desenvolver o tema, vale a pena ter em mente que algumas coisas simplesmente não podem ser feitas em uma tonalidade escura.
Pegue um editor de texto, por exemplo, o Pages. Você pode fazer a interface escura, mas a própria folha sempre será branca, imitando uma folha de papel real.
Pages com o modo escuro ativado
O mesmo se aplica a todos os tipos de editores de criação de conteúdo, como Sketch ou Illustrator. Embora a interface possa ser escura, a prancheta com a qual você trabalha sempre será branca por padrão.
Sketch no modo escuro e a prancheta branca ainda brilhante.
Portanto, independentemente do aplicativo, acreditamos que os modos escuros se tornarão nativos para o sistema operacional que você está usando, e por isso é melhor se preparar para o futuro. ele será escuro.
Se você quiser saber mais sobre o desenvolvimento de interfaces escuras, não deixe de conferir as diretrizes , que foi nossa principal fonte de informação para este artigo.
Fonte: habr.com
