Maçonnerie vs grille bento
La maçonnerie agence des cartes de différentes hauteurs en colonnes. Une grille bento utilise des tailles de cartes planifiées pour montrer ce qui est le plus important.
Utilisez le maçon pour de nombreux éléments séparés de différentes hauteurs. Utilisez une grille bento pour un petit ensemble dont la taille montre l'importance.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Mise en page en maçonnerie
Une disposition en masonry empile des éléments de hauteurs différentes dans des colonnes. Les éléments remplissent les espaces vides de haut en bas sans partager les mêmes lignes.
Un tableau d'inspiration organise des cartes hautes et larges en colonnes équilibrées avec peu d'espace vide.
- Utilisez-le lorsque
- Utilisez-le pour parcourir des images lorsque la comparaison stricte ligne par ligne n'a pas d'importance.
- Ne l'utilisez pas lorsque
- Évitez-le lorsque l'ordre source, l'ordre du clavier ou le chemin de parcours attendu devient confus.
- Nom utilisé dans le code
columns / masonry
Grille Bento
Une grille bento range des blocs de différentes tailles dans un seul ensemble. Les plus grands blocs montrent ce qui compte le plus.
Un aperçu de produit donne une grande tuile au graphique en direct. Les nombres moins importants ont des tuiles plus petites.
- Utilisez-le lorsque
- Utilisez-le lorsque le contenu a un véritable ordre d'importance. Laissez la mise en page montrer cet ordre.
- Ne l'utilisez pas lorsque
- Ne jamais étendre des carreaux au hasard. Cela peut perturber l'ordre de lecture et ajouter du style sans signification.
- Nom utilisé dans le code
grid-column: span n
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| Mise en page en maçonnerieMasonry Layout | Utilisez-le pour parcourir des images lorsque la comparaison stricte ligne par ligne n'a pas d'importance. | Évitez-le lorsque l'ordre source, l'ordre du clavier ou le chemin de parcours attendu devient confus. | columns / masonry |
| Grille BentoBento Grid | Utilisez-le lorsque le contenu a un véritable ordre d'importance. Laissez la mise en page montrer cet ordre. | Ne jamais étendre des carreaux au hasard. Cela peut perturber l'ordre de lecture et ajouter du style sans signification. | grid-column: span n |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Mise en page en maçonnerie (Masonry Layout), Grille Bento (Bento Grid) pour notre flux utilisateur réel. Utilisez cette règle : La maçonnerie agence des cartes de différentes hauteurs en colonnes. Une grille bento utilise des tailles de cartes planifiées pour montrer ce qui est le plus important. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.