Inventário das especificações de design mais recentes do Material Design 3

prefácio

Em 2014, o Google lançou o Material Design (MD para abreviar), que se tornou uma linguagem unificada de design de interface do usuário para os produtos do Google. Hoje, MD teve duas atualizações importantes, Material Theming (Material Design2, M2 para abreviar) lançado em 2018 e Material You (Material Design3, M3 para abreviar) lançado recentemente em 2021 . Este artigo o levará a contar as atualizações e alterações do M3 em comparação com o M2.

Correspondência de cores personalizada

A maior característica do M3 é a ênfase na personalização, assim como o nome “Você”. Uma expressão concentrada é a correspondência dinâmica de cores (Dynamic Color). Dispositivos compatíveis com M3 (como telefones da série Pixel equipados com Android 12) podem alterar dinamicamente o tema do aplicativo ou widget de acordo com a cor do papel de parede.

Por meio das ferramentas fornecidas pelo Google, você pode experimentar o efeito dinâmico de correspondência de cores com base no papel de parede: https://material-foundation.github.io/material-theme-builder/#/dynamic

A correspondência dinâmica de cores é baseada no ColorScheme, e o sistema extrai e atualiza o ColorScheme do papel de parede atual por meio de algoritmos. duyamicColorSchemePodemos observar essa alteração no aplicativo e aplicá-la automaticamente. Vamos pegar o código Compose-M3 como exemplo:

val dynamic = Build.VERSION.SOK_INT >= Build.VERSION_CODES.S
val colorScheme = if (dynamic) {
    
    
    val context = LocalContext.current
    // 使用 dynamicLightColorScheme 函数创建具有浅色动态值的 ColorScheme 实例
    // 或使用 dynamicDarkColorScheme 创建具有深色动态值的实例
    // 传入 Context 以便从 Android 系统获取动态配色资源
    if (dark) dynamiclightColorScheme(context) else dynamicDarkColorScheme(context)
} else {
    
    
    // 使用 lightColorScheme 或者 darkColorScheme
}

O que ColorSchemeé ? Veremos isso mais tarde na introdução do sistema de cores.

Adaptação de vários tamanhos de tela

Com o aumento de vários tablets e dispositivos de tela dobrável, mais e mais aplicativos precisam considerar o efeito da execução em vários tamanhos de tela e podem responder dinamicamente às mudanças no tamanho da tela.

Um importante princípio de design do M3 é que a interface do usuário se adapta a diferentes tamanhos de tela, proporcionando um layout mais razoável. O M3 fornece muitas regras detalhadas para design de tela cruzada, como colocar a barra de menus, como exibir a lista de detalhes na mesma tela e até mesmo a animação de transição para troca de layout etc., mas a base de tudo isso é para fornecer um conjunto de padrões de tipo de tela. Qualquer tamanho de tela pode ser dividido em Compact//MediumExpanded

Dessa forma, todas as especificações são classificadas nesses três tipos, não havendo a necessidade de defini-las separadamente de acordo com os diferentes tamanhos de tela. Tomando o código do Compose-M3 como exemplo, quando o tamanho da tela muda, a reorganização do layout é acionada e o windowSizeClasslayout :

enum class WindowSizeClass {
    
     Compact, Medium, Expanded }

@Composable
fun MyApp(windowSizeClass: WindowSizeClass) {
    
    
    // Select a navigation element based on window size.
    when (windowSizeClass) {
    
    
        WindowSizeClass.Compact -> {
    
     /* Bottom bar */ }
        WindowSizeClass.Medium -> {
    
     /* Rail */ }
        WindowSizeClass.Expanded -> {
    
     /* Persistent drawer */ }
    }
}

MD possui três especificações principais, Color (Cor), Shape (Forma) e Font (Tipografia) Quando essas especificações são implementadas no código, são as constantes correspondentes definidas no MateriaTheme para referenciarmos no projeto. Em seguida, observe as mudanças do M3 a partir desses três aspectos.

Cor

O sistema de cores do M3 é condizente com a ideia geral do M2, ambos usam o slot de cores (ColorRule) para classificar as cenas de cores no aplicativo, mas há alguns ajustes e acréscimos na definição do slot de cores. Existem 25 slots de cores definidos no M3, conforme mostrado na tabela abaixo. Muitos slots de cores são herdados do M2 e a parte da moldura verde é o conteúdo recém-adicionado do M3.

Na tabela de slots de cores, classifique verticalmente de acordo com os cenários de uso e importância, assim como existem protagonistas e coadjuvantes em uma performance, as obras com primário e secundário claros são mais bonitas. De acordo com a cena pode ser classificado em três categorias:

• AccentColor (cor de ênfase) : incluindo Primário, Secundário, Terciário, estes são os atores no palco, seguidos pelo ator principal, o segundo e o terceiro ator. Podemos atribuir essas cores de acordo com a importância dos componentes da interface do usuário, e o Primário é usado para os componentes com as funções mais importantes ou a maior área.
• NeutralColor (cor neutra) : incluindo Background e Surface, que são o ambiente e o cenário do palco, que podem ser usados ​​como cor de fundo do componente para realçar a atuação do protagonista.
• AdditonalColor (cor suplementar) : São alguns props especiais que só aparecem em cenas especiais, como Error e etc.

A tabela de slots de cores é horizontal e cada conjunto de cores consiste em quatro tons que podem ser usados ​​juntos dentro do componente.

Tome o slot de cor primária como exemplo:

• Primário e OnPrimary : herdado de M2. Primary é a cor base deste grupo de cores e OnPrimary é usado para exibir o conteúdo acima de Primary em contraste com ele. 1 e 2 na foto acima
• PrimaryContainer & OnPrimaryContainer : Novas definições adicionadas ao M3, suas cores são mais claras e podem ser usadas em componentes menos importantes que Primary&OnPrimary, conforme mostrado nas Figuras 3 e 4 acima. Parece ser semelhante ao objetivo do Secundário, e todos são selecionados de acordo com a importância dos componentes. A diferença é que eles estão no mesmo sistema de cores do Primário, e são adequados para formar componentes maiores com o Primário , que é mais coordenado.

As diferentes tonalidades do mesmo grupo são retiradas da paleta de cores. A seguinte é a paleta Primária. A paleta é composta por 13 cores. Quanto maior o número, mais clara a cor e vice-versa, mais escura a cor. Temas claros/escuros também são escolhidos na paleta

ColorScheme é usado em M3 para definir um conjunto de esquemas de slots de cores. Por exemplo, um ColorScheme em Compose-M3 é definido da seguinte forma

class ColorScheme(
    primary: Color,
    onPrimary: Color,
    /*..省略..*/
    
)

Defina a cor do tema definindo ColorScheme em Theme

import androidx.compose.material3.MaterialTheme
 
@Composablefun MaterialTheme (
    colorScheme: ColorScheme,
    typography: Typography,
    // 更新 Shape 的功能即将到来
    content: @Composable () -> Unit
)

forma

Em termos de forma, em primeiro lugar, o método de classificação da forma mudou entre M3 e M2

M2	M3

O M2 é classificado de acordo com o tamanho do próprio componente: Pequeno/Médio/Grande, enquanto o M3 é dividido em sete categorias de acordo com o radiano do canto arredondado do componente: de Nonea a Fulltornando a interface do usuário mais expressividade.

Tipografia do personagem

Além da cor, o texto também é uma das especificações do MD. Em termos de definição de fonte, M2 tem 6 tipos de títulos (Headline 1 _{6), 2 tipos de legendas (Subtitle1} 2), 2 tipos de títulos de texto (Body1~2), botões, overlines e outras fontes de estilo. O M3 é relativamente mais regular na classificação, não usando mais classificação digital, mas de acordo com Small/ Medium/ Largeclassificação

M2	M3

Acima, cor, forma e texto são as três especificações básicas do MD, e os componentes padrão do sistema formam um estilo visual exclusivo ao aplicar essas especificações. Os componentes de UI do M3 apresentam duas características visuais principais, uma mais arredondada e outra com área maior, o que torna a área de cliques mais evidente nos dispositivos atuais com telas grandes. Em seguida, dê uma olhada nas mudanças específicas no design de vários componentes básicos:

botão flutuante FAB

• A forma muda de círculo para retângulo arredondado
• Adicionado um FAB de tamanho grande de Large(96dp), M2 tem apenas dois tamanhos de Default(56dp) e Mini(40dp) por padrão
• A cor de fundo padrão é alterada de Cor primária para Recipiente primário
• A altura do Extended Fab está alinhada com o Fab, e a visão é mais unificada.No M2, a altura dos dois é um pouco diferente.

botão botão

• A forma básica muda de um retângulo arredondado para um meio círculo
• O botão de texto não está mais todo em letras maiúsculas, mas diferencia maiúsculas de minúsculas
• Aumente a altura (36dp > 45dp)

etiqueta do chip

• O semicírculo torna-se um retângulo arredondado (parece que M3 e M2 trocaram cantos circulares<>arredondados na forma do componente...)
• Ajuste dos tipos de função, o chip do tipo ação é dividido em tipos de assistência e sugestão
• Por padrão, nenhuma sombra é deixada (elevação = 0). O componente M3 cancela muitos elementos de sombra aprofundando o contraste de cor da borda e enfraquece o estilo esqueuomórfico como um todo

Barra de título TopAppBar

• A sombra é cancelada por padrão e a sombra será adicionada ao rolar (Elevação = 2)
• A altura aumenta e a fonte fica maior
• A definição de Primary Variant em M2 foi excluída em M3, que foi originalmente usada em StatusBar para ter uma cor mais escura que Primay, e M2 StatusBar também é Primary, criando uma barra de título imersiva

Interruptor

• Área maior, altura aumentada
• Cancele a sombra e o quase-objeto se torna plano
• Adicione gráficos identificáveis, como marcas de seleção, que são mais amigáveis ​​ao daltonismo

Barra de navegação NavigationBar

• Em primeiro lugar, o nome muda, M2 é chamado Bottom Navigation e M3 é chamado NavigationBar uniformemente
• Sombras removidas e altura aumentada
• M2 expressa o estado selecionado por meio da transparência da cor e M3 adiciona Contorno

caixa de diálogo

• Aumentou o tamanho da fonte do título
• Preenchimento aumentado
• Cantos arredondados maiores

Com exceção dos componentes acima, os estilos dos outros componentes não mudaram muito, a maioria deles está cancelando sombras, aumentando a área, etc., então não vou repeti-los aqui.

afinal

Através da introdução deste artigo, acredito que todos tenham uma compreensão profunda do estilo do M3. Embora os aplicativos Android domésticos raramente sigam as especificações de design do MD para unificar o estilo com o iOS, mas se você for um desenvolvedor individual, MD terá ajudá-lo a desenvolver produtos mais profissionais e bonitos.