开始使用 Material 3 Expressive 进行构建

Material 的最新演进能帮助你制作出更具吸引力且更易于使用的产品。

发布者： Material Design

UX 设计领域在不断发展，而你需要使用工具来创造真正引人入胜且有影响力的体验。这就是 Material Design 的最新演进版本——Material 3 Expressive——能够提供新方法来让你的产品更具吸引力、更易于使用且更受欢迎的原因。请继续阅读，全面了解新的组件、动态物理、色彩更新等。

什么是 Material 3 Expressive？

如今，人们越来越不把设备看作工具，而是看作自身的延伸。富有表现力的界面具有情感影响力，通过视觉设计和交互来唤起感觉或情绪，从而促进连接。Material 3 Expressive 是 Material 3 设计系统的演进。它是一套新功能、更新的组件和设计策略，用于创建具有情感冲击力的 UX。

我们了解到，创造者们正在寻找改善用户体验的方法，包括创建更好的层级结构、使界面更有用，以及建立改进的、更个性化的风格，从而在情感上与用户建立连接。

需要明确的是，M3 Expressive 并不是该系统的新版本。我们不会弃用 M3，这也不是“M4”。

表现力设计的力量

M3 Expressive 是自 2014 年发布以来，我们对该设计系统进行的最深入的研究更新。广泛的用户研究——包括对超过 18,000 名参与者进行的 46 项研究——有助于确保此次演进不仅仅关乎美学，而是真正提升用户的体验。我们的主要研究结果包括：

  1. 所有年龄段的人都更喜欢表现力强的设计。
  2. 表现力强的设计在用户属性（如趣味性、活力、创造力和友好性）方面的得分始终较高。
  3. 用户更有可能切换到使用 M3 Expressive 组件和技术的产品。
  4. 表现力强的设计更容易使用，参与者在表现力强的屏幕上发现关键 UI 元素的速度提高了四倍。

在 design.google 上了解更多关于 Expressive 研究的信息。

更新内容

Expressive 组件

15 个新的或更新的组件现在具有更多的配置功能、形状选项、强调文本和其他表现力更新。

Expressive 样式

动态物理系统

使用动态弹簧的新系统使交互和过渡感觉更生动、流畅和自然。 空间弹簧反映了物体实际运动的物理原理，使动画清晰且可预测。效果弹簧为颜色和不透明度变化创建无缝过渡。 了解更多关于动态的信息

视觉上强调的排版

用于可变字体和静态字体的新类型样式可用于表达各种情绪状态，自动调整变量以提高可读性，并支持粗体编辑布局。 强调的排版增强了信息层级结构，并将注意力吸引到重要的操作（如“开始录制”）或信息（如未读消息）。 了解更多关于排版的信息

扩展的形状库

使用这套新的 35 种形状来为图像裁剪和头像等元素添加装饰细节。 内置的形状变形动画允许从一种形状平滑过渡到另一种形状。这可以是动态的，或者像正方形变成圆形一样简单。 了解更多关于形状的信息

鲜艳的配色方案

可以使用范围更广的颜色来锐化层级结构并明确关键操作。丰富的视觉样式支持个性化和动态色彩。 了解更多关于色彩的信息

Expressive 策略

当 Google 产品开始使用新的表现力功能时，我们迅速建立了一套设计策略，以帮助引导观看者的注意力集中到屏幕上最重要的元素上。每种策略都代表一个轴，你可以沿着这个轴使你的组件、布局和产品更具表现力。虽然这些策略对我们有效，但此次更新的优点在于，创造者们比以往任何时候都更灵活地使用 M3，因此我们鼓励你尝试这些元素，看看什么对你有效。

1. 使用各种形状

形状可以成为界面中强大的沟通工具。在视觉设计的基础层面上，组件、容器和内容的形状决定了用户的第一印象基调。组合形状和圆角半径可以创造视觉上的张力或凝聚力，并将用户的注意力引导到你的应用中。结合使用经典形状和抽象形状来创建独特的轮廓或分组。使用形状库和新的圆角半径选项来混合圆形和方形形状，以实现张力和视觉对比。 exclamation 注意 较小的形状可能会导致基本操作看起来不太重要。 check 做 打破周围的形状样式，以引起对特定元素的注意。

2. 应用丰富而细致的色彩

Material 的动态色彩系统已经为主要、次要和三级元素及表面提供了一系列颜色。混合这些颜色以用于关键组件或视觉元素可以帮助强调屏幕的主要内容。使用表面色调创建视觉层次结构。使用主要、次要和三级颜色角色之间的对比来确定操作的优先级并简化导航。 exclamation 注意 如果没有对比度，元素可能会融合在一起。 check 做 使用对比度来强调主要内容或元素。

3. 使用排版引导注意力

使用强调的文本样式来引起对重要 UI 元素的注意，例如标题和操作。通过强调排版在你的应用中创建类似社论的时刻。更重的权重、更大的尺寸、颜色和间距可以引导注意力并使关键信息更具吸引力。使用 Material 类型比例中的其他类型样式可以帮助在内容块内部和之间创建适当的层次结构。

4. 包含内容以进行强调

将内容组织成逻辑分组或容器。通过充足的空间和最亮的表面映射，使最重要的内容、任务或操作在视觉上突出显示。考虑使用大小、间距、节奏、相似性或其他分组原则来使重要元素更加鲜明。 exclamation 注意 未分组的信息可能会融合在一起。 check 做 将相似的内容分组为信息丰富的分组。

5. 添加流畅自然的动态

通过形状变形或表面效果使交互感觉生动而充满活力。应用 Expressive 动态弹簧或自定义微动画。

6. 利用组件灵活性

UI 应适应用户环境。根据环境移动组件或控件，以使完成任务更容易。通过自定义调整或应用规范布局来使内容适应可折叠屏幕和大屏幕。

7. 结合使用策略来创建英雄时刻

英雄时刻使用多种表现力策略来打破可预测的或统一应用的设计理念。它们旨在以一种新颖的社论方式来表达独立的声明或构成基本信息。英雄时刻可以是一种聚焦机制。投入时间使最重要的交互焕发生机；这些时刻是你产品的核心！ 英雄时刻是短暂的、令人愉悦的、令人惊讶的和意想不到的。在你的产品中坚持使用一两个英雄时刻；太多的时刻可能会让人感到不知所措或分散注意力。 要确定你的英雄时刻，请问自己：

  1. 此互动是否具有情感冲击力？ 考虑设计选择是否可以突出情感反应或强调熟悉感。
  2. 这是你产品中的关键互动吗？ 考虑是否可以强调细节或流程以提高清晰度。通过使重要的按钮占主导地位或强调关键信息来引导用户的注意力。

实用链接

接下来是什么？

我们总是很高兴看到社区对我们正在构建的内容感到兴奋——我们正在进行的更新是我们朝着更动态和更具表现力的系统努力的热情项目。使用 #M3Expressive 标签分享你的 M3 Expressive 作品，并在 Instagram 和 X 上标记 @googledesign。保持联系。

Material Design 是一个适应性强的指南、组件和工具系统，支持用户界面设计的最佳实践。在开源代码的支持下，Material Design 简化了设计师和开发者之间的协作，并帮助团队快速构建美观的产品。