Android est compatible avec un large éventail d'appareils, de formats et de tailles d'écran. Par conséquent, concevoir des mises en page spécifiques au pixel près est non seulement inefficace, mais peut également avoir un impact négatif sur l'expérience utilisateur. Concevez, créez et réfléchissez de manière adaptative. Nous avons récemment introduit de nouvelles API qui apportent des concepts de conception familiers pour vous aider à créer des mises en page adaptatives.
Pawparazzi est un exemple d'application qui illustre ces concepts. Elle est conçue et créée pour mettre en évidence la conception adaptative à l'aide d'API adaptatives, telles que Grid et Flexbox.
Réfléchir de manière adaptative ne consiste pas seulement à concevoir avec des points d'arrêt, mais aussi à penser le contenu dans des conteneurs flexibles.
Tout est une grille !
Disposer d'une base pour structurer le contenu permet de suivre de bonnes pratiques de conception et de décider comment le contenu doit s'adapter. Android dispose d'une grille de base sous-jacente de 8 dp à laquelle nous pouvons aligner tout le contenu au niveau micro.
Pawparazzi utilise une grille de mise en page hiérarchique, plutôt qu'une grille modulaire uniforme ou une grille de colonnes unidirectionnelle. Cela signifie que les colonnes et les lignes qui la composent sont déterminées en fonction de la hiérarchie du contenu.
Le choix du type de grille doit dépendre du contenu. Commencez par le contenu de votre application et réfléchissez à la façon dont il est regroupé. Cela permet de définir la structure globale de la mise en page. Pour en savoir plus sur la réflexion en termes de volets, consultez Grilles et unités , Structure du contenu et Premiers pas sur ordinateur.
Pour Pawparazzi, l'objectif principal était de présenter les animaux de compagnie de l'équipe de différentes manières, en commençant par une présentation générale, puis des détails et enfin un classement. Cela signifiait que la galerie d'animaux de compagnie occuperait le volet de contenu principal et une plus grande partie de la grille, suivie des éléments de navigation et de filtre. Lorsque plus d'espace est disponible, la galerie peut s'étendre sur plusieurs lignes, afficher plus d'animaux de compagnie et afficher leurs détails en même temps. Ce principe adaptatif est appelé "reveal" (révéler) ou "afficher plus de contenu sur des mises en page plus grandes".
L'objectif principal de l'application et le contenu ont permis de déterminer comment et quand la grille de mise en page devrait s'adapter : quelles tailles de classe de fenêtre, quel emplacement de charnière et quelles orientations d'appareil.
À partir de la grille de mise en page, les sous-grilles permettent de créer des structures de contenu plus flexibles. Les galeries sont elles-mêmes une grille. Pour les tailles compactes, une grille à deux colonnes est utilisée.
Les grilles sont un concept de mise en page bidirectionnel. Le contenu peut donc circuler à la fois horizontalement et verticalement.
Cela peut être utilisé pour créer des mises en page plus intéressantes ou une hiérarchie visuelle plus claire, comme "Animal de compagnie de la semaine", où la grille est utilisée pour présenter les animaux de compagnie les mieux classés. La grille peut être de 2x4, mais la première place s'étend sur deux colonnes et deux lignes.
Tout cela est réalisé avec l'API Grid.
Flexibilité des composants
Alors que la grille couvre la structure de contenu macro et micro, Flexbox permet de gérer les composants qui doivent répondre à leur contenu. Cela est utilisé pour le contenu unidirectionnel, où seule l'orientation horizontale ou verticale est dictée. Par exemple, les chips de filtre peuvent répondre à leurs libellés et la zone de filtre peut s'étendre en fonction du nombre de filtres. Utilisez "Reveal" sur les grands écrans pour afficher plus de filtres à la fois.
Requêtes nuancées
En concevant une grille de mise en page et en utilisant Grid et Flexbox, nous autorisons une mise en page adaptative sur plusieurs écrans et nous pouvons même prendre en charge des formats uniques comme les appareils pliables. Mais qu'en est-il des différents contextes utilisateur ? Les utilisateurs Android peuvent se connecter à un écran ou brancher une souris. MediaQuery nous permet de prendre des décisions de conception nuancées pour nous adapter aux utilisateurs dans tous les contextes.
Dans Pawparazzi, cela signifiait tirer parti des entrées de pointeur précises, avec des zones cibles plus petites et un contenu plus dense.
Exemples d'interface utilisateur adaptative Android
Découvrez des conceptions inspirantes et optimisées pour les appareils à grand écran. Parcourez les modèles d'interface utilisateur/d'expérience utilisateur pour les catégories d'applications populaires, y compris les médias, la créativité, les jeux et plus encore.
