アプリのタスク用のテンプレートの順序を決定したら、各テンプレートのコンテンツとアプリのスタイル設定の一部をカスタマイズできます。
ビジュアル デザイン全体のどの側面をカスタマイズできるかについては、ビジュアル デザインのカスタマイズをご覧ください。アプリのカスタマイズの例も掲載されています。アプリの AAOS バージョンの場合、自動車 OEM のカスタマイズの例に示すように、自動車 OEM は車両に合わせてスタイル設定を調整できます。
特定のテンプレートのカスタマイズ オプションについては、テンプレートをご覧ください。
ビジュアル デザインのカスタマイズ
テンプレートのレイアウトとデフォルトのスタイルはアプリ ライブラリによって決定されますが、アプリ デザイナーと車両 OEM の両方がビジュアル デザインのカスタム要素に貢献します。
UI の側面 | ライブラリが決定する内容 | アプリが特定またはカスタマイズする対象 | 車両 OEM がカスタマイズできる対象 |
---|---|---|---|
画像とアイコン画像 | 標準要素のアイコン画像(戻るボタンや読み込みスピナーなど) | 左記のものを除き、アプリはすべての画像とアイコン画像を提供する(マテリアル アイコンと Google Play アイコンの仕様を参照) | |
レイアウト、サイズ、シェイプ | デフォルトのレイアウト、すべての要素のサイズと形状(デフォルトは Android Auto バージョンのアプリで標準) |
|
AAOS バージョンのアプリでのテンプレート要素のサイズ、形状、ボタンの位置、比率の調整(たとえば、車両の「大」および「小」の画像とアイコンの正確なサイズ調整) |
タイポグラフィとテキストの長さ | Android Auto バージョンのアプリのフォント ファミリーとフォントサイズ(タイポグラフィを参照) | 自動車の画面ごとに異なるスペースの量に対応するため、場合によっては、テキスト文字列のバリエーションを長く、短くする。 | アプリの AAOS バージョンのフォント ファミリーとサイズ |
色 | Android Auto バージョンのアプリのデフォルトの色(アプリによって提供される色(右記を参照)を除く) | 場所リスト マーカーの色、一部のテキスト要素、背景色(詳しくは、次のセクションの色のカスタマイズをご覧ください)。 | AAOS バージョンのアプリで車両 UI と融合できるように、デフォルト色とアプリ提供色を必要に応じて調整しました。 |
色のカスタマイズ
次のリストに示すように、アプリでは特定のテンプレートの要素に色を設定できます。アプリの AAOS バージョンについては、自動車 OEM が調整できます。
アプリは以下をカスタマイズできます。
- リストの行の 2 行目のテキストの色(AAOS の主要行の色は自動車メーカーによって管理されます)
- ボタンのテキストの色
- ボタンの背景色(アクション ストリップとマップ アクション ストリップを除く)
- 場所リスト マーカーの色
- ルーティング カードの要素: ルート予測の背景色、画像、所要時間の値の色(ナビゲーション テンプレートの要件内)
- ターンバイターン通知(背景色)
カスタマイズされたテンプレート コンポーネントの例については、アプリのカスタマイズの例と車両 OEM のカスタマイズの例をご覧ください。
アプリの色を選ぶ
ほとんどのカスタム スタイル(前のセクションで説明した例外を除く)では、以下のカラー オプションがあります。
- カスタムのアクセント カラーを 2 つまで指定できます(ライトモードとダークモードのバリエーションがあり、Android Auto または自動車 OEM が AAOS バージョンのアプリ向けに適宜適用します)
- 自動車向け Android の標準カラー 4 種類から選択する(右に示す現在のバージョン。今後変更される可能性があります)
標準色 | アクセント カラーの例 |
---|---|
![]() |
![]() |
色をうまく使うと、デザインの意図が伝わりやすくなります。関数を提供しない場合は色の使用に注意してください。
アプリのカスタマイズの例
自動車 OEM のカスタマイズの例
以下の例は、自動車 OEM が AAOS バージョンのアプリに適用する可能性のある追加のスタイルのカスタマイズを示しています。ルーティング カードの色はアプリによって決まりますが、自動車 OEM はルーティング カード、ボタン、ETA カードのフォント、テーマ、シェイプをカスタマイズします。また、下記のボタンをカスタマイズするに示すように、ボタンの幅を調整することもできます。
ナビゲーション ビュー(日中)
![日中のナビゲーションの OEM カスタマイズの例](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/images/oem-daytime-navigation.png?authuser=0000&hl=ja)
夜間のナビビュー
![夜間のナビゲーションの OEM カスタマイズの例](https://developers.google.cn/static/cars/design/create-apps/apps-for-drivers/images/oem-nighttime-navigation.png?authuser=0000&hl=ja)
ボタンの幅、色、形をカスタマイズする
以下の例では、OEM が AAOS バージョンのアプリでボタンの幅、色、形をカスタマイズする方法を紹介します。
アプリがプライマリ ボタンとして指定されたボタンについて、OEM はアプリのアクセント カラーを使用するか、独自のアクセント カラーを使用するかを決定できます。また、右ハンドルの車両などに対応するために、プライマリ ボタンを左側と右側に配置することもできます。
左側のメインボタン(標準色) | 右側のメインボタン(カスタムカラー) |
---|---|
![]() |
![]() |