盘点MaterialDesign3最新设计规范

序

2014年，谷歌发布了Material Design，成为谷歌产品的统一UI设计语言到目前为止，MD已经经历了两次大的升级，分别是2018年发布的Material Theming 和2021年新发布的Material You 本文将带您详细盘点M3相对于M2的升级和变化

个性化配色

M3最大的特点就是强调个性化，就像你的命名一样一个集中的表现就是动态配色支持M3的设备可以根据壁纸颜色动态改变App或Widget的主题

动态配色以ColorScheme为基础，系统通过算法从当前壁纸中提取并更新ColorScheme我们可以观察到这种变化，并在我们的应用程序中通过duyamicColorScheme自动应用它

valdynamic=BuildVERSION.SOK_INT=Build版本代码svalcolorschem = ifvalcontext = local Context . current//使用dynamicLightColorScheme函数创建具有浅色动态值的colorScheme实例//使用dynamicDarkColorScheme创建具有深色动态值的实例//传入上下文获取动态配色资源if来自Android系统

什么是配色方案我们将在后面的色系介绍中看到

多屏幕尺寸适应

伴随着各种平板和折叠屏幕设备的增多，越来越多的应用需要考虑在各种屏幕尺寸下运行的效果，并能动态响应屏幕尺寸的变化。

M3的一个重要设计原则就是UI适应不同的屏幕尺寸，给出更合理的布局M3给出了很多跨屏设计的细则，比如如何放置菜单栏，如何同屏显示明细表，甚至布局切换的过渡动画等等，但这些都是基于一套屏幕类型的标准，任何屏幕尺寸都可以分为紧凑/中等/扩展

所有这样的规格都归入这三种，不需要根据不同的屏幕尺寸分别定义。以Compose—M3的代码为例，当屏幕尺寸发生变化时，触发布局重组，在重组中获取最新的windowSizeClass进行布局:

MD有三个规格，颜色，形状，排版当这些规范落入代码中时，它们就是MateriaTheme中定义的对应常数，供我们在项目中参考接下来，从这三个方面来看M3的变化

颜色颜色

M3的色彩体系与M2的整体思路是一致的都是在应用中使用色槽对彩色场景进行分类，只是调整和增加了色槽的定义M3定义了25种颜色槽，如下表所示很多色槽都是从M2继承来的，绿框是M3新加的

在色槽表中，按照使用场景和重要程度进行垂直分类，就像一场有主角和配角的演出，主次分明的作品更漂亮。根据场景，它可以分为三类:

重音颜色:包括原色，二次色和三次色这些是舞台上的演员，其次是主角，第二和第三个演员我们可以根据UI组件的重要性来分配这些颜色主要用于那些功能最重要或面积最大的部件

中性色:包括背景和表面，是舞台中的环境和景物，可以作为组件的背景色来衬托主演的表演。

AdditonalColor:它们是只出现在特殊场景中的特殊道具，比如Error等。

颜色槽表是水平的，每组颜色由四种色调组成，可以在组件内部一起使用。

以原色通道为例:

初级放大器，初级的:继承自M2原色是这组颜色的参考色，OnPrimary用来显示原色上面的内容与之形成对比

初级容器ampOnPrimaryContainer:M3是一个新定义，颜色更浅，可以用在和Primaryamp的对比中，在主要重要性较低的组件上，如上面的图3和图4所示看起来类似于使用Secondary，根据组件的重要性来选择不同的是，它们和原色是同一个色系，所以适合和原色组成更大的组件，更和谐

同一组的不同阴影取自调色板以下是Primary的调色板，由13种颜色组成数字越大，颜色越浅，反之颜色越深亮/暗主题也可以从调色板中选择

M3使用ColorScheme定义了一组色槽方案，以代码Compose—M3为例:

classColorScheme

通过设置配色方案在主题中设置主题颜色。

就形状而言，首先，M3和M2在形状的分类上发生了变化。

M2M3

M2按组件大小分类:小/中/大，M3按组件圆角弧度分为七类:从无到全，每个组件都有更多的表情，让UI更有表现力。

排印

除了颜色，文字也是MD的规范之一，在字体定义上，M2有六种标题，两种副标题，两种正文标题，比如按钮，下划线等M3有一个更规则的分类不是数字分类，而是按照小/中/大分类

M2M3

以上，色彩，造型，文字是MD的三个基本规范，通过应用这些规范，系统的默认组件形成了独特的视觉风格M3的UI组件在视觉上呈现出两大特点，一是更加圆润，二是面积更大，这使得点击区域在目前的大屏设备中更加明显

FAB浮动按钮

形状从圆形变为圆角矩形。

增加了大型FAB。默认情况下，M2只有两种尺寸:默认和迷你

默认背景颜色从主容器更改为主容器

延伸Fab的高度与Fab的高度对齐，使视觉更加均匀扩建厂房的高度与M2厂房的高度略有不同

按钮按钮

基本上形状从圆角矩形变成半圆形。

按钮不再全是大写，而是区分大小写。

增加高度

芯片标签

半圆变成圆角矩形。

功能调整，动作类芯片分为辅助型和建议型。

默认没有留下阴影通过加深边界的颜色对比，M3组件取消了许多阴影元素，从整体上削弱了拟像风格

TopAppBar标题栏

默认取消阴影，滚动后会添加。

增加高度和字体大小。

M3删除了M2的初级变体的定义，该定义最初用于状态栏，颜色比初级深M2状态栏也是主要的，创建一个沉浸式标题栏

开关开关

更大的面积，更高的高度

取消阴影，物体就变平了。

添加勾号等可识别图形，了解色盲更友好。

导航栏导航栏

首先，名字变了，M2叫底部导航，M3统称为NavigationBar。

阴影去除，高度增加。

M2通过颜色的透明度来表示选中的状态，而M3则添加了轮廓。

对话框对话框

放大了标题的字体。

填充增加。

圆角的弧度较大。

除了以上组件，其他组件风格变化不大，大部分都是取消底纹，增加面积，这里就不赘述了。

最后

通过这篇文章的介绍，我相信大家对M3的风格有了深刻的了解虽然国内的Android应用为了兼顾与iOS风格的统一，很少遵循MD的设计规范，但如果你是个人开发者，MD会帮助你开发出更专业，更美观的产品