概览

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 中更深邃的色调组合和更广泛的 Token 集。新增的第三种强调色,以及更多的 Token 变体和更具体的颜色角色,为该设计系统带来了深度与多样性。

"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。基础字体比例经过专门定制,针对手表的圆形屏幕进行了优化。