媒體應用程式

Android Automotive OS (AAOS) 可讓使用者在車載螢幕上瀏覽和播放媒體應用程式中的內容。使用者可以直接從 Google Play 下載媒體應用程式到車載系統,無需使用手機。

本頁麵包含以下幾個部分:

空間模型

本媒體應用範本簡介描述了其主要元素、它們提供的基本功能以及將它們結合在一起的架構。

以下各節將提供每個元素工作原理的更詳細說明。

解剖學

媒體模板包含以下內容:

  • 應用程式列– 包含應用程式的主要導航控制功能(用於應用程式內搜尋和設定),並包含應用程式圖示。
  • 可瀏覽內容空間-以網格視圖(此處所示)或清單視圖顯示內容。
  • 播放控制– 此處顯示的最小化控制欄包含基本的媒體元資料和播放控制,並可存取包含更多控制選項的播放疊加層。
1. 包含主導航標籤和應用程式控制項的應用程式欄
2. 可瀏覽內容空間
3. 播放控制(此處顯示在最小化的控制列上)。

此範例佈局僅展示了這些元素的一種可能排列方式。例如,您可以根據螢幕尺寸,將主導航和應用控制堆疊起來,而不是將它們放在單一水平欄中。導航層級結構將在後續章節中詳細介紹。

主導航

應用程式列中的主要導覽由展開的標籤頁組成(螢幕太小等極少數情況下除外)。

此範例展示了一種典型的製表符排列方式:

使用者可透過應用程式列選擇「首頁」和「播放清單」等標籤,導覽至媒體內容的頂級視圖

在應用程式列上選擇一個標籤頁,即可將目前視圖替換為不同的頂級應用程式視圖

應用程式控制

應用控制項(如下例所示,位於右上角)佔據應用程式列中除品牌識別或主要導航之外的部分。它們提供對當前媒體應用的應用程式內搜尋和設定功能的存取。

選擇應用控制項會開啟一個疊加層。例如,此處顯示的「設定」控制項會開啟一個顯示「設定」介面的疊加層。使用者關閉疊加層後,將返回到應用程式的先前位置。

在應用程式欄中選擇「設定」選項會開啟一個覆蓋層,允許使用者存取應用程式設定

當選擇應用程式控制項時,會在可瀏覽內容上方開啟一個覆蓋層,應用程式列會變成應用程式標題

可瀏覽內容空間

在可瀏覽內容空間中,使用者可以捲動瀏覽內容,並透過 z 軸空間導航到各個項目,向下遍歷各個層級。

由於多層導航會增加駕駛者的認知負荷,Google建議保持資訊架構相對扁平,層級越少越好。

最頂層的可瀏覽內容允許使用者從網格(如圖所示)或清單中進行選擇

從可瀏覽內容中進行選擇會開啟下一層級,顯示更多詳細資訊

播放控制

媒體應用中的播放控制按鈕可根據具體情況以兩種形式出現:

  • 最小化控制欄(在所有視圖中可用)
  • 播放視圖(具有完整控制欄的疊加層)

在下面的動畫範例中,這兩種形式會在螢幕底部交替出現。

最小化控制欄

最小化的控制欄懸浮在可瀏覽內容區域的最頂層,位於內容上方。它提供有關當前播放內容的信息,以及用戶控製播放的基本功能。

內容開始播放後,最小化的控制列會在使用者瀏覽媒體內容時保持可用狀態。它會一直保持顯示,直到使用者選擇新的媒體應用程式或點擊最小化的控制欄以顯示播放視圖。

回放視圖

完整控制欄僅在播放檢視中可用,並且會懸浮在內容上方。除了最小化控制欄提供的功能外,完整控制欄還可以提供由各個媒體應用程式定義的更全面的控制選項。

在控制項的觸控目標之外的任何位置選擇最小化的控制欄,即可將其展開為全螢幕播放疊加層(播放視圖),如圖所示

播放視圖疊層位於可瀏覽內容區域的上方,最小化的控制欄被附加控制項的完整控制欄所取代。

互動模型

AAOS 在汽車螢幕上呈現媒體內容,並允許使用者在針對車輛最佳化的環境中瀏覽和播放內容。

媒體應用在汽車中的工作原理

AAOS 包含一系列 API,用於處理車載媒體應用的播放和瀏覽體驗。這些 API 使應用程式開發者能夠利用媒體應用的標準模板,其中包括:

  • 導航和播放控制
  • 可瀏覽的媒體內容
  • 應用程式內搜尋和設定的應用程式控件

此範本透過兩種方式支援車載資訊娛樂系統 (IVI) 體驗:

  • 汽車製造商可以客製化介面外觀和風格,以適應他們的汽車和品牌。
  • 應用程式開發者可以將他們的內容連接到介面,從而提供一致的體驗,使其應用程式的品牌能夠跨多個汽車和製造商進行推廣。

