媒体应用

Android Automotive OS (AAOS) 允许用户在车载屏幕上浏览和播放媒体应用中的内容。用户可以直接从 Google Play 下载媒体应用到车载系统,无需使用手机。

本页面包含以下几个部分:

空间模型

本媒体应用模板简介描述了其主要元素、它们提供的基本功能以及将它们结合在一起的架构。

以下各节将提供每个元素工作原理的更详细说明。

解剖学

媒体模板包含以下内容:

  • 应用栏– 包含应用的主要导航控制功能(用于应用内搜索和设置),并包含应用图标。
  • 可浏览内容空间——以网格视图(此处所示)或列表视图显示内容。
  • 播放控制– 此处显示的最小化控制栏包含基本的媒体元数据和播放控制,并可访问包含更多控制选项的播放叠加层。
1. 包含主导航标签和应用控件的应用栏
2. 可浏览内容空间
3. 播放控制(此处显示在最小化的控制栏上)。

此示例布局仅展示了这些元素的一种可能排列方式。例如,您可以根据屏幕尺寸,将主导航和应用控件堆叠起来,而不是将它们放在单个水平栏中。导航层级结构将在后续章节中详细介绍。

主导航

应用栏中的主要导航由展开的标签页组成(屏幕太小等极少数情况下除外)。

此示例展示了一种典型的制表符排列方式:

用户可以通过应用栏选择“主页”和“播放列表”等标签,导航至媒体内容的顶级视图

在应用栏上选择一个标签页,即可将当前视图替换为不同的顶级应用视图

应用程序控制

应用控件(如下例所示,位于右上角)占据应用栏中除品牌标识或主要导航之外的部分。它们提供对当前媒体应用的应用内搜索和设置功能的访问。

选择应用控件会打开一个叠加层。例如,此处显示的“设置”控件会打开一个显示“设置”界面的叠加层。用户关闭叠加层后,将返回到应用的先前位置。

在应用栏中选择“设置”选项会打开一个覆盖层,允许用户访问应用设置

当选择应用控件时,会在可浏览内容上方打开一个覆盖层,应用栏会变为应用标题

可浏览内容空间

在可浏览内容空间中,用户可以滚动浏览内容,并通过 z 轴空间导航到各个项目,向下遍历各个层级。

由于多层级导航会增加驾驶员的认知负荷,谷歌建议保持信息架构相对扁平,层级越少越好。

最顶层的可浏览内容允许用户从网格(如图所示)或列表中进行选择

从可浏览内容中进行选择会打开下一层级,显示更多详细信息

播放控制

媒体应用中的播放控制按钮可以根据具体情况以两种形式出现:

  • 最小化控制栏(在所有视图中可用)
  • 播放视图(带完整控制栏的叠加层)

在下面的动画示例中,这两种形式会在屏幕底部交替出现。

最小化控制栏

最小化的控制栏悬浮在可浏览内容区域的最顶层,位于内容上方。它提供有关当前播放内容的信息,以及用户控制播放的基本功能。

内容开始播放后,最小化的控制栏会在用户浏览媒体内容时保持可用状态。它会一直保持显示,直到用户选择新的媒体应用或点击最小化的控制栏以显示播放视图。

回放视图

完整控制栏仅在播放视图中可用,并且会悬浮在内容上方。除了最小化控制栏提供的功能外,完整控制栏还可以提供由各个媒体应用程序定义的更全面的控制选项。

在控件的触摸目标之外的任何位置选择最小化的控制栏,即可将其展开为全屏播放叠加层(播放视图),如图所示

播放视图叠加层位于可浏览内容区域的上方,最小化的控制栏被带有附加控件的完整控制栏所取代。

交互模型

AAOS 在汽车屏幕上呈现媒体内容,并允许用户在针对车辆优化的环境中浏览和播放内容。

媒体应用在汽车中的工作原理

AAOS 包含一系列 API,用于处理车载媒体应用的播放和浏览体验。这些 API 使应用开发者能够利用媒体应用的标准模板,其中包括:

  • 导航和播放控制
  • 可浏览的媒体内容
  • 应用内搜索和设置的应用控件

该模板通过两种方式支持车载信息娱乐系统 (IVI) 体验:

  • 汽车制造商可以定制界面外观和风格,以适应他们的汽车和品牌。
  • 应用程序开发者可以将他们的内容连接到界面,从而提供一致的体验,使其应用​​程序的品牌能够跨多个汽车和制造商进行推广。

Google 正在基于安全考量和原则(例如“设计基础”“设计原则”中讨论的原则)设计媒体应用的基本用户体验。您可以将此用户体验的某些方面应用于您自己的信息娱乐系统,而不会影响专为 AAOS 构建的应用的功能。

