Principes de conception des cartes

Les cartes permettent d'accéder rapidement aux informations et aux actions dont les utilisateurs ont besoin pour effectuer une tâche. Après avoir balayé le cadran de la montre, l'utilisateur peut voir comment il progresse vers ses objectifs de remise en forme, consulter la météo et plus encore. Les utilisateurs peuvent également lancer des applications et effectuer rapidement les tâches essentielles à partir des cartes.

Les utilisateurs peuvent choisir les cartes qu'ils souhaitent voir sur leur appareil Wear OS, à la fois à partir de l'appareil lui-même et de l'application associée.

principes de conception UX

Les cartes fournies par le système utilisent un langage de conception cohérent. Les utilisateurs s'attendent donc à ce qu'elles se présentent comme suit:

  • Immédiatement:les cartes sont conçues pour aider les utilisateurs à effectuer rapidement des tâches fréquentes. Affichez le contenu essentiel dans une hiérarchie d'informations claire afin que les utilisateurs puissent comprendre le contenu de la carte.
  • Prévisible:le contenu de chaque carte doit toujours se concentrer sur une tâche visible par l'utilisateur. Cela permet aux utilisateurs de prédire les informations qu'ils pourront voir sur la carte, ce qui améliore le rappel.
  • Pertinent:les utilisateurs emportent leurs appareils Wear OS partout où ils vont. Réfléchissez à la pertinence du contenu de la carte par rapport à la situation actuelle de l'utilisateur et au contexte.

Icône de l'appli

L'icône d'application qui peut apparaître en haut de l'écran est automatiquement générée par le système à partir de l'icône de lanceur. N'intégrez pas cette icône à la mise en page de vos cartes.

Wear OS peut afficher automatiquement l'icône de l'application lorsque l'utilisateur fait défiler le carrousel de cartes. Il n'est pas nécessaire d'ajouter l'icône de l'application à la conception des cartes.
N'ajoutez pas l'icône d'application dans la conception des cartes, car elle peut apparaître deux fois ou se chevaucher si elle est également affichée au niveau du système.

Conseils de conception

Tenez compte des consignes suivantes lorsque vous créez des cartes.

Se concentrer sur une seule tâche

