Mise en page
La position, l'espacement et l'alignement portent la hiérarchie avant même qu'un mot ne soit lu. Cette compétence construit cette structure et la soumet à des tests de résistance : redimensionnez-la, traduisez-la, miroitez-la pour les langues RTL.
Écrivez chaque correction dans le système de style du projet. Les chiffres ci-dessous sont des points de départ pour des interfaces sans système de densité établi, et lorsqu'il en existe un, utilisez-le tel qu'écrit plutôt qu'un substitut d'apparence familière. Conservez les éléments délibérés de l'interface native, les outils professionnels compacts et les jetons du projet là où ils passent encore les tests de résistance.
Les zones de contact et le comportement de focus appartiennent à better-accessibility. Les rayons, les ombres et l'animation appartiennent à better-ui. La longueur des lignes et l'espacement du texte appartiennent à better-typography.
Grouper avec l'espace, pas avec les lignes
L'espace groupe en premier, les formes d'arrière-plan en second, les lignes de séparation en dernier et seulement là où l'espace seul ne peut pas porter la structure. L'écart entre les groupes doit être au moins 2× l'écart au sein d'un groupe (8px intra-groupe à 16px+ inter-groupe), sinon le regroupement est perçu comme du bruit. Les bords d'alignement et l'ordre d'importance sont dans grouping-and-alignment.md.
Garder les contrôles distincts du contenu
Donnez à chaque élément interactif une forme d'arrière-plan, une bordure ou une zone de placement cohérente. Un contrôle stylisé comme le texte statique à côté ne se lit pas comme un contrôle.
Aligner sur des bords partagés
Choisissez des bords d'alignement et tenez-vous y ; chaque bord qui dépasse est perçu comme du bruit. Utilisez un pas d'espacement du projet par niveau de subordination, où 16px est une valeur par défaut utile.
Utilisez des propriétés logiques pour la mise en page dépendante de la direction : padding-inline-start, margin-inline-end. Réservez les left et right physiques pour une géométrie véritablement physique.
Ordonner par importance
Le contenu le plus important se trouve près du haut et du bord principal. L'ordre de lecture va de haut en bas, du bord principal au bord de fin. Pensez en termes de bord principal et bord de fin, pas de gauche et de droite.
Suggérer le contenu masqué
La divulgation progressive nécessite un indicateur visible. Utilisez le signal établi du projet, ou laissez l'élément suivant apparaître 16–32px au-delà du bord de défilement, ou affichez un contrôle de divulgation. Le contenu masqué sans aucun signal pourrait tout aussi bien ne pas exister.
Espace de respiration entre les cibles
Sans système de densité établi, commencez par 12px entre les contrôles bordés ou remplis adjacents et 24px autour des contrôles sans bordure, uniquement textuels ou avec icônes. Les mises en page compactes peuvent utiliser moins, tant que les zones de contact de better-accessibility ne se chevauchent pas et que les contrôles restent distincts. Les marges de mise en page et les recettes de points de rupture sont dans spacing-and-adaptivity.md.
Rentrer les boutons des bords
Dans les mises en page de contenu, gardez les boutons pleine largeur à l'intérieur des marges de mise en page avec un rayon visible, en commençant près de 16px en ligne sur mobile. Les actions bord à bord fonctionnent lorsqu'elles suivent l'interface native établie, tiennent compte des zones de réserve et restent distinctes de l'interface système.
Le contenu déborde, les contrôles flottent
Les arrière-plans et les médias s'étendent jusqu'aux bords de la fenêtre d'affichage. Les contrôles et le texte restent à l'intérieur des marges de mise en page et des zones de réserve (env(safe-area-inset-*)). L'interface native collante flotte au-dessus de la couche de contenu plutôt que de la bloquer.
Tenir la structure jusqu'à ce qu'elle casse
Les points de rupture proviennent du contenu, pas de presets d'appareils. Conservez la disposition développée tant qu'elle tient vraiment et réduisez tard. Préférez les requêtes de conteneur pour l'adaptation au niveau des composants, et testez d'abord les tailles les plus petites et les plus grandes.
Planifier pour la croissance et le rognage
Les chaînes traduites s'allongent, et les courtes s'allongent proportionnellement plus, donc une étiquette de bouton d'un seul mot est la chose la plus risquée à l'écran. Ne mettez aucune largeur ou hauteur fixe sur un conteneur de texte, et laissez les lignes se répartir. Testez avec de la pseudo-localisation et une locale représentative plutôt que de budgétiser un pourcentage.
Ne placez jamais une action critique là où le redimensionnement ou le défilement la rogne. Gardez-la dans le flux normal, ou dans une interface stable adaptée au produit.
Avant de terminer
| Erreur | Correction |
|---|---|
margin-left / padding-right dans une mise en page localisable | margin-inline-start / padding-inline-end |
| Bouton de mise en page de contenu touche le bord de la fenêtre | Rentrer dans les marges du projet ; garder l'interface native intentionnelle |
| Points de rupture à 768/1024 parce que ce sont les valeurs par défaut | Casser là où le contenu ne tient effectivement plus |
| Conteneur de texte à largeur fixe dimensionné pour une langue | max-width et retour à la ligne ; tester la pseudo-localisation |
| Action primaire en bas d'un panneau sujet au rognage | Positionnement collant ou interface stable avec remplissage de zone de réserve |
Signalement
Sévérité. HIGH bloque le contenu ou une action à une fenêtre d'affichage prise en charge. MEDIUM nuit à la hiérarchie, à l'ordre de lecture ou à l'adaptabilité. LOW est un alignement isolé ou un polissage d'espacement.
Vérification. Sans navigateur : propriétés logiques à la place des propriétés physiques, requêtes conteneur et média par rapport à la liste des fenêtres d'affichage prises en charge et ordre DOM par rapport à l'ordre de lecture prévu. Avec un navigateur : chaque largeur prise en charge, zoom à 200% et miroir RTL. Signalez chaque vérification que vous n'avez pas pu exécuter comme Non vérifié.
Format. Groupez les constatations sous le principe que chacune viole, ordonnées par sévérité, une ligne par cause racine listant chaque emplacement où elle apparaît :
| Sévérité | Emplacement | Avant | Après | Pourquoi |
|---|
Emplacement est chemin/vers/fichier:ligne. Pourquoi nomme le principe et l'impact utilisateur.
Terminez par Bloquer lorsque tout HIGH persiste, Approuver sinon, en laissant le reste dans le tableau comme travail à faire. Ne Approuvez jamais une couverture que vous n'avez pas inspectée. S'il n'y a rien à signaler, indiquez « Aucune constatation de mise en page exploitable » et rapportez la vérification.