Material 3 富有表现力的设计语言

Material 3 Expressive (M3) 旨在满足用户对现代、相关且独特体验的需求。此外,借助富有表现力的设计,设计师还可以在界面的布局和呈现中反映特定的情感和感受。

颜色和排版

颜色系统正在扩展,以采用 M3 更深层次的色调调色板和更广泛的令牌集,而更简单的排版比例则利用可变字体轴实现更多表达,让互动更具表现力和愉悦感。

颜色主题

新令牌让您可以在不同的主题中以及整个设计系统的上下文中应用更多颜色。

可变字体

更新后的可变字体及其可自定义轴的注意事项不仅适用于第一方,还适用于第三方用例,例如具有一组类似可变轴的 Roboto Flex。

可变字体轴在运动

利用可变字体轴来传达富有表现力的动作反馈,让互动更具表现力且使用起来更愉悦。

应用场景示例:

  • 动态字体粗细
  • 动态字体宽度
  • 动态字体粗细和宽度

类型角色

除了经过更新和优化的类型比例之外,我们还推出了专门在 Wear 上提供醒目图案的新类型角色。

这些新的类型角色支持多种用例,包括用于显示标题的 Arc Text、包含直播空间的主动内容,以及专门用于数字的类型角色,可让不需要本地化的字符串采用更大且更具样式的文本大小。

形状和动作

我们还将以更广泛且更有意义的方式运用形状语言,利用灵活的容器形状应用圆角半径的圆润和锐化,以支持形状变形列表和按钮状态。我们将边缘贴合按钮引入为 Wear 上圆形设备的一种新的专有标志性设计模式。

边缘容器

推出了形状容器,可采用圆形并最大限度地利用圆形外形规格中的空间。

应用的形状

使用角半径和独特形状作为容器,采用富有表现力的设计,延伸到令人愉悦的加载动画、有趣的布局、形状可变的按钮和自适应按钮组。

角半径

利用 Material 3 角形,实现容器形状的多样性、区分性和关系。

分组的容器

组件容器使用灵活的布局技术来动态适应可用空间。他们可以均匀分配此空间以实现对称,也可以有策略地排列元素以建立视觉层次结构、突出显示重要内容,并通过富有表现力的动画引导视觉提示来引导用户互动。