Fiche de notification

Les cartes de notification communiquent de petites quantités d'informations opportunes provenant du système ou d'une application.

La conception de ces cartes pour Android Automotive OS vise à minimiser les distractions pour les conducteurs. Les cartes existent en trois versions de base :

  • Carte de notification contextuelle (HUN) : Utilisée pour une notification qui s’affiche brièvement au-dessus de l’écran actuel.
  • Carte du Centre de notifications : utilisée pour les notifications listées dans le Centre de notifications
  • Carte de notification groupée : combine plusieurs cartes du Centre de notifications en une seule carte.

Au sein de ces versions, le design peut également varier légèrement selon la catégorie du message. Par exemple, les notifications d'appel ont des boutons et des icônes différents de ceux des notifications de navigation.

Anatomie

La carte de notification est un composant flexible pouvant inclure divers éléments. Elle existe en trois versions principales :

  • Carte HUN : Cette version est plus large que la carte du Centre de notifications et s’affiche au premier plan jusqu’à ce qu’elle soit fermée.
  • Carte du Centre de notifications : cette version est plus étroite que la carte HUN et apparaît avec d’autres cartes similaires dans le Centre de notifications, dans une liste verticale.
  • Carte de notifications groupées : cette version de la carte du Centre de notifications regroupe plusieurs notifications liées sur une seule carte, avec des commandes permettant d’afficher les notifications individuelles.

Les variantes de ces versions par type de message sont présentées dans Styles .

Sont présentées ici les versions HUN et Centre de notification de la même carte de notification, comportant les éléments suivants :
1. En-tête
2. Contenu (avec et sans aperçu optionnel du message, qui peut être masqué lorsque la voiture est en marche)
3. Actions
4. Grande icône


L'image représente une carte de notification groupée dans ses versions réduite et développée, comportant les éléments suivants :
1. En-tête
2. Contenu
3. Action de développement/réduction
4. Indicateur de développement/réduction

Spécifications – Carte HUN

Standard HUN

HUN avec avatar

Message HUN avec aperçu

Message HUN avec plusieurs messages

HUN à grande image

Spécifications – Carte du centre de notification

Notification standard

Notification de message avec aperçu

Notification de message avec plusieurs messages

notification à action unique

Spécifications – Carte de notification groupée

Notification groupée – Réduite

Notification groupée – Étendue

Mise à l'échelle des mises en page

Ces exemples de mise en page montrent comment adapter les notifications aux écrans de différentes largeurs et hauteurs. Veuillez noter que toutes les valeurs de pixels sont exprimées en pixels rendus, avant tout sous-échantillonnage ou suréchantillonnage.

icône de bulle
Mise en page
Marges, lignes de repère et espacement pour différentes tailles d'écran.

Écrans de largeur standard

Carte HUN.


Carte du centre de notification.

Carte de notification groupée (réduite).

Carte de notification groupée (étendue).

Écrans larges

Carte HUN.


Carte du centre de notification.

Carte de notification groupée (réduite).

Carte de notification groupée (étendue).

Écrans extra-larges et super-larges

Carte HUN.


Carte du centre de notification.

Carte de notification groupée (réduite).

Carte de notification groupée (étendue).

Espacement vertical des notifications sur des écrans de hauteurs différentes

Les spécifications d'espacement vertical de cette section concernent uniquement les cartes HUN.

Écrans courts

Carte HUN.

Écrans hauts et de hauteur standard

Carte HUN.

Styles

Typographie

Style de caractères Police de caractères Poids Taille (dp)
Corps 1 Roboto Régulier 32
Corps 3 M Roboto Moyen 24
Corps 3 Roboto Régulier 24

Couleur

Élément Couleur (mode jour) Couleur (mode nuit)
Type principal / icônes Blanc Blanc à 88%
Type secondaire Blanc à 72% Blanc à 60 %
Icône secondaire accent d'un tiers accent d'un tiers
Ligne de séparation des cheveux Blanc 22% Blanc 12%
Fond de carte Gris 868 Gris 900
Toile dégradée Noir 100% - 0% Noir 100% - 20%

Tailles

Élément Taille (dp)
Icône principale 44
Icône secondaire 36
Avatar moyen 76
Rayon d'angle arrondi (R2) 8

Exemples

Cartes HUN : Appel, Message, Avertissement véhicule et Navigation.
Cartes du centre de notification : Appel, Message et Avertissement véhicule.
Cartes de notification groupées : Messages, développés et réduits - jour.
Cartes de notification groupées : Messages, développés et réduits - nuit.

Mouvement

Les actions suivantes constituent une partie importante de l'expérience de notification :

  • mouvement d'arrivée HUN
  • Balayez l'écran pour ignorer une notification
  • Mouvements d'expansion et de réduction des notifications groupées

arrivée des HUN

Le mouvement d'une notification HUN glissant du haut de l'écran permet aux utilisateurs de remarquer son arrivée, et il fournit également une indication sur la manière d'accéder aux notifications en effectuant un balayage vers le bas si le Centre de notifications est implémenté sous forme de volet déroulant.

Balayez pour fermer

Le mouvement de glissement lorsqu'un utilisateur fait glisser une notification latéralement confirme visuellement qu'elle est supprimée, puis le mouvement ascendant de la notification suivante comble le vide dans la liste.

Développer et réduire les notifications groupées

Le fait qu'une carte de notification groupée s'étire vers le bas assure une transition en douceur de l'état réduit à l'état développé.