Si une connexion est requise pour votre application, vous devez fournir un flux de connexion incluant une ou plusieurs des méthodes de connexion suggérées.
Vous pouvez créer ce flux en adaptant l'exemple de code fourni. Ce processus comprend les étapes suivantes:
- Choisir une méthode de connexion principale (et toutes les méthodes de secours)
- Ajuster le contenu des écrans de connexion
- Personnaliser le style visuel
L'exemple de code est fourni dans l'application Automotive Android Music Player (UAMP). Ce code est conçu pour s'adapter à différentes tailles d'écran. Vous n'avez donc pas besoin de vous préoccuper des modes portrait ou paysage.
À mesure que vous adaptez l'exemple de code à votre application, suivez les consignes fournies ici pour vous assurer que votre expérience de connexion reste optimisée pour les véhicules. Pour savoir comment les utilisateurs accéderont à votre interface de connexion, consultez Connexion, paramètres et recherche.
Choisir des méthodes de connexion
La première étape pour adapter l'exemple de code consiste à décider laquelle des trois méthodes de connexion disponibles vous souhaitez proposer.
| Sign-in method | Fonctionnement |
|---|---|
|
A) Google Sign-In
(vivement recommandé) |
Saisissez votre compte Google et votre mot de passe |
|
B) Connexion par téléphone
(recommandé comme option de secours ou option principale si votre application n'est pas compatible avec Google Sign-In) |
Saisissez le code PIN depuis l'écran de la voiture sur le téléphone, ou inversement |
|
C) Connexion standard
(option recommandée) |
Saisissez le nom d'utilisateur (ou l'adresse e-mail) et le mot de passe pour l'application |
Google Sign-In doit être présenté comme l'option principale si votre application le permet, car c'est plus facile pour les utilisateurs. Si votre application n'est pas compatible avec Google Sign-In, la connexion par téléphone est la deuxième option principale.
Le flux de connexion de l'exemple de code comprend des écrans pour les trois méthodes. Une fois que vous avez déterminé les options compatibles (à la fois l'option principale et les options de sauvegarde que vous souhaitez prendre en charge), vous pouvez désactiver les options restantes dans l'exemple de code et vous concentrer sur la personnalisation des écrans restants.
A) Google Sign-In
Si votre application est compatible avec Google Sign-In et que Google Sign-In est disponible dans le système, il est préférable d'utiliser cette méthode comme option principale dans votre flux de connexion. Cette opération est simple, car il leur suffit de confirmer leur compte Google existant.
Si vous proposez la connexion par téléphone ou la connexion standard, celles-ci doivent être présentées comme des options de secours disponibles via les liens textuels situés en bas de l'écran de destination.
Flux de connexion Google
Avec Google Sign-In, la page de destination est le seul écran que vous devez concevoir, sauf si vous proposez également des options de secours. Les procédures Connexion par téléphone et Connexion standard résument les écrans et les flux associés à ces options.
B) Connexion par téléphone
Si votre application n'est pas compatible avec Google Sign-In, il est préférable de proposer la connexion par téléphone comme option principale de votre flux de connexion. (La connexion par téléphone peut également être proposée comme option de connexion secondaire pour Google Sign-In.) Avec la connexion par téléphone, les utilisateurs n'ont plus besoin de mémoriser un nom d'utilisateur ni un mot de passe. À la place, ils saisissent le code qui leur est fourni.
Vous pouvez vous connecter par téléphone de deux manières:
- Les utilisateurs voient un code sur l'écran de la voiture et le saisissent sur leur téléphone
- Les utilisateurs recherchent un code sur leur téléphone et le saisissent sur l'écran de la voiture
Si la méthode standard nom d'utilisateur et mot de passe est également proposée, elle doit être présentée comme une option de secours disponible à partir d'un lien textuel au bas de l'écran de destination.
Flux de connexion par téléphone
La connexion par téléphone vous permet de choisir l'une des deux versions de la page de destination: l'une affichant un code d'accès sur le téléphone et l'autre permettant aux utilisateurs de saisir le code fourni sur le téléphone.
L'écran de la page de destination est le seul que vous devez concevoir, sauf si vous proposez également la connexion standard en tant qu'option de secours.
C) Connexion standard
La connexion standard à une application nécessite que l'utilisateur saisisse un nom d'utilisateur (ou une adresse e-mail) sur la page de destination, puis un mot de passe sur la page suivante.
La connexion standard peut être proposée comme option de secours par rapport à Google Sign-In ou à la connexion par téléphone. Si aucune des deux autres options n'est compatible, il peut s'agir de l'option de connexion principale. Toutefois, nous vous déconseillons d'utiliser la connexion standard en tant qu'option principale, car elle implique plusieurs étapes et implique la mémorisation des noms d'utilisateur et des mots de passe.
Les utilisateurs ne se souviennent pas toujours des noms d'utilisateur et des mots de passe. Il est donc important de leur proposer des options permettant de les récupérer ou de les réinitialiser. Ces options doivent être proposées via des liens textuels en bas des écrans de saisie, afin de ne pas concurrencer les actions principales de saisie du nom d'utilisateur ou du mot de passe.
Flux de connexion standard
Le flux de connexion standard consiste en une séquence de deux écrans (saisie du nom d'utilisateur et du mot de passe), avec des visites latérales facultatives vers deux autres écrans. Vous aurez besoin des versions des quatre écrans.
Ajuster le contenu des écrans
Une fois que vous avez déterminé les méthodes de connexion compatibles avec votre application, vous savez quels écrans figureront dans votre flux de connexion. En fonction de ce que vous choisissez de prendre en charge, vous pouvez avoir entre un et six écrans pour lesquels vous devrez déterminer le contenu (et le style, comme indiqué dans Personnaliser le style).
Si vous choisissez la connexion à Google ou à la connexion par téléphone sans options de secours, vous aurez un écran de connexion à créer. En revanche, si vous choisissez Google Sign-In avec les deux autres options de secours, vous disposerez de six écrans (un pour la connexion à Google, un pour la connexion via le téléphone et quatre pour la connexion standard).
Vous trouverez des exemples de ces écrans dans les sections Google Sign-In, Phone Sign-In et Standard Sign-In. Si vous utilisez l'exemple de code, vous pouvez modifier les versions de ces écrans créées dans le code. Si vous n'utilisez pas l'exemple de code, vous devez tout de même vous en servir comme modèle.
Vous devrez apporter quelques ajustements au contenu de ces écrans, y compris les suivants:
- Remplacez le logo de l'application Auriculaire fictive par celui de votre application.
- Modifier le texte et les liens pour référencer votre application et votre contenu associé
- Ajuster la logique d'affichage du code
Le remplacement du logo et la logique d'affichage du code sont abordés plus en détail ci-dessous.
Remplacer le logo de l'application
Après avoir supprimé les écrans inutiles de l'exemple de code, assurez-vous que les écrans restants affichent le logo de votre application au lieu de celui de l'application aurale fictive. Ce remplacement peut affecter d'autres aspects de la conception de pages, comme indiqué ci-dessous.
Le remplacement du logo peut vous amener à apporter d'autres réglages, tels que la personnalisation des couleurs d'autres éléments de la page ou l'ajustement de l'espace autour du logo.
Personnaliser les couleurs du logo
Pour vous assurer que le logo de votre application s'intègre parfaitement aux éléments de page environnants, vous pouvez personnaliser le code de connexion pour qu'il utilise la couleur d'accentuation de votre application. La personnalisation des styles est abordée à l'étape suivante, Personnaliser le style.
Réglage de l'espace autour du logo
Après avoir remplacé le logo Auriculaire par le logo de votre application, qui sera redimensionné à la même taille que le logo Aura, vérifiez l'espacement autour du logo. Si l'espace libre ne respecte pas les consignes relatives à votre marque, vous pouvez ajouter de l'espace autour des bords du logo dans le fichier du logo.
Une autre approche consisterait à ajuster l'espacement à l'écran. Cependant, avec cette approche,vous devrez ajuster l'espacement autour du logo individuellement pour chaque mise en page. Pour cette raison, ajouter de l'espace dans le fichier du logo est le moyen le plus simple d'augmenter l'espace libre autour du logo.
Ajuster la logique d'affichage du code
L'exemple de flux de connexion génère des codes PIN de manière aléatoire à l'aide d'une simple fonction RAND. Pour implémenter une méthode de génération de code basée sur une logique métier plus robuste, vous devez modifier le code approprié dans PinCodeSignInFragment.kt, qui fait partie de l'application Automotive UAMP (Universal Android Music Player (UAMP).
Personnaliser le style
Après avoir ajusté le contenu de vos écrans de connexion, vous pouvez appliquer un style global approprié à votre marque aux aspects de l'interface utilisateur qui affectent plusieurs écrans.
Vous pouvez personnaliser tout ou partie des éléments suivants pour refléter le style de votre marque:
- Style de champ de saisie: plein, avec contours ou souligné
- Style de bouton: arrondi ou rectangulaire
- Couleurs: accentuation, remplissage et texte du bouton, remplissage et trait de formulaire, erreur de formulaire
- Typographie: police, taille du texte
Vous trouverez ci-dessous des exemples de certaines de ces options de personnalisation. N'oubliez pas que le style personnalisé doit maintenir le contraste, la taille minimale pour le texte et les zones cibles tactiles, et que les autres exigences sont décrites dans les Consignes relatives aux écrans personnalisés.
Champs et boutons de saisie
L'exemple de procédure de connexion utilise des champs de saisie avec contours et des boutons arrondis comme styles par défaut. Modifiez ces styles par défaut si d'autres styles pourraient mieux refléter votre marque (par exemple, des boutons rectangulaires plutôt que arrondis).
Couleurs
La personnalisation des couleurs d'accentuation et d'état d'erreur utilisées dans les formulaires et les boutons est un moyen utile d'exprimer votre marque tout au long du flux de connexion. Il est également important de personnaliser ces couleurs pour s'assurer que les champs de saisie, les boutons et les liens s'affichent correctement sur la même page que le logo de votre application, plutôt que de les créer en conflit.
Veillez à ce que les couleurs que vous spécifiez conservent un rapport de contraste d'au moins 4,5:1 entre les éléments adjacents sur la page. Pour obtenir des conseils supplémentaires sur les couleurs et en savoir plus sur la palette de couleurs utilisée dans Android Automotive OS, consultez Éléments de base visuels: couleur.
Typographie
Bien que la typographie de l'exemple de flux de connexion puisse être personnalisée, soyez prudent lorsque vous apportez des modifications qui pourraient affecter la lisibilité. Consultez Bases visuelles: typographie pour en savoir plus sur les polices, les tailles de police minimales et d'autres considérations relatives à la lisibilité du texte sur les écrans de voiture.
Consignes de connexion
Les consignes de cette section concernent le fonctionnement de la connexion dans Android Automotive OS pour une utilisation optimale. L'exemple de procédure de connexion fourni dans l'application UAMP (Universal Android Music Player) respecte généralement ces consignes. Il ne permet pas de créer un compte, car cela nécessiterait une logique spécifique à l'application.
Si vous avez suivi le processus de personnalisation décrit dans cette section et que vous n'avez pas modifié le fonctionnement du code, votre flux de connexion doit être conforme aux consignes ci-dessous. Toutefois, assurez-vous que votre style personnalisé répond aux exigences générales spécifiées dans Consignes concernant les écrans personnalisés.
Si vous avez apporté des modifications plus importantes aux écrans de connexion ou au code, en plus de ce qui est décrit dans cette section, vérifiez que votre flux de connexion respecte les Consignes générales relatives aux écrans personnalisés, ainsi que les consignes de connexion spécifiques ci-dessous.
| Niveau d'exigence | Consignes |
|---|---|
| FORTEMENT RECOMMANDÉ |
Les développeurs d'applications doivent :
|
| MAI |
Les développeurs d'applications peuvent :
|
Justification:
Expérience multimédia cohérente : Les écrans de connexion conçus pour une application multimédia doivent offrir une expérience globalement cohérente avec les écrans de connexion des autres applications multimédias.
Apparence cohérente Les écrans de connexion doivent respecter les principes de base de la conception et des éléments visuels d'Android Automotive OS.