メディアアプリ

Android Automotive OS(AAOS)を使用すると、車載画面でメディアアプリのコンテンツを閲覧・再生できます。スマートフォンを必要とせず、Google Playから車に直接メディアアプリをダウンロードできます。

このページには次のセクションが含まれます。

空間モデル

このメディア アプリ テンプレートの概要では、その主な要素、それらが提供する基本機能、およびそれらを保持するアーキテクチャについて説明します。

各要素の動作の詳細については、次のセクションで説明します。

解剖学

メディア テンプレートには次のものが含まれます。

  • アプリバー主要なアプリナビゲーションアプリコントロール(アプリ内検索と設定用)を備え、アプリアイコンが含まれています
  • 閲覧可能なコンテンツスペース– コンテンツをグリッドビュー(ここに表示)またはリストビューで表示します
  • 再生コントロール– ここで表示される最小化されたコントロールバーには、基本的なメディアメタデータと再生コントロールが含まれており、より多くのコントロールを備えた再生オーバーレイへのアクセスも提供します。
1. 主要なナビゲーションタブとアプリコントロールを備えたアプリバー
2. 閲覧可能なコンテンツスペース
3. 再生コントロール (ここでは最小化されたコントロール バーに表示されています)。

このサンプルレイアウトは、これらの要素の配置の一例を示したものです。例えば、画面サイズに応じて、プライマリナビゲーションとアプリコントロールを単一の水平バーにまとめるのではなく、積み重ねて配置することができます。ナビゲーション階層については、以降のセクションで詳しく説明します。

プライマリナビゲーション

アプリ バーの主なナビゲーションは、公開されたタブで構成されます (画面が小さすぎるまれな場合を除く)。

この例は、一般的なタブの配置を示しています。

ユーザーは、アプリ バーの [ホーム] や [プレイリスト] などのタブを選択して、メディア コンテンツの最上位ビューに移動できます

アプリ バーのタブを選択すると、現在のビューが別のトップレベルのアプリ ビューに置き換えられます

アプリのコントロール

アプリコントロール(下の例の右上に表示)は、ブランディングや主要なナビゲーションに使用されないアプリバーの一部を占めます。現在開いているメディアアプリのアプリ内検索や設定機能にアクセスできます。

アプリのコントロールを選択するとオーバーレイが開きます。例えば、ここに示す「設定」アフォーダンスを選択すると、設定インターフェースを表示するオーバーレイが開きます。ユーザーがオーバーレイを閉じると、アプリ内の前の場所に戻ります。

アプリ バーの [設定] アフォーダンスを選択すると、ユーザーがアプリの設定にアクセスできるオーバーレイが開きます

アプリ コントロールを選択すると、参照可能なコンテンツの上にオーバーレイが開き、アプリ バーがアプリ ヘッダーに変わります

閲覧可能なコンテンツスペース

閲覧可能なコンテンツ スペース内で、ユーザーはコンテンツをスクロールし、Z スペースを介して階層の連続レベルを下って個々のアイテムに移動できます。

複数のレベルをナビゲートするとドライバーの認知負荷が増加するため、Google では情報アーキテクチャをできるだけ少ないレベルで比較的フラットに保つことを推奨しています。

閲覧可能なコンテンツの最上位レベルでは、ユーザーはグリッド (ここに示すとおり) またはリストから選択できます

閲覧可能なコンテンツから選択すると、より詳しい情報を含む次のレベルが開きます

再生コントロール

メディア アプリの再生コントロールは、状況に応じて次の 2 つの形式のいずれかで表示されます。

  • 最小化されたコントロール バー (ビュー間で利用可能)
  • 再生ビュー(フルコントロールバー付きオーバーレイ)

次のアニメーションの例では、これら 2 つのフォームが画面の下部に交互に表示されます。

最小化されたコントロールバー

最小化されたコントロールバーは、ブラウズ可能なコンテンツスペースの最上位、コンテンツの上に表示されます。現在再生中のコンテンツに関する情報と、ユーザーが再生を制御するための基本的な機能を提供します。

コンテンツの再生が開始されると、ユーザーがメディアコンテンツを閲覧している間は、最小化されたコントロールバーが引き続き表示されます。このコントロールバーは、新しいメディアアプリが選択されるか、ユーザーが最小化されたコントロールバーをタップして再生ビューを表示するまで表示されます。