Placer le curseur sur une seule tâche (lancer l'exécution, par exemple)
Exécuter trop de tâches différentes sur une même carte

Créer des cartes distinctes pour chaque tâche

Si votre application est compatible avec plusieurs tâches, envisagez de créer une carte pour chacune d'elles. Par exemple, une application de fitness peut avoir à la fois une carte "Objectifs" et une carte "Activité d'entraînement".

Nombre de pas, entraînements cette semaine et tâches de pleine conscience

Afficher des représentations visuelles des graphiques

Affichez des représentations rapides et lisibles d'informations numériques ou statistiques, et permettez à l'utilisateur d'appuyer sur l'écran pour en savoir plus dans une application si nécessaire.
Affichez des informations numériques ou statistiques détaillées sur la carte.

Indiquer les mises à jour les plus récentes

Indiquez clairement aux utilisateurs à quel point les données d'une carte sont récentes. Si vous affichez des données mises en cache, indiquez quand elles ont été mises à jour pour la dernière fois.

L'image du milieu montre que la dernière session a eu lieu il y a 45 minutes

Utiliser une fréquence d'actualisation des données appropriée

Choisissez une fréquence de mise à jour appropriée pour vos cartes, en tenant compte de l'impact sur l'autonomie de la batterie de l'appareil. Si vous utilisez des sources de données de plate-forme telles que la fréquence cardiaque et le nombre de pas, Wear OS contrôle la fréquence de mise à jour pour vous.

États vides

Les cartes comprennent deux types d'états vides. Pour les deux, utilisez PrimaryLayout.

Erreurs ou autorisation

Indiquer à l'utilisateur qu'il doit mettre à jour ses paramètres ou ses préférences depuis la carte

Se connecter

Insérer une incitation à l'action claire sur une carte "Se connecter"

Afficher les activités en cours

Lorsqu'une application effectue une activité de longue durée, telle que le suivi d'un entraînement ou la lecture de musique, elle doit afficher la progression de l'activité en cours dans une ou plusieurs vignettes.

Si votre application est également compatible avec les cartes qui permettent aux utilisateurs de démarrer ces activités, procédez comme suit pour minimiser toute confusion:

  • Indiquez qu'une activité en cours est déjà en cours.
  • Si l'utilisateur appuie sur ce type de carte, lancez votre application et affichez l'activité en cours. Ne démarrez pas une nouvelle instance d'une activité en cours.

Chaque carte inclut un bouton d'incitation à l'action en bas, qui permet aux utilisateurs d'ouvrir l'application

Éléments obligatoires

  • Données principales:contenus principaux décrivant l'activité.
  • Libellé:affiche l'état de l'activité.

Éléments facultatifs

  • Icône ou graphique:il peut s'agir d'une animation ou d'une image statique.
  • Chip compact en bas:contient une incitation à l'action.

Mouvement sur les cartes

Lorsque vous ajoutez des animations aux cartes, aidez les utilisateurs à comprendre les modifications:

Mettez l'accent sur la mise à jour des informations d'une carte, comme la progression vers un objectif de nombre de pas.
Basculez de manière inattendue entre les valeurs.

Shorts en avant-première

Ajoutez un aperçu de la carte pour aider l'utilisateur à voir le contenu affiché dans le gestionnaire de cartes de son appareil Wear OS ou portable. Chaque carte peut avoir une image d'aperçu représentative. Cette image doit répondre aux exigences suivantes:

Conditions requises

  • Exportez les assets au format 400 x 400 px.
  • Fournissez une image d'aperçu circulaire.
  • Utilisez un arrière-plan noir uni.
  • Enregistrez au format PNG ou JPEG.
  • Ajoutez des assets localisés dans les langues populaires de votre application.
Aperçu d'une carte affiché dans le gestionnaire de cartes d'un appareil Wear OS Aperçu d'une carte affiché dans le gestionnaire de cartes sur un téléphone.
Mettez l’accent sur la mise à jour d’informations sur une vignette, comme la progression sur un graphique du nombre de pas.
Afficher un état vide, afficher l'icône de carte dans l'interface utilisateur de pagination ou placer un trait sur la carte

Écrans plus grands

Pour s'adapter à diverses tailles d'écran Wear OS, les modèles de mise en page ProtoLayout Material et les mises en page de conception Figma incluent un comportement responsif, qui permet aux emplacements de s'adapter automatiquement. Les emplacements sont conçus pour remplir la largeur disponible. Le contenu principal et les emplacements d'étiquettes secondaires épousent le contenu, mais le conteneur qui les contient remplit la hauteur disponible. Les marges sont définies sous forme de pourcentages, avec des marges intérieures supplémentaires ajoutées aux emplacements en bas et en haut de l'écran, afin de tenir compte des fluctuations de la courbe de l'écran à mesure qu'il s'agrandit.

Pour maximiser la taille d'écran plus grande, utilisez l'espace supplémentaire pour apporter plus de valeur en permettant aux utilisateurs d'accéder à des informations ou options supplémentaires. Ces mises en page nécessitent une personnalisation supplémentaire au-delà du comportement responsif intégré, par exemple en créant une mise en page supplémentaire avec plus de contenu ou en affichant des emplacements précédemment masqués après le point d'arrêt.

Notez que le point d'arrêt recommandé est défini sur une taille d'écran de 225 dp.

Exemples de conception pour une taille d'écran plus grande

Ajouter des boutons

Entraînements supplémentaires affichés

Ajouter des espaces publicitaires et du contenu

Afficher la vitesse minimale en plus de la vitesse maximale

Ajouter du texte

Une plus grande partie du titre de l'actualité est visible