メディアアプリ

アプリ開発者はメディアアプリのコアコンテンツ、アイコン、カスタムアクションを提供する一方、自動車メーカーは全体的なビジュアルエクスペリエンスを柔軟にカスタマイズできます。これにより、サードパーティ製のメディアアプリが車載インフォテインメント体験の一部としてネイティブに感じられるようになります。

自動車メーカーがカスタマイズできるもの

アプリバーを設定する

アプリバーは、Google搭載の車載メディアアプリにおける主要なナビゲーションとブランディング要素です。ユーザーにアプリ内の現在位置を示し、検索やブラウジングなどの重要な機能に素早くアクセスできるようにします。

デザイン トークンを使用して外観、レイアウト、機能を変更することで、アプリ バーを車のブランドに合わせてカスタマイズできます。

解剖学

メディア アプリ バーは通常、次の要素で構成されます。

  • ナビゲーション アイコン:通常は、前の画面に戻るための戻る矢印です。
  • アプリのブランディング:アプリのロゴまたは名前。
  • タブ: 「参照」や「検索」など、最上位カテゴリへのナビゲーション リンク。
  • アクション アイコン:検索アイコンのようなコンテキスト アクション。

外観をカスタマイズする

デザイントークンを使用すると、アプリバーが車のシステムテーマと一致するようになります。トークンを使用すると、UI全体で自動的に更新される色とタイポグラフィを定義できます。

  • 背景:適切なサーフェス トークンを使用して、アプリ バーの背景色と不透明度を設定します。
  • タイポグラフィ:システムのタイポグラフィ トークンにマッピングして、アプリのタイトルとタブ ラベルにブランドのフォントと太さを使用します。
  • アイコン:運転中に読みやすいように、ナビゲーション アイコンとアクション アイコンで一貫したサイズと色のトークンが使用されていることを確認します。

機能構成

タブを管理する

アプリの構造に応じて、アプリバーに表示するタブを選択できます。一般的な設定は次のとおりです。

  • 標準的なブラウジング:プレイリスト、アーティスト、アルバムなどのカテゴリのタブ。
  • 検索統合:アプリ バーの専用の検索タブまたはアイコンを使用して、キーボードまたは音声検索にすばやくアクセスできます。

ディスプレイブランディング

統一感のある外観を保つために、アプリのロゴやブランドをアプリバーにどのように表示するかを決めることができます。以下のオプションから選択できます。

  • ロゴを表示する:ナビゲーション アイコンの横にアプリのロゴを配置します。
  • タイトルを表示します。ロゴが提供されていない場合は、アプリ名にテキストを使用します。

スタイル閲覧ビュー

ブラウジングビューでは、ユーザーはグリッドやリストを通してメディアコンテンツを探索できます。自動車メーカーはこれらのビューをカスタマイズすることで、車両のブランドイメージやシステム全体のデザインとメディア体験を一致させることができます。

ヘッダーのカスタマイズ

ブラウジングヘッダーは、ユーザーがコンテンツ階層内で現在どこにいるかを示すコンテキストを提供します。ヘッダーの以下の項目をカスタマイズできます。

  • 位置とスタイル:高さや背景の処理など、ヘッダーの垂直配置と視覚的なデザインを調整します。
  • ヘッダー要素:タイトル テキストのスタイルやセカンダリ アイコンの外観など、特定のコンポーネントをカスタマイズします。

グリッドとリスト項目

メディアコンテンツは、ユーザーが効率的に閲覧できるよう、グリッドまたはリスト形式で整理されています。これらのレイアウトをカスタマイズすることで、読みやすさと見やすさを向上させることができます。

  • アイテムのスタイル設定:サムネイルのサイズや形状、タイトルやサブタイトルの書体など、個々のアイテムの外観をカスタマイズします。
  • レイアウトの選択:表示されるコンテンツの種類に基づいて、グリッド形式またはリスト形式を選択します (たとえば、アルバム アートにはグリッドを使用し、トラック名にはリストを使用します)。
  • フォーカス状態:ユーザーが項目を選択または強調表示したときにその項目がどのように表示されるかを定義します。

スタイル再生レイアウト

再生ビューでは、再生中のメディアのコントロールとメタデータをユーザーに提供します。自動車メーカーは、このビューと最小化されたコントロールバーの外観をカスタマイズすることで、車両のブランドイメージに合致した統一感のあるエクスペリエンスを実現できます。

再生ビューの構造

再生ビューには通常、次のコンポーネントが含まれます。

  • アルバムアート:現在のメディアの視覚的表現。
  • メタデータ:トラックタイトル、アーティスト名、アルバムタイトルなどの情報。
  • 再生コントロール:再生、一時停止、スキップ、シャッフルなどの基本的なアクション。
  • 進行状況バー:現在のトラックの進行状況を視覚的に表示するインジケーター。多くの場合、シーク可能なサムが含まれます。

カスタマイズオプション

デザイン トークンを使用して、再生エクスペリエンスの視覚スタイルを変更できます。

