Linguagem de design expressiva do Material Design 3

O Material 3 Expressivo (M3) foi criado para atender à demanda do usuário por experiências modernas, relevantes e distintas. O Expressivo também permite que os designers reflitam emoções e sentimentos específicos no layout e na apresentação da interface.

Cor e tipografia

O sistema de cores está se expandindo para adotar as paletas tonais mais profundas do M3 e um conjunto de tokens mais amplo. A escala de tipografia mais simples usa eixos de fontes variáveis para mais expressão, tornando as interações mais expressivas e agradáveis.

Temas de cores

Os novos tokens permitem que mais cores sejam aplicadas em diferentes temas e no contexto do sistema de design como um todo.

Fontes variáveis

As considerações atualizadas para fontes variáveis e os eixos personalizáveis se estendem além dos casos de uso de primeira parte para atender também aos casos de uso de terceiros, como o Roboto Flex, que tem um conjunto semelhante de eixos variáveis.

Eixo de fonte variável em movimento

Usar o eixo de fontes variáveis para sinalizar feedback de movimento expressivo e tornar as interações mais expressivas e agradáveis de usar.

Exemplos de casos de uso:

  • Espessura dinâmica da fonte
  • Largura dinâmica da fonte
  • Espessura e largura dinâmicas da fonte

Tipos de papéis

Além de uma escala de tipos atualizada e otimizada, também apresentamos novos papéis de tipo que servem especificamente padrões importantes no Wear.

Essas novas funções de tipo oferecem suporte a vários casos de uso, incluindo o texto em arco para títulos de superfície, conteúdo proativo com espaço em tempo real e uma função de tipo específica para números. Elas permitem tamanhos de texto maiores e com mais estilos para strings que não precisam ser localizadas.

Forma e movimento

Também estamos usando o idioma de forma de maneira muito mais ampla e significativa, usando formas de contêiner flexíveis para aplicar arredondamento e nitidez do raio do canto para oferecer suporte a listas de transformação de forma e estados de botão. Estamos lançando botões que abraçam as bordas como um novo padrão de design exclusivo e icônico para dispositivos redondos no Wear.

Contêineres que abraçam a borda

Apresentamos os contêineres de forma que abraçam o formato circular e maximizam o espaço dentro dele.

Forma aplicada

Use o raio dos cantos e formas únicas como contêineres para adotar um design expressivo, que se estende a animações de carregamento agradáveis, layouts interessantes, botões de transformação de forma e grupos de botões adaptáveis.

Raio dos cantos

Usar formas de canto do Material 3 para permitir variedade, distinção e relação entre formas de contêiner.

Contêineres agrupados

Os contêineres de componentes usam técnicas de layout flexível para se adaptar dinamicamente ao espaço disponível. Eles podem distribuir esse espaço de maneira uniforme para simetria ou organizar elementos estrategicamente para estabelecer hierarquia visual, enfatizar conteúdo importante e orientar a interação do usuário com dicas visuais expressivas e de movimento.