このページでは、セットアップ ウィザード (SUW) のフローを作成し、ナラティブを作成し、必須の手順とオプションの手順を含める方法について説明します。
次の画面をカスタマイズできます。
| 限定的なカスタマイズ: コンテンツモーダル | 必要なカスタマイズ: Google 提供のテンプレート |
|---|---|
| Google利用規約 Googleサインイン Google ジェミニ Google Play | ようこそ画面 言語の選択 接続とWi-Fiの設定 プロフィール作成（名前プロフィール） 概要画面 Bluetoothデバイスのセットアップ プロファイル保護（プロファイルロックの設定） 読み込み画面 |
コンテンツモデルをカスタマイズする
コンテンツモーダル（ AppStyledView UIコンポーネント）には、GoogleサインインモジュールやGoogleサービスへの同意など、Google独自の画面が含まれています。ユーザーが自動車メーカーではなくGoogleとやり取りしていることを分かりやすくするため、モーダルコンポーネントは限定的なカスタマイズのみをサポートしています。
一貫した統合を実現するために、以下をカスタマイズできます。
ナビゲーションバー：ナビゲーションバーをモーダルの上部に配置するか、サイドに配置するかを選択できます。さらに、ナビゲーションアイコン（画像、サイズ、色、配置）、背景（画像、不透明度、色）、幅または高さ（配置に応じて）をカスタマイズできます。
モーダルの設定： Google の画面を横向きレイアウトで表示するには、コンテンツ領域の幅が 1224 dp 以上である必要があります。さらに、モーダルの幅、高さ、画面内での配置、角丸、境界線のスタイルをカスタマイズできます。モーダルの周囲に十分な余白を確保できない場合は、フルスクリーンオーバーレイの使用をお勧めします。
モーダル背景:画像または色、透明度。
コンテンツモーダルのカスタマイズの例
設定フローの一環として、Google 提供のテンプレートを使用することもできます。このオプションを使用する場合は、UI スタイルが混在しないように、これらの画面をカスタマイズする必要があります。
図 3 と図 4 に、コンテンツ モーダルのカスタマイズのサンプルを示します。
Google 提供の画面をカスタマイズする
設定フローの一環として、Google 提供のテンプレートを使用することもできます。このオプションを使用する場合は、UI スタイルが混在しないように、これらの画面をカスタマイズする必要があります。
没入型ビューと非没入型ビュー
SuW を表示するには、次の 2 つのオプションがあります。
没入型ビュー：このビューでは、ステータスバーやシステムUIなどの不要な機能が非表示になります。没入型ビューを使用することで、作業の妨げとなる要素を最小限に抑えることができます。
非没入型ビュー：このビューでは、ステータスバーなどのシステム機能を確認できます。非没入型ビューは、システムUIの表示が不可欠な場合にのみ使用してください。このビューを使用する場合は、ユーザーをセットアップエクスペリエンスから逸脱させる可能性のある操作は避けてください。
横長レイアウトをカスタマイズする
ランドスケープモードでカスタマイズできる要素は次のとおりです。
レイアウトと背景
- ナビゲーションバー：ナビゲーションバーには戻るボタンがあります。バーのレイアウトと背景、ナビゲーションアイコン（画像、サイズ、色、配置）、背景（画像、不透明度、色）、幅をカスタマイズできます。
- アクションバー：アクションバーは、ページ下部に固定されたコンテナで、CTAボタン（デフォルトでは透明）が含まれています。バーの高さとパディング、背景の画像、不透明度、色をカスタマイズできます。
- ページレイアウト:列比率とページ余白。
- ページの背景:背景色または画像。
コンポーネント
- ヒーローイメージ:画像、サイズ、配置。
- ドロップダウン:フォント (ファミリ、サイズ、色)、アイコン (画像、サイズ、色)、区切り線。
- ボタン:フォント (ファミリ、サイズ、色)、背景 (画像、不透明度、色)、ボタンのサイズ (幅、高さ)、配置、パディング、丸い角 (プライマリ アクションとセカンダリ アクションのスタイル、および差別化されたボタンの状態)。
- ページ ヘッダー:フォント (ファミリ、サイズ、色)、タイトルとサブタイトルの配置、文字列、ページ アイコン (アイコンを含めるかどうか、アイコンの画像、サイズ、色)。
- リスト:フォント（ファミリー、サイズ、色）、アイコン（画像、サイズ、色。Google アイコンはカスタマイズできません）、配置、パディング、リスト項目の高さ、区切り線。文字列を変更するには、Google に確認する必要があります。
読み込み画面
- アニメーション: (不確定) または画像、サイズ、配置。
- 文字列:フォント (ファミリ、サイズ、色)、配置、文字列。
カスタマイズされた横長レイアウトのサンプル
ようこそ画面や概要画面をカスタマイズするには、Google が提供するテンプレートを使用する方法があります。
ポートレートモードをカスタマイズする
以下はポートレートモードでカスタマイズ可能な要素です。
レイアウトと背景
- ナビゲーションバー：ナビゲーションバーには戻るボタンがあります。バーのレイアウトと背景、ナビゲーションアイコン（画像、サイズ、色、配置）、背景（画像、不透明度、色）、幅をカスタマイズできます。
- アクションバー：アクションバーは、ページ下部に固定されたコンテナで、CTAボタン（デフォルトでは透明）が含まれています。バーの高さとパディング、背景の画像、不透明度、色をカスタマイズできます。
- ページレイアウト:ページ余白。
- ページ BG:背景色または画像。
コンポーネント
- ヒーローイメージ:画像、サイズ、配置。
- ドロップダウン:フォント (ファミリ、サイズ、色)、アイコン (画像、サイズ、色)、区切り線。
- ボタン：フォント（フォントファミリー、サイズ、色）、背景（画像、不透明度、色）、ボタンのサイズ（幅、高さ）、配置、パディング、角丸。プライマリアクションとセカンダリアクション、そしてボタンの状態ごとにスタイルを区別する必要があります。
- ページ ヘッダー:フォント (ファミリ、サイズ、色)、タイトルとサブタイトルの配置、文字列、ページ アイコン (アイコンを含めるかどうか、アイコンの画像、サイズ、色)。
- リスト:フォント（ファミリー、サイズ、色）、アイコン（画像、サイズ、色。Google アイコンはカスタマイズできません）、配置、パディング、リスト項目の高さ、区切り線。文字列を変更するには、Google に確認する必要があります。
読み込み画面
- アニメーション:アニメーション (不確定) または画像、サイズ、配置。
- 文字列:フォント (ファミリ、サイズ、色)、配置、文字列。
カスタマイズされたポートレートレイアウトのサンプル