Benachrichtigungskarten senden kleine Mengen aktueller Informationen aus dem System oder von einer App.
Das Design dieser Karten für Android Automotive OS wurde entwickelt, um die Ablenkung für den Fahrer so gering wie möglich zu halten. Es gibt drei Basisversionen:
- Karte für Vorabbenachrichtigungen (HUN):Wird für eine Benachrichtigung verwendet, die kurz über dem aktuellen Bildschirm angezeigt wird.
- Karte für Benachrichtigungszentrale:Wird für Benachrichtigungen in der Mitteilungszentrale verwendet.
- Gruppierte Benachrichtigungskarte:Mehrere Karten in der Mitteilungszentrale werden auf einer Karte kombiniert.
Bei diesen Versionen können die Designs auch je nach Kategorie der Botschaft leicht variieren. Anrufbenachrichtigungen haben beispielsweise andere Schaltflächen und Symbole als Navigationsbenachrichtigungen.
Anatomie
Die Benachrichtigungskarte ist eine flexible Komponente, die eine Vielzahl von Elementen enthalten kann. Es gibt drei Hauptversionen:
- HUN-Karte: Diese Version ist breiter als die Karte „Mitteilungszentrale“ und wird oben auf dem aktuellen Bildschirm angezeigt, bis sie geschlossen wird.
- Karte für Mitteilungszentrale: Diese Version ist schmaler als die HUN-Karte und wird zusammen mit anderen Karten dieser Art im Benachrichtigungscenter in einer vertikalen Liste angezeigt.
- Gruppierte Karte für Benachrichtigungen:In dieser Version der Infokarte sind mehrere zusammengehörige Benachrichtigungen auf einer Karte zusammengefasst. Die einzelnen Benachrichtigungen lassen sich so maximieren und anzeigen.
Varianten dieser Versionen nach Mitteilungstyp werden unter Stile angezeigt.
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-hun-std.png?hl=de)
1. Überschrift
2. Inhalt (mit und ohne optionale Nachrichtenvorschau, die beim Fahren ausgeblendet werden kann)
3. Aktionen
4. Großes Symbol
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-anatomy-grouped.png?hl=de)
1. Überschrift
2. Inhalt
3. Aktion zum Maximieren/Minimieren
4. Anzeige zum Maximieren/Minimieren
Spezifikationen – HUN-Karte
Standard-HUN
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hun.png?hl=de)
HUN mit Avatar
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-standard-hunwavatar.png?hl=de)
Nachricht HUN mit Vorschau
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview.png?hl=de)
Nachricht an HUN mit mehreren Nachrichten
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-preview-multiple.png?hl=de)
HUN für große Bilder
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-specs-hun-largeimg.png?hl=de)
Spezifikationen – Karte in Mitteilungszentrale
Standardbenachrichtigung
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-avatar.png?hl=de)
Nachrichtenbenachrichtigung mit Vorschau
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview.png?hl=de)
Nachrichtenbenachrichtigung mit mehreren Nachrichten
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-msg-preview-multi.png?hl=de)
Einzelaktionsbenachrichtigung
![](https://developers.google.cn/cars/design/automotive-os/components/images/standard-notification-card-onebutton.png?hl=de)
Spezifikationen – Gruppierte Benachrichtigungskarte
Gruppierte Benachrichtigung – minimiert
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-collapsed.png?hl=de)
Gruppierte Benachrichtigung – maximiert
![](https://developers.google.cn/cars/design/automotive-os/components/images/grpd-notifications-expanded.png?hl=de)
Layouts skalieren
Diese Referenzlayouts zeigen, wie Benachrichtigungen an Bildschirme mit verschiedenen Breiten und Höhen angepasst werden. Die Kategorien für Breite und Höhe werden im Abschnitt Layout definiert. Beachten Sie, dass alle Pixelwerte in gerenderten Pixeln vorliegen, bevor ein Downsampling oder Upsampling erfolgt.
Bildschirme mit Standardbreite
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-std.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-std.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-std.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-std.png?hl=de)
Breitbildformate
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-wide.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-wide.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-wide.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-wide.png?hl=de)
Extrabreit und superbreit
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-xwide.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-std-xwide.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-collapsed-xwide.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-grp-xwide.png?hl=de)
Vertikaler Abstand von Benachrichtigungen auf Bildschirmen mit unterschiedlicher Höhe
Die Spezifikationen für vertikale Abstände in diesem Abschnitt gelten nur für HUN-Karten. Weitere Informationen zum vertikalen Abstand von Karten im Benachrichtigungscenter finden Sie in den Spezifikationen des Benachrichtigungscenters.
Kurze Bildschirme
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-short.png?hl=de)
Hohe und Standard-Displays
![](https://developers.google.cn/cars/design/automotive-os/components/images/notifications-hun-stdtall.png?hl=de)
Stile
Typografie
Schriftstil | Schriftart | Gewicht | Größe (dp) |
---|---|---|---|
Text 1 | Roboto | Regulär | 32 |
Text 3 M | Roboto | Medium | 24 |
Text 3 | Roboto | Regulär | 24 |
Farbe
Element | Farbe(Tagesmodus) | Farbe (Nachtmodus) |
---|---|---|
Haupttyp / Primäre Symbole | White | Weiß mit 88% |
Sekundärer Typ | Weiß mit 72% | Weiß mit 60% |
Sekundäres Symbol | Drittanbieterakzent | Drittanbieterakzent |
Trennlinie | Weiß 22% | Weiß: 12% |
Hintergrund der Karte | Grau 868 | Grau 900 |
Farbverlaufsraster | Schwarz 100–0 % | Schwarz 100–20 % |
Größen
Element | Größe (dp) |
---|---|
Primäres Symbol | 44 |
Sekundäres Symbol | 36 |
Mittelgroßer Avatar | 76 |
Radius der abgerundeten Ecken (R2) | 8 |
Beispiele
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hun-examples.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-card-examples.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-day.png?hl=de)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-group-examples-messages-night.png?hl=de)
Bewegung
Die folgenden Bewegungen sind ein wichtiger Teil der Benachrichtigungsfunktion:
- Bewegung bei Ankunft der HUN
- Wischbewegungen zum Schließen einer Benachrichtigung
- Bewegungen zum Maximieren und Minimieren von Benachrichtigungen
Ankunft (HUN)
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-hud-auto-dismiss-new.gif?hl=de)
Zum Schließen wischen
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-appear-dismiss-new.gif?hl=de)
Gruppierte Benachrichtigungen maximieren und minimieren
![](https://developers.google.cn/cars/design/automotive-os/components/images/notification-expand-group-2.gif?hl=de)