Google 正在基於安全考量和原則(例如「設計基礎」「設計原則」中討論的原則)設計媒體應用的基本使用者體驗。您可以將此使用者體驗的某些方面應用於您自己的資訊娛樂系統,而不會影響專為 AAOS 建置的應用程式的功能。

例如,雖然不同汽車製造商的媒體應用程式在外觀和操作方式上可能有所不同,但無論駕駛何種類型的汽車,使用者都能使用熟悉的操控介面。同時,在同一類型的汽車中,切換媒體應用程式並不會改變使用該汽車媒體應用程式的基本瀏覽和播放操作。

本節介紹媒體應用的頂級應用導航的工作原理。

使用者可以透過應用程式列在媒體應用程式的頂級內容視圖之間進行導航,應用程式列可以包含以下導航元素:

  • 主導航標籤(或其變體)
  • 應用選擇器(可選)

應用程式列還可以包含應用程式圖示和應用程式控件,這些內容在「應用程式品牌」「登入、設定和搜尋」中進行了討論。

主導航標籤

媒體應用程式中的內容視圖主要導覽通常由應用程式列中的最多 4 個標籤頁組成(除非螢幕非常小,空間不足以顯示標籤頁)。這些標籤頁允許使用者在應用層級結構的頂層內容視圖之間橫向切換。

當使用者選擇標籤頁時,其跳到的位置會反映使用者先前與該內容視圖的互動情況。例如,如果使用者先前在同一媒體應用程式會話期間捲動過某個標籤頁的內容,那麼當使用者返回該標籤頁時,滾動位置將會保留。

應用程式欄中的標籤允許使用者在內容視圖之間橫向移動。

主要導航變體

每個主要導航項目通常以標籤頁的形式呈現,標籤頁上既有圖示也有標籤。同時包含圖示和標籤可以減輕駕駛者的認知負擔,因為圖示便於快速瀏覽,而標籤則能更清楚地表達意義。

此應用程式列包含每個標籤的圖示和標籤。

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

  • 僅標籤:如果螢幕高度不足以容納合理數量的內容以及包含圖示和標籤的選項卡,則僅使用標籤。
  • 抽屜:如果螢幕寬度不足以顯示標籤頁
  • 無標籤頁:如果只有一個主要導航選項
在某些特殊情況下,應用程式列可能會採用以下導航策略之一,作為帶有圖示和標籤的選項卡(從上到下)的替代方案:僅帶有標籤的選項卡、抽屜而不是選項卡,或沒有選項卡的單一頂級內容視圖。

應用選擇器

應用程式選擇器可讓您快速存取其他媒體應用程式。您可以自行決定是否提供應用程式選擇器。例如,您可能更傾向於僅使用所有可用應用程式的清單作為切換媒體應用的機制。

標註圖標
應用品牌推廣
應用圖示的放置可能涉及應用程式選擇器,也可能不涉及。
當應用程式列位於螢幕頂部或底部時,應用程式選擇器通常位於應用程式列的右側。

應用程式選擇器啟動後,即可存取其他媒體應用程式。用戶選擇其他應用程式後,該應用程式就會顯示出來。

應用選擇器中提供的典型應用。

應用程式列位置

您可以為所有 AAOS 範本(包括媒體範本)設定應用程式列的位置。只要位置始終保持一致,應用程式列可以顯示在螢幕頂部、​​底部或側邊。此外,您還可以將標籤頁和應用程式控制項堆疊在應用程式列內。

為了最大限度地減少認知負荷並確保可靠的用戶體驗,應用程式列及其功能必須始終在整個資訊娛樂系統中顯示在同一位置。

瀏覽內容詳情

本節介紹媒體應用中的內容瀏覽功能,包括使用者如何導航到更詳細的低階視圖。

在媒體應用程式中瀏覽內容的過程包括:

  • 查看內容網格或列表
  • 選擇可瀏覽的內容項目(即代表項目集合的項目,而非可玩的項目)以導覽至這些項目的更詳細視圖。

內容項目的詳細視圖位於內容空間的下一層級,同樣以網格或清單形式呈現。使用者可以透過應用程式標題列中的「返回」按鈕從下一層級向上導航。

內容的網格視圖和清單視圖

媒體內容可以以網格視圖、清單視圖或兩者的組合形式呈現在同一內容空間中。內容可以按類別組織,並以子標題分隔。使用者可以透過垂直捲動瀏覽網格或清單。

內容空間的頂層顯示了網格和清單格式。這兩種格式都可以在任何層級使用。

當使用者瀏覽內容空間時,可以選擇可瀏覽的內容項目(例如專輯或播放清單)來查看該項目的更詳細資訊(專輯中的歌曲或播放清單中的單一項目)。當使用者以這種方式深入瀏覽內容空間時,螢幕頂部會出現一個應用程式標題欄,其中包含一個可供使用者返回上一級頁面的按鈕。