再生ビュー

フルコントロールバーは再生ビューでのみ使用可能で、コンテンツの上に表示されます。最小化されたコントロールバーで利用できる機能に加え、フルコントロールバーでは、各メディアアプリで定義されたより広範なコントロールを提供できます。

コントロールのタッチ ターゲットの外側の任意の場所で最小化されたコントロール バーを選択すると、ここに示すように、フルスクリーンの再生オーバーレイ (再生ビュー) に展開されます

再生ビュー オーバーレイは、参照可能なコンテンツ スペースの上に配置され、最小化されたコントロール バーは、追加のコントロールを備えた完全なコントロール バーに置き換えられます。

相互作用モデル

AAOS は、メディア コンテンツを車内の画面に表示し、ユーザーが車両に最適化された環境でコンテンツを閲覧および再生できるようにします。

車内でのメディアアプリの仕組み

AAOSには、車内メディアアプリの再生と閲覧エクスペリエンスを制御するAPIセットが含まれています。これらのAPIにより、アプリ開発者は以下のようなメディアアプリの標準テンプレートを活用できます。

  • ナビゲーションと再生コントロール
  • メディアコンテンツの閲覧可能なビュー
  • アプリ内検索と設定のためのアプリコントロール

このテンプレートは、車載インフォテインメント (IVI) エクスペリエンスを 2 つの方法でサポートします。

  • 自動車メーカーは、自社の車やブランドに合わせてインターフェースの外観と操作性をカスタマイズできます。
  • アプリ開発者は、コンテンツをインターフェースに接続することで、複数の自動車やメーカーにわたってアプリのブランドを反映した一貫したエクスペリエンスを提供できます。

Googleは、安全性に関する考慮事項と、設計基盤設計原則で説明されている原則に基づいて、メディアアプリの基本的なユーザーエクスペリエンスを設計しています。AAOS向けに構築されたアプリの機能を損なうことなく、このユーザーエクスペリエンスの一部を独自のインフォテインメントシステムに適応させることができます。

例えば、ある自動車メーカーのメディアアプリは他のメーカーのものと見た目や操作感が異なる場合がありますが、メディアアプリのユーザーは、どんな車種に乗っていても、そのアプリの使い慣れた操作方法で操作できます。同時に、同じ車種であれば、あるメディアアプリから別のメディアアプリに切り替えても、その車内でメディアアプリを使用する際に必要な基本的なブラウジングや再生操作は変わりません。

このセクションでは、メディア アプリのトップレベルのアプリ ナビゲーションの仕組みについて説明します。

ユーザーは、アプリ バーを使用してメディア アプリ内の最上位レベルのコンテンツ ビュー間を移動します。アプリ バーには、次のナビゲーション要素を含めることができます。

  • プライマリナビゲーションタブ(またはバリアント)
  • アプリセレクター(オプション)

アプリ バーには、アプリ アイコンとアプリ コントロールも含まれる場合があります。これらについては、 「アプリのブランド化」および「サインイン、設定、検索」で説明します。

プライマリナビゲーションタブ

メディアアプリ内のコンテンツビューの主なナビゲーションは、通常、アプリバー内の最大4つのタブで構成されます(画面が非常に小さく、タブを表示するスペースがない場合は除きます)。これらのタブを使用することで、ユーザーはアプリ階層の最上位にあるコンテンツビュー間を横方向に移動できます。

ユーザーがタブを選択すると、そのタブのコンテンツビューにおけるユーザーの以前の操作が移動先として反映されます。例えば、同じメディアアプリセッション中にタブのコンテンツが以前にスクロールされていた場合、ユーザーがそのタブに戻ったときにスクロール位置が保持されます。

アプリ バーのタブを使用すると、ユーザーはコンテンツ ビュー間を横方向に移動できます。

プライマリナビゲーションバリアント

各主要ナビゲーション項目は通常、アイコンとラベルの両方を含むタブで表示されます。アイコンは一目で分かりやすく、ラベルは意味を明確にするため、両方を含めることでドライバーの認知負荷が軽減されます。

このアプリ バーには、各タブのアイコンとラベルが含まれています。

