Ces mises en page standards sont éprouvées et polyvalentes. Elles offrent une expérience utilisateur optimale sur les appareils dotés de tailles d'écran plus grandes.
Cartes
Les cartes permettent d'accéder rapidement aux informations et aux actions dont les utilisateurs ont besoin pour effectuer une tâche. D'un simple geste sur le cadran, l'utilisateur peut suivre sa progression vers ses objectifs de remise en forme, consulter la météo et plus encore. Lancez une application ou effectuez rapidement des tâches essentielles à l'aide de cartes.
Personnalisation via l'utilisation de nos composants et de notre style
Vous pouvez appliquer le style de votre marque à certains composants. Cela inclut la couleur principale, l'icône d'application, la police, les icônes et tout élément visuel qui s'applique à l'expérience de votre carte.
Créez des mises en page responsives (écrans à hauteur fixe et marges en pourcentage)
Pour adapter notre code et nos mises en page à des tailles d'écran plus grandes, nous les avons mis à jour pour intégrer un comportement responsif, y compris des marges et des marges intérieures basées sur des pourcentages. Si vous utilisez nos modèles, vous pouvez hériter automatiquement de ces mises à jour via l'API Tiles. Il vous suffit de fournir les mises en page dans lesquelles vous avez ajouté du contenu ou des composants supplémentaires après un point d'arrêt de taille d'écran. Pour obtenir des conseils et des recommandations complets sur l'utilisation d'un écran plus grand, consultez nos conseils sur les cartes.
Tous les modèles sont créés avec les deux points d'arrêt de taille d'écran par défaut: 192 dp et 225 dp. Les marges ont été définies sur des valeurs en pourcentage, en fonction de la taille de l'écran, afin que les lignes occupent l'espace disponible, mais ne s'étendent pas trop et soient tronquées par l'écran incurvé en haut et en bas. Les tuiles ont une hauteur d'écran fixe. Nous avons donc ajusté la marge intérieure pour maximiser l'espace limité sur l'écran sans créer de rognage indésirable.
Les deux modèles principaux, la mise en page principale et la mise en page de contenu Edge (avec un anneau de progression), ont des marges différentes, mais toutes les mises en page de conception sont conçues pour correspondre à l'un d'entre eux. Chaque carte comporte trois sections principales, avec des emplacements qui leur sont alloués. Dans certains cas, des marges et une marge intérieure supplémentaires peuvent être intégrées pour aider le contenu à remplir l'espace disponible tout en conservant une conception équilibrée et lisible en un coup d'œil.
Créez des expériences différenciées
Avoir quatre mises en page standards principales, intégrant plus de 80 permutations, permet une personnalisation presque illimitée. Les cartes sont basées sur un système d'emplacements. Vous pouvez donc remplacer un emplacement de la mise en page canonique par le contenu de votre choix. Dans ce cas, maintenez un comportement réactif et suivez nos recommandations de conception.
Ces personnalisations doivent être limitées et ne doivent pas rompre la structure du modèle de carte. L'objectif est d'assurer la cohérence lorsque les utilisateurs font défiler le carrousel de cartes sur leurs appareils Wear OS.
Ajouter une valeur après le point d'arrêt sur les écrans plus grands
Afin d'utiliser au mieux l'espace supplémentaire sur des écrans de plus grande taille, ajoutez un point d'arrêt pour taille de 225 dp. Ce point d'arrêt permet d'afficher du contenu supplémentaire, d'inclure plus de boutons ou de données, ou de modifier la mise en page pour qu'elle s'adapte mieux à un écran plus grand.
Mises en page d'application avec ou sans défilement
Lors de la conception de mises en page adaptatives sur un écran rond, les vues avec défilement et sans défilement ont chacune des exigences uniques en termes de mise à l'échelle des éléments d'interface utilisateur et de maintien d'une mise en page et d'une composition équilibrées.
Mises en page d'application sans défilement
Mises en page standards et composants plein écran (y compris pour les contenus multimédias et de fitness)
Les mises en page des vues d'application sans défilement incluent les lecteurs multimédias, les boîtes de dialogue de confirmation, les sélecteurs, les sélecteurs et les écrans de fitness ou de suivi spéciaux qui utilisent des indicateurs de progression. Vous pouvez limiter la hauteur de n'importe quel écran, ce qui garantit que l'utilisateur est concentré sur une tâche ou un ensemble de commandes, plutôt que d'avoir à parcourir une liste d'options. Pour prendre en charge les appareils dotés d'un écran de petite taille, tenez compte de la taille limitée de votre conception, en veillant à ce qu'elle soit lisible et en utilisant l'écran circulaire le cas échéant.
Consignes de réactivité (marges en pourcentage)
Définissez toutes les marges en pourcentage, puis définissez des contraintes verticales de sorte que le contenu principal du milieu puisse s'étirer pour remplir la zone d'affichage disponible.
Il est préférable de diviser un écran sans défilement en une section supérieure, centrale et inférieure lors de la conception. De cette façon, vous pouvez ajouter des marges intérieures aux sections supérieure et inférieure pour éviter le rognage, tout en permettant à la section centrale de profiter de toute la largeur de l'écran. Envisagez d'utiliser le bouton de défilement rotatif pour contrôler les éléments de l'écran lorsque sa taille est limitée, car les interactions tactiles seules peuvent ne pas offrir la meilleure expérience possible.
Créez des expériences différenciées
Les mises en page sans défilement sont personnalisables, mais sont plus limitées dans la quantité de contenu pouvant être ajoutée à l'écran et le type de composants qui fonctionnent le mieux. L'utilisation de "IconButtons" au lieu de "Chips" permet d'exploiter au mieux l'espace limité, et des graphiques visuels tels que ProgressIndicators et des points de données volumineux permettent de communiquer les informations clés de manière graphique.
Tous les éléments qui épousent le contour de l'écran s'agrandissent automatiquement en fonction de la taille de l'écran, ce qui leur donne encore plus d'impact.
Ajouter de la valeur après le point d'arrêt sur les écrans plus grands
Lors de la création d'un responsive design pour des écrans de plus grande taille, les mises en page d'application sans défilement tirent le meilleur parti de l'espace supplémentaire disponible sur l'écran. Les éléments existants peuvent se développer pour occuper l'espace supplémentaire, ce qui améliore la facilité d'utilisation, et les composants et le contenu peuvent apparaître après un point d'arrêt de taille d'écran.
La liste suivante contient plusieurs exemples de ce type de comportement:
- Les lecteurs multimédias peuvent obtenir des boutons supplémentaires ou des commandes plus grandes.
- Les boîtes de dialogue de confirmation peuvent présenter une illustration ou plus d'informations.
- Les écrans de fitness peuvent obtenir des métriques supplémentaires, et la taille des éléments peut augmenter.
Faire défiler les mises en page d'applications
Mises en page canoniques
Les mises en page de vue d'application défilantes incluent des listes (ScalingLazyColumn) et des boîtes de dialogue. Ces mises en page constituent la majorité des écrans d'application. Elles représentent un ensemble de composants qui doivent s'adapter à des tailles d'écran plus grandes.
Vérifiez que les composants sont responsifs, c'est-à-dire qu'ils remplissent la largeur disponible et qu'ils adoptent les ajustements ScalingLazyColumn lorsqu'une plus grande hauteur de l'écran est disponible. Ces mises en page sont déjà conçues de manière responsive, et nous avons quelques recommandations supplémentaires pour tirer pleinement parti de l'espace étendu.
Consignes de réactivité (marges en pourcentage)
Toutes les marges supérieure, inférieure et latérale doivent être définies en pourcentage pour éviter le rognage et fournir une mise à l'échelle proportionnelle des éléments. Notez que PositionIndicator apparaît lorsque l'utilisateur fait défiler l'écran et qu'il épouse automatiquement le contour de l'écran, quelle que soit sa taille.
Créez des expériences différenciées
Les vues défilantes sont hautement personnalisables, avec la possibilité d'ajouter n'importe quelle combinaison de composants dans n'importe quel ordre.
Les marges supérieure et inférieure peuvent changer en fonction des composants situés en haut et en bas. Cela permet d'éviter que du contenu ne soit tronqué par la courbe croissante de l'écran.
Ajouter une valeur après le point d'arrêt sur les grands écrans
Étant donné que les mises en page déroulantes afficheront automatiquement une plus grande partie de ce qui était auparavant masqué sous la ligne de flottaison de l'écran, il n'y a pas grand-chose à faire pour ajouter de la valeur. Chaque composant remplit la largeur disponible et, dans certains cas, il peut obtenir des lignes de texte supplémentaires (telles que des fiches) ou s'étirer pour remplir la largeur disponible (comme des boutons en forme d'icône).