電話 UI のカスタマイズ

Dialer UI をカスタマイズしてブランドを反映し、アプリ全体で一貫した外観を確保できます。

ダイヤラーのカスタマイズには、次の 3 つのタスクが含まれます。

タスク説明

1)グローバルスタイルを適用する

ダイヤラーユーザーインターフェースのすべてのビューにグローバルスタイルを適用する

2)スタイルダイヤラービュー

特定のダイヤラービューにのみ表示される UI 要素にオプションのカスタム スタイルを適用します。

3)レイアウトを変更する

必要に応じて、ダイヤラーのレイアウトを調整、並べ替え、または変更して、車の内装やサポートされている機能に適合させます。

UX ガイダンスについては、ダイヤラー チェックリストを参照してください。

グローバルスタイルを適用する

最初のカスタマイズ手順は、Dialer のすべてのビューにグローバルでブランドに適したスタイルを適用することです。

自動車メーカーは、Dialer UI の色、テキストの外観、その他の全体的な側面を自社ブランドを反映するようにスタイル設定することで、アプリ全体で一貫したユーザー エクスペリエンスを実現します。(Dialer インターフェースの例については、 Dialer アプリをご覧ください。このセクションでは、Dialer でグローバルにカスタマイズできる内容について説明し、車両に最適化されたスタイルを選択するためのガイドラインを示します。)

グローバルにスタイリングできるもの

自動車メーカーは、複数の Dialer ビューにわたって UI の次の側面をカスタマイズできます。

  • カラーパレット
  • タイポグラフィ
  • リスト項目のサイズ設定
  • アバターの形状とサイズ
  • アイコンの外観
  • アプリバーの外観
  • ボタンの外観
  • ダイアログの外観

スタイルを変更するときは、次のガイドラインに留意してください。

一般的なスタイルガイドライン

車内でのエクスペリエンスに最適化されたデザインの選択により、UI 内の他のアプリと同じスタイル規則を Dialer でも遵守します。

必要なもの

以下の一般的な UX 要件に従ってください。

  • コントラスト比
  • 最小の文字サイズとタッチターゲットサイズ
  • ダークテーマ
  • タッチターゲット間の距離

これらの要件は、車両に最適化され、一目でわかる一貫性のある UI を作成するのに役立ちます。

スタイルダイヤラーのビュー

グローバル スタイルを適用した後の次の手順は、特定の Dialer ビューにオプションのカスタム スタイルを適用することです。

キーパッドボタンなど、特定のビューでのみ表示される要素は、ブランドや車の内装に合わせたスタイル設定が効果的です。Dialerインターフェースの例については、Dialerアプリをご覧ください。

特定のビューでカスタマイズできるもの

Dialer ビューのうち 4 つには、自動車メーカーがカスタム スタイルを提供したいと考える可能性のあるビュー固有の要素があります。

ビューカスタマイズ可能な要素

最近

通話履歴アイコン

ダイヤルパッド

キーパッドボタン

通話中のステータス画面

コントロールバーアイコン

保留オーバーレイ

スイッチアイコン

自動車メーカーは、特定の理由により、任意の Dialer ビューでテキストの外観などのグローバル UI 機能のスタイルをオーバーライドできます。

Dialer 固有のビューをカスタマイズする場合は、グローバル スタイルのカスタマイズ用に提供されている一般的なスタイル設定ガイドラインに留意してください。

レイアウトを変更する

オプションとして、自動車メーカーは特定の状況においてダイヤラーのレイアウトを変更できます。

自動車メーカーは次のことが可能です。

  • 画面サイズに合わせてレイアウトを調整する
  • 特定の車や場所に合わせてレイアウトの要素を並べ替える
  • レイアウトを変更して、サポートされていない機能を無効にする

単純な調整を超えるレイアウトの変更、特に機能の無効化を伴うレイアウトの変更は、ダイヤラーが引き続き機能するように注意して行う必要があります。

機能を無効にしたり、レイアウトの要素を再配置したりする変更を行う場合は、一般的なスタイル ガイドラインに従い、残りの Dialer 機能が期待どおりに動作することを確認してください。

画面サイズに合わせてレイアウトを調整する

ダイヤラー レイアウトのデフォルト バージョンが自動車の特定の画面寸法に最適でない場合、自動車メーカーはそれを調整できます。

画面のサイズに合わせてレイアウトを調整するには、次の 2 つの手順を実行します。

  • リソースオーバーレイで画面全体の高さと幅を設定する
  • 各ダイヤラービュー内の要素とタッチターゲットが適切に分離され、簡単にアクセスできることを確認します。

レイアウトに影響する可能性のある追加のスタイルに関する考慮事項については、一般的なスタイル ガイドラインを参照してください。

レイアウト要素を並べ替える

場合によっては、自動車メーカーは特定の車の内装に合わせてレイアウトを変更したい場合があります。例えば、ステアリングコラムが右側にある車の場合、ダイヤルパッドビューのレイアウトを変更して、キーパッドを画面の左側ではなく右側に移動させるといったことが考えられます。

レイアウトに影響する可能性のある追加のスタイルに関する考慮事項については、一般的なスタイル ガイドラインを参照してください。

レイアウトを変更して機能を無効にする

自動車メーカーがレイアウトからダイヤラー機能へのアクセスを削除することでダイヤラー機能を無効にする場合、残りの機能が意図せず影響を受けないようにする必要があります。アプリは、このセクションのレイアウト変更ガイドラインに加え、運転中の設定へのアクセスをブロックするなど、車両の運転状態に基づいて課されるユーザー制限にも引き続き準拠する必要があります。

また、無効化された機能への参照を、その機能を参照するすべてのレイアウトから削除することも重要です。例えば、お気に入りの連絡先ビューをサポートしたくない自動車メーカーは、アプリバーの「お気に入り」タブを無効にするだけでなく、「連絡先詳細」ビューの「お気に入り」トグルも非表示にするか削除する必要があります。

UX要件

このリストを使用して、Dialer のスタイルとレイアウトのカスタマイズがすべての設計要件を満たしていることを確認します。

カスタマイズの各領域における MUST、SHOULD、MAY ガイドラインの詳細については、左側の列のリンクをご覧ください。

カスタマイズする場合確認する

グローバルまたはビュー固有のスタイル

カスタムスタイル:

  • 自動車メーカーのブランドを反映
  • 同じ車内の他のアプリのスタイルと一致している
  • 可能であればダークテーマを使用する
  • コントラスト要件を満たすか上回る
  • テキストとタッチターゲットのサイズの最小要件を満たしているか、それを上回っている

レイアウト

(寸法、配置、または機能)

変更されたレイアウト:

  • 前述のスタイルガイドラインに従ってください
  • 運転状態に基づいてユーザー制限を遵守する
  • ダイヤルパッド、通話終了ボタン、通話切り替えボタン、戻るアフォーダンス、アプリ内検索と設定、連絡先の詳細にアクセスできる少なくとも 1 つの連絡先ビューなど、アプリの使いやすさに必要な主要な機能を維持します。