概览

Material 3 Expressive 是我们最小屏幕(手表)的最新设计系统。它针对圆形外形进行了优化,带来了设计更新,强调了高级感和更强的表现力。使用 Material 3 Expressive 设计和构建美观且富有表现力的手表应用。

表现力设计原则

表现力设计通过周到的形状、动画、颜色和排版处理,提升每个 UI 层。

拥抱圆形

Material 3 Expressive 引入了专为圆形屏幕设计的形状框架。它利用整个画布优化了一目了然度和视觉平衡。

"The check button at the bottom has a curved bottom
edge"

高级动画和弹性

Material 3 Expressive 更新使导航在所有过渡中都感觉自然、高级且一致。现在,动画在空间上连接了界面。它们对用户手势的响应更准确,使导航更加直观。

形状变形

Material 3 Expressive 引入了列表和选择按钮的形状变形框架,针对更高级的体验进行了优化。列表在圆形外形设备上具有流畅的滚动功能。

丰富的色彩

颜色系统扩展以采用 Material 3 Expressive 中包含的更深的色调调色板和更宽泛的令牌集。第三种强调色以及更多的令牌变体和更具体的颜色角色,为设计系统带来了深度和多样性。

"The third accent color lets a stop button in a stopwatch app appear in red,
even though the app already has blue and pink as accent
colors"

可变字体

Material 3 Expressive 将所有 Roboto 实例替换为 Roboto Flex。基线排版比例根据手表的圆形屏幕进行了定制和优化。