例如,虽然不同汽车制造商的媒体应用程序在外观和操作方式上可能有所不同,但无论驾驶何种类型的汽车,用户都能使用熟悉的操控界面。同时,在同一类型的汽车中,切换媒体应用程序并不会改变使用该汽车媒体应用程序的基本浏览和播放操作。

本节介绍媒体应用的顶级应用导航的工作原理。

用户可以通过应用栏在媒体应用的顶级内容视图之间进行导航,应用栏可以包含以下导航元素:

  • 主导航标签(或其变体)
  • 应用选择器(可选)

应用栏还可以包含应用图标和应用控件,这些内容在“应用品牌”“登录、设置和搜索”中进行了讨论。

主导航标签

媒体应用中的内容视图主要导航通常由应用栏中的最多 4 个标签页组成(除非屏幕非常小,空间不足以显示标签页)。这些标签页允许用户在应用层级结构的顶层内容视图之间横向切换。

当用户选择一个标签页时,其跳转到的位置会反映用户之前与该内容视图的交互情况。例如,如果用户之前在同一媒体应用会话期间滚动过某个标签页的内容,那么当用户返回该标签页时,滚动位置将会保留。

应用栏中的标签允许用户在内容视图之间横向移动。

主要导航变体

每个主要导航项通常都以标签页的形式呈现,标签页上既有图标也有标签。同时包含图标和标签可以减轻驾驶员的认知负担,因为图标便于快速浏览,而标签则能更清晰地表达含义。

此应用栏包含每个标签的图标和标签。

但是,在某些情况下,您可以使用其他导航策略:

  • 仅标签:如果屏幕高度不足以容纳合理数量的内容以及包含图标和标签的选项卡,则仅使用标签。
  • 抽屉:如果屏幕宽度不足以显示标签页
  • 无标签页:如果只有一个主要导航选项
在某些特殊情况下,应用栏可能会采用以下导航策略之一,作为带有图标和标签的选项卡(从上到下)的替代方案:仅带有标签的选项卡、抽屉而不是选项卡,或者没有选项卡的单个顶级内容视图。

应用选择器

应用选择器可让您快速访问其他媒体应用。您可以自行决定是否提供应用选择器。例如,您可能更倾向于仅使用所有可用应用的列表作为切换媒体应用的机制。

标注图标
应用品牌推广
应用图标的放置可能涉及应用选择器,也可能不涉及。
当应用栏位于屏幕顶部或底部时,应用选择器通常位于应用栏的右侧。

应用选择器启动后,即可访问其他媒体应用。用户选择其他应用后,该应用就会显示出来。

应用选择器中提供的典型应用。

应用栏位置

您可以为所有 AAOS 模板(包括媒体模板)设置应用栏的位置。只要位置始终保持一致,应用栏可以显示在屏幕顶部、底部或侧边。此外,您还可以将标签页和应用控件堆叠在应用栏内。

为了最大限度地减少认知负荷并确保可靠的用户体验,应用程序栏及其功能必须始终在整个信息娱乐系统中显示在同一位置。

浏览内容详情

本节介绍媒体应用中的内容浏览功能,包括用户如何导航到更详细的低级别视图。

在媒体应用中浏览内容的过程包括:

  • 查看内容网格或列表
  • 选择可浏览的内容项(即代表项目集合的项目,而非可玩的项目)以导航至这些项目的更详细视图。

内容项的详细视图位于内容空间的下一层级,同样以网格或列表形式呈现。用户可以通过应用标题栏中的“返回”按钮从下一层级向上导航。

内容的网格视图和列表视图

媒体内容可以以网格视图、列表视图或两者的组合形式呈现在同一内容空间中。内容可以按类别组织,并用子标题分隔。用户可以通过垂直滚动浏览网格或列表。

内容空间的顶层显示了网格和列表格式。这两种格式都可以在任何层级使用。

当用户浏览内容空间时,可以选择一个可浏览的内容项(例如专辑或播放列表)来查看该项的更详细信息(专辑中的歌曲或播放列表中的单个项目)。当用户以这种方式深入浏览内容空间时,屏幕顶部会出现一个应用标题栏,其中包含一个可供用户返回上一级页面的按钮。

点击应用标题栏上的返回箭头,即可返回内容区域的顶层。

当用户滚动浏览内容网格或列表时,屏幕顶部的应用栏(或应用标题栏)会固定在原地,内容则在其后滚动。

内容会滚动显示在固定的应用栏后面。

播放媒体

本节介绍媒体应用程序的播放工作原理。

用户可以通过以下两种方式之一控制媒体播放:

  • 播放视图(全屏,所有控制选项)
  • 最小化控制栏(最小化控件,可在所有视图中使用)

回放视图

要开始播放,用户需在内容区域选择一个可播放项目,例如专辑或歌曲,播放视图随即占据整个内容区域。播放视图会显示所选内容的元数据和播放控制按钮。用户可以使用这些按钮以及手势来控制播放。

