Android Automotive OS の色戦略の基盤は、「黒から構築する」という考え方です。黒をベースとしたインターフェース色により、昼と夜のテーマに大きな変化がなくなり、より一貫性のあるユーザー エクスペリエンスが得られます。

ブラックは、自動車のインテリアやダッシュボードにダークマテリアルが使われることが多いため、ハードウェアとの整合も確保できます。

ガイダンスの概要(TL;DR)

  • 日記と夜間の運転に対応できるよう、黒から豊富なカラー バリエーションをご用意
  • 背景とアイコンまたはテキストのコントラスト比を 4.5:1 以上に維持します。
  • 目的意識を持って最小限で使用する
  • 高度をグレースケールで表示
  • 透明性と不透明度を利用して視覚的にフォーカスする

パレットとグラデーション

Android Automotive OS インターフェースのダークモードは、グレースケール パレットに基づいています。マテリアル デザイン パレットにある暗い色のバリエーションのように、他の色では強度を弱めるのが理想的です。

このセクションには、パレットと不透明度の情報、および各コンポーネントに関連付けられた高度レベルのグレースケール値を示すグラフが含まれています。

Android Automotive OS のグレースケール パレット

Android Automotive OS のグレースケール パレットは、テキストやアイコンなどの要素に使用され、運転環境に固有の要件に対応するように設計されています。

このパレットには、以下のような多様性が必要です。

  • ダークモード UI のさまざまなユースケースをすべて網羅
  • 色調の違いによって階層を定義するのに十分な範囲を指定する
グレーのカラーパレット
このグレースケール パレットは Android Automotive OS の主なカラーパレットで、インターフェースのダークモードをサポートします。

色調の違いにより、シャドウが見えにくい真の黒の背景でも、奥行きの錯覚が生まれます。十分な色調の違いを実現するために、Android Automotive OS のグレースケール パレットには中グレーも含まれます。グレー 900 以降のマテリアル デザイン グレーは、より明るい色に近すぎます。2 段階明るい色は、グレーの 700 です。これは、自動コンテキストに対して明るすぎます。

コンポーネントの高度グラフ
このグラフは、さまざまなコンポーネントが位置する高度レベルを示しています。エレベーション レベルごとにグレー値が関連付けられています。
日中モードと夜間モードのグレースケール標高レベル
このグラフは、日中と夜間の高度レベルに関連付けられたグレーの値を示しています。

Accent color

Android Automotive OS インターフェースの中核にあるグレースケール パレットに加え、他の色をフォーカスの描画などの目的で控えめに使用できます。

現在、Android Automotive OS では、公式のアクセント カラーが 1 種類あり、サポート ライブラリでは「青」の色合いで「自動車のアクセント」と呼ばれています。彩度と鮮やかさを高めるために、この青色は標準の Google 青色からわずかにシフトしています。このシフトにより、暗い場所でも色が快適に表示されます。

青い車のアクセント カラーの例
Android Automotive OS の青色の「車のアクセント」カラーは、標準の Google ブルーよりも鮮やかで、日中だけでなく夜間も、ダークモードのインターフェースでうまく機能するように設計されています。

不透明度のグラフ

透明度は奥行きを示し、マテリアル デザインの空間モデルを強化します。透明度を効果的に使用するには、ユースケースに基づいて不透明度または暗い不透明度の値を選択します。

不透明度の値

暗い不透明度の値の一般的なユースケースは、スクリム(オーバーレイ)を作成することです。

オーバーレイの黒い不透明度の値

白の不透明度の値

これらの値は主にテキストで使用します。背景に色を付ける場合に特に効果的です。暗い色の背景に無地のグレーを使用することで、不明瞭になります。

テキストの白い不透明度の値

スクリムとテキスト階層で不透明度を使用する例については、ガイダンスと例をご覧ください。


コントラスト

Android Automotive OS の基本的な安全ガイドラインを満たすには、背景とアイコンまたはテキストのコントラスト比を 4.5:1 以上にする必要があります。自動車の特定の UI 要素にコントラスト比がどのように適用されるかについて詳しくは、コンテンツを読みやすくするをご覧ください。

対比

推奨事項

読みやすく実用的なすべてのコンテンツについて、コントラストが最低 4.5:1 の要件を満たしていることを確認します。
コントラスト調整

禁止事項

コントラストが 4.5:1 を下回らないようにするため、ドライバーの安全は低下します。

ガイダンスと例

Android Automotive OS のダーク UI はシンプルで、色の使用は最小限です。UI 要素に適切な色、トーン、不透明度の値を使用すること(パレットとグラデーションを参照)に加えて、色とカラー グラデーションがそれぞれ目的で使用されるものであることが重要です。

このセクションでは、各種目標を達成するために透明性、不透明度、色を適用するためのガイダンスと例を紹介します。

  • 背景を不明瞭にする
  • 整合性の維持
  • プライマリ アクションにユーザーの焦点を絞るための視覚的な階層を確立します。
  • リスト内のエンティティの区別

スクリムで背景を不明瞭にする

フルスクリーン スクリム(オーバーレイ)は、アクションを起こすようユーザーに働きかけるダイアログなど、背景となる要素の背景を覆うために使用します。部分的なスクリムは、通知などの要素の遷移に注意を引くために使用します。

日中のスクリムを表示
日モードのフルスクリム(ダイアログ カードの裏側)
夜間モードのフル スクリム
夜間モードのフルスクリム(ダイアログ カードの裏側)
日中モードに含まれる部分的なスクリム
日帰りモードでの部分的なスクリム(通知の背後)
夜間モードでの部分的なスクリム
夜間モードでの部分的なスクリム(通知の背後)

色との一貫性の維持

色は、記憶や認識を強化するための効果的な手がかりになります。これを使用して、画面間で一貫性のあるエクスペリエンスを構築します。

視覚的な色認識

推奨事項

複数のビューでアイテムに同じ色を使用することで(たとえばターンバイターン方式のナビゲーション ビューに使用される緑色など)、視覚的な連続性を保ちます
視覚的な色の連続性

推奨事項

色を使用して、こちらに示す赤色の電話終了 CTA など、関連する要素や機能を視覚的につなげます。
永続的なアプリのアクセント カラー

推奨事項

アルバムアートのメインの色や、関連する要素にアプリが割り当てた色を、視覚的なアフォーダンスとして永続させます。ここでは、一時停止ボタンの周囲の円に Spotify の緑がアクセントになっています。
色の使用の制限

禁止事項

1 つの画面上の繰り返しのコンポーネントを任意に区別するために、異なる色を使用しないでください。概要カードが色付きの輪郭線で囲まれるとアプリアイコンの色が重複するため、付加価値のない色は慎重に使用してください。

視覚的な階層の確立

白い不透明度の値を使用して、一貫性のある強力なビジュアル階層を作成します。不透明度の値 88、72、56 には、ユーザー補助の要件を満たすのに十分なコントラストが設定され、暗い背景で快適な読書環境が作成されます。夜間モードの場合は、すべての白色で 96% の不透明度を使用します。

視覚的な階層を維持するための不透明度とコントラストの例

推奨事項

さまざまな不透明度とコントラストの値を使用して、視覚的な階層を維持します。
不透明度とコントラストの制限

禁止事項

不透明度やコントラストの値は、あまりにも多くの要素に適用しすぎないようにしてください。プライマリ情報とセカンダリ情報を区別するには、不透明度の値のコントラストが必要になります。