Estilo

Estilizar widgets de forma eficaz é crucial para alcançar um visual atraente experiência do usuário consistente. Esta seção se aprofunda nos principais conceitos e técnicas para definir a cor e a tipografia para criar a melhor e interessantes widgets do Android.

Cor

Usar cores para expressar estilo e comunicar significado. Definir as cores apropriadas para as cores do widget são cruciais para a legibilidade, personalização e de como expressar a identidade da marca do seu aplicativo.

Usar tokens e funções de cor do Material Design para atender às diretrizes de contraste de acessibilidade e oferecer suporte a recursos de cor dinâmica, como cores geradas pelo usuário e cores escuras temas claros.

Para saber mais, consulte as orientações de cor do Material Design (link em inglês).

Temas dinâmicos

No Android 12 e versões mais recentes, um widget pode usar as cores do tema do dispositivo para botões, planos de fundo e outros componentes. Isso proporciona consistência visual entre widgets, ícones da tela inicial e papéis de parede, oferecendo aos usuários do Android uma experiência do usuário mais coesa. O uso dos tokens de cor fornecidos garante que seu o widget será integrado em todos os temas de dispositivos fornecidos por diferentes fabricantes e temas dinâmicos definidos pelo usuário.

Figura 1. Imagem de um widget com tokens de cor destacados.

Modo claro e escuro

O modo escuro é uma versão com pouca luz da interface do dispositivo que aparece principalmente escura cores da superfície. Os usuários estão mudando cada vez mais para o modo escuro para melhorar a experiência do usuário. duração da bateria e conforto ocular. Caso seu widget não se adapte ao modo escuro, ele aparecem fora do lugar e podem frustrar os usuários.

Figura 2:um widget no modo claro na tela esquerda e escuro na direita.

Tipografia

A tipografia ajuda a tornar a escrita legível e bonita. Use tamanhos de fonte e para estabelecer uma hierarquia clara, direcionando o olhar do usuário para os pontos elementos importantes. Preste atenção ao espaçamento entre linhas e ao espaçamento entre letras (kerning) para melhorar a legibilidade, especialmente para exibições de texto menores dentro do espaço restrito de um widget.

Hierarquia

A hierarquia é comunicada pelas diferenças na espessura da fonte, no tamanho, na altura da linha, e espaçamento entre letras. A escala de tipografia atualizada organiza estilos de texto em cinco funções nomeados para descrever suas finalidades. Os cinco estilos de texto são display, cabeçalho, título, subtítulo e corpo. As novas funções não dependem de dispositivos, permitindo uma aplicação mais fácil em diversos casos de uso.

Figura 3:um widget mostrando o uso de diferentes escalas de tipo.