媒体应用程序

Android 用户使用不同的媒体类型,包括有声读物、音乐、播客和广播。设计应用程序时,必须允许用户方便地在手表上访问媒体内容。手表是一种独特的表面,用户在手表上的交互时间远远少于手机或平板电脑,因此交互的便捷性和速度至关重要。

有关更多信息,请参阅 GitHub 上的 媒体工具包

媒体应用程序架构

创建满足 Wear OS 设计要求的媒体应用程序。媒体应用程序通常包括 **浏览** 和 **实体** 页面。

浏览

允许用户查找要播放的媒体。优先考虑已下载的项目,以帮助用户快速开始或恢复播放。

实体

为用户提供有关特定媒体项目的更多信息。应随时提供重要的上下文和关键操作,例如下载、播放或随机播放。

简化应用程序层次结构,并为用户公开媒体。设计一个扁平的信息架构,让用户可以快速访问列表,并为用户展示缩略图。考虑为 Wear OS 使用自定义设计组件。有关更多信息,请查看有关 芯片卡片 的设计建议。

媒体控制屏幕

媒体应用程序还应包含媒体控制屏幕。使用 5 按钮布局创建媒体控件。这样做是为了确保满足最小点击目标的要求。以下是音乐应用程序和播客应用程序的媒体控件示例

根据内容类型调整显示的媒体控件。如果要包含超过 5 个操作,请使用三个点溢出图标将用户带到其他页面。您可以为应用程序使用自定义图标和字体。

控制音量

音量控制是用户在手表上最重要的媒体控件之一。媒体控件应包含一个音量按钮,用于进入音量控制屏幕。


大多数 Wear OS 设备都有旋转侧按钮 (RSB) 或表圈。一些 Wear OS 设备还具有用于控制音量的其他硬件按钮。使用 RSB、表圈或其他按钮来控制音量。仅在旋转 RSB 或表圈时显示指示器,如示例所示。

常见用例

设计媒体应用程序时,请确保您优先考虑以下重要用例

  • 收听已下载的媒体
  • 从手表流式传输音乐

收听已下载的媒体

用户应能够从实体页面手动下载媒体项目。

向用户传达他们正在下载内容的位置、下载进度、所需时间和下载大小,如以下示例所示

当用户浏览媒体时,显示最近下载的媒体

如果内容已下载,请通过显示一个操作来从手表中删除下载,以清楚地显示这一点。在这种情况下,您还必须显示下载在手表上占用了多少空间,如以下图像所示

如果源设备是手表,请在用户开始收听音乐之前提示他们 连接耳机。连接耳机后,播放媒体并打开媒体控件。

从手表流式传输音乐

从手表流式传输媒体会对 Wear OS 设备的电池产生重大影响。当用户选择在 Wear OS 设备上收听时,通过在浏览列表中公开最近使用的下载,优先考虑下载的内容。考虑添加一个按钮,让用户可以访问完整的下载列表,如以下图像所示

有关更多信息,请参阅 GitHub 上的 媒体工具包

自适应布局

媒体应用程序的大屏幕改编仅侧重于媒体播放器体验。所有其他元素都包含在 芯片按钮对话框列表 页面中,这些页面描述了适当的应用程序行为,以适应更大的屏幕。

按钮配置

为了遵循触控目标尺寸原则,在屏幕尺寸小于 225 dp 的 Wear OS 设备上显示 2 个按钮的布局,在屏幕尺寸更大的设备上显示 3 个按钮的布局。以下图像概述了其他示例,例如 1 个按钮的布局和带有徽标的 2 个按钮的布局

响应式控制按钮

主控按钮(播放/暂停)在屏幕尺寸大于 225 dp 的 Wear OS 设备上从 60 dp 缩放至 80 dp,使中间部分的高度为 80 dp,从而为其中的所有控件提高点击目标尺寸。这是您将从媒体播放器模板继承的内置响应式行为。

在不同屏幕尺寸上的缩放

< 225 dp: 60 dp x 60 dp
> 225 dp: 80 dp x 80 dp

跑马灯行为

在标题内,使用 9.38% 的通用边距,并为“歌曲标题”额外添加 4.16% 的边距。滚动标题使用 8 dp 的渐变,当存在图标时,额外增加 8 dp 的间隙。将所有跑马灯滚动过渡包含在图标下方,图标的位置保持固定。

标题原子边距
9.38%

歌曲标题内部边距
4.16%

渐变
8 dp 溢出

图标间隙
8 dp

点击目标

在屏幕尺寸更大的 Wear OS 设备上,中间和页脚部分中的图标利用额外的空间来增大点击目标尺寸。这意味着,除了固定的控制原子外,“填充可用空间”属性将应用于图标容器。

小型 Wear OS 屏幕

< 225 dp

大型 Wear OS 屏幕

> 225 dp