Tiles 提供对用户完成任务所需信息和操作的快速访问。在表盘上滑动后,用户可以查看健身目标的进展、查看天气等等。用户还可以从 tile 快速启动应用并完成基本任务。
用户可以从设备本身和配套应用中选择他们希望在 Wear OS 设备上看到的 tile。
用户体验设计原则
系统提供的 tile 使用一致的设计语言,因此用户期望 tile 满足以下条件:
- 即时:Tiles 旨在帮助用户快速完成常用任务。通过清晰的信息层次结构显示关键内容,以便用户理解 tile 的内容。
- 可预测:每个 tile 中的内容应始终专注于用户可执行的任务。这有助于用户预测他们将在 tile 上看到什么信息,从而提高记忆力。
- 相关:用户随身携带他们的 Wear OS 设备。考虑 tile 中的内容与用户当前情况和上下文的相关性。
应用图标
可能出现在屏幕顶部的应用图标由系统从启动器图标自动生成。不要将此图标作为你的 tile 布局的一部分。

应该这么做

不应该这么做
设计指导
创建 tile 时请牢记以下准则。
专注于单个任务

应该这么做

不应该这么做
为每个任务创建单独的 tile
如果你的应用支持多个任务,请考虑为你应用支持的每个任务创建多个 tile。例如,一个健身应用可以有目标 tile 和锻炼活动 tile。
显示图表和表格的快速浏览表示

应该这么做

不应该这么做
指示最新数据更新
向用户明确 tile 数据的新鲜程度。如果显示缓存数据,请指明上次更新时间。
使用适当的数据刷新率
为你的 tile 选择适当的更新率,并考虑其对设备电池寿命的影响。如果你使用平台数据源(如心率和步数),Wear OS 会为你控制更新率。
空状态
Tiles 有两种类型的空状态。对于这两种状态,请使用 PrimaryLayout
。
错误或权限
告知用户他们需要从 tile 更新设置或偏好。
登录
在登录 tile 上提供清晰的号召性用语。
显示正在进行的活动
当应用执行长时间运行的活动(例如跟踪锻炼或播放音乐)时,它应在一个或多个 tile 中显示正在进行的活动的进度。
如果你的应用还支持允许用户开始这些活动的 tile,请执行以下操作以最大程度地减少用户混淆:
- 指示正在进行的活动已经开始。
- 如果用户轻触此类 tile,请启动你的应用并显示正在进行的活动。不要开始新的正在进行的活动实例。
所需元素
- 主要数据:描述活动的主要内容。
- 标签:显示活动的状态。
可选元素
- 图标或图形:可以是动画或静态图像。
- 底部紧凑芯片:包含号召性用语。
Tiles 上的动态
在 tile 中添加动画时,帮助用户理解变化

应该这么做

不应该这么做
预览
添加 tile 预览,帮助用户在其 Wear OS 或手持设备上的 tile 管理器中查看 tile 中显示的内容。每个 tile 可以有一个代表性的预览图像。该图像应满足以下要求:
要求
- 导出 400 像素 x 400 像素的资源。
- 提供圆形预览图像。
- 使用纯黑色背景。
- 保存为 PNG 或 JPEG 格式。
- 为你的应用常用语言添加本地化资源。
Wear OS 设备上 tile 管理器中显示的 tile 预览。
手机上 tile 管理器中显示的 tile 预览。

应该这么做

不应该这么做
更大的屏幕尺寸
为了适应各种 Wear OS 屏幕尺寸,ProtoLayout Material 布局模板和 Figma 设计布局包含响应式行为,允许槽位自动调整。槽位被设计为填充可用宽度。主要内容和次要标签槽位贴合内容,但容纳它们的容器填充可用高度。边距设置为百分比,屏幕底部和顶部的槽位额外增加了内部边距,考虑到屏幕放大时曲线的波动。
为了最大化利用更大的屏幕尺寸,请利用额外的空间提供更多价值,允许用户访问更多信息或选项。实现这些布局需要在内置响应式行为之外进行额外定制,例如通过创建包含更多内容的其他布局或在断点后显示之前隐藏的槽位。
请注意,建议的断点设置为 225dp 屏幕尺寸。