播放控制

播放控制按钮显示在控制栏中,如果控制按钮超过 5 个,则可以展开控制栏(请参阅下文“播放控制按钮位置”)。如果应用使用了播放队列,则应用头部会提供访问播放队列的选项。

当用户选择可播放内容时,将显示播放视图。
当控件超过 5 个时,用户可以展开控制栏,并通过溢出按钮(右下角)访问其他控件。

播放控制位置

为确保不同媒体服务使用一致,底部一行控件(如果控制栏未展开,则为唯一一行)应按照下图所示顺序排列。顶部一行仅在控制栏展开时显示,最多可容纳 t=5 个自定义操作。

如果应用程序不使用“上一页”或“下一页”按钮,也可以用自定义操作替换这些按钮。

底部一行的控件应按照上例和下表所示的顺序显示。
位置按钮

最左侧

自定义操作

偏左

先前操作或自定义操作

中心

播放/暂停

偏右

下一步或自定义操作

最右侧

溢出提示(如果控件超过 5 个)或自定义操作

手势

除了使用播放视图中的控件外,用户还可以使用手势来最小化视图。

用户可以通过从视图中的任何位置向下滑动来将播放视图折叠到最小化的控制栏中。

最小化控制栏

如果用户在播放过程中离开播放视图,播放视图中的控制栏将折叠成最小化的控制栏,该最小化控制栏提供有关当前播放内容的信息以及播放和暂停等基本控件。用户可以通过最小化的控制栏浏览可用的媒体,同时当前歌曲或其他内容将继续播放。

最小化控制栏是用户离开播放视图后仍然可用的控制栏的简化版本。

用户可以向下滑动(如上文“手势”部分所示)或点击左上角的向下箭头(如本文所示)来最小化播放视图。

队列

如果媒体应用支持播放队列,则播放视图的应用标题栏会包含一个队列图标。点击该图标会显示一个可滚动的、按时间顺序排列的当前播放和即将播放内容列表。某些媒体应用可能还会将之前播放过的内容显示在队列中。

队列显示即将播放和正在播放的内容。

队列至少会显示每个已排队项目的标题。应用开发者还可以为每个项目提供缩略图。此外,他们还可以提供一个图标来指示当前正在播放的项目,也可以显示该项目的播放时长。但是,汽车制造商可以选择显示或隐藏这些信息:缩略图、图标或播放时长。

用户可以滚动列表并选择队列中的任意项目,即可在播放视图中立即播放。如需返回播放视图而不选择任何项目,用户可以点击队列或返回按钮。

本节介绍媒体应用中的登录和搜索及设置应用控制的工作原理。

用户可以通过应用栏或应用顶部的应用控件访问应用设置和应用内搜索。汽车制造商设计搜索界面,应用开发者则将他们的内容与 Android Automotive OS API 连接起来。应用开发者负责设计其应用的设置界面和登录流程的各个方面。

登入

当用户尝试打开需要登录的应用时(通常是在从应用商店安装应用之后),用户会进入应用开发者提供的登录流程。如果应用的登录是可选的,则可以将其作为应用设置之一,以便用户可以通过设置访问登录选项。

登录流程可能涉及以下一项或多项内容:

  • Google 登录:允许用户使用其 Google 帐户登录。
  • 手机登录:在车载屏幕上显示PIN码,供用户在手机上输入,反之亦然。
  • 标准登录:用户在车载屏幕上输入应用程序的用户名和密码

对于支持 Google 登录的应用,建议将其作为主要登录方式。使用此选项,用户需要验证其现有的 Google 帐户,如图所示。

请确认您的谷歌账号。

有关登录流程的更多示例和创建指南,请访问登录页面

媒体应用的控件包括应用内搜索和应用设置。应用开发者可以选择实现其中一项或两项功能。

应用程序控件通常显示在屏幕顶部或底部的应用程序栏的标签右侧。
应用内搜索。
  • 您可以支持在应用栏中使用应用内搜索功能。应用开发者可以自行决定是否为其应用实现搜索功能。
  • 当用户驾驶车辆时,搜索功能会启用驾驶优化键盘,支持语音输入。车辆停放时,则会启用标准键盘。您可以自定义这两种键盘(或自定义 Google 提供的键盘)。
应用设置。
  • 您可以支持在应用栏中使用应用内设置选项。应用开发者可以自行决定是否为其应用实现设置功能。
  • 此设置功能应仅包含应用程序使用所必需的设置(例如帐户信息、应用程序偏好设置以及登录和注销功能),以及与在车内收听媒体相关的设置(例如关闭露骨内容)。
  • 当用户驾驶车辆时,“设置”按钮仍然可见,但会变暗或以其他方式调整,以表明应用设置不可用。当车辆停放时,该按钮会弹出一个包含应用设置的叠加层。应用开发者可以根据“设计设置”中的说明,为其应用设计叠加层屏幕。

