磁贴设计原则

磁贴可快速访问用户完成任务所需的信息和操作。在手表表盘上执行滑动操作后,用户可以看到他们朝着健身目标取得的进展、查看天气等。用户还可以从磁贴快速启动应用并完成基本任务。

用户可以选择他们希望在 Wear OS 设备上看到的磁贴,既可以在设备本身上选择,也可以在配套应用中选择。

UX 设计原则

系统提供的磁贴使用一致的设计语言,因此用户期望磁贴具有以下特点

  • 即时: 磁贴旨在帮助用户快速完成常见任务。以清晰的信息层次结构显示关键内容,以便用户了解磁贴的内容。
  • 可预测: 每个磁贴中的内容应始终侧重于面向用户的任务。这有助于用户预测他们在磁贴上可以看到哪些信息,从而提高回忆能力。
  • 相关: 用户走到哪里都带着他们的 Wear OS 设备。请考虑磁贴中的内容与用户的当前情况和环境的相关性。

应用图标

系统会从启动器图标自动生成可能显示在屏幕顶部的应用图标。不要将此图标作为磁贴布局的一部分。

Wear OS 可能会在用户滚动浏览磁贴轮播时自动显示应用图标。无需将应用图标放在磁贴设计中。
不要在磁贴设计中添加应用图标,因为如果也在系统级别显示,则可能会出现两次或重叠。

设计指南

创建磁贴时,请牢记以下指南。

专注于一项任务

使每个磁贴都专注于一项任务,例如开始跑步
在一个磁贴上支持过多不同的任务。

为每个任务创建单独的磁贴

如果您的应用支持多项任务,请考虑为应用支持的每项任务创建多个磁贴。例如,健身应用可以同时拥有目标磁贴和锻炼活动磁贴。

Step count, workouts this week, and mindfulness tasks

显示图表和图表的可一瞥表示形式

显示数字或统计信息的快速、可一瞥表示形式,并允许用户在需要时点击查看应用中的更多信息。
在磁贴上显示详细的数字或统计信息。

指示最新数据更新

向用户明确磁贴数据的最新程度。如果您显示缓存数据,请指示上次更新时间。

Middle image shows last session was 45 minutes ago

使用适当的数据刷新率

为磁贴选择适当的更新率,同时考虑对设备电池续航时间的影响。如果您使用平台数据源(例如心率和步数),Wear OS 会为您控制更新率。

空状态

磁贴有两种类型的空状态。对于这两种情况,请使用PrimaryLayout

错误或权限

告诉用户他们需要从磁贴更新其设置或首选项。

登录

在登录磁贴上提供清晰的号召性用语。

显示正在进行的活动

当应用执行长时间运行的活动(例如跟踪锻炼或播放音乐)时,应在一个或多个磁贴中显示正在进行的活动的进度。

如果您的应用还支持允许用户启动这些活动的磁贴,请执行以下操作以最大程度地减少用户混淆

  • 指示正在进行的活动已在进行中。
  • 如果用户点击此类磁贴,请启动您的应用并显示正在进行的活动。不要启动正在进行活动的新的实例。

Each tile includes a call to action button at the bottom, allowing users to open the app

必需元素

  • 主要数据: 描述活动的的主要内容。
  • 标签: 显示活动的状况。

可选元素

  • 图标或图形: 可以是动画或静态图像。
  • 底部紧凑型芯片: 包含号召性用语。

磁贴上的动作

为磁贴添加动画时,帮助用户理解变化

如果要更新磁贴上的信息(例如步数目标的进度),请强调这一点。
意外地在值之间切换。

预览

添加磁贴预览,以帮助用户在 Wear OS 或手持设备上的磁贴管理器中查看显示的内容。每个磁贴可以有一个代表性的预览图像。该图像应满足以下要求

要求

  • 以 400px x 400px 导出资源。
  • 提供圆形预览图像。
  • 使用纯黑色背景。
  • 保存为 PNG 或 JPEG 格式。
  • 为应用的常用语言添加本地化资源。
在 Wear OS 设备上的磁贴管理器中显示的磁贴预览。 在手机上的磁贴管理器中显示的磁贴预览。
如果要更新磁贴上的信息(例如步数图表的进度),请强调这一点。
显示空状态、在分页 UI 中显示磁贴图标或在磁贴周围添加描边。

更大的屏幕尺寸

为了适应各种 Wear OS 屏幕尺寸,ProtoLayout Material 布局模板和 Figma 设计布局包含响应式行为,允许插槽自动适应。插槽设计为填充可用宽度。主要内容和辅助标签插槽紧贴内容,但包含它们的容器填充可用高度。边距设置为百分比,在屏幕底部和顶部的插槽中添加了额外的内边距,以考虑屏幕在放大时曲率的变化。

为了最大化更大的屏幕尺寸,请使用额外的空间提供更多价值,让用户能够访问更多信息或选项。实现这些布局需要超出内置响应式行为的额外自定义,例如创建包含更多内容的附加布局或在断点后显示之前隐藏的插槽。

请注意,建议的断点设置为 225dp 屏幕尺寸。

设计更大屏幕尺寸的一些示例

添加按钮

Additional workouts shown

添加插槽和内容

Show minimum speed in addition to maximum speed

添加文本

More of the news headline is visible