Material 3 Expressive：更好、更简单、更具情感化的用户体验
更好、更简单、更具情感化的用户体验
对 Google 全新大胆设计方向背后的研究：Material 3 Expressive 是 Google 设计系统有史以来经过最多研究的更新。在此，Material 研究人员分享了设计背后的数据以及用户对情感驱动型 UX 偏好的新见解。
Material 3 Expressive 源于研究——并非像 41 种蓝色 那样将设计决策委托给数据，而是在研究、设计和工程之间展开的协作探究。早在 2022 年，我们的研究实习生就在研究用户对 Google 应用中 Material Design 的看法。在慕尼黑啤酒馆向同事提及她的初步发现后，她引发了一场团队范围内的设计辩论：为什么所有这些应用程序看起来如此相似？如此无聊？难道没有空间来增强_感觉_吗？
在过去的三年里，我们探索了这场对话的影响，迭代了数十轮设计和研究，以寻找 Material Design 的下一次进化。通过 46 项独立的研究，涉及数百种设计，以及来自世界各地的超过 18,000 名参与者，我们微调了一个既美观又高度可用的系统。Material 3 Expressive 的原则植根于坚实的研究，并建立在长期存在的可用性最佳实践之上。设计师可以放心地应用这些新组件和原则，因为他们知道他们正在构建易于使用且易于连接的东西。
什么是表现力设计？
表现力设计让你感受到某些东西。它激发情感，传达功能，并帮助用户实现他们的目标。想深入了解吗？查看官方的 Material 3 Expressive 指南。表现力设计的基本组成部分是颜色、形状、大小、运动和包含的使用。这些设计方面对于通过吸引对界面中重要内容的注意力来使产品更易于使用也至关重要：突出关键操作并将相似的元素组合在一起。
Material 3 Expressive 大胆地使用形状和颜色，创造了令人愉悦的用户体验。
研究 Material 3 Expressive
随着设计团队创建初始概念并探索更具表现力的设计理念如何在 Google 产品中发挥作用，我们开始了一系列研究，使用了各种方法，包括：
- 眼动追踪：分析用户关注的地方
- 调查和焦点小组：衡量对不同设计的情感反应
- 实验：收集情绪和偏好
- 可用性：了解参与者能够多快地理解和使用界面
为了建立坚实的基础，我们首先研究了单个组件。例如：我们评估了进度指示器的选项，评估了哪些选项使等待时间感觉更快，同时也看起来像是属于一款高级手机。我们研究了一个按钮可以有多大，寻求提高点击时间，而不会压倒屏幕上的其他项目。我们还对新的浮动 toolbar 进行了多项研究，优化了被认为现代、干净、充满活力以及引人注目和可用的设计。我们还确保我们的设计符合可访问性要求和最佳实践。在许多情况下，我们选择超过现有关于点击目标大小、颜色对比度和其他重要方面的标准，这些标准可以使界面更易于使用。这项研究帮助我们创建了 Material Design 这一新演进所需的构建块和指南。
人们更喜欢表现力设计
在设计方面，人们确实更喜欢感受到某些东西。我们发现，应用良好的表现力设计深受所有年龄段的人的喜爱，其中 18 至 24 岁的年轻人尤其强烈——高达 87%。
虽然所有年龄段的人都表示净积极的迹象，但年轻的研究参与者对 M3 Expressive 的偏好最为强烈，并将设计评为“视觉吸引力”和“使用意图”很高。
但最高级别的偏好只能告诉我们这么多。我们想深入研究导致这种偏好的设计方面。在去年的 Google I/O 大会上，我们介绍了一 系列属性，Material 团队使用这些属性来比较设计。您可能注意到其中许多都是情感词？“有趣”、“充满活力”、“创意”、“友好”和“积极氛围”是一些例子。在我们开发 Material 3 Expressive 的过程中，我们的研究人员与设计师合作，根据这些属性迭代测试新的屏幕设计，以帮助优化设计以获得所需的情感反应。此外，我们还力求确保使用此新系统创建的设计被视为更现代和更具视觉吸引力。
M3 Expressive 设计在诸如“充满活力”、“情感”、“积极氛围”、“创意”、“有趣”和“友好”等属性方面的评分明显更高。
表现力设计感觉更相关
表现力设计不仅仅是让产品看起来不错；它可以提升用户对产品本身的看法。我们在衡量这些设计的可取性时看到了这一点。来自 Caleb Warren 等人 (2019) 的现有研究探讨了哪些因素解释了为什么有些产品会成为每个人都想要的流行、必备物品，而另一些产品——即使具有相同的功能——却不具有这种吸引力。
这些因素可以在用户对新的 M3 Expressive 设计的反应中进行量化。我们发现亚文化感知度提高了 32%，这表明表现力设计使品牌感觉更相关且“了解内情”。我们还看到现代性提高了 34%，使品牌感觉新鲜和具有前瞻性。最重要的是，叛逆性提高了 30%，这表明表现力设计将品牌定位为大胆、创新且愿意打破传统的品牌。
M3 Expressive 设计在可取性属性（包括“现代性”、“亚文化”和“叛逆性”）方面的评分更高。
表现力设计更易于使用
最重要的是，表现力设计旨在改善用户体验。M3 Expressive 对颜色、大小、形状和包含的战略性使用遵循了长期存在的设计原则和最佳实践，吸引了对关键元素的注意力，并帮助用户更快地导航。
我们将各种各样的人带到配备最新眼动追踪眼镜的实验室，让他们以随机顺序与 Material 3 Expressive 和当前的 Material 3 版本中的 10 个不同的应用程序进行交互。参与者能够在 M3 Expressive 设计中更快地发现关键的 UI 元素，速度提高了四倍，这表明它们引导用户的注意力转向屏幕上最重要的部分。我们已经看到许多应用程序达到了这些改进水平，这些改进超出了眼睛注视时间。例如，点击关键操作所需的时间在我们测试的不同表现力设计中减少了几秒钟。
下面的电子邮件应用程序案例研究有力地说明了表现力原则的好处。例如，新设计（右侧）中的“发送”按钮更大，放置在键盘上方，并使用辅助颜色来吸引人们的注意。相比之下，非表现力设计将小的“发送”按钮放置在屏幕顶部的工具栏中，以及其他控件（如附加文件）旁边。当参与者被要求“发送电子邮件”时，他们的眼睛在表现力设计中看到该按钮的速度提高了四倍。
电子邮件应用程序，其中“发送”按钮位于标准顶部应用程序栏中。
通过使“发送”按钮更大且更突出，参与者能够更快地发现该按钮，速度提高了四倍。
特别令人兴奋的是，表现力设计似乎为所有年龄段的用户创造了公平的竞争环境。可用性测试通常发现，老年人需要更长的时间才能在视觉上找到关键的 UI 元素。但是在 M3 Expressive 版本中，我们发现注视时间中的年龄效应显着消除，从而帮助 45 岁以上的用户与年轻用户表现相当。
M3 Expressive 设计使老年用户能够像年轻用户一样快速地发现屏幕上的关键交互元素，并且测试了 10 个应用程序。
最后，至关重要的是，对于具有不同运动和视觉能力的参与者，表现力设计被证明更具视觉吸引力、更直观且更易于使用。更大的按钮、高对比度的视觉包含以及 M3 Expressive 设计的其他关键属性使界面更好且更易于每个人使用。
上下文仍然重要
虽然表现力设计提供了令人兴奋的可能性，但它不是一种万能的解决方案。在媒体播放器或电子邮件应用程序中有效的方法可能不适用于银行界面之类的东西。产品制造商需要尊重既定的 UI 模式和标准。
我们测试的一个设计没有坚持我们设计系统的模式和标准：对于播放列表，我们用专辑封面的图像以混乱的方式排列，取代了熟悉的垂直滚动歌曲列表。虽然用户报告界面看起来现代而令人兴奋，但可用性得分却下降了。在另一个例子中，从电子邮件操作中删除文本标签导致可用性降低。这就是为什么我们有一个设计系统来告诉您如何使用表现力组件。当基本交互范例被打破时，表现力设计可能导致较差的可用性或负面情绪。
在这种音乐播放列表设计中，轮播和垂直列表的熟悉 UX 模式是有效的。
再多的表现力设计也无法胜过基本功能。在这个概念设计中，非结构化且未标记的图像未被识别为音乐播放列表。
还值得注意的是，虽然表现力设计提高了偏好和可用性，但它受到了用户不熟悉的影响。这是设计师必须应对的挑战，但我们预计随着越来越多的应用程序在未来几个月内采用这种新风格，熟悉度将会提高。
开始使用
现在是超越“干净”和“无聊”的设计来创建在情感层面上与人们联系的界面的时候了。准备好自己尝试了吗？我们有一些提示：
- 开始实验： 深入研究更新的 Material 3 Design Kit for Figma，并开始使用表现力设计选项。
- 尝试这些策略： 探索使用 M3 Expressive 设计策略，同时定制您的 UI 以支持核心用户旅程。
- 要有意图并从用户需求开始： 虽然充满活力、表现力的设计具有广泛的吸引力，但少数用户更喜欢更平静、更不强烈的版本。始终从用户的需求开始。在确定策略和组件的正确选择之前，请了解他们的要求和关键用户旅程。
- 优先考虑功能： 不要为了视觉装饰而牺牲产品的核心功能。再多的情感也无法弥补清晰度的不足。
- 遵循可访问性标准： 遵守颜色对比度、屏幕阅读器兼容性、导航和其他可访问性最佳实践的既定指南。
- 迭代，迭代，迭代： 使用研究找到新鲜感和熟悉感、趣味性和专业性之间的平衡。我们的 设计规模 可以让您抢先一步。并且不要忘记关键的可用性研究，以确保您没有走得太远。
特别感谢所有使这项研究成为可能的研究人员和设计师，特别感谢 Bradley Patrie、Dallas Barnes、Viviane Herdel、Nico Thornley、Mason Price、Mohammed Khwaja 和 Brenton Simpson。
深入了解 M3 Expressive
(在新选项卡或窗口中打开)
您的 M3 Expressive 指南
全面介绍 Material 的最新演进，包括新组件和样式更新。
(在新选项卡或窗口中打开)
已更新：Figma M3 Design Kit
使用最新的 Material 3 Expressive 组件和样式快速创建设计模型和原型。
贡献者
Frank Bentley
Google Design 的 UX 研究主管
Julia Feldman
Google Design 的高级 UX 研究员
Lennard Schmidt
Google Design 的高级 UX 研究员
Martin Pielot
Google Design 的 UX 研究员
Michael Gilbert
Google Design 的 UX 研究员