Concentrez-vous sur l'expérience du système, de l'application et d'autres fonctionnalités pour concevoir une expérience de référence en mode portrait.
La conception de référence en mode portrait est ancrée par l'écran d'accueil et inclut les éléments persistants d'UI du système suivants:
Écran d'accueil
L'écran d'accueil offre aux conducteurs un point de départ complet, avec toutes les commandes facilement accessibles. Elle répond aux besoins de la plupart des conducteurs, de sorte que le conducteur peut se concentrer sur la navigation au lieu de changer d'application.
Sans quitter cet écran, le conducteur peut accéder aux éléments suivants:
- La barre d'état située en haut, avec des commandes rapides et un sélecteur de profil
- La couche de base dans le corps de l'écran, qui exécute généralement une application de navigation.
- Barres de contrôle et de navigation système en bas de l'écran
![Vue de l'écran d'accueil](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/home-screen.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/home-screen.png?authuser=9&hl=fr)
Barre de commandes
La barre de commandes héberge les commandes des contenus multimédias (vidéo et musique), des podcasts, du Bluetooth, de la radio et des appels actifs.
Pour les applications multimédias et pour téléphone, la barre de commandes se trouve au-dessus de la barre de navigation dans la moitié inférieure de l'écran. Les commandes passent d'un support multimédia à un appel téléphonique actif lorsque l'utilisateur accepte un appel entrant.
Commandes multimédias
Les commandes multimédias permettent de lancer la lecture, de la mettre en pause, de faire un retour arrière et d'avancer. Elles permettent également à l'utilisateur de marquer des favoris et d'accéder à des commandes personnalisées supplémentaires, le cas échéant.
![Commandes multimédias standards](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-1.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-1.png?authuser=9&hl=fr)
![Commandes multimédias développées](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-2.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/media-controls-2.png?authuser=9&hl=fr)
Commandes des appels téléphoniques actifs
Les commandes du téléphone permettent de couper le son du haut-parleur, de passer au Bluetooth et d'annuler un appel.
Barre d'état
La barre d'état apparaît en haut de l'écran et héberge le sélecteur de profil, les commandes rapides, ainsi que les informations sur l'heure et la météo.
- Commandes rapides :
- Bluetooth: état du Bluetooth
- Connectivité: Wi-Fi, réseau mobile et point d'accès
- Affichage de la luminosité: permet à l'utilisateur de régler le niveau de luminosité de l'écran.
- Horloge: affichage numérique de l'heure.
- Informations météo: affiche la température extérieure.
- Sélecteur de profil: affiche le profil utilisateur en cours d'utilisation et permet à l'utilisateur de sélectionner un autre profil si nécessaire.
Les éléments de la barre d'état apparaissent dans le même ordre pour les voitures à gauche et à droite.
Les utilisateurs peuvent activer et désactiver l'affichage de la météo dans les paramètres.
Pour obtenir des conseils et des bonnes pratiques sur la personnalisation de la barre d'état, consultez la section Bonnes pratiques concernant la barre d'état.
Commandes rapides
Les commandes rapides de la barre d'état permettent d'accéder facilement au Bluetooth, à la connectivité et à la luminosité de l'écran.
![Commandes Bluetooth](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-1.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-1.png?authuser=9&hl=fr)
![Commandes de connectivité](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-2.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-2.png?authuser=9&hl=fr)
![Paramètres d'affichage](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-3.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/quick-controls-3.png?authuser=9&hl=fr)
Outil de sélection de profils
Le sélecteur de profil sur la barre d'état permet de sélectionner rapidement des profils et d'accéder aux paramètres de profil à l'aide d'un raccourci.
![Sélecteur de profil avec menu de profil](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/profile-selector.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/profile-selector.png?authuser=9&hl=fr)
Bonnes pratiques concernant la barre d'état
Bonnes pratiques pour les développeurs d'applications:
- Faites preuve de transparence pour éviter de couvrir le contenu de l'application: si l'application est positionnée partiellement derrière la barre d'état plutôt que entièrement en dessous, les développeurs d'applications doivent laisser cette barre transparente.
- Appliquer les couleurs de manière stratégique: si l'application se trouve entièrement en dessous de la barre d'état, les développeurs d'applications doivent choisir une couleur pour la barre d'état.
Barre de navigation système
La barre de navigation système héberge les commandes du lanceur d'applications, de l'assistant numérique, du centre de notifications et des commandes de confort.
La barre de navigation système est située en bas de l'écran et affiche les commandes suivantes:
- Température de la cabine: température dans la voiture
- Lanceur d'applications: applications disponibles pour le conducteur
- Assistant numérique: accès à un assistant numérique de votre choix, comme l'Assistant Google
- Centre de notifications: accès au Centre de notifications
- Climatisation: accès aux systèmes de climatisation du véhicule
Pour obtenir des conseils sur la personnalisation de la barre de navigation système, consultez Personnalisation de la barre de navigation système.
Lanceur d'applications
Le lanceur d'applications s'affiche dans l'espace principal de l'application, en mode grille du lanceur d'applications standard. Les applications sont classées de A à Z. Les utilisateurs peuvent réorganiser les applications selon leurs préférences.
![Lanceur d'applications](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/app-launcher.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/app-launcher.png?authuser=9&hl=fr)
Assistant numérique
Lorsque l'utilisateur appuie dessus, cette affordance appelle l'assistant numérique actuellement actif pour la communication vocale.
Centre de notifications
Le centre de notifications redirige l'utilisateur vers tous les messages de notification enregistrés, qu'ils soient lus ou non lus.
![Centre de notifications](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/notification-center.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/notification-center.png?authuser=9&hl=fr)
Climatisation
L'icône de régulation de la température permet d'accéder facilement aux systèmes de contrôle de la température de la voiture.
![Nouvelles commandes climatiques](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/climate-controls.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/climate-controls.png?authuser=9&hl=fr)
Autres fonctionnalités
Les fonctionnalités supplémentaires de la conception de référence en mode portrait qui s'appliquent à la fois à l'expérience système et à l'expérience de l'application incluent le calque vocal et les thèmes.
Calque Voice
La couche vocale est une couche transparente qui se trouve au-dessus de toutes les couches et au-dessus des barres de commande et de navigation système.
Il peut exécuter n'importe quel type d'assistant numérique intégré au système, tel que l'Assistant Google.
Thèmes
Deux thèmes sont disponibles en fonction des conditions de luminosité.
![Thème sombre](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/dark-theme.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/dark-theme.png?authuser=9&hl=fr)
![Thème clair](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/light-theme.png?authuser=9&hl=fr)
![](https://developers.google.cn/static/cars/design/automotive-os/product-experience/system-ui/portrait-reference/images/light-theme.png?authuser=9&hl=fr)
Utilisez le thème sombre pour réduire les reflets quand il fait sombre ou qu'il fait sombre. En savoir plus sur la visibilité la nuit
Utilisez le thème clair pour aider les conducteurs et les passagers à voir les écrans de la voiture à la lumière directe du soleil. La navigation système peut rester noire pour se fondre avec le matériel.