功能块设计原则

功能块有助于用户快速访问完成各种任务所需的信息和操作。在表盘上执行滑动操作后,用户可以查看健身目标的进展情况、查看天气信息等。用户还可以通过功能块快速启动应用并完成基本任务。

用户可以从设备本身和配套应用中选择他们想在 Wear OS 设备上看到的功能块。

用户体验设计原则

系统提供的功能块使用一致的设计语言,因此用户希望功能块符合以下要求:

  • 立即性:功能块旨在帮助用户快速完成经常性任务。以清晰的信息层次结构显示关键内容,以便用户了解功能块的内容。
  • 可预测:每个功能块中的内容应始终专注于面向用户的任务。这有助于用户预测他们能在功能块上看到哪些信息,从而提高回想度。
  • 相关性:用户会随时随地携带 Wear OS 设备。考虑功能块中的内容与用户当前所处情境和情境的相关性。

应用图标

可能显示在屏幕顶部的应用图标由系统通过启动器图标自动生成。请勿将此图标设为功能块布局的一部分。

当用户滚动浏览功能块轮播界面时,Wear OS 可能会自动显示应用图标。无需将应用图标添加到功能块设计中。
请勿在功能块设计中添加应用图标,因为如果也在系统级别显示,它可能会出现两次或重叠。

设计方案指导意见

创建功能块时,请谨记以下准则。

专注于一项任务

让每个功能块专注于一项任务,例如“开始跑步”。
在单个功能块上支持太多不同的任务。

为每项任务创建单独的功能块

如果您的应用支持多任务,请考虑为所支持的每项任务分别创建功能块。例如,健身应用可以同时具有目标功能块和锻炼活动功能块。

步数、本周锻炼和正念任务

一目了然地显示图形和图表

一目了然地显示数值或统计信息,并允许用户根据需要点按以在应用中查看更多内容。
在功能块上显示详细的数字信息或统计信息。

指明最新的数据更新

向用户说明功能块数据的新近度。如果您要显示缓存数据,请指明其上次更新时间。

中间图显示上次会话发生在 45 分钟前

使用适当的数据刷新频率

为功能块选择合适的更新频率,请考虑对设备电池续航时间的影响。如果您使用的是心率和步数等平台数据源,Wear OS 会为您控制更新频率。

空状态

功能块有 2 种空状态。对于这两者,请使用 PrimaryLayout

错误或权限

让用户知道需要更新功能块中的设置或偏好设置。

登录

在登录功能块中提供明确的号召性用语。

显示持续性活动

当应用执行长时间运行的活动(如跟踪锻炼或播放音乐)时,它应该在一个或多个功能块中显示持续性活动的进度。

如果应用还支持允许用户启动这些 activity 的功能块,为尽量减少用户混淆,请执行以下操作:

  • 表示正在进行的活动已在进行中。
  • 如果用户点按此类功能块,请启动您的应用并显示正在进行的 activity。请勿启动持续性活动的新实例。

每个功能块底部都有一个号召性用语按钮,让用户可以打开应用

必需元素

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

可选元素

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

功能块上的动态效果

向功能块添加动画有助于用户了解变化:

强调您是否正在更新功能块上的信息,例如步数目标的完成进度。
意外地切换值。

预览

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

要求

  • 以 400 x 400 像素导出资源。
  • 提供圆形预览图片。
  • 使用纯黑色背景。
  • 另存为 PNG 或 JPEG。
  • 为应用的常用语言添加本地化资源。
Wear OS 设备上的功能块管理器中显示的功能块预览。 手机上的功能块管理器中显示的功能块预览。
强调您是否正在更新功能块上的信息,例如步数图表上的进度。
显示空状态、在分页界面中显示功能块图标,或在功能块周围添加描边。

更大的屏幕尺寸

为了适应各种 Wear OS 屏幕尺寸,ProtoLayout Material 布局模板和 Figma 设计布局包含自适应行为,使槽位能够自动适应。槽位设计为填满可用宽度。主要内容和次级标签槽位紧贴内容,但容纳它们的容器填满可用高度。外边距设置为百分比,同时向屏幕底部和顶部的槽添加额外的内外边距,以便将屏幕扩大时的曲线波动考虑在内。

如需最大限度地扩大屏幕,请使用额外的空间,通过允许用户访问更多信息或选项,提供更多价值。为了实现这些布局,除了内置的自适应行为之外,还需要进行额外的自定义设置,例如创建包含更多内容的其他布局,或在断点后显示之前隐藏的槽。

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

关于如何针对更大屏幕尺寸进行设计的示例

添加按钮

已显示其他锻炼项目

添加广告位和内容

除了最高速度外,显示最低速度

添加文字

显示更多新闻标题