Les cartes ont des caractéristiques de conception fondamentales. Des modèles et des composants spécifiques sont à votre disposition afin de vous aider à créer des cartes uniques pour votre application.
Éléments fondamentaux
Le tableau suivant décrit les éléments fondamentaux de la conception de cartes.
|
|
|
|
|
|
Icône de l'applicationLes icônes des applications sont fournies par leur développeur. Elles s'affichent temporairement à l'écran. |
Zone de mise en pageChaque modèle de carte possède ses propres règles concernant la zone de contenu principal. Pensez à suivre les conseils de mise en page. |
Bouton de la partie inférieureLes boutons sont importants pour activer des actions secondaires sur la carte. Placez les boutons à 6,3 % au-dessus du bas de l'écran. |
Icône de l'application
Wear affiche automatiquement l'icône de l'application lorsque l'utilisateur fait défiler le carrousel de cartes. L'icône de l'application disparaît et ne doit pas être implémentée dans la carte. Pour en savoir plus sur la création d'icônes d'application, consultez la page Icônes de produits.
Figure 1. Exemples d'icônes d'applications
Wear affiche automatiquement l'icône de votre application
À faire
À éviter
Bouton
Choisissez un texte court pour vos boutons. Utilisez un texte spécifique à l'action et à la destination de l'incitation à l'action. Assurez-vous que le texte du bouton est adapté au nombre de caractères. Si le texte traduit est trop long, définissez-le sur Plus.
|
|
|
Emplacement |
Spécifications du bouton |
Type |
| Placez le bouton à 6,3% de la partie inférieure du cadran de la montre. | Laissez une marge intérieure de 12 dp des deux côtés. | Les tailles de police ne sont pas adaptables. Définissez une taille de police minimale de neuf. Pour les langues non latines, utilisez une taille de police minimale de sept. |
Modèles
Il existe quatre types de modèles de cartes. Téléchargez Tile Design Kit (Figma) pour voir les exemples et envoyer vos commentaires sur l'utilisation de ce modèle.
Centré sur le texte
Ce modèle est conçu pour afficher du texte sur les cartes telles que les dernières actualités, les événements à venir et les rappels. Il est communément utilisé pour les états de connexion, d'erreur et de configuration afin d'informer les utilisateurs de chaque événement pertinent et de leur proposer une incitation à l'action claire.
Centré sur le bouton
Ce modèle est conçu pour les cartes comprenant jusqu'à cinq actions principales. Utilisez ce modèle pour lancer rapidement des tâches spécifiques.
Centré sur l'information
Ce modèle affiche les métriques générales et la progression. Il est particulièrement utile pour les cartes liées à la santé et à la remise en forme. Il offre des options flexibles pour l'affichage du contenu. Pour assurer une bonne lisibilité, privilégiez les données clés et évitez de surcharger le modèle.
Centré sur les données
Ce modèle polyvalent est conçu pour afficher des graphiques et des éléments graphiques qui résument des informations périodiques. Il offre une plus grande flexibilité pour la visualisation des données et est utile pour créer des états vides visuels. Il est essentiel d'utiliser des éléments graphiques simples pour que la carte reste lisible en un coup d'œil.
Couleur
Pour que les cartes soient lisibles d'un coup d'œil, limitez-vous à trois couleurs.
À faire
À éviter
Typographie
Utilisez Roboto comme police principale sur Wear OS. Utilisez le corps 2 par défaut avec la plus petite taille de police et l'affichage 2 pour la plus grande.
Pour en savoir plus sur la police, l'épaisseur et le dimensionnement, consultez la section Typographie.
Composants
Utilisez des composants pour créer vos cartes. Personnalisez les couleurs du composant pour exprimer votre marque en suivant les consignes de thématisation Material de Wear.
Téléchargez le Tile Design Kit (Figma) pour voir des exemples de composants.
| Component | Variante | Exemple |
| Bouton | Bouton standard | Tailles disponibles : Standard, L et XL  |
| Bouton | Bouton standard avec texte | Tailles disponibles : Standard, L et XL  |
| Chip électronique | Chip standard principal |
 |
| Chip électronique | Chip standard secondaire |
 |
| Chip électronique | Petit chip d'avatar |
 |
| Chip électronique | Grand chip d'avatar |
 |
| Chip électronique | Chip compacte (bas) |
 |
| Indicateur de progression | Indicateur de progression standard |
 |
| Indicateur de progression | Indicateur de progression avec un écart |
 |
Ressources
Pour en savoir plus, consultez les consignes de conception des cartes.