角色划分

下表总结了汽车制造商和应用程序开发人员在确保统一的媒体应用程序体验方面的设计角色。

媒体体验的一个方面汽车制造商的设计角色应用程序开发人员的设计角色

浏览媒体应用

决定应用栏的位置,并支持应用导航和可在应用栏中显示的控件。

决定在应用栏的标签页中显示哪些顶级内容视图,并根据需要提供图标和标签。

访问“计划”导航选项卡

浏览内容详情

确定网格或列表项的大小和内容,并在较低层级实现应用程序标题。

确定各层级可浏览媒体内容的格式(网格或列表)和组织方式。

访问计划浏览视图

播放媒体

实现播放视图和最小化的控制栏,并包含适当的媒体元数据和播放控件,包括应用程序中任何自定义操作的控件。在播放视图中提供队列功能,并为队列设置样式。

决定是否在控制栏上实现自定义操作,并为其提供图标。决定是否实现播放队列,以及是否为当前播放曲目提供指示器。

访问“自定义播放控制”页面

登录、设置和搜索

在应用栏上提供搜索和设置选项,设计搜索键盘,并根据需要将用户引导至登录界面。

根据需要提供登录流程(改编自示例代码)和设置界面。

访问登录设计页面 登录和设置

品牌归因

在所有内容屏幕上显示应用图标,并选择将第三方应用颜色作为强调色应用到哪些位置。

提供应用图标并指定强调色

访问展示应用品牌

应用清单

使用此列表确保您已提供在 AAOS 媒体模板中展示您的应用程序所需的所有设计元素。

设计元素相关设计任务相关技术任务和示例代码

导航元素:

  • 单色(黑色或白色)矢量图标和标签,最多可用于 4 个导航标签页

规划导航标签

构建内容层级结构

浏览视图元素:

  • 内容样式,用于指定浏览视图的格式(网格或列表、子类别标题)

计划浏览视图

应用内容样式

播放元素:

  • 适用于应用内所有自定义播放操作的单色(黑色或白色)矢量图标(每种状态使用不同的图标)
  • 队列项目缩略图(可选)
  • 当前播放队列项目的图标(可选)

自定义播放控制

排队指南

添加自定义播放操作

登录元素:

  • 自定义登录界面(改编自 UAMP Automotive 应用的示例代码)

登入

UAMP 汽车应用

添加登录活动

设置元素:

  • 设置叠加屏幕 – 纵向模式布局(Volvo Polestar 2 尺寸:1068 x 1425dp;1152 x 153px)
  • 设置叠加屏幕 – 横屏布局(汽车参考尺寸:1075 x 806dp;1024 x 768px)

设计设置

添加设置活动

品牌要素:

  • 全彩矢量应用图标
  • 强调色

提供品牌元素

指定应用图标自定义默认主题

自定义屏幕指南

对于大多数在 AAOS 中使用的媒体应用,您无需设计自定义屏幕。例外情况是设置和登录。如果您希望用户访问应用设置,则需要设计设置屏幕。此外,如果您的应用需要登录,则需要提供登录流程,您可以参考通用 Android 音乐播放器中的示例代码进行自定义。

这些通用样式指南适用于自定义设置屏幕和自定义登录屏幕。它们可以帮助您优化设计,使其在停车状态下,无论白天黑夜,都能在车载屏幕上清晰显示。

有关设置和登录的更多具体指南,请参阅应用程序设置。

需求级别指南

必须

应用程序开发者必须:

  • 提供“关闭”按钮,以便退出设置屏幕和顶级登录屏幕。
  • 在顶级屏幕之后的任何后续屏幕上提供“返回”选项
  • 将“关闭”或“返回”按钮放置在屏幕左上角。
  • 背景与图标或文本之间的对比度应至少保持 4.5:1。
  • 主要文本建议使用至少 32dp 的字体大小,次要文本建议使用至少 24dp 的字体大小。
  • 保持触摸目标尺寸大于建议的最小尺寸 76 x 76dp。

应该

应用开发者应该:

  • 所有屏幕和叠加层均使用深色主题
  • 在所有屏幕上添加徽标或应用图标
  • 使用强调色时,请使用与品牌元素相同的颜色。
  • 文本字符串长度应控制在建议的最大长度120 个字符以内。
  • 尽可能在触摸目标之间保持至少 24dp 的距离。

可能

应用开发者可能:

  • 决定是否在其应用程序中实现登录和设置功能。

理由

由媒体应用开发者直接设计的屏幕应该:

  • 支持标准媒体应用导航模式和设计规范。
  • 体现 AAOS 的设计原则和视觉基础。