ただし、状況によっては代替のナビゲーション戦略を使用できます。

  • ラベルのみ:画面の高さが十分でなく、アイコンとラベルの両方を含むタブとコンテンツを十分に表示できない場合
  • ドロワー:画面がタブを表示するのに十分な幅がない場合は
  • タブなし:主要なナビゲーションオプションが1つしかない場合
特殊なケースでは、アプリ バーに、アイコンとラベルが付いたタブ (上から下) の代わりに、ラベルのみが付いたタブ、タブの代わりにドロワー、またはタブのないコンテンツの単一のトップレベル ビューなどのナビゲーション戦略のいずれかが含まれることがあります。

アプリセレクター

アプリセレクターを使用すると、他のメディアアプリに素早くアクセスできます。アプリセレクターを提供するかどうかは、ご自身で選択できます。例えば、利用可能なすべてのアプリのリストのみを使用してメディアアプリを切り替えることもできます。

吹き出しアイコン
アプリのブランディング
アプリアイコンの配置にはアプリセレクターが必要な場合と不要な場合があります
アプリ バーが画面の上部または下部にある場合、アプリ セレクターは通常、アプリ バーの右側に配置されます。

アプリセレクターを起動すると、他のメディアアプリにアクセスできます。ユーザーが別のアプリを選択すると、そのアプリが表示されます。

アプリ セレクターから利用できる一般的なアプリ。

アプリバーの位置

メディアテンプレートを含むすべてのAAOSテンプレートで、アプリバーの位置を指定できます。常に同じ場所に配置されていれば、アプリバーは画面の上部、下部、または片側に表示されます。また、アプリバー内にタブやアプリコントロールを重ねて配置することも可能です。

認知負荷を最小限に抑え、信頼性の高いユーザー エクスペリエンスを確保するには、アプリ バーとそのアフォーダンスがインフォテインメント システム全体で常に同じ場所に表示される必要があります。

コンテンツの詳細を閲覧する

このセクションでは、メディア アプリでのコンテンツ ブラウジングの仕組み、特にユーザーがより詳細な下位レベルのビューに移動する方法について説明します。

メディア アプリでコンテンツを閲覧するプロセスには、次のものが含まれます。

  • グリッドまたはコンテンツのリストを表示する
  • 閲覧可能なコンテンツ項目(つまり、再生可能なものではなく、アイテムのコレクションを表す項目)を選択して、それらのアイテムのより詳細なビューに移動します。

コンテンツアイテムの詳細ビューは、コンテンツスペースの下位レベルにグリッドまたはリスト形式で表示されます。ユーザーは、アプリヘッダーの「戻る」アフォーダンスを使用して、下位レベルから上位レベルに移動できます。

コンテンツのグリッド表示とリスト表示

メディアコンテンツは、グリッドビュー、リストビュー、またはその両方の組み合わせで、同じコンテンツスペースに表示できます。コンテンツはサブヘッダーで区切られたカテゴリに整理できます。ユーザーはグリッドまたはリストを縦にスクロールして閲覧できます。

グリッド形式とリスト形式は、コンテンツスペースの最上位レベルで表示されます。どちらの形式もどのレベルでも使用できます。

ユーザーがコンテンツ空間内を閲覧する際に、閲覧可能なコンテンツ項目(アルバムやプレイリストなど)を選択すると、その項目のより詳細な表示(アルバム内の曲、またはプレイリスト内の個々のアイテム)に移動できます。このようにユーザーがコンテンツ空間の奥深くまで移動し始めると、画面上部にアプリヘッダーが表示され、前のレベルに戻るためのアフォーダンスも表示されます。

アプリのヘッダーにある戻る矢印をタップすると、ユーザーはコンテンツ スペースの最上位レベルに戻ります。

ユーザーがグリッドまたはコンテンツのリストをスクロールすると、画面上部のアプリ バー (またはアプリ ヘッダー) は固定されたままになり、その背後でコンテンツがスクロールします。

コンテンツは固定されたアプリ バーの背後にスクロールします。

メディアを再生

このセクションでは、メディア アプリでの再生の仕組みについて説明します。

ユーザーは次のいずれかからメディアの再生を制御できます。

  • 再生ビュー(全画面、すべてのコントロール)
  • 最小化されたコントロール バー (最小限のコントロール、ビュー間で使用可能)

再生ビュー

