Flux de connexion Adapt

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.

Ici, Google Sign-In est proposé comme méthode de connexion principale, comme recommandé, tandis que les autres méthodes sont proposées comme options de secours.

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.

Si un utilisateur sélectionne Google Sign-In sur la page de destination (plutôt que l'une des options de secours, le cas échéant), Google s'occupe du reste du processus de connexion.

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.

Dans une version de la connexion par téléphone, les utilisateurs voient un code à saisir sur leur téléphone
Dans l'autre version de la connexion par téléphone, les utilisateurs peuvent saisir un code qu'ils ont obtenu sur leur téléphone

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.

Lorsque la connexion par téléphone est l'option principale, la connexion s'effectue dès que l'utilisateur saisit un code comme indiqué sur la page de destination (sauf si une option de secours est proposée et choisie).

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.

L'étape 1 de la connexion standard implique la saisie d'un nom d'utilisateur ou d'une adresse e-mail
L'étape 2 de la connexion standard implique la saisie d'un mot de passe
Les utilisateurs qui ne se souviennent pas de leur nom d'utilisateur sont redirigés vers cette page
Les utilisateurs qui ne se souviennent pas de leur mot de passe sont redirigés vers cette page

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.

Si les utilisateurs se souviennent de leur nom d'utilisateur et de leur mot de passe, ils doivent remplir deux écrans de saisie avant de se connecter. Sinon, ils sont redirigés vers un ou deux écrans supplémentaires contenant des instructions.

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.

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.

AVANT: La page de destination affiche le logo d'une application musicale fictive appelée Aural
APRÈS: La version personnalisée remplace le logo d'Aural par celui d'une application spécifique.

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.

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.

La couleur d'accentuation de l'application aurale fictive (bleu #57D9F7) permet de personnaliser les éléments de la page, comme les boutons et les liens, dans l'application exemple et dans les exemples de cette section

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.

Pour augmenter l'espace autour du logo, ajoutez de l'espace autour de celui-ci dans le fichier du logo en décalant sa taille dans le cadre de délimitation.

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).

Les liens présentés dans cet exemple et la logique qui génère le code doivent être personnalisés pour votre application

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 :
  • Présenter Google Sign-In comme option principale si l'application et le système le permettent
  • Définir la connexion par téléphone (si elle est disponible) comme option principale si l'application et le système ne sont pas compatibles avec Google Sign-In
  • Limitez le code PIN de connexion par téléphone à 8 chiffres au maximum.
  • Pour la connexion standard, la saisie du nom d'utilisateur et du mot de passe en deux étapes séparées
  • Placez un libellé dans la zone de saisie ("Saisissez le mot de passe") et laissez-le visible quelque part à l'écran après que l'utilisateur commence à saisir du texte.
  • Permettre aux utilisateurs d'afficher le mot de passe (qui est généralement masqué) pendant la saisie
  • Fournir des conseils pour accéder à un nom d'utilisateur ou mot de passe oublié
  • Fournir un moyen de créer un compte
MAI Les développeurs d'applications peuvent :
  • Définissez la connexion standard à l'application (nom d'utilisateur et mot de passe) comme option principale si ni Google Sign-In, ni la connexion par téléphone ne sont compatibles.
  • Si la connexion à Google est l'option principale, proposez la connexion par téléphone, la connexion standard, ou les deux comme options de secours.
  • Fournir la connexion standard comme option de secours lorsque la connexion par téléphone est l'option principale

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.