Bonnes pratiques concernant les cartes

Conception sur noir

La conception sur un arrière-plan noir est essentielle pour Wear OS pour deux raisons principales:

  • Efficacité de la batterie:chaque pixel éclairé à l'écran consomme de l'énergie. En utilisant un arrière-plan noir, vous réduisez le nombre de pixels actifs, ce qui prolonge l'autonomie de la batterie.
  • Esthétique fluide:un arrière-plan noir permet de réduire visuellement le boîtier de la montre, créant l'illusion d'une surface continue qui s'étend jusqu'au bord de l'appareil. L'inclusion d'éléments d'interface utilisateur dans cet espace renforce encore cet effet.

À faire

Définissez toujours la couleur d'arrière-plan sur noir.

À ne pas faire

Ne définissez pas l'arrière-plan en tant qu'image à fond perdu ou couleur de bloc.

N'incluez que les éléments nécessaires.

Lorsque l'option est activée (par exemple, en utilisant ProtoLayout Material3 PrimaryLayout), Wear OS affiche automatiquement l'icône d'application permanente, qui s'affiche automatiquement lorsque l'utilisateur fait défiler le carrousel de cartes. L'icône de l'application ne doit pas être conçue ni ajoutée dans la carte.

Assurez-vous que l'icône de l'application fournie est monochrome si vous utilisez un thème dynamique pour votre carte. Consultez les consignes concernant les icônes de produits Android pour savoir comment créer l'icône d'application de votre marque.

À faire

Wear OS peut afficher automatiquement l'icône de l'application lorsque l'utilisateur fait défiler le carrousel de cartes. Vous n'avez pas besoin de placer l'icône de l'application dans la conception des cartes.

À ne pas faire

N'ajoutez pas l'icône de l'application dans la conception des cartes, car elle risque de s'afficher deux fois ou de se superposer si elle est également affichée au niveau du système.

Masquer les titres des applications pour garantir un nombre minimal de cibles tactiles

Pour laisser suffisamment d'espace aux éléments interactifs sur les écrans de petite taille, le titre de l'application peut être masqué lorsqu'une carte utilise deux lignes (et une section inférieure). Cela garantit que les lignes sont suffisamment hautes (au moins 48 dp). Le titre peut réapparaître sur les écrans plus grands (225 dp et plus).

À faire

Sur les petits écrans, le titre de l'application est masqué pour que les deux lignes aient une hauteur et une cible tactile d'au moins 48 dp.

À ne pas faire

Si vous ne masquez pas le titre de l'application sur petit écran et que vous avez deux lignes, la hauteur des composants ne respecte pas nos normes d'accessibilité et est inférieure à la taille minimale de la cible de pression. Dans cet exemple, l'espace disponible pour les boutons est inférieur à 48 dp. Ils sont donc rognés.

Choisissez un seul cas d'utilisation principal à mettre en avant

Pour que les utilisateurs sachent quoi faire avec chaque carte (qu'il s'agisse d'ouvrir une application, de démarrer une activité ou d'en savoir plus), ils doivent inclure au moins un élément interactif dans leur mise en page.

À faire

Cette carte est efficace, car elle propose un petit ensemble d'options, puis la possibilité d'en voir plus.

À ne pas faire

Cette solution est moins utile pour l'utilisateur, car elle entraîne une paralysie décisionnelle en raison du trop grand nombre d'options proposées.

Inclure (au moins) un conteneur

Chaque carte de l'application doit contenir au moins un élément de conteneur et être entièrement cliquable, en redirigeant vers un écran correspondant dans l'application. Les informations de la carte, qu'elles soient contenues dans le conteneur ou présentées séparément, doivent clairement indiquer le contenu associé ou l'action disponible.

Si des boutons sont utilisés, ils doivent respecter les conventions de conception standards et indiquer clairement leur fonction.

À faire

Cette carte fonctionne bien, car l'utilisateur peut effectuer une action sur chacune des fonctionnalités fournies, car elles disposent d'affordances claires.

À ne pas faire

Cette carte est moins efficace, car elle ne précise pas clairement que l'utilisateur peut appuyer sur le contenu pour afficher des informations supplémentaires.

Rendre les actions immédiatement compréhensibles

Les expériences sur la montre n'ont pas le luxe d'avoir suffisamment d'espace pour communiquer leur signification. Par conséquent, les cartes les plus efficaces comportent des composants interactifs facilement prévisibles.

À faire

Une carte réussie exploite pleinement l'espace disponible pour communiquer clairement le résultat de chaque action.

À ne pas faire

Les actions de cette carte ne sont pas claires. Où le conteneur avec la pochette de l'album redirige-t-il l'utilisateur ? Est-ce différent du bouton "Play" ?

Prioriser visuellement les actions

Pour aider les utilisateurs à comprendre l'action la plus importante sur une carte, les conteneurs interactifs doivent être hiérarchisés visuellement.

  • Utilisez des couleurs primaires sur les boutons d'action principaux.
  • Utiliser des couleurs secondaires/tertiaires pour les actions secondaires

À faire

Cette carte utilise une combinaison de remplissage (avec des rôles de couleur primaire et secondaire) avec un rôle de bouton inférieur tertiaire clair, à l'aide du style de remplissage tonal.

À ne pas faire

Cette carte contient trop d'utilisations de boutons de style rempli, qui utilisent tous le rôle de couleur primaire.

Simplifier en utilisant moins de conteneurs

Les cartes doivent éviter d'utiliser plusieurs composants interactifs pour déclencher une action spécifique. Elles doivent plutôt essayer de simplifier la mise en page globale en utilisant moins de conteneurs.

À faire

Cette carte utilise plusieurs conteneurs, et chacun d'eux agit comme un bouton pour effectuer une action spécifique, comme démarrer un minuteur ou en créer un.

À ne pas faire

L'utilisation de quatre conteneurs ici est inutile, car toutes les informations se dirigent vers le même emplacement.

Utiliser des conteneurs à des fins fonctionnelles

Pour que les utilisateurs puissent anticiper l'action de chaque composant d'une carte, nous vous déconseillons d'utiliser des conteneurs à des fins décoratives ou structurelles afin d'éviter les pressions qui n'ont aucun effet.

À faire

Cette solution fonctionne, car la seule action de la carte est un flux de création, et que tous les autres contenus flottent sur l'arrière-plan noir.

À ne pas faire

Cette carte est plus déroutante, car il semble que l'utilisateur puisse interagir avec tous les conteneurs.

Affichez des représentations visuelles des graphiques

La lisibilité est essentielle pour la conception de Wear OS. Le temps d'écran étant limité (environ sept secondes), privilégiez les informations essentielles, présentées dans un format clair et facile à comprendre d'un coup d'œil.

N'oubliez pas que la montre complète l'expérience sur téléphone, en vous permettant d'accéder rapidement aux informations clés.

À faire

Afficher des représentations d'informations numériques et statistiques rapidement et facilement, et donner à l'utilisateur la possibilité d'appuyer sur l'écran pour en savoir plus dans une application si nécessaire

À ne pas faire

Afficher des informations numériques ou statistiques détaillées sur la carte