Confira o que há de novo no Material Design 3

prefácio

Em 2014, o Google lançou o Material Design (MD, abreviado), que se tornou uma linguagem de design de interface do usuário unificada para produtos do Google. Até agora, MD teve duas grandes atualizações, Material Theming (Material Design2, referido como M2) lançado em 2018 , e Material You (Material Design3, referido como M3) lançado em 2021 . Este artigo levará você a contar as atualizações e alterações do M3 em relação ao M2.

Personalização de cores

A maior característica do M3 é a ênfase na personalização, assim como o nome de "Você". Uma expressão concentrada é a correspondência dinâmica de cores (Dynamic Color). Dispositivos que suportam M3 (como telefones celulares da série Pixel equipados com Android12) podem alterar dinamicamente o tema do App ou Widget de acordo com a cor do papel de parede.

Você pode experimentar o efeito dinâmico de correspondência de cores com base no papel de parede por meio das ferramentas fornecidas pelo Google: material-foundation.github.io/material-th…

A correspondência dinâmica de cores é baseada no ColorScheme. O sistema extrai e atualiza o ColorScheme do papel de parede atual por meio de um algoritmo. duyamicColorSchemePodemos observar essa mudança em nosso aplicativo e aplicá-la automaticamente. Tome 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 ColorSchemeque ? Veremos isso mais tarde na introdução ao sistema de cores.

Adaptação de tamanho de tela múltipla

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 alterações no tamanho da tela.

M3 的一个重要设计原则是 UI 的适应不同屏幕尺寸，给出更合理的布局方式。M3 给了很多跨屏幕设计的细则，例如菜单栏如何摆放，Detail-List 如何同屏显示，甚至布局切换的过渡动画等，但是所有这一切的基础是给出了一套屏幕类型的标准，任何屏幕尺寸都可以分为 Compact/Medium/Expanded

这样所有的规范都被归类为这三种类型，无需根据不同的屏幕具体尺寸单独定义。以 Compose-M3 的代码为例，当屏幕尺寸发生变化时触发布局重组，重组中获取最新的 windowSizeClass 针对性地做出布局：

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 有三大规范，颜色（Color）、形状（Shape）和字体（Typography），这些规范落地到代码中就是 MateriaTheme 中定义的对应常量，供我们在项目中引用。接下来从这三方面看一下 M3 的变化。

颜色 Color

M3 的颜色系统与 M2 整体思想上保持一致，都使用颜色槽（ColorRule）对应用中的颜色场景进行归类，但是在颜色槽定义上有所调整和追加。M3 中定义了 25 个颜色槽，如下表所示。不少颜色槽继承自 M2， 绿框部分是 M3 新追加的内容。

颜色槽表格中，纵向按照使用场景以及重要度进行分类，就像一场表演中有主角和配角，主次分明的作品才更加好看。按照场景可以归为三类：

• AccentColor（强调色）：包括 Primar，Secondary，Tertiary，这些是舞台上的演员，依次是主演、二号和三号演员。我们可以按照 UI 组件的重要度分配这些颜色，Primary 用在那些功能最重要或者面积最大的组件上。
• NeutralColor（中性色）：包括 Background 和 Surface ，它们是舞台中的环境和布景，可以用于组件的背景色以衬托主演的演出。
• AdditonalColor（补充色）：它们是一些专用道具，只在特别场景出现，例如 Error 等。

颜色槽表格在横向上，每一组颜色都由四个色调组成，它们可以在组件内部搭配使用。

以 Primary 色槽为例:

• Primary & OnPrimary：继承自 M2。Primary 是本组颜色的基准色，OnPrimary 用于 Primary 之上的内容显示与之形成对比。如上图的 1 和 2
• PrimaryContainer & OnPrimaryContainer： M3 新增的定义，它们的颜色更浅，从用途上可以用在比 Primary&OnPrimary 重要度更低的组件上，如上图 3 和 4。看起来与 Secondary 的用途类似，都是依据组件的重要度来选择，区别在于它们和 Primary 是同一色系，适合与 Primary 组成更大的组件，更加协调。