再生を開始するには、ユーザーはコンテンツスペース内のアルバムや曲などの再生可能なアイテムを選択します。すると、コンテンツスペース全体に再生ビューが表示されます。再生ビューには、選択したコンテンツのメタデータと再生コントロールが表示されます。ユーザーはこれらのコントロールやジェスチャーを使って再生を操作できます。

再生コントロール

再生コントロールはコントロールバーに表示されます。コントロールバーは、コントロールが5つ以上ある場合は展開できます(下記の「再生コントロールの位置」を参照)。アプリがキューを実装している場合、アプリヘッダーにはキューにアクセスするためのアフォーダンスが含まれます。

ユーザーが再生可能なコンテンツを選択すると、再生ビューが表示されます。
コントロールが 5 個を超える場合、ユーザーはコントロール バーを展開し、オーバーフロー ボタン (右下) を使用して追加のコントロールにアクセスできます。

再生コントロールの場所

メディアサービス間での使用に一貫性を持たせるため、コントロールの一番下の行(コントロールバーが展開されていない場合は唯一の行)には、次の図に示す順序でコントロールを表示する必要があります。コントロールバーが展開されている場合にのみ表示される一番上の行は、最大5個のカスタムアクション用に予約されています。

アプリが「前へ」または「次へ」ボタンを使用しない場合は、これらのボタンをカスタム アクションに置き換えることもできます。

一番下の行のコントロールは、上の例と下の表に示されている順序で表示されます。
位置ボタン

左端

カスタムアクション

中央左

前回またはカスタムアクション

中心

再生/一時停止

中央右

次のアクションまたはカスタムアクション

右端

オーバーフローアフォーダンス(コントロールが5つ以上ある場合)またはカスタムアクション

ジェスチャー

再生ビューのコントロールを使用するだけでなく、ジェスチャを使用してビューを最小化することもできます。

ビュー内の任意の場所から下にスワイプすると、再生ビューを最小化されたコントロール バーに折りたたむことができます。

最小化されたコントロールバー

コンテンツの再生中にユーザーが再生ビューを離れると、再生ビューで利用可能なコントロールバーは最小化されたコントロールバーに折りたたまれます。このコントロールバーには、再生中のコンテンツに関する情報に加え、再生や一時停止などの基本的な操作が表示されます。最小化されたコントロールバーでは、ユーザーは再生中の曲やその他のコンテンツの再生を継続しながら、利用可能なメディアを閲覧できます。

最小化されたコントロール バーは、ユーザーが再生ビューを離れた後も使用可能なコントロール バーの簡略化されたバージョンです。

ユーザーは、下にスワイプするか (上記の「ジェスチャ」に示すように)、左上隅の下矢印をタップして (ここに示すように)、再生ビューを最小化できます。

メディアアプリがキューを実装している場合、再生ビューのアプリヘッダーにはキューアフォーダンスが含まれます。このアフォーダンスを選択すると、現在再生中および今後再生されるコンテンツが時系列でスクロール可能なリストとして表示されます。一部のメディアアプリでは、以前に再生されたコンテンツもキューに表示される場合があります。

キューには、今後再生されるコンテンツと現在再生中のコンテンツが表示されます。

キューには、少なくとも各アイテムのタイトルが表示されます。アプリ開発者は、各アイテムのサムネイルも提供できます。さらに、再生中のアイテムを示すアイコンや、そのアイテムの経過時間を表示することで、そのアイテムが再生中であることを示すこともできます。ただし、自動車メーカーは、サムネイル、アイコン、経過時間のいずれかを表示するか非表示にするかを選択できます。

ユーザーはリストをスクロールしてキュー内の任意のアイテムを選択すると、再生ビューですぐに再生できます。再生するアイテムを選択せず​​に再生ビューに戻るには、キューまたはバックアフォーダンスのいずれかを選択します。

このセクションでは、メディア アプリでのサインインと検索および設定のアプリ コントロールの仕組みについて説明します。

ユーザーは、アプリバーまたはアプリヘッダーのアプリコントロールを使用して、アプリの設定とアプリ内検索にアクセスできます。自動車メーカーは検索オーバーレイを設計し、アプリデベロッパーはコンテンツをAndroid Automotive OS APIに接続します。アプリデベロッパーは、アプリの設定オーバーレイとログインフローのあらゆる側面を設計します。

サインイン

