Googleビルトインの設計のベストプラクティス

統一感のある運転に最適化されたエクスペリエンスを実現するために、インフォテインメント システム全体に独自のブランド アイデンティティを実装する方法を学びます。

デザイントークンで統一感のある外観と雰囲気を作りましょう

デザイン トークンはすべての UI 要素の基本的な構成要素であり、時間のかかるコード変更を行わずにシステム全体でブランドの外観を管理できます。

真実の源は一つ

トークンは、静的なコードを置き換える再利用可能なデザイン値(色、フォント、サイズなど)です。これらのトークン値を定義することで、システムのコアスタイルを完全に制御し、システム内のすべてのアプリにおいてブランドアイデンティティが唯一の信頼できる情報源となることを保証します。

システム全体で設計上の決定を標準化する

トークンは、システム全体にカスタマイズされた値を動的に適用します。これにより、コードの大幅な変更が不要になり、設計者とエンジニアが「同じ言語で話す」ことが保証され、設計から最終実装までのシームレスな引き継ぎが実現します。

デザイントークンを使用して、アプリアイコンの外観と雰囲気をカスタマイズできます。

色とテーマをカスタマイズする

このプラットフォームでは、重要な安全基準を維持しながら、全体的な美観をコントロールできます。リソースオーバーレイを使用して、ベーステーマとカラーパレットをカスタマイズし、ブランド独自のスタイルを反映できます。

昼夜を問わず運転を最適化

日中はデイモード(明るい背景に暗い文字)で視認性が向上します。夜間はナイトモード(暗い背景に明るい文字)で視認性が向上します。

一目でわかるようにコントラスト比を最適化する

運転中の読みやすさを確保するため、すべての要素は、テキストとアイコンと背景の間で最低 4.5:1 の色のコントラスト比を維持する必要があります。

デイモード。
ナイトモード。

コンポーネント間の明確な視覚的階層を作成する

ドライバーが画面を注視する時間を短縮することが重要です。ドライバーの視線を必要な場所に誘導する視覚的な階層構造を作るために、コンポーネントの角や比率をカスタマイズすることができます。

強調するために丸い角を使用する

Google ビルトインでは、形状と丸みによって重要性を伝えています。主要なアクションやコンポーネントには丸みの強い(半径が大きい)角が使用され、重要度の低い要素には丸みの弱い(半径が小さい)角が使用されます。

システムでは、特定のコーナー半径値 (たとえば、0dp、4dp、8dp、16dp、円形) が提供されており、それらを選択して、テンプレートのサイズ、形状、およびボタンの比率を車両のディスプレイに合わせて調整できます。

Google マップの角が丸くなります。