同一组的不同色调取自颜色调色板，如下是 Primary 的调色板，调色板由13个颜色组成，数字越大颜色越浅，反之颜色越深。浅色/深色主题也是从调色板中选取的

M3 中使用 ColorScheme 定义一组颜色槽方案，以 Compos-M3 代码为例：

class ColorScheme(
    primary: Color,
    onPrimary: Color,
    /*..省略..*/
    
)
复制代码

在 Theme 中通过设置 ColorScheme 来设置主题颜色

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

形状 Shape

形状方面，首先形状的分类方式上 M3 与 M2 发生了变化

M2	M3

M2 按照组件本身的尺寸进行分类: Small/Medium/Large，而 M3 是针对组件的圆角的弧度进行分为七类：从 None 到 Full ，每一种组件都具备更多的表达方式，使得 UI 更具表现力。

文字 Typography

除了颜色，文字也是 MD 的规范之一。字体定义上，M2 有6种标题（Headline 16），2种副标题（Subtitle 12），2种正文标题（Body 1~2）一起按钮、上划线等样式字体。M3 相对起来分类更有规则，不再使用数字分类，而是按照 Small/Medium/Large 分类

M2	M3

以上，颜色、形状、文字是 MD 的三大基本规范，系统默认组件通过应用这些规范，形成特有的视觉风格。M3 的 UI 组件视觉上整体呈现两大特点，一是更加圆润，二是面积更大，在当下大屏盛行的设备中使得点击区域更加明显。接下来盘点一下各种基础组件的设计上的具体变化:

FAB 悬浮按钮

• 形状从圆形变为圆角矩形
• 新增了一种 Large(96dp) 的大尺寸 FAB，M2 默认只有 Default(56dp) 和 Mini(40dp) 两种尺寸
• 默认背景色由 Primary 变为 Primary Container
• Extended Fab 的高度与 Fab 进行了对齐，视觉更统一，M2 中两者高度稍有不同，

Button 按钮

• 基本形状从圆角矩形变为半圆
• 文字按钮不再全大写，而是大小写敏感
• 增加高度（36dp > 45dp）

Chip 标签

• 半圆变为圆角矩形（ 好似 M3 和 M2 在组件形状上进行了圆形<>圆角的互换...）
• 功能种类的调整，Actioin 类 Chip 被拆分为 Assist 和 Suggestion 类型
• 默认没有留阴影（elevation = 0），M3 的组件通过加深边框的颜色对比度，取消了不少阴影元素，整体上弱化了拟物风格

TopAppBar 标题栏

• 默认取消阴影，当滚动后会增加阴影（Elevation = 2）
• 高度增加，字体变大
• M3 中删除了 M2 中 Primary Variant 的定义，这原本是用在 StatusBar 中的颜色比 Primay 更深，M2 StatusBar 也是 Primary ，打造沉浸化标题栏

Switch 开关

• 面积更大，高度增加
• 取消阴影，拟物转为扁平
• Adicione gráficos identificáveis, como marcas de seleção, para ser mais amigável ao daltonismo

Barra de navegação

• Em primeiro lugar, o nome mudou, M2 é chamado de navegação inferior e M3 é chamado uniformementeNavigationBar
• Sombras removidas, altura aumentada
• M2 indica o estado selecionado através da transparência da cor e M3 adiciona um Contorno

Caixa de diálogo

• Aumentou a fonte do título
• preenchimento aumentado
• Cantos arredondados maiores

Além dos componentes acima, os estilos de outros componentes não mudaram muito, a maioria dos quais é para cancelar a sombra, aumentar a área, etc., então não vou repeti-los.

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 levar em conta a unidade do estilo do iOS, mas se você estiver um desenvolvedor individual, MD terá Ajuda você a desenvolver produtos mais profissionais e bonitos.