ユーザーがサインインが必要なアプリを開こうとすると(通常はPlayストアからアプリをインストールした後)、アプリ開発者が提供するサインインフローが開始されます。アプリのサインインがオプションである場合は、アプリの設定の1つとしてサインインを含めることができ、ユーザーはそこからサインインにアクセスできます。

サインイン フローには、次の 1 つ以上の手順が含まれる場合があります。

  • Google サインイン:ユーザーが Google アカウントを使用してサインインできるようにする
  • 電話サインイン:車の画面にPINコードを表示し、ユーザーが携帯電話で入力できるようにする、またはその逆
  • 標準サインイン:ユーザーが車の画面でアプリのユーザー名とパスワードを入力する

Google ログインは、対応するアプリの主なログイン方法として推奨されています。このオプションでは、図に示すように、ユーザーは既存の Google アカウントを確認します。

Google アカウントを確認します。

サインイン フローのその他の例と作成のガイドラインについては、 「サインイン」を参照してください。

アプリコントロールは、メディアアプリのアプリ内検索とアプリ設定で構成されます。アプリ開発者は、どちらか一方または両方を実装することを選択できます。

アプリ コントロールは通常、画面の上部または下部にあるアプリ バーのタブの右側に表示されます。
アプリ内検索。
  • アプリバーでアプリ内検索アフォーダンスの使用をサポートできます。アプリ開発者は、アプリに検索機能を実装するかどうかを決定できます。
  • ユーザーが運転中は、検索アフォーダンスによって運転向けに最適化されたキーボードが起動し、音声入力が可能になります。駐車中は標準キーボードが起動します。両方のキーボードをデザインすることも、Google提供のキーボードをカスタマイズすることもできます。
アプリの設定。
  • アプリバーでアプリ内設定アフォーダンスの使用をサポートできます。アプリ開発者は、アプリに設定機能を実装するかどうかを決定できます。
  • この設定機能には、アプリの使用に必要な設定 (アカウント情報、アプリの設定、サインインとサインアウトの機能など) と、車内でメディアを聴くことに関連する設定 (不適切なコンテンツのオフなど) のみを含める必要があります。
  • ユーザーが運転中は設定アフォーダンスは表示されますが、アプリの設定が利用できないことを示すために暗く表示されるか、その他の変更が加えられています。車が駐車中の場合、このアフォーダンスはアプリの設定を含むオーバーレイを呼び出します。アプリ開発者は、「デザイン設定」の説明に従って、アプリのオーバーレイ画面をデザインします。

役割分担

以下の表は、統一されたメディア アプリ エクスペリエンスを実現するための自動車メーカーとアプリ開発者の設計上の役割をまとめたものです。

メディア体験の側面自動車メーカーのデザインの役割アプリ開発者のデザインの役割

メディアアプリの操作

アプリバーの表示場所を決定し、アプリバーに表示されるアプリナビゲーションとコントロールをサポートします

アプリバーのタブに表示するトップレベルのコンテンツビューを決定し、必要に応じてアイコンとラベルを提供します

プランのナビゲーションタブにアクセス

コンテンツの詳細を閲覧する

グリッドまたはリスト項目のサイズとコンテンツを決定し、コンテンツの下位レベルにアプリヘッダーを実装します。

各レベルで閲覧可能なメディア コンテンツの形式 (グリッドまたはリスト) と構成を決定します。

訪問プランの閲覧ビュー

メディアを再生中

適切なメディアメタデータと再生コントロール(アプリ内のカスタムアクション用のコントロールを含む)を備えた再生ビューと最小化されたコントロールバーを実装します。再生ビューにキューアフォーダンスを提供し、キューのスタイルを設定します。

コントロールバーにカスタムアクションを実装するかどうか、またそれらのアイコンを提供するかどうかを決定します。キューを実装するかどうか、そして現在再生中のトラックのインジケーターを提供するかどうかを決定します。

再生コントロールのカスタマイズをご覧ください

サインイン、設定、検索

アプリバーに検索と設定のためのアフォーダンスを提供し、検索キーボードを設計し、必要に応じてユーザーをサインイン画面に接続します。

必要に応じて、サインインフロー(サンプルコードから適応)と設定画面を提供します

サインインデザインのサインインと設定にアクセスしてください

ブランド帰属

