媒体应用

Android 用户与不同类型的媒体互动,包括有声读物、音乐、播客和电台。请务必设计让用户能在手表上方便地访问媒体内容的应用。手表作为一个独特的平台,能够轻松快速地进行互动是我们的重中之重,因为与手机或平板电脑相比,用户花在与手表互动上的时间要少得多。

如需了解详情,请参阅 GitHub 上的 Media Toolkit

媒体应用架构

创建符合 Wear OS 设计要求的媒体应用。媒体应用通常包含浏览实体页面。

浏览

让用户能够找到要播放的媒体。排定已下载的内容的优先级,以便用户快速开始或继续播放。

实体

向用户提供有关特定媒体项的更多信息。重要的背景信息和关键操作应触手可及,例如下载、播放或随机播放。

减少应用层次结构,并向用户展现媒体内容。采用扁平的信息架构进行设计,让用户能够快速访问列表并向用户显示缩略图。考虑为 Wear OS 使用自定义设计组件。如需了解详情,请参阅条状标签卡片的设计建议。

媒体控制屏幕

媒体应用还应包含媒体控制界面。使用 5 个按钮的布局创建媒体控件。这是为了确保达到最低点按目标。以下是音乐应用和播客应用的媒体控件示例:

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

控制音量

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


大多数 Wear OS 设备都有旋转侧面按钮 (RSB) 或屏幕边框。某些 Wear OS 设备还有额外的硬件按钮来控制音量。使用 RSB、屏幕边框或其他按钮来控制音量。仅在旋转 RSB 或屏幕边框时显示指示标志,如示例所示。

常见用例

在设计媒体应用时,请务必优先考虑以下重要用例:

  • 聆听已下载的媒体内容
  • 通过手表在线播放音乐

收听已下载的媒体内容

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

告知用户从何处下载内容、下载进度、所花费的时间以及下载内容的大小,如下例所示:

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

如果内容已经下载,可以显示从手表中移除下载内容的操作来阐明这一点。在这种情况下,您还必须显示下载内容在手表上占用了多少空间,如下图所示:

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

通过手表在线播放音乐

从手表流式传输媒体对 Wear OS 设备的电池有很大影响。当用户选择在 Wear OS 设备上听音乐时,可在浏览列表中显示最近使用过的下载内容,从而优先播放已下载的内容。考虑添加一个按钮,使用户能够转到完整的下载内容列表,如下图所示:

如需了解详情,请参阅 GitHub 上的 Media Toolkit

自适应布局

媒体应用的较大屏幕调整仅侧重于媒体播放器体验。所有其他元素都在 ChipButtonsDialogsLists 页面中捕获,这些元素描述了适应较大屏幕的正确应用行为。

按钮配置

为了遵循触摸目标大小调整原则,请在小于 225 dp 的 Wear OS 设备上显示“双按钮”布局,在屏幕较大的设备上显示“三按钮”布局。以下图片列出了更多示例,例如“单按钮”布局和带有徽标的“双按钮”布局:

自适应控件按钮

在大小超过 225 dp 的 Wear OS 设备上,主控件(播放/暂停)可在 60 dp 到 80 dp 之间缩放,使中间部分的高度为 80 dp,从而增大该部分内所有控件的点按目标。这是从媒体播放器模板继承的自适应行为。

针对不同屏幕尺寸缩放

<225 dp:60 dp x 60 dp
&gt;225dp:80dp x 80dp

选取框行为

在标题内使用 9.38% 的通用边距,并在歌曲名称额外增加 4.16% 的边距。为滚动标题使用 8 dp 的渐变效果,并在显示图标时额外增加 8 dp 的间隙。在图标下方添加任何选取框滚动转场效果,该图标的位置保持固定。

标头 Atom 外边距
9.38%

歌曲名称内部利润率
4.16%

渐变
8dp 出血

图标间距
8 dp

点按目标

在屏幕更大的 Wear OS 设备上,中间和页脚部分的图标会利用额外的空间来增大点按目标的大小。这意味着,除了固定的控制 Atom 外,“填充可用空间”属性应用到图标容器:

Wear OS 小屏幕

<225 dp

更大的 Wear OS 屏幕

&gt;225 dp