L'écosystème Wear OS est constitué d'appareils qui disposent d'une grande variété de tailles d'écran. L'utilisation des principes d'interface utilisateur adaptative est essentielle pour offrir une expérience de la plus haute qualité à tous les utilisateurs.
Qu'est-ce qu'une UI adaptative ?
Les interfaces utilisateur adaptatives s'étirent et changent pour optimiser l'utilisation de tout l'espace disponible à l'écran, quelle que soit la taille de l'écran sur lequel elles sont affichées.
Les interfaces utilisateur adaptatives changent de manière réactive à l'aide de composants et de méthodes intégrés directement dans la logique de mise en page. Ces mises en page utilisent également des points d'arrêt pour la taille de l'écran (en appliquant une conception différente en fonction de la taille de l'écran) afin de créer une expérience encore plus riche pour les utilisateurs.
Principales tailles d'écran
Découvrez les tailles de référence clés à garder à l’esprit lorsque vous concevez de nouvelles expériences
Types de mises en page
Lors de la conception de mises en page adaptatives sur l'é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.
Toutes les marges supérieure, inférieure et latérale doivent être définies en pourcentages pour éviter le rognage et fournir une mise à l'échelle proportionnelle des éléments.
Toutes les marges doivent être définies en pourcentage, et les contraintes verticales doivent être définies de sorte que le contenu principal au milieu puisse s'étirer pour remplir la zone disponible.
Ajouter de la valeur grâce aux mises en page et aux pratiques de conception adaptatives
Lors de la conception de mises en page adaptatives sur l'é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.
Les images suivantes sont des suggestions générales. Les exemples ne sont fournis qu'à titre d'illustration. Consultez chaque composant ou page de surface pour obtenir des conseils détaillés, contextuels et réactifs.
Les mises en page responsives permettent de tenir sur un seul écran davantage de chips, de fiches, de lignes de texte et de boutons supplémentaires.
Utilisez de nouvelles mises en page, appliquées à des points d'arrêt de taille d'écran définis, afin de permettre l'introduction de nouveaux contenus lorsque cela est possible. L'utilisateur bénéficie ainsi d'une valeur supplémentaire sur les appareils dotés de tailles d'écran plus grandes.
Utilisez plus d'espace à l'écran pour fournir des conteneurs plus grands, du texte plus grand, des anneaux plus épais et une visualisation des données plus précise afin d'offrir une meilleure visibilité aux utilisateurs.
Utilisez plus d'espace à l'écran pour disposer d'éléments tactiles plus grands, d'une meilleure hiérarchie visuelle et d'un espace supplémentaire entre les éléments de contenu, afin de rendre les interfaces plus faciles et plus confortables.
Utilisez nos composants et modèles mis à jour pour améliorer l'apparence de nos interfaces utilisateur sur toutes les tailles d'écran.
Qualité de l'application
Nos consignes relatives à la qualité sont classées en trois niveaux. Offrez la meilleure expérience possible à vos utilisateurs en respectant les consignes des trois niveaux.
Consignes relatives à la qualité
|
Prête pour toutes les tailles d'écran |
Annonces responsives et optimisées |
Adaptable et différencié |
Utiliser des mises en page standards établies
Utilisez des mises en page standards établies pour aider vos interfaces utilisateur à s'adapter de manière fluide à différentes tailles d'appareils.
Nos mises en page standards ont été soigneusement développées pour offrir une expérience de haute qualité sur toutes les tailles d'écran.