Android 用户与不同类型的媒体互动,包括有声读物、音乐、播客和电台。请务必设计让用户能在手表上方便地访问媒体内容的应用。手表作为一个独特的平台,能够轻松快速地进行互动是我们的重中之重,因为与手机或平板电脑相比,用户花在与手表互动上的时间要少得多。
如需了解详情,请参阅 GitHub 上的 Media Toolkit。
媒体应用架构
创建符合 Wear OS 设计要求的媒体应用。媒体应用通常包含浏览和实体页面。
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_2_Browse.png?authuser=1&hl=da)
浏览
让用户能够找到要播放的媒体。排定已下载的内容的优先级,以便用户快速开始或继续播放。
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_3_Entity.png?authuser=1&hl=da)
实体
向用户提供有关特定媒体项的更多信息。重要的背景信息和关键操作应触手可及,例如下载、播放或随机播放。
减少应用层次结构,并向用户展现媒体内容。采用扁平的信息架构进行设计,让用户能够快速访问列表并向用户显示缩略图。考虑为 Wear OS 使用自定义设计组件。如需了解详情,请参阅条状标签和卡片的设计建议。
媒体控制屏幕
媒体应用还应包含媒体控制界面。使用 5 个按钮的布局创建媒体控件。这是为了确保达到最低点按目标。以下是音乐应用和播客应用的媒体控件示例:
根据内容类型调整显示的媒体控件。如果您要添加 5 个以上的操作,请使用三点状溢出图标将用户带到其他页面。您可以为您的应用使用自定义图标和字体。
![](https://developer.android.google.cn/static/wear/images/media-apps/Image-MediaVolume.png?authuser=1&hl=da)
控制音量
音量控件是手表上用户最重要的媒体控件之一。媒体控件应包含用于进入音量控件屏幕的音量按钮。
大多数 Wear OS 设备都有旋转侧面按钮 (RSB) 或屏幕边框。某些 Wear OS 设备还有额外的硬件按钮来控制音量。使用 RSB、屏幕边框或其他按钮来控制音量。仅在旋转 RSB 或屏幕边框时显示指示标志,如示例所示。
常见用例
在设计媒体应用时,请务必优先考虑以下重要用例:
- 聆听已下载的媒体内容
- 通过手表在线播放音乐
收听已下载的媒体内容
用户应该能够从实体页面手动下载媒体项。
告知用户从何处下载内容、下载进度、所花费的时间以及下载内容的大小,如下例所示:
当用户浏览媒体时,显示最近下载的媒体:
如果内容已经下载,可以显示从手表中移除下载内容的操作来阐明这一点。在这种情况下,您还必须显示下载内容在手表上占用了多少空间,如下图所示:
如果源设备是手表,请在用户开始听音乐之前提示用户连接耳机。连接耳机后,播放媒体并打开媒体控件。
通过手表在线播放音乐
从手表流式传输媒体对 Wear OS 设备的电池有很大影响。当用户选择在 Wear OS 设备上听音乐时,可在浏览列表中显示最近使用过的下载内容,从而优先播放已下载的内容。考虑添加一个按钮,使用户能够转到完整的下载内容列表,如下图所示:
如需了解详情,请参阅 GitHub 上的 Media Toolkit。
自适应布局
媒体应用的较大屏幕调整仅侧重于媒体播放器体验。所有其他元素都在 Chip、Buttons、Dialogs 和 Lists 页面中捕获,这些元素描述了适应较大屏幕的正确应用行为。
按钮配置
为了遵循触摸目标大小调整原则,请在小于 225 dp 的 Wear OS 设备上显示“双按钮”布局,在屏幕较大的设备上显示“三按钮”布局。以下图片列出了更多示例,例如“单按钮”布局和带有徽标的“双按钮”布局:
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_11_BC1.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_11_BC2.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_11_BC3.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_11_BC4.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_11_BC5.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_11_BC6.png?authuser=1&hl=da)
自适应控件按钮
在大小超过 225 dp 的 Wear OS 设备上,主控件(播放/暂停)可在 60 dp 到 80 dp 之间缩放,使中间部分的高度为 80 dp,从而增大该部分内所有控件的点按目标。这是从媒体播放器模板继承的自适应行为。
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_12_Atom.png?authuser=1&hl=da)
针对不同屏幕尺寸缩放:
<225 dp:60 dp x 60 dp
>225dp:80dp x 80dp
选取框行为
在标题内使用 9.38% 的通用边距,并在歌曲名称额外增加 4.16% 的边距。为滚动标题使用 8 dp 的渐变效果,并在显示图标时额外增加 8 dp 的间隙。在图标下方添加任何选取框滚动转场效果,该图标的位置保持固定。
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_13_MB1.png?authuser=1&hl=da)
标头 Atom 外边距
9.38%
歌曲名称内部利润率
4.16%
渐变
8dp 出血
图标间距
8 dp
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_13_MB2.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_13_MB3.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_13_MB4.png?authuser=1&hl=da)
![](https://developer.android.google.cn/static/wear/images/media-apps/MP_13_MB5.png?authuser=1&hl=da)
点按目标
在屏幕更大的 Wear OS 设备上,中间和页脚部分的图标会利用额外的空间来增大点按目标的大小。这意味着,除了固定的控制 Atom 外,“填充可用空间”属性应用到图标容器:
![](https://developer.android.google.cn/static/wear/images/media-apps/Content Shot.png?authuser=1&hl=da)
Wear OS 小屏幕
<225 dp
![](https://developer.android.google.cn/static/wear/images/media-apps/media-tap-target-3.png?authuser=1&hl=da)
更大的 Wear OS 屏幕
>225 dp