Material You: 谷歌新晋设计语言

我们之前为大家隆重介绍了Android 12和它的功能体验，错过的同学可以点击下方链接进行阅读。

然而，作为与Android 12一同推出的最新Google设计语言，Material You也掀起了一番浪潮。就连Material Design也要为其让路，它也就此成为了Google历史上的一次重大设计变革。

今天，我们就为大家解读一下Material You的全新设计升级以及它所适配的部分Google应用。

Material You

全新一代设计语言

自从在Android 5.0 Lollipop中引入了Material设计语言以来，Google也在不断地将其改进。近年来，Google一直在朝着更扁平和更单色的设计进行发展。在前段时间的Google I/O上，公司正式发布了全新一代设计语言——Material You。

Material You是Material Design的新版本。它首先应用于Pixel设备和Google应用程序，随后计划在其他平台上陆续推出。更新后的设计语言结合了Google当前Material Design标准中较新的界面元素，同时也重新引入了过去几年许多应用程序中所缺少的颜色。

最重要的是，Material You具有颜色/设计定制功能，这就使得我们可以自定义色样、对比度、元素大小和线宽。此外，这种自定义操作甚至可以跨设备同步。同时它更加强调多屏幕的共同协作，且提供了多个Google设计的调色板供我们选择。

Iteration

M3的全新设计功能

通过不断的更新迭代，Material You拥有一系列全新的设计功能，它在顶部应用栏、按钮、色彩、排版、形状等方面都发生了新的变化。

▍Top App Bar (顶部应用栏)

顶部应用栏主要出现在屏幕顶部以显示信息和操作。Material You具有四种类型的顶部栏：居中、小、中和大，且可以使用颜色填充来创建与内容的区分，而不是使用阴影提升。此外，顶部栏容器的宽度与视图或设备的宽度相同。

顶部栏的四种类型

在经过更新升级后，顶部应用栏可以更好地与颜色对齐。在使用Material You之前，顶部应用栏使用了阴影来区分应用栏和内容。而现在，颜色填充却成为了使用新创建表面色调的主要指标。

Takeaways：

在Material You设计语言的支持下，顶部应用栏发生了以下五种变化：

Color (颜色)：新的颜色映射以及动态颜色的兼容性
Elevation (高度)：没有阴影，而是使用颜色填充，以分割界面内容
Typography (排版)：更大的默认文本
Layout (布局)：更大的默认高度
Types (类型)：顶部应用栏包括居中、小、中和大在内的四种类型

M2: 大胆的对比色将顶部应用栏与下方的内容分开

Material You: 通过颜色填充区分顶部栏与下方内容

▍Floating Actoion Button (悬浮操作按钮)

Floating Action Button (FAB)，代表了屏幕上最重要的操作，它可以帮助我们获得关键行为。FAB具有三种尺寸：正常、小和大。值得我们注意的是，FAB中的图标是清晰易懂的，因为这些按钮并没有文本信息。此外，当我们滚动屏幕时，它会保留在当前界面上。

FAB的三种尺寸类型

随着Material You的更新，FAB也进行了一系列的重新设计。新的FAB的角半径更小，现在类似于圆角矩形，而不是圆形。此外，一些预设样式也可以使用主色、辅助色或表面颜色的色调来将FAB主题化。

Takeaways：

悬浮操作按钮在以下三个方面进行了升级：

Color (颜色)：新的颜色映射以及动态颜色的兼容性
Shape (形状)：拐角半径更小
Types (类型)：新的大型FAB变体

FAB在颜色、形状和类型方面的更新

M2: FAB是圆形的，且有阴影

Material You: FAB具有更方形的形状，且可以使用动态颜色

▍Typopraphy (排版)

Material的默认排版类型比例包括一系列对比鲜明和可扩展的样式，以支持广泛的用例。通过升级更新，Material You类型量表使用了经过修订的类别框架，同时简化了排版风格。

在Material You之前，共有六种标题变体、两种字幕变体、两种正文变体、按钮、标题和上划线样式。而在迭代至Material You后，每个分类（即小、中和大）都有更规则且数量更少的变体。