すべてのコンテンツ画面にアプリアイコンを表示し、サードパーティアプリの色をアクセントとして適用する場所を選択します。

アプリアイコンを提供し、アクセントカラーを指定します

ディスプレイアプリのブランディングをご覧ください

アプリのチェックリスト

このリストを使用して、AAOS のメディア テンプレート内でアプリを表示するために必要なすべてのデザイン要素が提供されていることを確認します。

デザイン要素関連する設計タスク関連する技術タスクとサンプルコード

ナビゲーション要素:

  • 最大 4 つのナビゲーション タブ用のモノクロ (黒または白) ベクター アイコンとラベル

プランナビゲーションタブ

コンテンツ階層を構築する

閲覧ビューの要素:

  • 閲覧ビューの形式を指定するコンテンツ スタイル (グリッドまたはリスト、サブカテゴリのタイトル)

閲覧ビューを計画する

コンテンツスタイルを適用する

再生要素:

  • アプリが使用するカスタム再生アクションのモノクロ(黒または白)ベクター アイコン(状態ごとに個別のアイコン)
  • キューアイテムのサムネイル(オプション)
  • 現在再生中のキューアイテムのアイコン(オプション)

再生コントロールをカスタマイズする

キューガイドライン

カスタム再生アクションを追加する

サインイン要素:

  • カスタマイズされたサインイン画面(UAMP Automotive アプリのサンプル コードから改変)

サインイン

UAMP Automotiveアプリ

サインインアクティビティを追加する

設定要素:

  • 設定オーバーレイ画面 – 縦向きレイアウト(Volvo Polestar 2 サイズ: 1068 x 1425dp; 1152 x 153px)
  • 設定オーバーレイ画面 – 横長レイアウト(自動車用基準サイズ:1075 x 806dp、1024 x 768px)

デザイン設定

設定アクティビティを追加する

ブランディング要素:

  • フルカラーベクターアプリアイコン
  • アクセントカラー

ブランディング要素を提供する

アプリアイコンを指定しデフォルトのテーマをカスタマイズします

カスタムスクリーンのガイドライン

AAOS で使用されるメディアアプリのほとんどの機能では、カスタム画面を設計する必要はありません。ただし、設定とサインインは例外です。ユーザーがアプリの設定にアクセスできるようにするには、設定画面を設計する必要があります。また、アプリでサインインが必要な場合は、サインインフローを提供する必要があります。これは、Universal Android Music Playerのサンプルコードからカスタマイズできます。

これらの一般的なスタイルガイドラインは、カスタム設定画面とカスタマイズされたサインイン画面の両方に適用されます。これにより、駐車中や昼夜を問わず、車の画面に表示されるデザインを最適化することができます。

設定とサインインに固有の追加のガイドラインについては、「アプリの設定」を参照してください。

要件レベルガイドライン

しなければならない

アプリ開発者は次のことを行う必要があります。

  • 設定画面とトップレベルのサインイン画面を終了するための「閉じる」アフォーダンスを提供する
  • トップレベルの画面に続くすべての画面から「戻る」アフォーダンスを提供する
  • 「閉じる」または「戻る」アフォーダンスを画面の左上に配置します
  • 背景とアイコンまたはテキストのコントラスト比を少なくとも4.5:1に維持する
  • 主要テキストには少なくとも 32 dp、二次テキストには 24 dp の推奨フォントサイズを使用します。
  • タッチターゲットは推奨最小サイズである76 x 76dp以上に保つ

すべき

アプリ開発者は次のことを行う必要があります。

  • すべての画面とオーバーレイにダークテーマを使用する
  • すべての画面にロゴまたはアプリアイコンを含める
  • アクセントカラーを使用する場合は、ブランディング要素として提供されているものと同じものを使用してください。
  • テキスト文字列は、推奨される最大テキスト長である 120 文字以内にしてください。
  • 可能であれば、タッチターゲット間の距離を少なくとも24dpにしてください

5月

アプリ開発者は次のことが可能です。

  • アプリの一部としてサインインと設定機能を実装するかどうかを決定します

根拠

メディア アプリ開発者が直接設計する画面は、次のようになります。

  • 標準的なメディア アプリのナビゲーション パターンとデザイン規則をサポートします。
  • AAOS のデザイン原則と視覚的な基盤を反映します。