Créez un flux et un rythme flexibles grâce à des méthodes de structuration et de confinement pour vos contenus.
1. Structure de base
Pour commencer à créer une structure solide avec des limites cohérentes, ajoutez des marges et des colonnes à vos mises en page.
Les marges permettent d'espacer le contenu et les bords gauche et droit de l'écran. Une valeur de marge standard pour le dimensionnement compact est de 16 dp, mais les marges doivent s'adapter aux écrans plus grands. Le contenu et les actions du corps de votre application doivent rester dans ces marges et s'y aligner.
Vous pouvez également définir des zones de sécurité ou des marges intérieures à cette étape. Les encarts de barre système empêchent les actions cruciales de se trouver sous les barres système. Pour en savoir plus, consultez Dessiner votre contenu derrière les barres système.
Utilisez des colonnes pour créer une structure de grille flexible permettant un alignement cohérent et pour définir la disposition verticale en divisant le contenu dans la zone du corps. Le contenu est placé dans les zones de l'écran contenant des colonnes. Ces colonnes structurent votre mise en page et vous permettent d'organiser facilement les éléments.
Utilisez une grille de colonnes pour aligner le contenu sur une grille sous-jacente tout en conservant une taille flexible. La grille de colonnes peut s'adapter à différents facteurs de forme en modifiant la taille et le nombre de colonnes en fonction de la taille de l'écran à certains moments, tout en permettant au contenu de s'adapter également. Évitez d'être trop précis avec la grille de colonnes. C'est à cela que sert la grille de référence : fournir des unités d'espacement cohérentes.
Faites attention à ne pas établir de grille de lignes d'accompagnement, car cela peut limiter la mise à l'échelle horizontale du contenu en fonction des orientations et des facteurs de forme. En général, l'établissement de règles de marge intérieure permet d'obtenir la cohérence visuelle nécessaire.
Commencer à ajouter du texte à la structure de mise en page. Les marges protègent le contenu des bords de l'écran. Les colonnes fournissent une structure d'espacement et d'alignement cohérente.
2. Appliquer le confinement
Utilisez la structuration pour regrouper visuellement les éléments.
La structuration consiste à utiliser des espaces négatifs et des éléments visibles pour créer un regroupement visuel. Un conteneur est une forme qui représente une zone fermée. Dans une même mise en page, vous pouvez regrouper les éléments qui partagent un contenu ou une fonctionnalité similaires, et les séparer des autres éléments à l'aide d'espaces vides, de typographies et de séparateurs.
Vous pouvez regrouper des éléments similaires avec des espaces négatifs ou des divisions visibles pour accompagner l'utilisateur tout au long du contenu.
La structuration implicite utilise des espaces négatifs pour grouper visuellement du contenu et créer des limites de conteneur. La structuration explicite, quant à elle, utilise des objets comme des lignes et des cartes de séparation pour grouper le contenu.
La figure suivante montre un exemple d'utilisation de la mise en forme implicite pour contenir l'en-tête et le corps principal. La grille de colonnes permet d'aligner et de créer des regroupements. Les points forts sont explicitement contenus dans les fiches. Utilisation de l'iconographie et de la hiérarchie typographique pour une meilleure séparation visuelle.
3. Positionner le contenu
Android propose plusieurs façons de gérer les éléments de contenu dans leurs conteneurs respectifs, ce qui peut aider à les positionner de manière appropriée, y compris la gravité, l'espacement et la mise à l'échelle.
Gravity est une norme permettant de placer un objet dans un conteneur potentiellement plus grand pour des cas d'utilisation spécifiques. La figure suivante montre des exemples d'objets de positionnement au début et au centre (1), en haut et au centre horizontal (2), en bas à gauche (3), et à la fin et à droite (1).
4. Mettre à l'échelle le contenu
La mise à l'échelle est essentielle pour s'adapter au contenu dynamique, à l'orientation de l'appareil et à la taille de l'écran. Les éléments peuvent rester fixes ou être mis à l'échelle.
Il est important de noter comment les images sont affichées dans leurs conteneurs avec mise à l'échelle et positionnement pour s'assurer qu'elles apparaissent comme vous le souhaitez, quel que soit le contexte de l'appareil. Sinon, l'élément principal de l'image pourrait être coupé, les images pourraient être trop petites ou trop grandes pour la mise en page, ou d'autres effets indésirables pourraient se produire.
Le contenu qui n'est pas annoté peut s'afficher différemment de ce que vous attendez ou souhaitez.
Contenu épinglé
De nombreux éléments sont dotés d'interactions, de défilements et de positionnements intégrés avec des emplacements ou des échafaudages. Certains éléments peuvent être modifiés pour rester fixes au lieu de réagir au défilement, par exemple les boutons d'action flottants (FAB) qui hébergent des actions critiques.
Emplacement D
Utilisez AlignmentLine pour créer des lignes d'alignement personnalisées que les mises en page parentes pourront utiliser pour aligner et positionner leurs enfants.
À faire
À éviter
Mise en page des composants
Les composants Material 3 fournissent leurs propres configurations et états pour l'interaction et le contenu.
Compose propose des mises en page pratiques pour combiner des composants Material et des modèles d'écran courants. Les composables tels que Scaffold fournissent des emplacements pour divers composants et autres éléments d'écran. En savoir plus sur les composants et la mise en page Material