メイン再生画面

  • 背景とオーバーレイ:システム テーマに合わせて背景色、グラデーション、または不透明度レベルをカスタマイズします。
  • タイポグラフィ:システム タイポグラフィ トークンを使用して、トラック タイトルとアーティスト情報のフォント、サイズ、太さを定義します。
  • コントロールのスタイル:再生ボタン (再生、一時停止、次へなど) の形状、色、アイコン スタイルをカスタマイズして、他のシステム コントロールとの一貫性を保ちます。
  • プログレス バー:ブランド固有の色を使用して、プログレス バーのトラックとサムのスタイルを設定します。

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

最小化されたコントロールバーを使用すると、システムの他の部分を操作しながらメディアを操作できます。以下の項目をカスタマイズできます。

  • 位置とレイアウト: MCB が画面上のどこに表示されるか、また MCB 内での要素の配置方法を決定します。
  • 要素の可視性:最小化された状態で表示されるコントロール (再生/一時停止、スキップなど) を選択します。
  • スタイル設定:一貫した色と丸い角を適用して、MCB がシステム UI のネイティブの一部のように感じられるようにします。

アプリ内検索は、車内でユーザーがメディアを素早く見つけられるようにするための重要な機能です。アプリ開発者は検索コンテンツを提供しますが、自動車メーカーはキーボードや検索結果の表示を含む検索オーバーレイの設計に責任を負います。

キーボードのデザイン

検索オーバーレイは、車両の運転状態に応じて異なるキーボード構成を使用し、安全性と使いやすさを確保します。

  • 標準キーボード：駐車時に表示されます。これは、手動でテキストを入力するためのフル機能キーボードです。
  • ドライブ最適化キーボード：車両走行中に表示されます。このバージョンは通常、音声入力を優先し、ドライバーの注意力低下を最小限に抑えるために、簡略化された手動入力や候補表示を行う場合があります。

自動車メーカーは、システム設計トークンを使用して車両のブランドに合わせて、キーの形状、背景色、書体などのキーボードの視覚的なスタイルをカスタマイズできます。

ユーザーがクエリを入力すると、結果がオーバーレイに表示されます。このビューでは、以下の項目をカスタマイズできます。

  • レイアウトと間隔:検索結果をグループ化する方法と、読みやすさを向上させるために項目間に確保するスペースの量を定義します。
  • アイテムの外観:タイトルとサブタイトルのフォント スタイル、関連するサムネイルのサイズなど、検索結果内のリスト アイテムのスタイルをカスタマイズします。
  • 空とエラーの状態:結果が見つからない場合や接続エラーが発生した場合のオーバーレイの外観をデザインします。

アプリのブランディングを表示

Google 搭載車内で統一感のあるメディア体験を実現するために、サードパーティ製アプリのブランディングをシステム UI に統合する方法をカスタマイズできます。これにより、ユーザーはどのアプリを使用しているかを把握しながらも、ビジュアル表現は車両全体のデザインと一貫性を保つことができます。

ブランド要素

次のアプリ固有の要素の配置と統合をカスタマイズできます。

  • アプリ アイコン:メディア サービスの主な視覚的識別子。
  • アクセント カラー:アプリ開発者が提供するブランド固有の色。
  • アプリ名:メディア サービスのテキストベースの名前。

カスタマイズオプション

デザイン トークンを使用して、これらのブランド要素がさまざまなメディア スクリーンにどのように表示されるか定義します。

アイコンの配置とスタイル

メディア インターフェース内でアプリ アイコンを表示する方法は柔軟に設定できます。

  • 配置:アプリ バー内や再生ビューなど、コンテンツ画面上のアプリ アイコンの配置場所を決定します。
  • スケーリングと形状:システム トークンを使用してアイコンのサイズと角の半径を定義し、他のシステム レベルのアイコンと一致するようにします。

アクセントカラーを統合する

アプリのアクセント カラーを使用すると、車両の UI を圧倒することなく、アプリのブランドを微妙に示唆することができます。

  • アダプティブ スタイル:進行状況バー、アクティブ タブ インジケーター、ボタンなどの UI コンポーネントにアプリのアクセント カラーを組み込む方法を選択できます。
  • 色の正規化:システム定義の色変換を適用して、アプリが提供する色が安全性と読みやすさのコントラスト要件を満たしていることを確認します。

デザインのベストプラクティス

  • システムの調和を維持する:アプリのブランディングが主な運転タスクの邪魔になったり、車両のシステム全体のテーマと衝突したりしないことを確認します。
  • 読みやすさを優先する:テキストやアイコンにアプリのアクセント カラーを使用する場合は、選択した背景に対して必要なコントラスト比を満たしていることを確認します。
  • 一貫した適用:すべてのサードパーティ メディア アプリに一貫してブランド ルールを適用し、予測可能なユーザー エクスペリエンスを提供します。
  • システム トークンの使用:将来のシステム更新との互換性を維持するために、ブランド カスタマイズを常に提供されたデザイン トークンにマッピングします。