點擊應用程式標題列上的返回箭頭,即可返回內容區域的頂層。

當使用者捲動內容網格或清單時,螢幕頂部的應用程式列(或應用程式標題列)會固定在原地,內容則在其後捲動。

內容會捲動顯示在固定的應用程式列後面。

播放媒體

本節介紹媒體應用程式的播放工作原理。

使用者可以透過以下兩種方式之一控制媒體播放:

  • 播放視圖(全屏,所有控制選項)
  • 最小化控制欄(最小化控件,可在所有視圖中使用)

回放視圖

要開始播放,使用者需在內容區域選擇一個可播放項目,例如專輯或歌曲,播放視圖隨即佔據整個內容區域。播放視圖會顯示所選內容的元資料和播放控制按鈕。使用者可以使用這些按鈕以及手勢來控製播放。

播放控制

播放控制按鈕顯示在控制列中,如果控制按鈕超過 5 個,則可以展開控制列(請參閱下方「播放控制按鈕位置」)。如果應用程式使用了播放佇列,則套用頭部會提供存取播放佇列的選項。

當使用者選擇可播放內容時,將顯示播放視圖。
當控制項超過 5 個時,使用者可以展開控制欄,並透過溢位按鈕(右下角)存取其他控制項。

播放控制位置

為確保不同媒體服務使用一致,底部一行控制項(若控制列未展開,則為唯一一行)應依照下圖所示順序排列。頂部一行僅在控制列展開時顯示,最多可容納 t=5 個自訂操作。

如果應用程式不使用「上一頁」或「下一頁」按鈕,也可以用自訂動作取代這些按鈕。

底部一行的控制項應依照上例和下表所示的順序顯示。
位置按鈕

最左側

自訂操作

偏左

先前操作或自訂操作

中心

播放/暫停

偏右

下一步或自訂操作

最右側

溢位提示(如果控制項超過 5 個)或自訂操作

手勢

除了使用播放視圖中的控制項外,使用者還可以使用手勢來最小化視圖。

使用者可以透過從視圖中的任何位置向下滑動來將播放視圖折疊到最小化的控制欄中。

最小化控制欄

如果使用者在播放過程中離開播放視圖,播放視圖中的控制欄將折疊成最小化的控制欄,該最小化控制欄提供有關當前播放內容的資訊以及播放和暫停等基本控制項。使用者可以透過最小化的控制欄瀏覽可用的媒體,同時當前歌曲或其他內容將繼續播放。

最小化控制欄是使用者離開播放視圖後仍然可用的控制欄的簡化版本。

使用者可以向下滑動(如上文「手勢」部分所示)或點擊左上角的向下箭頭(如本文所示)來最小化播放視圖。

佇列

如果媒體應用程式支援播放佇列,則播放檢視的應用程式標題列會包含一個佇列圖示。點擊該圖示會顯示一個可捲動的、按時間順序排列的目前播放和即將播放內容清單。某些媒體應用程式可能也會將先前播放過的內容顯示在佇列中。

隊列顯示即將播放和正在播放的內容。

佇列至少會顯示每個已排隊項目的標題。應用程式開發者還可以為每個專案提供縮圖。此外,他們還可以提供一個圖示來指示目前正在播放的項目,也可以顯示該項目的播放時間。但是,汽車製造商可以選擇顯示或隱藏這些資訊:縮圖、圖示或播放時間。

使用者可以捲動清單並選擇佇列中的任意項目,即可在播放檢視中立即播放。如需返回播放視圖而不選擇任何項目,使用者可以點擊隊列或返回按鈕。

本節介紹媒體應用中的登入與搜尋及設定應用程式控制的工作原理。

使用者可以透過應用程式列或應用程式頂部的應用程式控制項存取應用程式設定和應用程式內搜尋。汽車製造商設計搜尋介面,應用程式開發者則將他們的內容與 Android Automotive OS API 連接起來。應用開發者負責設計其應用程式的設定介面和登入流程的各個方面。

登入

當使用者嘗試開啟需要登入的應用程式時(通常是在從應用程式商店安裝應用程式之後),使用者會進入應用程式開發者提供的登入流程。如果應用程式的登入是可選的,則可以將其作為應用程式設定之一,以便使用者可以透過設定存取登入選項。

登入流程可能涉及以下一項或多項內容:

  • Google 登入:允許使用者使用其 Google 帳戶登入。
  • 手機登入:在車載螢幕上顯示PIN碼,供用戶在手機上輸入,反之亦然。
  • 標準登入:使用者在車載螢幕上輸入應用程式的使用者名稱和密碼

對於支援 Google 登入的應用程式,建議將其作為主要登入方式。使用此選項,使用者需要驗證其現有的 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 的設計原則和視覺基礎。