智能手表设计的里程碑！谷歌重磅发布 Material 3 Expressive

智能手表，作为最贴近用户的个人设备，其设计始终面临着一个核心挑战：如何在极小的圆形屏幕上，平衡信息效率与视觉美感？长期以来，可穿戴设备的设计似乎陷入了一种「实用至上」的单调风格，尤其是在 Apple Watch 建立起高效、统一的交互范式之后，其他平台的设计创新空间似乎被压缩。

Material 3 Expressive（后续简称为「M3E」）正是为此而生。它不再是 Material 3 的简单缩放版，而是专为手表优化的设计系统，旨在打破智能手表界面「千篇一律」的局面，赋予设计师更大的创作自由。

我们之前已在设计 Wear OS App一文中进行了体系化的介绍。因此，本文将专注于介绍 M3E 相对于 Material 2.5 的更新内容。

一、设计背景

M3E 并非设计师的凭空想象，而是源于 Google 对用户需求的深刻洞察。基于三年多、数万参与者的研究发现，用户认为 Google 旗下的应用设计趋于同质化、缺乏个性。

在 Wear OS 平台上，这意味着设计必须超越功能性，实现情感连接。由此，Google 的设计师希望向 M3E 注入「情感」和「活力」，将设计系统从一个强调一致性的框架，转变为一个强调个性化和情感表达的工具集。

二、核心约束

为可穿戴设备做设计最大的约束是屏幕，M3E 的所有创新都围绕如何解决这些约束展开：

1. 空间极限。主流圆形表盘相比方形屏幕，UI 空间损失约 22%。
2. 易读性要求。为保证可读性，圆形屏幕的文本需要更大的安全边距，这进一步压缩了内容空间。
3. 分散注意力。用户通常在活动中或注意力分散时查看手表，设计必须满足「瞥一眼」的需求。

三、边缘贴合容器

传统设计往往在圆形屏幕中保留大量空白，造成空间浪费。M3E 引入了 edge-hugging container（边缘贴合容器）。

edge-hugging container 的形状紧密地贴合圆形表盘的边缘，最大限度地利用了圆形设备的视觉空间。这是 M3E 最具辨识度的创新。

由此，按钮、列表的边缘不再是生硬的直角，而是采用圆弧收边。特别是底部的确认按钮，其弯曲的边缘与表盘的曲率完美融合，最大化地利用圆形空间，创造出一种内容环绕的视觉效果，解决了传统方形 UI 元素在圆形屏幕上的生硬感。

四、形状变换

M3E 引入了 shape morphing 框架，灵活运用圆角或圆润或锐利的变化，使得 UI 元素可以拥有颇具「流动感」的视觉反馈样式。

此外，M3E 还大量运用了 spring animation，让交互反馈感觉更自然。

五、色彩主题

M3E 在色彩系统上全面采纳 Material 3 的标准，但针对 Wear OS 进行了深度定制。

M3E 新增了 third accent color（第三强调色）。这使得应用能够在保持品牌主色的同时，引入更多功能性的颜色，以丰富设计层次，告别过去较为单薄的配色方案。

另外，M3E 的背景色由 Material 2.5 的深灰色变为了纯黑（# 000000），即 Surface / Background，与 watchOS 一致。这一举措，主要在于提升易读性，让内容真正「浮现」在屏幕上。更重要的是，鉴于 OLED 屏幕显示黑色不耗电的特性，纯黑色的背景还能省电。

不过，相比于色彩个性化极强的 M3E ，watchOS 则显得非常克制。watchOS 色彩强调语义化，且更倾向于全平台一致。

六、字体排版

可变字体

M3E 用 Roboto Flex 取代了所有上一版本中的 Roboto 字体。

Roboto Flex 是一种 variable font（可变字体），允许字体根据屏幕大小、显示情境进行定制化调整。

在用户交互时（如滑动、点击），字体可以动态地改变自身的 weight（字重）、width（字宽），以提供富有表现力的动画反馈，使交互更加生动和愉悦。

不过，当系统的语言环境设置为简体中文 (Simplified Chinese, zh-CN) 时，系统会启动 Font Fallback（字体回退机制），并使用 Noto Sans CJK SC (思源黑体简体中文版)。也就是说，Roboto Flex 的可变特性在简体中文环境下暂不可用。

字体性格

为解决圆形屏幕的特有问题，M3E 引入了 Wear OS 专属的文本样式类型：

1. Arc Text（弧形文本）。用于标题，使文本沿着圆形表盘的边缘弯曲，以最大化地利用屏幕空间。
2. Numerals（数字文本）。用于数字信息（如计时器、心率中的核心数据），允许使用更大的字号，以强化核心信息的视觉冲击力。

七、面向大屏手表的自适应设计

随着 Pixel Watch、Galaxy Watch 等高端设备的推出，Wear OS 设备的屏幕尺寸和分辨率正在持续增长。如果大屏幕设备只是简单地将小屏幕内容放大，不仅会浪费宝贵的屏幕空间，更无法体现高端设备的价值。

因此，M3E 建议使用 225dp 作为区分小屏和大屏手表的自适应设计断点。也就是说，设计师可以以 225 dp 这一断点作为分界线，提供一套基础方案、一套大屏增强方案。

值得注意的是，自适应（adaptive）不等于响应式（responsive）。自适应需要策略性地决定增加什么、放大什么、隐藏什么，从而让用户觉得使用大屏手表是值得的。

面对更大、更清晰的圆形屏幕，遵循 M3E adding value 的原则，我们不但可以确保额外的屏幕空间不会被浪费，而是转化为用户体验的增量：

① 展示更多内容

在不牺牲可读性的前提下，减少用户滚屏次数，快速获取关键信息。

② 增强可用性

通过扩大点击目标（tap targets）、增强视觉层次结构、增加内容项之间的内边距。在移动和快速交互场景下，大目标、清晰间隔能有效减少误触，提高交互效率。

八、对比分析

M3E vs. Material 2.5：从规整到灵活

Material 2.5 for Wear OS 强调的是简洁、高效，但往往显得刻板和缺乏个性。M3E 则在保持高效的同时，注入了情感和品牌化的可能。

M3E vs. watchOS：效率 vs. 情感

M3E 的出现，使得 Wear OS 与 watchOS 在设计哲学上形成了鲜明的对比。watchOS 强调效率和信息聚合，而 M3E 则转向了个性化和情感表达。

更多关于 watchOS 的设计要点，可参见我们之前发布的文章。

结语

Material 3 Expressive for Wear OS 是 Google 对可穿戴设备设计的一次大胆宣言。它标志着 Wear OS 正式从一个「功能性」平台，转型为一个「情感化」和「个性化」的平台。对于 UI 设计师而言，M3 Expressive 提供了：

更大的画布

突破了圆形屏幕的限制，通过设计原则和组件创新，实现了空间的最大化利用。

更强的工具

动态色彩、可变字体和形状变形等工具，让设计师能够创造出更具品牌辨识度和情感共鸣的作品。

希望你能从本文获得一些启发，并与我们一起推动腕上体验设计的发展。