Les cartes permettent d'accéder rapidement aux informations et aux actions dont les utilisateurs ont besoin pour effectuer une tâche. Un geste sur le cadran permet à l'utilisateur de suivre ses progrès vers ses objectifs de remise en forme, de consulter la météo et plus encore. Vous pouvez lancer une application ou effectuer des tâches essentielles en un clin d'œil à l'aide des cartes.
Créer des designs responsifs et optimisés
Pour vous aider à adapter vos mises en page aux écrans plus grands, nous avons mis à jour le comportement de nos mises en page et composants afin qu'ils soient responsifs par défaut, y compris les marges et les marges intérieures basées sur des pourcentages.
Si vous utilisez nos modèles ProtoLayout, vous pouvez hériter automatiquement de ces mises à jour grâce à la dernière version bêta de la bibliothèque Jetpack Wear ProtoLayout. De plus, vous n'avez besoin de fournir que 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 la façon de tirer parti d'un écran plus grand, consultez nos conseils sur les tuiles. Les tuiles ont une hauteur d'écran fixe. Nous avons donc ajusté la marge intérieure pour maximiser l'espace limité de l'écran sans créer de rognage indésirable.
Vérifier que les composants occupent toute la largeur disponible
Tous les composants doivent être conçus de manière responsive. En définissant la hauteur et la largeur sur "expand" (développer), elles remplissent l'espace disponible. Incluez les marges nécessaires pour éviter que le contenu ne soit coupé par l'écran arrondi.
Créer des conceptions adaptatives et différenciées
Pour profiter au maximum de l'espace supplémentaire sur les grands écrans, ajoutez un point d'arrêt de taille à 225 dp. Ce point d'arrêt vous permet d'afficher du contenu supplémentaire, d'inclure plus de boutons ou de données, ou de modifier la mise en page pour mieux l'adapter à l'écran plus grand.
Cela nécessite une conception différente pour chaque point d'arrêt. La conception pour les grands écrans (225 dp et plus) peut inclure les éléments supplémentaires suivants :
Afficher l'emplacement de titre précédemment masqué
Cela est recommandé pour les mises en page à deux lignes avant le point d'arrêt, où l'emplacement du titre doit être supprimé pour garantir la taille minimale de la zone de pression de 48 dp.
Augmenter la taille ou modifier l'état des composants existants
Cela peut être fait pour afficher plus de détails ou rendre le contenu plus facile à parcourir.
Ajouter des emplacements de composants dans la mise en page actuelle
En ajoutant des composants, la mise en page offre plus d'options ou des informations supplémentaires. Assurez-vous toutefois que le contenu reste facile à lire.
Ajouter du contenu en bas
Dans certains cas, il est plus judicieux d'ajouter des boutons d'action ou du contenu dans la section inférieure plutôt que d'ajouter des composants dans le slot principal.
Attention : Un écran plus grand ne doit jamais afficher moins d'informations qu'un écran plus petit. Cela est particulièrement pertinent pour les comportements personnalisés ajoutés au point d'arrêt.
Par exemple, il arrive souvent que la taille des composants ou du texte soit augmentée au-delà du point d'arrêt et que moins d'éléments s'affichent sur les grands écrans. Les écrans doivent toujours afficher plus de valeur à mesure que leur taille augmente.
Comportement responsif et adaptatif
Le comportement adaptatif et responsif dépend des trois emplacements (sections) de la mise en page.
Emplacement pour l'icône et le titre de l'application
Le comportement de l'icône d'application fournie par le système ne change pas. L'emplacement du titre s'adapte automatiquement à la taille de l'écran plus large et affiche des caractères supplémentaires. Des marges internes proportionnelles (en pourcentage) sont appliquées à la section supérieure pour éviter tout écrêtement lorsque la taille de l'écran augmente.
Emplacement principal (composants)
Tous les composants du slot principal doivent définir leur largeur et leur hauteur sur "expand" (développer) afin de s'adapter automatiquement à la taille de l'écran plus large. Des marges internes proportionnelles (en pourcentage) sont appliquées à la section principale de l'emplacement et, dans certains cas, à chaque ligne de cet emplacement, afin d'éviter tout écrêtement lorsque la taille de l'écran augmente. Si vous utilisez une combinaison de rayon d'angle et de mise en page, votre emplacement principal peut nécessiter des marges plus importantes.
Emplacement inférieur
Le comportement du bouton et du texte en bas de l'écran ne change pas, mais la largeur du bouton et des zones de texte s'adapte automatiquement à la taille de l'écran plus large et gagne en caractères. Des marges internes proportionnelles (en pourcentage) sont appliquées à l'emplacement inférieur pour éviter tout écrêtement lorsque la taille de l'écran augmente. Lorsqu'aucun emplacement inférieur n'est présent, une marge par défaut est ajoutée automatiquement.
Créer des expériences différenciées
Une mise en page entièrement personnalisable, avec 60 permutations ou plus intégrées, permet une personnalisation pratiquement illimitée. Les tuiles sont basées sur un système de slots. Vous pouvez donc remplacer un slot de la mise en page canonique par n'importe quel contenu ou composant, et définir le composant sur l'une des nombreuses variantes et combinaisons de couleurs. Dans ce cas, maintenez un comportement réactif et suivez nos recommandations de conception.
Ces personnalisations doivent être limitées et ne pas s'écarter du modèle de tuile. Cela permet de maintenir une cohérence lorsque les utilisateurs font défiler le carrousel de vignettes sur leurs appareils Wear OS.