La conception adaptative consiste à concevoir des mises en page qui s'adaptent à des points d'arrêt et appareils spécifiques.
Pour implémenter efficacement des mises en page adaptatives :
Commencez par tenir compte de la largeur de la classe de fenêtre de l'appareil pour déterminer les modifications de mise en page, puis ajustez la hauteur. Assurer la compatibilité avec différentes tailles d'écran
Android s'appuie sur des concepts de conception responsifs, semblables à ceux du développement Web, en utilisant des grilles et des images flexibles pour créer des mises en page qui s'adaptent efficacement à leur contexte.
Permettez aux mises en page de s'adapter à différentes tailles grâce à des méthodes adaptatives : reflow, reveal, changement de présentation.
Évitez de verrouiller votre application en mode portrait uniquement. Cela entraîne une mise au format letterbox lorsque votre application est redimensionnée.
À éviter
Pour obtenir des consignes de conception sur l'adaptation des mises en page aux tailles d'écran étendues, consultez le guide du développeur Compatibilité avec différentes tailles d'écran dans Compose et la page Appliquer une mise en page de M3. Vous pouvez également consulter la galerie Android Canonical pour grand écran pour trouver l'inspiration et découvrir comment implémenter des mises en page pour grand écran.
Pensez adaptatif
La conception de votre application doit être adaptative par défaut. Le marché mobile Android est en constante évolution. Vous ne pouvez donc pas considérer le mobile uniquement comme un téléphone. Il doit plutôt inclure tous les appareils, des téléphones aux tablettes, en passant par les pliables et tout ce qui se trouve entre les deux.
Si certaines fonctionnalités et certains cas d'utilisation peuvent ne pas avoir de sens sur toutes les tailles d'écran ou tous les facteurs de forme, la conception adaptative offre à vos utilisateurs une plus grande liberté en termes d'ergonomie, de facilité d'utilisation et de qualité de l'application.
Méthodes et qualité
Vous pouvez commencer par concevoir des écrans clés (communiquer les concepts essentiels ou votre application) avec des tailles de classe comme points d'arrêt pour servir de guide pour le reste de votre application. Ces expériences héroïques peuvent mettre en évidence les qualités adaptatives et de facteur de forme différenciées. Vous pouvez également concevoir du contenu réactif au niveau fondamental en indiquant comment le contenu doit être contraint, développé ou redistribué.
Dans cet exemple, la navigation et le contenu sont réorganisés, flexibles et mis à l'échelle pour une navigation plus ergonomique. La grille de mise en page passe d'une orientation verticale à une orientation multicolonne. L'adresse dans la barre d'application et les filtres sont réorganisés et flexibles pour s'adapter à la grille de mise en page.
À faire
À éviter
À faire
À faire
À éviter
Assurez-vous que les entrées et les boutons ne sont pas étirés.
Pensez en termes de confinement et de volets.
Utilisez le concept de conteneur de volets pour regrouper le contenu des mises en page adaptatives. Par exemple, l'exemple utilisé est un écran de détails, un volet qui pourrait être affiché dans une mise en page liste/détails.
Les tailles compactes doivent s'en tenir à une mise en page à un seul volet.
Le format moyen peut utiliser des mises en page à un ou deux volets.
Les grands et très grands écrans peuvent utiliser des mises en page à plusieurs volets.
Utilisez des conteneurs intrinsèques et visuels pour regrouper les éléments. Les volets peuvent se déplacer, se cacher, se développer, être contraints ou apparaître. Penser avec des volets facilite la conception sur tous les appareils mobiles.
Bien que les volets ne soient pas essentiels sur les grands écrans, vous devez tout de même penser au contenu en termes de regroupements de confinement pour plus de flexibilité.
Autorisez les éléments à se déplacer et à se réorganiser en vous concentrant sur la façon dont ils s'adaptent à la grille. Envisagez le changement vertical pour les éléments et combinez-le avec les contraintes et les changements de présentation.
Tenez compte de l'échelle et de la quantité de contenu affiché.
Une petite grille de vidéos sur un téléphone devient serrée et écrasante sur une tablette. Mettez à jour l'échelle de l'élément d'UI en fonction de la taille et de la densité de l'écran, et de l'entrée.
Une application de haute qualité doit répondre aux critères du niveau différencié des consignes relatives à la qualité essentielle des applications et à la qualité sur grand écran.
Pour en savoir plus sur les mises en page, consultez la page Comprendre la mise en page de Material Design 3 (M3).
Profitez des tailles de facteurs de forme uniques.
N'oubliez pas non plus les tailles d'écran plus petites et les différents formats, car les téléphones Android sont disponibles dans différentes tailles et les appareils pliables peuvent inclure un petit écran de couverture sur lequel votre application peut s'afficher.
Pour les mises en page basées sur les commandes, comme les lecteurs multimédias, autorisez le contenu à se réorganiser et à se révéler.
Pour aider les utilisateurs à s'adapter, utilisez un élément d'ancrage, comme un grand bouton de lecture, pour adapter le contenu autour et l'illustration principale devient l'arrière-plan sur l'écran de couverture.
Au-delà des classes de taille
Bien que la taille de la fenêtre soit un facteur courant pour la conception adaptative, votre application doit également être prête à ce que les utilisateurs branchent des moniteurs et des périphériques d'entrée, regardent l'écran à différentes distances et modifient la position de leur appareil. Il est possible de vérifier ces changements à l'aide de l'API mediaQuery, qui vous permet d'ajouter des nuances lorsque vous concevez la façon dont votre application adapte des éléments d'UI spécifiques à certains cas d'utilisation. Adaptez la conception de votre application au niveau des composants ou des volets, plutôt que de concevoir des écrans entiers par taille, entrée, facteur de forme et position.
Pour en savoir plus sur l'interaction avec les entrées, consultez les guides sur l'interaction avec l'expérience sur ordinateur.
Consultez l'étude de cas Pawparrazzi, qui a été conçue et développée à l'aide des dernières API adaptatives et des derniers conseils de conception.
