盘点 Material Design 3 最新设计规范 | 开发者说·DTalk

本文原作者: fundroid，原文发布于: AndroidPub

前言

配色个性化

M3 最大特色在于对个性化的注重，就如同 "You" 的命名一样。一个集中体现就是动态配色 (Dynamic Color)。支持了 M3 的 (比如搭载 Android 12 的 Pixel 系列手机) 设备，可以根据壁纸颜色动态改变 App 或 Widget 的主题。

动态配色是建立在 ColorScheme 基础上，系统通过算法从当前壁纸中提取并更新 ColorScheme。我们在应用中通过 duyamicColorScheme 可以观察到这种变化并自动应用。下面以 Compose-M3 代码为例:

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

多屏幕尺寸适配

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

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

颜色 Color

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

• 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 组成更大的组件，更加协调。

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

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 开关

• 面积更大，高度增加；
• 取消阴影，拟物转为扁平；
• 增加对勾等可识别图形，对色盲认识更友好。

NavigationBar 导航栏

• 首先名称发生变化，M2 称为 Bottom Navigation，M3 统一称呼 NavigationBar；

• 取消了阴影，增加了高度；

• M2 通过颜色的透明度表示选中状态，M3 则是添加了 Outline。

Dialog 对话框

• 增大了 Title 的字体；

• 增大了 Padding；

• 圆角弧度更大。

除了上述组件，其他组件的样式变化不大，大多是取消阴影，增大面积之类，不再赘述。

最后

长按右侧二维码

查看更多开发者精彩分享

 点击屏末 | 阅读原文 | 即刻报名参与 "开发者说·DTalk"