Ou o que ter em mente ao desenvolver um modo escuro para um aplicativo ou site
2018 mostrou que os modos escuros estão a caminho. Agora que estamos na metade de 2019, podemos dizer com confiança: eles estão aqui e em toda parte.
Vamos começar com o fato de que o modo escuro não é um conceito novo. Já é usado há muito tempo. E era uma vez, de facto, durante muito tempo, esta era a única coisa que usavam: os monitores eram do tipo “verde sobre preto”, mas apenas porque o revestimento luminescente no seu interior emitia um brilho esverdeado quando exposto à radiação. .
Mas mesmo após a introdução dos monitores coloridos, o modo escuro continuou a existir. Porque isto é assim?
Existem dois motivos principais que explicam por que hoje cada segunda pessoa tem pressa em adicionar um tema sombrio ao seu aplicativo. Em primeiro lugar: os computadores estão por toda parte. Para onde quer que olhemos, há algum tipo de tela. Usamos nossos dispositivos móveis de manhã até tarde da noite. A presença de um modo escuro reduz o cansaço visual quando você está na cama antes de ir para a cama pela “última vez” navegando pelo seu feed social. redes. (Se você for como eu, "última vez" pode significar uma rolagem de 3 horas . Modo escuro? Sim por favor! )
Outra razão são as novas tecnologias de produção de displays. Os modelos carro-chefe de grandes empresas - Apple, Google, Samsung, Huawei - são todos equipados com telas OLED, que, ao contrário das telas LCD, não requerem retroiluminação. E isso é uma notícia realmente boa para sua bateria. Imagine que você está visualizando a imagem de um quadrado preto em seu telefone; com um LCD, a luz de fundo iluminará toda a tela, mesmo que a maior parte dela seja preta. Mas ao visualizar a mesma imagem em um display OLED, os pixels que compõem o quadrado preto são simplesmente desligados. Isso significa que eles não consomem energia alguma.
Esses tipos de tela tornam os modos escuros muito mais interessantes. Ao usar uma interface escura, você pode prolongar significativamente a vida útil da bateria do seu dispositivo. . É claro que os modos escuros andam de mãos dadas com as mudanças na interface do usuário, então vamos aprimorar nosso conhecimento!
Modos Escuros 101
Em primeiro lugar: “escuro” não é a mesma coisa que “preto”. Não tente substituir um fundo branco por um preto, pois isso impossibilitará o uso de sombras. Um design como esse será super plano (de um jeito ruim).
É importante ter em mente os princípios básicos de sombreamento/iluminação. Objetos mais elevados devem ter sombra mais clara, simulando iluminação e sombreamento da vida real. Isto torna mais fácil distinguir entre os diferentes componentes e sua hierarquia.
Dois quadrados cinza idênticos com uma sombra, um sobre fundo 100% preto e outro sobre #121212. À medida que o objeto sobe, ele adquire um tom mais claro de cinza.
Em um tema escuro, você ainda pode trabalhar com a cor base normal, desde que o contraste esteja bom. Vamos explicar com um exemplo.
Nesta interface, a ação principal é o grande botão azul na barra 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 e no geral está tudo bem.
Quando a mesma cor é usada de maneiras diferentes, por exemplo em texto, haverá problemas. Tente usar um tom (muito) menos saturado da cor principal ou procure outras maneiras de incorporar as cores da marca na interface.
Esquerda: Vermelho sobre preto parece ruim. Certo: reduza a saturação e tudo ficará bem. - Aproximadamente. tradução
O mesmo se aplica a quaisquer outras cores fortes que você possa ter usado, como cores de aviso ou de erro. O Google usa uma sobreposição de camada branca de 40% sobre a cor de erro padrão em seu ao mudar para o modo escuro. Este é um bom ponto de partida, pois melhorará os níveis de contraste para corresponder aos padrões AA. É claro que você sempre pode alterar as configurações conforme achar necessário, mas certifique-se de verificar os níveis de contraste. A propósito, uma ferramenta útil para esse propósito é o plugin Sketch - , que mostra exatamente quanto contraste existe entre 2 camadas.
E o texto?
Tudo é simples aqui: nada deve ser 100% preto e 100% branco e vice-versa. O branco reflete ondas de luz de todos os comprimentos de onda, o preto absorve. Se você colocar texto 100% branco em um fundo 100% preto, as letras refletirão a luz, mancharão 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. Experimente suavizar um pouco a cor branca, use cinza claro para fundos e texto em fundos pretos. Isto reduzirá o cansaço visual, evitando
O modo escuro está aqui e não vai desaparecer
A quantidade de tempo que passamos em frente às telas cresce constantemente e, a cada novo dia, novas telas aparecem em nossas vidas, desde o momento em que acordamos até adormecermos. Este é um fenômeno relativamente novo; nossos olhos ainda não estão acostumados com esse aumento no tempo de tela tarde da noite. É aqui que o modo escuro entra em ação. Com a introdução deste recurso 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 móveis quanto desktop. E é melhor estar preparado para isso!
A única razão para não implementar o modo escuro é quando você tem 100% de certeza de que seu aplicativo é usado exclusivamente à luz do dia. Isto, no entanto, não acontece com frequência.
Vale mencionar algumas coisas que exigirão atenção especial na implementação do modo escuro, além dos princípios básicos resumidos anteriormente.
Em termos de acessibilidade, o modo escuro não é o mais conveniente, já que o contraste geralmente é menor, o que por sua vez não melhora em nada a legibilidade.
Mas imagine que você está se preparando para dormir, você quer muito dormir, mas logo antes de adormecer você lembra que precisa mandar para alguém uma mensagem super importante que não pode esperar nem uma noite. Você pega seu telefone, liga-o e AAAAAAH... o fundo claro do seu iMessage irá mantê-lo acordado por mais 3 horas. Embora o texto claro em um fundo escuro não seja considerado o mais acessível, ter um modo escuro neste segundo seria aumentar a conveniência em um milhão. Tudo depende da situação em que o usuário se encontra no momento.
É por isso que pensamos modo escuro automático uma ideia tão legal. Liga à noite e desliga 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 possuem apenas um modo escuro e um modo ainda mais escuro para todas essas telas OLED, economizando bateria e tudo relacionado a ele. É importante observar aqui: dê ao usuário a oportunidade de mudar manualmente sempre que quiser: não há nada pior do que mudar automaticamente a interface sem a possibilidade de voltar atrás.
O Twitter possui um modo escuro automático que liga à noite e desliga pela manhã.
Além disso, ao desenvolver um tema, vale a pena ter em mente que algumas coisas simplesmente não podem ser escurecidas.
Pegue um editor de texto como o Pages. Você pode escurecer a interface, mas a folha em si sempre ficará branca, simulando uma folha de papel real.
Páginas com modo escuro ativado
O mesmo vale para todos os tipos de editores de criação de conteúdo, como Sketch ou Illustrator. Embora a interface possa ficar escura, a prancheta com a qual você trabalha sempre será branca por padrão.
Esboce no modo escuro e ainda tenha uma prancheta branca brilhante.
Portanto, independentemente do aplicativo, acreditamos que os modos escuros serão nativos do sistema operacional que você usa, o que significa que é melhor se preparar para o futuro. estará escuro.
Se você quiser saber mais sobre o desenvolvimento de UIs escuras, verifique as diretrizes , esta foi nossa principal fonte de informação para este artigo.
Fonte: habr.com