重大升级！3个章节深度解读Google Material 3 Expressive

不知道大家有没有和我一样的感觉，设计圈好像已经很久没有大的更新和流行趋势出现了。终于在上周的“The Android Show ”活动中，我看到 Google 对经典的 Material Design 做了一次重大升级，新的设计语言叫 Material Design 3 Expressive。所以，周末的时候赶紧研究了一波，看看到底有了哪些新的变化，也学习下像 Google 这样的大厂到底怎么做设计升级。

Google 的 Material Design 自 2014 年发布以来，一直是 UI 设计领域的重要风向标。从最初的“物理隐喻”到 Material 2 的“品牌定制化”，再到如今 Material 3 的“个性化与富有表现力”，Material Design 一直在不断进化。上周，Material 3 在“富有表现力 UX (Expressive UX)”方面的一系列更新，意味着设计语言向更个性化、更具情感连接、更适应品牌叙事的方向迭代，重在提升视觉表现力和互动性。

更多设计趋势：

一、Material Design 3 Expressive 的核心设计理念

早在 2022 年，谷歌的研究实习生就在研究用户对 Google 应用中 Material Design 的感受。然后在慕尼黑一家啤酒馆向同事们透露了她的初步发现后，她引发了一场全团队的设计辩论：为什么这些应用看起来都这么相似？这么无聊？难道就没有空间来改变这种感觉吗？

在过去三年中，谷歌团队不断探索这场对话的意义，通过 46 项独立研究，做了上百套方案，以及来自全球超过 18,000 名参与者的参与，最终找到了 Material Design 的下一个发展方向。谷歌发现传统"整洁但乏味"的设计已无法满足用户对品牌个性与情感连接的深层需求，用户越来越偏好富有表现力的设计。

Material 3 Expressive 标志着谷歌设计哲学的重大转型——将UI从功能型工具升级为情感化媒介。全新的 Material 3 Expressive 被谷歌称之为是一个“大胆设计的新方向”，也是“谷歌系统设计迄今为止研究最深入的一次更新”。

Material 3 Expressive 官方宣传片

研究数据显示：

1. 各年龄段用户普遍偏好表现力更强的设计
2. 表现力设计在趣味性、活力、创造性和友好性等用户属性上得分更高
3. 用户更倾向于选择使用 Material 3 Expressive 组件和技术的产品
4. 表现力设计更易于使用，参与者能够以最多快 4 倍的速度发现关键 UI 元素

我们怎么理解这次更新的“Expressive（富有表现力）”？

“富有表现力 UX”是 Material Design 3 的核心设计原则之一。它超越了传统意义上对“美观”的追求，更强调：个性化、情感连接、品牌叙事和适应性与包容性。简单来说，M3 的“富有表现力”目的是让数字产品感觉更“活”、更“懂你”、更能代表品牌。这也是它的核心升级理念。

富有表现力的设计的基本要素是色彩、形状、大小、动效和内容的运用。

1. 色彩上，它引入了更丰富的点缀色，用于突出关键操作按钮；
2. 形状上，优化了按钮与浮动工具栏的圆角半径，使界面看起来更亲和；
3. 尺寸上，在保证信息层次的同时，扩大了"可点击区域"，以提升操作体验；
4. 动画上，通过微交互动效，引导用户注意力并提供操作反馈。

这些设计不仅提升了可用性，也在情感层面与用户建立了更深层次的联系，使应用在"酷感"、"现代感"和"叛逆感"等品牌认知指标上有了显著提升。

二、具体更新了哪些内容？

1. 提升组件视觉表现力

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

例如，按钮、卡片、对话框等组件都提供了更多的样式和定制选项。

组件的不同状态（如悬停、按下、禁用）通过色彩、阴影、形状的细微变化得到更清晰的表达。

组件可以根据其在界面中的重要性和上下文，呈现不同的视觉强调。

可能还会引入新的组件类型，以满足更丰富的交互和信息展示需求，如支持更复杂布局的卡片、更具表现力的导航元素等。

2. 更有活力和有意义的动效

使用运动弹簧的新系统使交互和转换感觉更加生动、流畅和自然。空间弹簧模拟物体实际运动的物理原理，使动画清晰可预测。效果弹簧则能为颜色和不透明度的变化创造无缝的过渡。

M3 强调动效不仅是为了“炫技”，更应服务于用户体验。动效应具有目的性，能够引导用户、提供反馈、增强空间感，并增添愉悦感。

3. 更有表现力的排版系统

可变和静态字体的新类型样式可用于表达一系列情绪状态，自动调整变量以提高可读性，并支持粗体编辑布局。强调的字体强化了信息层次，并吸引人们注意重要的操作，如 “开始录制” ， 或信息，如未读消息。

M3 引入了更灵活、更具表现力的排版系统。强调使用可变字体 (Variable Fonts) 和更精细的字阶 (Type Scale) 来优化信息层级和阅读体验。会使用更重的字重、更大的尺寸、色彩和间距可以引导注意力，使关键信息更具吸引力。

4. 更丰富的形状

使用新的 35 种形状为图像裁剪和头像等元素添加装饰细节。

内置的形状变形动画可实现形状间的平滑过渡。这可以是动态的，也可以是简单的正方形变为圆形。M3 允许对组件的圆角半径进行更细致的定制，从小圆角到完全的“药丸形”，甚至是不规则形状的探索。

对设计的影响，主要体现在我们可以利用形状系统为组件注入更多个性。用不同的圆角风格可以微妙地传递品牌的气质（如科技感、亲和力、趣味性），形状可以帮助区分元素、建立视觉层级，并引导用户的交互行为。

5. 动态的配色方案

颜色是 M3 最具标志性的特性。系统能够从用户的壁纸或预设主题中提取主色调和辅助色，并将其应用于整个 UI 界面，包括应用、小组件等。丰富的颜色选择范围可用于清晰地展现层次结构并明确关键操作。丰富的视觉样式支持个性化和动态色彩。

基于这种新的设计元素，咱们就需要考虑应用如何在各种动态色彩主题下保持品牌识别度和可用性。因为每个用户的设备界面都因其个性化选择而独一无二。

三、设计策略

我在官网上看到了 Google 对于这些更新写了明确的设计策略，帮助我们更好理解和应用这次的设计更新。

1. 使用多种形状

形状可以成为界面中强大的沟通工具。在视觉设计的基础层面，组件、容器和内容的形状会为用户设定第一眼的视觉基调。巧妙地结合形状和圆角半径，可以营造视觉张力或凝聚力，引导用户在应用中的注意力。结合经典形状和抽象形状，可以创建独特的轮廓或群组。 使用形状库和全新的圆角半径选项，可以混合圆形和方形，营造张力和视觉对比。

2. 使用丰富细腻的色彩

Material 的动态色彩系统已为主色、次色和复色元素及界面提供了一系列颜色。使用颜色创建视觉层次。利用主色、次色和复色角色之间的对比，可以确定操作的优先级并简化导航。

3. 用字体引导注意力

使用强调的文本样式来吸引用户对重要界面元素（例如标题和操作）的注意力。通过强调排版，在应用中营造出类似编辑的效果。更大的字重、更大的字号、颜色和间距可以引导用户，使关键信息更具吸引力。使用 Material 字体库中的其他字体样式，有助于在内容块内部和之间创建适当的层次结构。

4. 包含强调内容

将内容组织到合理的分组或容器中。通过大的留白和颜色，使最重要的内容、任务或操作在视觉上更加突出。考虑使用大小、间距、节奏、相似性或其他分组原则，使重要元素更加清晰易懂。

5. 添加流畅自然的动画

通过形状变形或界面效果，让交互更加生动活泼。应用富有表现力的动画曲线或自定义微动画。

6. 利用组件灵活性

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

7. 组合设计手法，打造高光时刻

“高光时刻”通过多种富有表现力的设计技巧，打破千篇一律的套路化设计。用新颖的、像杂志排版一样吸睛的方式，突出核心信息或传递产品态度。这些时刻能帮用户聚焦重点——把时间花在打磨最关键的操作体验上，因为这些瞬间才是产品的灵魂！

高光时刻的特点：

1. 短暂但令人愉悦
2. 出其不意（比如完成支付时蹦出一个小彩蛋）
3. 少而精：一个产品最多设 1-2 个，太多反而会分散注意力

如何找到你的高光时刻？问自己：

① 这个操作能戳中用户情绪吗？

比如设计能否放大用户的成就感（如健身 APP 完成目标的庆祝动画）

或者强化熟悉感（像微信红包的拆封音效）

② 这是产品的关键操作吗？

是否需要强化某个步骤的清晰度？

比如把重要按钮做得更醒目，或让关键信息“跳”出来引导用户视线

我的思考

Material Design 3 的“富有表现力 UX”升级，是 Google 对未来数字产品体验方向的深刻洞察。在设计趋势上打破 iOS 主导的极简主义，建立"情感优先"的新标准。它鼓励设计师打破传统束缚，创造出更个性化、更具情感连接、更能传递品牌价值的产品。这不仅是对设计工具和规范的更新，更是对设计理念的一次升华。

这次更新不仅仅是视觉上的改变，更是基于深入用户研究的设计决策，当然这花的钱也是不少，大规模用户研究越来越被重视。对于设计师来说，这是一件好事，Material 3 Expressive 提供了更多的创作自由和表达方式，给了我们更多设计上发挥的空间，让我们能够设计出不仅功能强大，还能触动人心的产品。