M2: 排版样式

Material You排版样式

此外，更新后的Material You创建了自定义字体比例，以适应于各种设备，进而形成具有可读性、可访问性且美观的排版。同时，它还将类型样式组成了五个角色，这些角色被命名以描述其用途。

Display (显示样式)：

默认类型比例中有大中小三种显示样式。作为屏幕上最大的文本，显示样式保留了简短且重要的文本或数字，它们在大屏幕上的效果是最佳的。其中，我们可以考虑选择更具表现力的字体，例如手写或脚本样式。

富有表现力的字体可用于显示样式

Headline (标题样式)：

标题样式小于显示样式。它们最适合小屏幕上简短且高重点的文本。这些样式可以很好地标记文本的主要段落或内容的重要区域。此外，标题也可以使用富有表现力的字体，但前提是还需整合适当的行高和字母间距，以保持文本的可读性。

富有表现力的字体也可用于标题样式

Lable (标签样式)：

标签样式是较小的实用样式，它用于UI区域。例如，组件内部的文本或内容正文中非常小的文本。

标签样式应用于组件中的功能

Application

可适配的程序及小部件

Google计划将Material You不断推广到各个应用程序，例如计算器、时钟、Google Warkspace、日历等。

▍Google Caculator

Material You的开发使各种事物变得更加时尚，并为各类应用程序和小部件带来了新的外观和功能。经过改进，Google应用程序也发生了一定的改变，且具备了一些额外的功能。

通过增加了一个新的动画和触觉元素，Material You使得最新版的计算器变得更具吸引力。此外，最新的圆角按钮也应用到了计算器之中。当我们按下计算器时，它的按钮会变成带有圆角边缘的正方形，而在释放时，又会恢复为圆形。同时伴随这种视觉变化的是每次点击时所产生的触觉反馈。

▍Google Clock

通过改进，Google Clock在界面色彩方面进行了重新设计。在使用过程中，我们也可以在主屏幕上对该应用程序的小部件进行拖动，同时大家也会看到几种新的时钟样式。

除此之外，所有的小部件都具备圆角，并采用了当前设备壁纸的主色调。同时，我们还可以通过长按显示铅笔图标的小部件来编辑时钟样式。

▍Gmail

Gmail是最重要和最受欢迎的Google应用程序之一，它可以永久保留重要邮件、文件和图片，且可以使用搜索快速、轻松地查找任何需要的内容。

适配了Material You的Gmail应用程序具有一个强大的功能，即：使用动态颜色。这也就意味着Gmail可以根据我们的主题或背景颜色更改界面颜色。动态颜色可以使得屏幕的整体主题变得更加连贯。除此之外，Gmail应用程序中的按钮、标签和搜索栏也都使用了动态颜色，从而形成Google“更加动态、个性化的外观”。

适用三种不同系统的Gmail界面对比

Gmail的动态颜色 | 图源：luca020400

▍Google Docs,Sheets,and Slides

这三款应用程序属于Google Workspace套件中的一部分。在适配了Material You后，它们的视觉变化可能不像电话或时钟等更直接的交互式应用程序那样明显。但即便如此，我们仍然可以看到界面向更圆润的元素和微妙的柔和色调进行了转变。

例如，主搜索栏现在是一个完全圆角的椭圆形，右下角方圆形的“添加文档”按钮用一个更扁平的图标消除了多色的Google图标。

▍Google Lens

Google Lens是一款基于图像识别和OCR技术的人工智能应用。它能实时识别用智能手机相机所拍摄的物品并提供与之相关的内容。

适配了Material You的Google Lens也采用了动态主题系统，可以自动从我们的壁纸中选取颜色并将其应用到系统UI及其各个部分。此外，由于自动检测的语言和我们需要翻译的语言已经被分成单独的彩色气泡，这就使得两者更加容易区分。同时我们也不难发现，镜头快捷方式出现在了搜索栏中麦克风图标的旁边。