Material 3 表达式设计:更好、更易用、更富情感的用户体验
Material 3 Expressive

原始链接: https://design.google/library/expressive-material-design-google-research

Material 3 (M3) 的表达性设计通过巧妙运用颜色、大小、形状和容器来引导用户注意力,显著提升了用户体验。眼动追踪研究比较了 M3 表达性设计和标准 M3 设计,结果显示参与者识别关键 UI 元素的速度最多提升了四倍。这种更集中的注意力转化为更快的任务完成速度,在测试的表达性设计中,关键操作的点击时间都显著缩短。 例如,在一个邮件应用的重新设计中,“发送”按钮被放大,重新定位到键盘上方,并用次要颜色突出显示,使其比标准设计中位于工具栏上的较小按钮更加醒目。用户在表达性设计中找到“发送”按钮的速度提高了四倍,这证明了这些原则在引导用户完成关键操作和简化工作流程方面的有效性。最终,这带来了更直观、更高效的用户体验。

Hacker News 的评论者们普遍批评 Google 的 Material 3 Expressive (M3E) 设计系统,认为它视觉上不美观且性能低下,只是一场哗众取宠的营销噱头。许多人将宣传资料与臭名昭著的“百事可乐标志”文档相提并论,认为其设计选择的理由毫无意义。一个常见的抱怨是 M3E 过分注重最初的“惊艳”效果,而忽略了长期的可用性,例如为了更大的“发送”按钮而牺牲了内容空间。 用户还批评 M3E 演示网站上滞后的光标实现、过分依赖情感诉求而非功能性,以及缺乏对老年人和视力障碍用户的考虑。一些人认为 Android 更新已经沦为对 iOS 的拙劣模仿,未能有效利用屏幕空间。Material Web 组件处于“维护模式”也令人失望,这违背了之前的承诺。尽管 Google 声称其数据驱动,但评论者认为诸如“叛逆性”和“亚文化感知”之类的指标毫无意义。许多人怀念旧版 UI 设计(如 Windows 98 或早期的 Material Design)的简洁性和信息密度。

原文

Most importantly, expressive design is about improving user experience. M3 Expressive’s strategic use of color, size, shape, and containment follows from long-standing design principles and best practices, drawing attention to key elements and helping users navigate more quickly.

We brought a diverse set of people into a lab with the very latest eye-tracking glasses and had them interact with 10 different apps in both Material 3 Expressive and current Material 3 versions, randomly ordered. Participants were able to spot key UI elements up to four times faster in the M3 Expressive designs, suggesting that they steer user attention toward the most important part of the screen. We’ve seen many apps achieve these levels of improvement, which extend beyond eye-fixation times. The time it takes to tap on key actions, for example, decreased by seconds across different expressive designs we tested.

The email-app case study below persuasively illustrates the benefits of expressive principles. For example, the Send button in the new design (on the right) is larger, placed just above the keyboard, and uses a secondary color to draw attention to it. The non-expressive design, by contrast, places the small Send button in the top-of-screen toolbar alongside other controls like attaching a file. When participants were asked to “send the email,” their eyes saw the button four times faster in the expressive design.

联系我们 contact @ memedata.com