Tiles 设计原则

Tiles 提供对用户完成任务所需信息和操作的快速访问。在表盘上滑动后,用户可以查看健身目标的进展、查看天气等等。用户还可以从 tile 快速启动应用并完成基本任务。

用户可以从设备本身和配套应用中选择他们希望在 Wear OS 设备上看到的 tile。

用户体验设计原则

系统提供的 tile 使用一致的设计语言,因此用户期望 tile 满足以下条件:

  • 即时:Tiles 旨在帮助用户快速完成常用任务。通过清晰的信息层次结构显示关键内容,以便用户理解 tile 的内容。
  • 可预测:每个 tile 中的内容应始终专注于用户可执行的任务。这有助于用户预测他们将在 tile 上看到什么信息,从而提高记忆力。
  • 相关:用户随身携带他们的 Wear OS 设备。考虑 tile 中的内容与用户当前情况和上下文的相关性。

应用图标

可能出现在屏幕顶部的应用图标由系统从启动器图标自动生成。不要将此图标作为你的 tile 布局的一部分。

Wear OS 可能会在用户滑动 tile 轮播图时自动显示应用图标。无需在 tile 设计中放入应用图标。
请勿在 tile 设计中添加应用图标,因为如果在系统层面也显示,它可能会出现两次或重叠。

设计指导

创建 tile 时请牢记以下准则。

专注于单个任务

将每个 tile 专注于单个任务,例如开始跑步
在一个 tile 上支持太多不同的任务。

为每个任务创建单独的 tile

如果你的应用支持多个任务,请考虑为你应用支持的每个任务创建多个 tile。例如,一个健身应用可以有目标 tile 和锻炼活动 tile。

Step count, workouts this week, and mindfulness tasks

显示图表和表格的快速浏览表示

快速显示可快速浏览的数字或统计信息表示,并允许用户轻触以在应用中查看更多详细信息(如果需要)。
在 tile 上显示详细的数字或统计信息。

指示最新数据更新

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

Middle image shows last session was 45 minutes ago

使用适当的数据刷新率

为你的 tile 选择适当的更新率,并考虑其对设备电池寿命的影响。如果你使用平台数据源(如心率和步数),Wear OS 会为你控制更新率。

空状态

Tiles 有两种类型的空状态。对于这两种状态,请使用 PrimaryLayout

Example of error/permission empty state

错误或权限

告知用户他们需要从 tile 更新设置或偏好。

Example of sign in empty state

登录

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

显示正在进行的活动

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

如果你的应用还支持允许用户开始这些活动的 tile,请执行以下操作以最大程度地减少用户混淆:

  • 指示正在进行的活动已经开始。
  • 如果用户轻触此类 tile,请启动你的应用并显示正在进行的活动。不要开始新的正在进行的活动实例。

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

所需元素

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

可选元素

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

Tiles 上的动态

在 tile 中添加动画时,帮助用户理解变化

强调你是否正在更新 tile 上的信息,例如步数目标的进度。
意外地在值之间切换。

预览

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


Example of tile preview

要求

  • 导出 400 像素 x 400 像素的资源。
  • 提供圆形预览图像。
  • 使用纯黑色背景。
  • 保存为 PNG 或 JPEG 格式。
  • 为你的应用常用语言添加本地化资源。


Example of tile preview in tile manager on Wear OS

Wear OS 设备上 tile 管理器中显示的 tile 预览。

Example of tile preview in tile manager on a phone

手机上 tile 管理器中显示的 tile 预览。


强调你是否正在更新 tile 上的信息,例如步数图表上的进度。
显示空状态,在分页 UI 中显示 tile 图标,或在 tile 周围放置边框。

更大的屏幕尺寸

为了适应各种 Wear OS 屏幕尺寸,ProtoLayout Material 布局模板和 Figma 设计布局包含响应式行为,允许槽位自动调整。槽位被设计为填充可用宽度。主要内容和次要标签槽位贴合内容,但容纳它们的容器填充可用高度。边距设置为百分比,屏幕底部和顶部的槽位额外增加了内部边距,考虑到屏幕放大时曲线的波动。

为了最大化利用更大的屏幕尺寸,请利用额外的空间提供更多价值,允许用户访问更多信息或选项。实现这些布局需要在内置响应式行为之外进行额外定制,例如通过创建包含更多内容的其他布局或在断点后显示之前隐藏的槽位。

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

如何为更大屏幕尺寸设计的示例

添加按钮

Additional workouts shown

添加槽位和内容

Show minimum speed in addition to maximum speed

添加文本

More of the news headline is visible