1. Visão geral
No Google I/O 2019, o Material Design apresentou orientações para criar um tema escuro que complemente o tema Material atual do seu produto. Embora os temas claros sejam ótimos para leitura de textos longos e ofereçam um contraste mais legível, a luminância reduzida de um tema escuro oferece segurança em ambientes escuros e pode minimizar a fadiga ocular.
No Material Design, os temas escuros são projetados para serem usados como um modo complementar a um tema claro padrão, mantendo a identidade exclusiva do app (incluindo estilos de cor, forma, tipo e elevação) por meio de uma apresentação sutil e adequada para a noite.
Neste designlab, vamos mostrar as etapas necessárias para criar um tema escuro com base em um tema Material atual usando um dos nossos estudos de Material.
Vamos trabalhar com o Reply, um app de e-mail projetado para ser claro, legível, intuitivo e fácil de usar. Vamos aprender sobre a identidade do Reply e tomar decisões cuidadosas para manter os momentos da marca no app enquanto criamos um tema que ainda seja confortável no escuro.
Também vamos aprofundar o tema e trabalhar com cores de superfície personalizadas que vão além do tema escuro básico para enfatizar a personalidade única do Resposta Rápida.
Materiais necessários:
2. Reúna os arquivos necessários
Antes de começar, faça o download do arquivo inicial do Figma. Tudo o que você precisa para o Designlab está incluído neste arquivo.
- Baixe o DarkTheme DesignLab Kit.fig (7,6 MB)
3. Configurar o ambiente
Em seguida, você precisará configurar seu ambiente de design.
Primeiro, faça login no Figma ou crie uma conta.
Depois de fazer login, importe o arquivo baixado na etapa anterior. Para fazer isso, encontre o ícone "Importar arquivo" no canto superior esquerdo da tela de arquivos do Figma e localize o arquivo na pasta "Downloads".
Reserve um momento para analisar o arquivo. Ele contém um tema claro, uma paleta tonal pré-criada com base na marca do app e uma cópia do tema escuro final que vamos criar.
- Em outra guia, abra as Diretrizes do Material Design para temas escuros (link em inglês). Vamos fazer referência a essas diretrizes ao longo do DesignLab.
4. Entender a identidade do produto
Antes de começar a trabalhar no tema escuro do Reply, precisamos entender algumas características da marca. Isso nos ajuda a fazer escolhas conscientes sobre o tema para que a identidade e a marca do Respostas sejam expressas de forma consistente nos temas claro e escuro.
A marca da Reply enfatiza a comunicação. O app prioriza qualidades funcionais, favorecendo a facilidade de uso em vez de elementos de design que não têm uma finalidade funcional.
Para os fins deste designlab, os elementos mais importantes da expressão da marca no Reply são cor, tipo e forma.
Cor
O tema de cores do Reply usa uma cor principal azul-acinzentada escura combinada com uma cor secundária amarelo-laranja.
Como a cor secundária raramente é usada, a interface do usuário do Reply costuma ser monocromática, usando variações da cor primária. Esse tema de cores sutil permite que o conteúdo seja lido facilmente sem distrações e que os avatares fotográficos sejam vistos com facilidade.
A cor secundária do Reply tem um impacto enorme em qualquer lugar em que é usada, enfatizando ações importantes e destacando momentos da marca em todo o app.
Tipo
Como um app que se concentra muito em conteúdo e eficiência baseados em texto, o tipo e a tipografia são essenciais para a expressão da identidade do Resposta rápida. O app usa a Work Sans para toda a escala tipográfica, com vários estilos que incorporam seis pesos da Work Sans: Light, Regular, Medium, SemiBold e Bold.
Criar toda a escala tipográfica com a Work Sans dá ao Reply uma tipografia consistente e previsível, mas orgânica e legível.
De acordo com o designer da Work Sans, Wei Huang, a família é otimizada para uso na tela. Isso é ótimo para ler trechos de texto em e-mails ou outros conteúdos de maneira eficiente. A base solta nas formas dos primeiros grotescos confere a ela uma estética um pouco mais amigável e humana, enquanto o espaçamento mais amplo facilita a leitura.
Forma
A resposta tem uma história de formas sutis, combinando componentes arredondados e nítidos de maneiras que reforçam a eficiência e a natureza funcional da lista de e-mails, ao mesmo tempo em que dão um toque mais suave às principais ações e componentes maiores.
- Componentes pequenos
- Componentes médios
- Componentes grandes
Componentes pequenos, como botões e o FAB, são totalmente arredondados, enquanto componentes médios, como cards de e-mail e a barra de apps na parte de baixo, são totalmente quadrados. Componentes grandes, como o seletor de contas e a página inferior, têm cantos levemente arredondados.
Essas formas se combinam para reforçar a compreensão do usuário sobre onde ele está no app e como cada componente é concebido, além de como ele se relaciona com o restante da interface.
5. Como trabalhar com cores
Sabendo como a cor se relaciona com a expressão da marca do Reply no tema claro padrão, podemos fazer ajustes informados na paleta para um tema escuro utilizável e expressivo.
No Material Design, os sistemas de cores são baseados em paletas tonais. Essas paletas usam as cores da sua marca para criar um conjunto de variantes harmoniosas que se unem em um sistema de cores abrangente aplicado em todo o app, garantindo estilo e legibilidade.
No arquivo do Figma, você pode conferir as paletas tonais primárias e secundárias do Reply. As setas claras acima de cada paleta indicam os valores usados no tema claro do app Respostas, enquanto as setas escuras indicam as variantes que vamos usar no tema escuro.
Ao criar um tema escuro com o Material, as variantes mais claras são escolhidas para que o sistema de cores permaneça expressivo e mantenha o contraste adequado sem causar cansaço visual. Cores mais saturadas tendem a "vibrar" visualmente em fundos mais escuros, dificultando a leitura. Tons mais claros também oferecem mais flexibilidade para variar a cor de superfícies elevadas, o que vamos analisar em breve.
6. Ajustar cores da superfície
Agora que já conhecemos as paletas tonais do Reply e as cores que vamos usar no tema escuro, é hora de começar a ajustar os valores de cor no nosso modelo.
Nos temas escuros do Material Design, a camada mais baixa da interface geralmente é um cinza-escuro com o valor hexadecimal #121212.
- No arquivo do Figma, encontre a prancheta chamada "Reply Starter" e selecione a camada chamada "Background".
- Em "Preenchimento" no painel do inspetor à direita da tela, defina o valor da cor como 121212 e pressione "Return".
- Sua mesa de trabalho deve ficar assim:
Na visualização monocromática da caixa de entrada do Reply, os cards de e-mail têm uma cor um pouco mais clara que o plano de fundo. Por isso, precisamos dar o mesmo tratamento aos cards no tema escuro para manter a hierarquia visual da caixa de entrada.
- Na mesma prancheta, expanda o grupo chamado "Cards de e-mail" e selecione todas as camadas chamadas "Card de e-mail."
- Assim como antes, selecione o valor Preenchimento no painel do inspetor. Defina o valor como 121212 e pressione "Return".
- Agora, selecione apenas as camadas chamadas "Sobreposição do card de e-mail". Essas camadas vão permitir criar uma sobreposição que distingue os cards de e-mail do plano de fundo.
- Dê às camadas um Preenchimento e defina como FFFFFF com opacidade de 2%.
Agora que os cards de e-mail estão escurecidos, o texto fica ilegível. Em seguida, vamos abordar as cores do texto.
7. Ajustar cores do texto
Para entender as cores do texto em temas escuros, é importante saber como a cor é aplicada ao texto no sistema Material Design mais amplo.
Os componentes do Material Design definem o conceito de cores "on", que são assim chamadas porque aparecem "em cima" de componentes e superfícies principais que usam cores primárias, secundárias, de superfície, de plano de fundo ou de erro. As cores "ativadas" são usadas principalmente para texto, garantindo que ele permaneça legível nessas superfícies.
As cores padrão "ativado" no Material Design são branco (#FFFFFF) e preto (#000000). Como uma cor "on" preta ou escura não seria adequada para nossas superfícies escuras, vamos usar branco.
O sistema para estabelecer a hierarquia de texto com essa cor "ativa" é simples. O texto de alta ênfase tem uma opacidade de 87%, enquanto o de ênfase média é aplicado a 60%, e o texto desativado usa uma opacidade de 38%.
O texto de alta prioridade não é branco puro porque, como discutido na etapa 5, #FFFFFF, uma cor clara, "vibraria" visualmente em nossos planos de fundo escuros. Além disso, o texto #FFFFFF puro em um fundo escuro pode prejudicar a legibilidade, já que a luz desse texto parece vazar ou ficar desfocada no fundo escuro.
Sabendo disso, vamos corrigir as cores do texto no tema escuro.
- Todo o texto no layout inicial está agrupado para facilitar o acesso. Encontre o grupo chamado Texto da caixa de entrada e expanda-o para ver todas as camadas constituintes.
- Selecione todas as camadas que começam com "Hi -". Esses são todos os trechos de texto de alto destaque no nosso layout.
- No painel do inspetor, defina o Preenchimento como FFFFFF com uma opacidade de 87%.
- De volta ao grupo Texto da caixa de entrada, selecione todas as camadas que começam com "Med -".
- No painel do inspetor, defina o Preenchimento como FFFFFF com uma opacidade de 60%.
8. Ajustar as cores dos componentes
Em temas escuros criados com o Material Design, as superfícies e os componentes elevados são coloridos usando sobreposições. Quanto mais elevada a superfície, mais forte e brilhante será a sobreposição. Essa é uma forma de comunicar elevação e hierarquia quando o plano de fundo está muito escuro para retratar sombras escuras de forma confiável.
Barra de apps da parte de baixo
Para a barra de apps inferior do Reply, que fica acima do restante da interface da Caixa de entrada, vamos aplicar uma sobreposição sutil.
- Encontre o grupo Barra de apps na parte de baixo na lista de camadas e expanda para ver as camadas constituintes.
- Encontre a camada chamada Superfície dentro desse grupo e defina o valor de Preenchimento como 121212.
- Encontre a camada acima dela, chamada Sobreposição de superfície, e atribua a ela um valor de Preenchimento de FFFFFF com uma opacidade de 12%.
Botão de ação flutuante
Em seguida, vamos aplicar uma nova cor ao FAB. Para isso, volte às paletas tonais que vimos antes e pegue o valor 700 da cor secundária do Reply.
Se quiser, para componentes pequenos, mas de alto impacto no seu próprio app, selecione uma cor um pouco mais saturada, desde que ela mantenha o contraste certo com as cores subjacentes. Vamos falar sobre essa opção em uma etapa posterior.
- Encontre o grupo FAB na lista de camadas e abra para ver as partes constituintes.
- Encontre e selecione a camada Superfície. Defina o preenchimento como FCC13B.
Cards selecionados
A mesma cor laranja-amarelada impactante também aparece no canto dos cards de e-mail selecionados na caixa de entrada do recurso Resposta. Este é outro momento de marca forte, mas não se encaixa perfeitamente em componentes, plataformas ou texto.
Para situações como essa, é melhor começar com nossa cor secundária da variante (neste caso, #FFFBE6) e trabalhar para trás até encontrar algo expressivo sem distrair a estética funcional do recurso Resposta. Para a resposta, podemos usar nossa variante secundária normal.
- Selecione a camada chamada Earmark e defina o Preenchimento como FFF5A0.
9. Vá ainda mais longe: superfícies personalizadas
Como aprendemos antes, o botão de ação flutuante (FAB, na sigla em inglês) no app Resposta é um componente de alta ênfase que também representa um momento de forte branding no app. Por isso, podemos decidir manter a expressão de cor no tema escuro do Resposta usando a cor secundária original do app.
- Encontre o grupo FAB na lista de camadas e abra para ver as partes constituintes.
- Encontre e selecione a camada Superfície. Defina o preenchimento de volta para F9AA33.
Também podemos trazer de volta a cor primária do Reply como uma cor de superfície personalizada para a barra de apps na parte de baixo e os cards de e-mail. Para isso, basta mudar a sobreposição para usar a cor principal escura indicada na paleta tonal que estamos referenciando.
- Encontre o grupo Barra de apps na parte de baixo na lista de camadas e expanda para ver as camadas constituintes.
- Encontre a camada chamada Sobreposição de superfície e atribua a ela um novo valor de Preenchimento de 344955 com uma opacidade de 48%. Isso vai dar uma cor de marca mais forte, mantendo o contraste adequado.
- Encontre as camadas chamadas Sobreposição do card de e-mail na lista de camadas e selecione todas elas.
- Defina o Preenchimento como ADC0CB com uma opacidade de 4%.
10. Resumo
No Material, os temas escuros são uma extensão cuidadosa e intencional da identidade exclusiva do seu produto, assim como ela é expressa no tema claro. Com ajustes simples na cor e na maneira como a elevação é transmitida, você acabou de criar seu primeiro tema escuro do Material. Parabéns!
Considere as etapas deste laboratório de design como uma estrutura para entender e definir o tema escuro do seu produto. Sempre tenha em mente as propriedades e metas da sua marca e do seu produto.
Para mais orientações sobre o tema escuro, consulte a especificação do Material Design para temas escuros (link em inglês).
Se tiver dúvidas, fale com a gente a qualquer momento usando o @MaterialDesign no Twitter.
Confira outros tutoriais e conteúdo de design no canal do Google Design no YouTube.