通知カード

通知カードは、システムまたはアプリからの少量のタイムリーな情報を伝達します。

Android Automotive OS向けのこれらのカードは、ドライバーの注意散漫を最小限に抑えるように設計されています。カードには3つの基本バージョンがあります。

  • ヘッドアップ通知(HUN)カード:現在の画面上に短時間表示される通知に使用されます
  • 通知センターカード:通知センターにリストされている通知に使用されます
  • グループ化された通知カード:複数の通知センターカードを 1 つのカードにまとめます

これらのバージョンでは、メッセージのカテゴリによってデザインが若干異なる場合があります。例えば、通話通知にはナビゲーション通知とは異なるボタンとアイコンが表示されます。

解剖学

通知カードは、さまざまな要素を組み込むことができる柔軟なコンポーネントです。主に3つのバージョンがあります。

  • HUNカード:このバージョンは通知センターカードよりも幅が広く、閉じられるまで現在の画面の上部に表示されます。
  • 通知センターカード:このバージョンはHUNカードよりも幅が狭く、他の同様のカードとともに通知センターに縦にリスト表示されます。
  • グループ通知カード:このバージョンの通知センターカードは、複数の関連する通知を1つのカードにまとめ、展開して個々の通知を表示するためのコントロールを備えています。

メッセージ タイプ別のこれらのバージョンのバリエーションは、スタイルに表示されます。

ここに示されているのは、次の要素を備えた同じ通知カードの HUN バージョンと通知センター バージョンです。
1. ヘッダー
2. コンテンツ(オプションのメッセージプレビューの有無、走行中は非表示にできます)
3. アクション
4. 大きなアイコン


ここに示すのは、グループ化された通知カードの折りたたみバージョンと展開バージョンの両方で、次の要素を備えています。
1. ヘッダー
2. コンテンツ
3. 展開/折りたたみアクション
4. 展開/折りたたみインジケーター

仕様 – HUNカード

標準HUN

アバター付きHUN

プレビュー付きメッセージHUN

複数のメッセージを含むメッセージHUN

大きな画像HUN

仕様 – 通知センターカード

標準通知

プレビュー付きのメッセージ通知

複数のメッセージを含むメッセージ通知

単一アクション通知

仕様 – グループ通知カード

グループ化された通知 – 折りたたまれた

グループ通知 – 拡張

レイアウトのスケーリング

これらのリファレンスレイアウトは、様々な幅と高さの画面に合わせて通知を調整する方法を示しています。すべてのピクセル値は、ダウンサンプリングやアップサンプリングが行われる前のレンダリングされたピクセル値であることに注意してください。

吹き出しアイコン
レイアウト
さまざまな画面サイズの余白、キーライン、パディング。

標準幅のスクリーン

HUNカード。


通知センターカード。

グループ化された通知カード (折りたたまれた状態)。

グループ化された通知カード(展開)。

ワイドスクリーン

HUNカード。


通知センターカード。

グループ化された通知カード (折りたたまれた状態)。

グループ化された通知カード(展開)。

超ワイドスクリーンとスーパーワイドスクリーン

HUNカード。


通知センターカード。

グループ化された通知カード (折りたたまれた状態)。

グループ化された通知カード(展開)。

さまざまな高さの画面上の通知の垂直間隔

このセクションの垂直間隔仕様は、HUN カードのみに適用されます。

ショートスクリーン

HUNカード。

背の高いスクリーンと標準の高さのスクリーン

HUNカード。

スタイル

タイポグラフィ

書体書体重さサイズ(dp)
本文1ロボト通常32
ボディ3Mロボト中くらい24
本文3ロボト通常24

要素カラー(デイモード)カラー(夜間モード)
プライマリタイプ/アイコン白 @ 88%
二次タイプ白 @ 72%白 @ 60%
セカンダリアイコンサードパーティのアクセントサードパーティのアクセント
区切り線ヘアライン白人 22%白人 12%
カードの背景グレー 868グレー900
グラデーションスクリム黒 100% - 0%黒 100% - 20%

サイズ

要素サイズ(dp)
プライマリアイコン44
セカンダリアイコン36
ミディアムアバター76
丸みを帯びた角の半径(R2) 8

HUN カード: 通話、メッセージ、車両警告、ナビゲーション。
通知センター カード: 通話、メッセージ、車両警告。
グループ化された通知カード: メッセージ、展開および折りたたみ - 日。
グループ化された通知カード: メッセージ、展開および折りたたみ - 夜。

モーション

次の動作は通知エクスペリエンスの重要な部分です。

  • HUN到着の動き
  • 通知を閉じるためのスワイプ動作
  • グループ通知の展開と折りたたみの動作

HUN到着

HUN が画面上部から滑り落ちる動きにより、ユーザーは HUN の到着に気付くようになります。また、通知センターがプルダウン シェードとして実装されている場合は、下方向にスワイプして通知にアクセスするヒントも提供されます。

スワイプして閉じる

ユーザーが通知を横にスワイプするときのドラッグ動作により、通知が閉じられていることが視覚的に確認され、次の通知の上方向の動作によりリストの穴が埋められます。

グループ通知の展開と折りたたみ

グループ化された通知カードを下に伸ばすと、折りたたまれた状態から展開された状態へのスムーズな移行が実現します。