Android Automotive OS の色戦略の基盤は、「黒から構築する」という考え方です。黒をベースとしたインターフェース色により、昼と夜のテーマに大きな変化がなくなり、より一貫性のあるユーザー エクスペリエンスが得られます。
ブラックは、自動車のインテリアやダッシュボードにダークマテリアルが使われることが多いため、ハードウェアとの整合も確保できます。
ガイダンスの概要(TL;DR)
- 日記と夜間の運転に対応できるよう、黒から豊富なカラー バリエーションをご用意
- 背景とアイコンまたはテキストのコントラスト比を 4.5:1 以上に維持します。
- 目的意識を持って最小限で使用する
- 高度をグレースケールで表示
- 透明性と不透明度を利用して視覚的にフォーカスする
パレットとグラデーション
Android Automotive OS インターフェースのダークモードは、グレースケール パレットに基づいています。マテリアル デザイン パレットにある暗い色のバリエーションのように、他の色では強度を弱めるのが理想的です。
このセクションには、パレットと不透明度の情報、および各コンポーネントに関連付けられた高度レベルのグレースケール値を示すグラフが含まれています。
Android Automotive OS のグレースケール パレット
Android Automotive OS のグレースケール パレットは、テキストやアイコンなどの要素に使用され、運転環境に固有の要件に対応するように設計されています。
このパレットには、以下のような多様性が必要です。
- ダークモード UI のさまざまなユースケースをすべて網羅
- 色調の違いによって階層を定義するのに十分な範囲を指定する

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


Accent color
Android Automotive OS インターフェースの中核にあるグレースケール パレットに加え、他の色をフォーカスの描画などの目的で控えめに使用できます。
現在、Android Automotive OS では、公式のアクセント カラーが 1 種類あり、サポート ライブラリでは「青」の色合いで「自動車のアクセント」と呼ばれています。彩度と鮮やかさを高めるために、この青色は標準の Google 青色からわずかにシフトしています。このシフトにより、暗い場所でも色が快適に表示されます。

不透明度のグラフ
透明度は奥行きを示し、マテリアル デザインの空間モデルを強化します。透明度を効果的に使用するには、ユースケースに基づいて不透明度または暗い不透明度の値を選択します。
不透明度の値
暗い不透明度の値の一般的なユースケースは、スクリム(オーバーレイ)を作成することです。

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

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

推奨事項

禁止事項
ガイダンスと例
Android Automotive OS のダーク UI はシンプルで、色の使用は最小限です。UI 要素に適切な色、トーン、不透明度の値を使用すること(パレットとグラデーションを参照)に加えて、色とカラー グラデーションがそれぞれ目的で使用されるものであることが重要です。
このセクションでは、各種目標を達成するために透明性、不透明度、色を適用するためのガイダンスと例を紹介します。
- 背景を不明瞭にする
- 整合性の維持
- プライマリ アクションにユーザーの焦点を絞るための視覚的な階層を確立します。
- リスト内のエンティティの区別
スクリムで背景を不明瞭にする
フルスクリーン スクリム(オーバーレイ)は、アクションを起こすようユーザーに働きかけるダイアログなど、背景となる要素の背景を覆うために使用します。部分的なスクリムは、通知などの要素の遷移に注意を引くために使用します。




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

推奨事項

推奨事項

推奨事項

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

推奨事項

禁止事項