Material 3 表现力设计语言

Material 3 表现力 (M3) 设计语言旨在满足用户对现代、相关且独特体验的需求。该语言还允许设计师在界面的布局和呈现中映射特定的情绪和感受。

颜色与排版

颜色系统正在扩展,以采用 M3 更深层的色调调色板和更广泛的令牌集;更简洁的排版比例利用可变字体轴线来实现更多表达,使交互更具表现力和趣味性。

颜色主题

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

可变字体

针对可变字体及其可自定义轴线的更新考量,已从第一方应用扩展到第三方用例(例如具有类似可变轴线集的 Roboto Flex)。

动态的可变字体轴线

利用可变字体轴线来发出表现力强的动态反馈,使交互更具表现力且使用体验更令人愉悦。

示例用例

  • 动态字体字重
  • 动态字体字宽
  • 动态字体字重与字宽

字体角色

除了更新和优化排版比例外,我们还引入了专门用于 Wear 上显著模式的新排版角色。

这些新的排版角色支持多种用例——包括用于表面标题的弧形文本、带有实时空间的预先内容,以及专门用于数字的排版角色——这些角色允许为无需本地化的字符串提供更大、更具风格的文本尺寸。

形状与动效

我们还通过利用灵活的容器形状来应用圆角半径的圆化和锐化,以支持形状变形列表和按钮状态,从而以更广泛、更有意义的方式深入应用形状语言。我们正在为 Wear 上的圆形设备引入“贴边按钮”(edge-hugging buttons) 这一全新的、独有的标志性设计模式。

贴边容器

引入能够拥抱圆形并最大化圆形外形内空间的形状容器。

形状应用

使用圆角半径和独特的形状作为容器来拥抱表现力设计——扩展到令人愉悦的加载动画、有趣的布局、形状变形按钮和自适应按钮组。

圆角半径

利用 Material 3 圆角形状来实现容器形状之间的多样性、区分度以及关联性。

组合容器

组件容器使用灵活的布局技术来动态适应可用空间。它们可以均匀分配空间以实现对称,或者策略性地排列元素以建立视觉层级,强调重要内容,并通过富有表现力和动效引导的视觉线索来引导用户交互。