乱论淫人谷盘货 Material Design 3 最新遐想圭表

发布日期：2024-10-04 20:05 点击次数：149

乱论淫人谷盘货 Material Design 3 最新遐想圭表

引子

2014 年 Google 发布了 Material Design（简称 MD）乱论淫人谷，成为了 Google 系居品结伴的 UI 遐想谈话。时于当天 MD 也曾有了两次大升级，2018 年发布的 Material Theming （Material Design2，简称 M2），以及 2021 年新发布的 Material You （Material Design3，简称 M3）。本文就带全球细数一下 M3 相干于 M2 的升级和变化。

配色个性化

M3 最大特色在于对个性化的珍重，就如同 “You” 的定名同样。一个蚁合体现即是动态配色 (Dynamic Color) 。维持了 M3 的（比如搭载 Android12 的 Pixel 系列手机）诱惑，不错说明壁纸脸色动态改造 App 或 Widget 的主题。

通过谷歌提供的用具不错体验基于壁纸的动态配色成果：https://material-foundation.github.io/material-theme-builder/#/dynamic

盘货 Material Design 3 最新遐想圭表

动态配色是成立在 ColorScheme 基础上，系统通过算法从现时壁纸中索求并更新 ColorScheme。咱们在运用中通过 duyamicColorScheme 不错不雅察到这种变化并自动运用。底下以 Compose-M3 代码为例：

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
}

什么是 ColorScheme 呢？在背面脸色系统的先容中咱们会看到它。

多屏幕尺寸适配

跟着各式平板、折叠屏诱惑的增多，越来越多的运用需要辩论多种屏幕尺寸下初始的成果，何况好像动态反映屏幕的尺寸的变化。

盘货 Material Design 3 最新遐想圭表

M3 的一个攻击遐想原则是 UI 的安妥不同屏幕尺寸，给出更合理的布局方式。M3 给了许多跨屏幕遐想实在定，举例菜单栏若何摆放，Detail-List 若何同屏披露，致使布局切换的过渡动画等，关联词系数这一切的基础是给出了一套屏幕类型的圭臬，任何屏幕尺寸都不错分为 Compact / Medium / Expanded

盘货 Material Design 3 最新遐想圭表

这么系数的圭表都被归类为这三种类型，无需说明不同的屏幕具体尺寸单独界说。以 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 新追加的执行。

盘货 Material Design 3 最新遐想圭表

脸色槽表格中，纵向按照使用场景以及攻击度进行分类，就像一场扮演中有主角和副角，主次分明的作品才愈加顺眼。按照场景不错归为三类：

AccentColor（强调色）：包括 Primar，Secondary，Tertiary，这些是舞台上的演员，轮番是主演、二号和三号演员。咱们不错按照 UI 组件的攻击度分拨这些脸色，Primary 用在那些功能最攻击或者面积最大的组件上。

NeutralColor（中性色）：包括 Background 和 Surface ，它们是舞台中的环境和配景，不错用于组件的背感奋以烘托主演的献技。

AdditonalColor（补充色）：它们是一些专用谈具，只在异常场景出现，举例 Error 等。

脸色槽表格在横朝上，每一组脸色都由四个颜色构成，它们不错在组件里面搭配使用。

盘货 Material Design 3 最新遐想圭表

以 Primary 色槽为例:

Primary & OnPrimary：接纳自 M2。Primary 是本组脸色的基准色，OnPrimary 用于 Primary 之上的执行披露与之变成对比。如上图的 1 和 2

PrimaryContainer & OnPrimaryContainer：M3 新增的界说，它们的脸色更浅，从用途上不错用在比 Primary&OnPrimary 攻击度更低的组件上，如上图 3 和 4。看起来与 Secondary 的用途访佛，都是依据组件的攻击度来遴荐，差别在于它们和 Primary 是兼并色系，适合与 Primary 构成更大的组件，愈加合作。

兼并组的不同颜色取自脸色调色板，如下是 Primary 的调色板，调色板由 13 个脸色构成乱论淫人谷，数字越大脸色越浅，反之脸色越深。淡色 / 深色主题亦然从调色板中及第的

盘货 Material Design 3 最新遐想圭表

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 发生了变化

M2M3

盘货 Material Design 3 最新遐想圭表

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

笔墨 Typography

除了脸色，笔墨亦然 MD 的圭表之一。字体界说上，M2 有 6 种标题（Headline 1~6），2 种副标题（Subtitle 1~2），2 种正文标题（Body 1~2）一谈按钮、上划线等神色字体。M3 相对起来分类更有规定，不再使用数字分类，而是按照 Small / Medium / Large 分类

M2M3

盘货 Material Design 3 最新遐想圭表