Como personalizar sua Dark UI
Dark UI não precisa se resumir em apenas colocar a cor preta no background do seu aplicativo
O momento
Sabe aquele momento em que você está desenvolvendo a Interface Humana (ou de Interface de Usuário) do seu aplicativo etc., mas quando chega na hora de definir como ela vai se mostrar ao mundo no famigerado e tão querido Dark Mode, vem aquele bloqueio criativo que só te limita a querer diminuir o brilho das cores ou simplesmente deixar tudo preto? Então, este artigo aqui é para você, desenvolvedor que busca horizontes para transformar uma Dark UI em algo mais original e atrativo, que vai deixar a Experiência Humana dos seus projetos ainda mais agradável.
O processo criativo
Aqui, eu vou compartilhar um pouco do meu processo criativo no design da interface humana em modo escuro para o app Kosmos, um projeto que co-desenvolvi na Apple Developer Academy, do qual eu trabalhei liderando na área de UX/UI do projeto. O processo resume em alguns passos, o caminho percorrido desde a concepção no Sketch, à aplicação no Xcode, utilizando SwiftUI.
Antes de tudo: é realmente necessário criar uma Dark UI?
Eu não vou me aprofundar muito nesse quesito, então vou começar com uma ótima citação do Willian Matiola em Dark UI: tudo o que você precisa saber sobre interfaces escuras, que resume bem este tópico:
"Independente se você vai desenvolver uma interface escura ou uma interface clara, a decisão nunca deve ser feita apenas considerando o apelo estético que cada uma carrega. Embora a tentação de fazer uma Dark UI apenas por achar bonito ou por querer seguir uma tendência seja mais forte, devemos tomar nossas decisões avaliando alguns pontos fundamentais que afetam diretamente o usuário[…]"
Ou seja, quais as motivações que te levam a querer implementar uma Dark UI no seu projeto? Os usuários utilizarão seu produto à noite? A legibilidade e contraste da sua interface afetarão de maneira negativa a experiência humana com seu app, caso desenvolva a interface no modo escuro, ou seja, não causarão fadiga visual caso possua muitos textos? No texto do Willian Matiola, todas essas questões essenciais são abordadas, então caso ainda esteja decidindo sobre a necessidade de criar uma Dark UI, recomendo dar uma olhada no artigo dele também!
"Mise en place" da sua UI
Ok, agora você já fez suas análises e viu que seria realmente legal que o seu aplicativo tivesse uma Dark UI, então vamos começar a planejar uma interface original, que agregue ao projeto e à experiência humana.
Primeiramente, é interessante que você faça um esquema simples de cores. Desse modo, você consegue experimentar com mais eficiência, quais cores se encaixam melhor no seu projeto, antes mesmo de colocá-las na interface.
Dark UI ≠ Fundo preto
Se você acha que apenas colocar um fundo preto na sua interface já é o primeiro passo para uma boa Dark UI, você está indo para um caminho que vai deixar sua interface escura, mas não necessariamente isso significa que ela é boa.
O sonho de muitas pessoas, há muito tempo atrás (quando isso tudo ainda era mato), era que o Twitter tivesse um modo escuro, bem dark mesmo (pois muitas pessoas usam o Twitter à noite ou de madrugada). Entretanto, para a surpresa de muitos, eles introduziram a sua Dark UI em 2016 em um tom azulado, que de início quebrou as expectativas de quem esperava uma interface preta.
Ao mesmo tempo que a nova interface ajudava na usabilidade da plataforma durante à noite ou em ambientes com pouca luminosidade, ela trouxe ainda mais originalidade à sua interface, que comunica perfeitamente que deve ser utilizada para o uso à noite e ambienta muito bem o aplicativo, deixando para lançar uma nova versão de Dark UI mais tarde, em 2019, com os aspectos dark side que as pessoas estavam pedindo no início, como forma de agradar os usuários e tomar vantagem da evolução das telas OLED nos dispositivos Android.
Aqui eu tenho mais alguns outros exemplos de apps que não vão direto para o extremo do dark side, optando por tons de cinza e azul:
Então vamos desconstruindo isso de que Dark UI = Fundo Preto! Sim, o fundo preto em geral é interessante para facilitar na aplicação do código, com suas variações secundárias, terciárias e quaternárias de cinza, além das telas OLED adorarem o preto sólido, mas analise os contextos de uso do seu app e faça alguns experimentos de cores que funcionem bem com o resto do design. Assim, você estará caminhando para uma Dark UI cada vez mais original.
Dica: Caso esteja projetando para o ecossistema da Apple, recomendo utilizar os Apple Design Resources na sua ferramenta de prototipagem (Sketch, Adobe XD ou Photoshop) para que tenha acesso à todas as cores do sistema definidas pela Apple. Dessa maneira, você tem mais garantia de que sua Accent Color (a de interação) vai funcionar tanto em fundos escuros, quanto claros, além de ter uma implementação mais fácil no código.
Para saber mais sobre implementação de System Colors em Swift, utilizando o Xcode, recomendo assistir a Keynote "Implementing Dark Mode on iOS" ou checar as Human Interface Guidelines em Dark Mode :
Aplicação da Dark UI
Agora que definiu as cores, aplique elas no seu protótipo, analise o contraste, a atmosfera gerada e ainda mais importante, veja a sua interface direto no dispositivo final, em diferentes iluminações de ambiente. Essas dicas te ajudarão a entender como a sua interface está funcionando e interagindo com o mundo real.
Dica: Programas de prototipagem como o Sketch, o Figma ou o Adobe XD, possuem maneiras de fazer esse espelhamento em um dispositivo cadastrado através da sua rede wi-fi por exemplo. Faça esse processo de maneira iterativa, para ir aprimorando sua interface a partir de testes.
Além das cores, desenvolva sua atmosfera também com elementos gráficos distintos para o modo claro e o modo escuro, como ilustrações por exemplo. É um ótimo recurso para aprimorar sua UX/UI, mas deve ser usado sempre com cuidado para não deixar a interface irreconhecível e prejudicar a usabilidade do seu produto.
Dica: Lembre-se de levar em consideração a proporção das imagens, para que o espaço que elas ocupam na tela seja igual em ambos os modos de visualização.
Até aqui eu passei todo o básico que pude, para que você tenha um horizonte mais amplo no momento de projetar Dark UIs, com o intuito de torná-las mais originais e complementares na atmosfera e UX do seu projeto! Então muito obrigado pela leitura.
A seguir, vou explicar apenas como aplicar os conhecimentos passados em um projeto Xcode, partindo de um protótipo criado no Sketch.
Cuidado com a acessibilidade!
Ao projetar sua interface com todas essas possibilidades de personalização, temos sempre que levar em consideração a acessibilidade.
Nesse caso, a acessibilidade engloba uma série de fatores, como o contraste agradável entre os elementos na tela, tanto de cores em símbolos, quanto em texto e afins, para não prejudicar na usabilidade por pessoas com deficiência visual, como baixa visão ou daltonismo por exemplo.
Além disso, leve em consideração também a acessibilidade cognitiva da pessoa que estará utilizando seu produto, ou seja, é interessante contextualizar a interface com símbolos, ilustrações e cores, que colaboram na definição de uma atmosfera visual ao design, porém mantenha a atenção para não mudar a ponto de prejudicar o reconhecimento das interfaces no seu produto, de modo que o usuário não se perca ou precise dedicar uma carga cognitiva desnecessária ao utilizá-lo.
Do Sketch ao Xcode
Agora que já está tudo planejado no Sketch, basta exportar nossos arquivos para o Xcode! Vou explicar dividindo em alguns passos:
1. Criando assets a partir do Sketch
Com os seus elementos visuais ainda no Sketch:
- Basta selecionar as imagens que você deseja exportar
- Selecionar "Make exportable" na barra lateral direita
- Escolher a escala e o formato de arquivo
- Exportar!
Mantenha a atenção para não exportar assets muito grandes, que podem comprometer o tamanho de download do seu aplicativo. Recomendo verificar um tamanho mínimo de acordo com a resolução do dispositivo e exportar em 2x e 3x para resoluções maiores.
Quando tiver exportado seus objetos, basta colocá-los na pasta de Assets do projeto Xcode, mas atenção, as imagens dinâmicas devem manter o mesmo nome de asset, sendo definidas dentro dos slots apenas pela appearence Any ou Dark.
2. Importação do esquema de cores
Dica: caso se aventure a não utilizar as System Colors, mantenha a atenção para a definição de cores Estáticas e Dinâmicas. Na UI, nem todas as cores mudam quando se alterna entre o Modo Claro e Modo Escuro, como é possível ver na lista de Color Sets, na pasta Cores. Sites que podem ajudar nessa fase são o Adobe Color e o Coolors, além do app Pastel, que te ajuda no armazenamento de palletes e na exportação dos valores para Swift, SwiftUI e Objective-C.
3. Pronto!
Pronto! Sua interface já está dinâmica e possui uma Dark UI personalizada! Agora só experimentar e aplicar seus conhecimentos no desenvolvimento de Dark UIs!
Todas as ilustrações relacionadas ao Kosmos foram ilustradas por Rafeizer.
Estou disponibilizando os arquivos para experimentação e aprendizado:
