Material 3 Expressive 是谷歌所谓的“大胆的设计新方向”,也是“谷歌设计系统迄今为止研究最深入的一次更新”。谷歌希望应用程序能够“摆脱‘干净’和‘枯燥’的设计,创造出能够在情感层面与用户产生共鸣的界面”。除了全名之外,它也被称为“M3 Expressive”或简称为“富有表现力的设计”。
过去三年来,我们不断探索这场对话的意义,经过数十轮设计和研究,最终找到了 Material Design 的下一个发展方向。通过 46 项独立研究,涵盖数百种设计,以及来自全球超过 18,000 名参与者的参与,我们最终打造出了一个兼具美观性和高可用性的系统。Material 3 Expressive 原则植根于扎实的研究,并建立在长期可用性最佳实践的基础上,因此设计师可以自信地使用这些新的组件和原则,因为他们知道他们正在构建一个易于使用且易于用户连接的设计。
这些研究包括:
- 眼动追踪:分析用户关注的焦点
- 调查和焦点小组:衡量对不同设计的情感反应
- 实验:收集情绪和偏好
- 可用性:了解参与者理解和使用界面的速度
谷歌表示,“富有表现力的设计的基本要素是色彩、形状、大小、动感和包容性的运用。”此外:“Material 3 Expressive 的特点是大胆运用形状和色彩,从而创造令人愉悦的用户体验。”
这些设计方面对于使产品更易于使用也至关重要,因为它们可以吸引人们关注界面中的重要内容:使关键操作脱颖而出,并将相似的元素组合在一起。
“浮动工具栏”是 Material 3 Expressive 诞生的组件之一。在概念设计中,我们看到一个药丸形状的底部栏,它并没有占据整个屏幕宽度。因此,我们看到了背景中的一小块区域,无边框设计变得更加重要。它与目前 Google Chat 中的功能类似。
谷歌研究发现,其“富有表现力的设计更易于使用”,并帮助用户“快速找到每个屏幕上的关键操作并更快地导航”。
… 参与者能够以高达 4 倍的速度识别关键 UI 元素,这表明这些设计能够有效地将用户的注意力引导至屏幕最重要的部分。我们已经看到许多应用程序实现了这种程度的改进,而这不仅仅局限于眼球注视时间。我们还发现,在我们测试的不同设计中,点击关键操作的时间减少了几秒。
再次强调,这些只是概念设计,并不反映实际产品。(至于最终版本,上周末泄露的Google 时钟改版设计图也已公布。)话虽如此,下方“之前”的示例显然是 Gmail 目前的 UI。
当我们观察特定的设计时,例如下面这个电子邮件应用案例研究的屏幕,我们可以直观地看到富有表现力的原则的优势。例如,新设计中的“发送”按钮更大,位于键盘正上方,并使用了辅助色来吸引注意力。我们可以将其与非富有表现力的设计进行比较,后者将小小的“发送”按钮与其他控件(例如附加文件)一起放置在屏幕顶部的工具栏中。当参与者被要求在应用中“发送电子邮件”时,在富有表现力的设计中,他们的眼睛看到按钮的速度要快 4 倍。
其他概念设计展示了时钟应用程序、语音输入、照片编辑器、付款和钱包:
原文:https://9to5google.com/2025/05/05/material-3-expressive-leak/
欢迎入群讨论