システム エクスペリエンス、アプリ エクスペリエンス、その他の機能に重点を置いてポートレート参照エクスペリエンスを設計します。
縦向きのリファレンス デザインはホーム画面に固定されており、次の永続的なシステム UI 要素が含まれています。
ホーム画面
ホーム画面はドライバーにとって包括的な出発点であり、すべてのコントロールに簡単にアクセスできます。ほとんどのドライバーのニーズに対応できるため、ドライバーはアプリを切り替えることなく、運転に集中できます。
この画面を離れることなく、ドライバーは以下にアクセスできます。
- クイック コントロールとプロファイル セレクタがある上部のステータスバー
- 画面本体のベースレイヤ(通常はナビゲーション アプリを実行する)
- 下部のコントロール バーとシステム ナビゲーション バー


コントロール バー
コントロール バーには、メディア(動画と音楽)、ポッドキャスト、Bluetooth、ラジオ、通話中のコントロールが表示されます。
メディアアプリとスマートフォン アプリの場合、コントロール バーは画面の下半分にあるナビゲーション バーの上にあります。ユーザーが着信を受けると、コントロールがメディアからアクティブな通話に変わります。
メディア コントロール
メディア コントロールでは、再生、一時停止、巻き戻し、早送りを行うことができます。また、お気に入りにマークを付け、追加のカスタム コントロール(ある場合)にアクセスすることもできます。




アクティブな通話コントロール
スマートフォンのコントロールでは、スピーカーのミュート、Bluetooth への切り替え、通話のキャンセルを行えます。
ステータスバー
ステータスバーは画面の上部に表示され、プロファイル セレクタ、クイック コントロール、時刻と天気の情報をホストできます。
- クイック コントロール:
- Bluetooth: Bluetooth のステータス
- 接続: Wi-Fi、モバイル ネットワーク、アクセス ポイント
- 明るさの表示: 画面の明るさのレベルを調整できます。
- 時計: 現在の時刻のデジタル表示
- 天気情報: 外気温を表示します。
- プロファイル セレクタ: 現在使用中のユーザー プロフィールを表示し、ユーザーが必要に応じて別のプロファイルを選択できるようにします。
ステータスバーの要素は、左ハンドルの自動車と右ハンドルの自動車で同じ順序で表示されます。
天気情報の表示は [設定] で切り替えることができます。
ステータスバーのカスタマイズに関するベスト プラクティスとガイダンスについては、ステータスバーのベスト プラクティスをご覧ください。
クイック コントロール
ステータスバーのクイック コントロールを使用すると、Bluetooth、接続、ディスプレイの明るさに簡単にアクセスできます。






プロファイルの選択
ステータスバーのプロファイル セレクタを使用すると、プロファイルをすばやく選択したり、ショートカットを使用してプロファイル設定にアクセスしたりできます。


ステータスバーに関するおすすめの方法
アプリ デベロッパー向けのおすすめの方法:
- 透明度を使用してアプリ コンテンツを覆わないようにする: アプリがステータスバーの全体より下ではなく、一部がステータスバーの背後に配置されている場合、アプリ デベロッパーはステータスバーを透明のままにする必要があります。
- 戦略的に色を適用する: アプリが完全にステータスバーの下にある場合、アプリ デベロッパーはステータスバーの色を選択する必要があります。
システム ナビゲーション バー
システム ナビゲーション バーには、アプリ ランチャー、デジタル アシスタント、通知センター、コンフォート コントロールのコントロールがあります。
システム ナビゲーション バーは画面の下部にあり、次のコントロールが表示されます。
- 車内温度: 車内の温度
- アプリ ランチャー: ドライバが使用できるアプリ
- デジタル アシスタント: 選択したデジタル アシスタント(Google アシスタントなど)へのアクセス
- 通知センター: 通知センターへのアクセス
- 空調: 車内の空調システムへのアクセス
システム ナビゲーション バーのカスタマイズについては、システム ナビゲーション バーのカスタマイズをご覧ください。
アプリ ランチャー
アプリ ランチャーは、プライマリ アプリスペースの標準アプリ ランチャー グリッドビューに表示されます。アプリは昇順で表示されます。ユーザーは好みに応じてアプリを並べ替えることができます。


デジタル アシスタント
タップされると、このアフォーダンスは現在アクティブな音声通信用のデジタル アシスタントを呼び出します。
通知センター
通知センターは、保存されているすべての通知メッセージ(既読と未読の両方)にユーザーを誘導します。


温度管理
クライメート コントロール アイコンで、車のクライメート システムに簡単にアクセスできます。


その他の機能
システム エクスペリエンスとアプリ エクスペリエンスの両方に適用される、ポートレート リファレンス デザインのその他の機能には、音声レイヤとテーマがあります。
音声レイヤ
音声レイヤは、すべてのレイヤの上、コントロール バーやシステム ナビゲーション バーの上にある透明なレイヤです。
Google アシスタントなど、システムに統合されているあらゆるタイプのデジタル アシスタントを実行できます。
テーマ
光の条件に応じて 2 つのテーマを使用できます。




夜間や暗い場所では、ダークテーマを使用して光の反射を軽減します。詳しくは、夜間の視認性の高さをご覧ください。
ライトモードを使用して、ドライバーと乗客が直射日光の当たる場所で車の画面を確認できるようにします。システム ナビゲーションは、ハードウェアに溶け込ませるために黒のままにすることができます。