Mauerwerk vs. Bento-Raster
Mauerwerk packt Karten unterschiedlicher Höhe in Spalten. Ein Bento-Raster verwendet geplante Kartengrößen, um das Wichtigste zu zeigen.
Verwenden Sie Masonry für viele separate Elemente mit unterschiedlichen Höhen. Verwenden Sie ein Bento-Grid für ein kleines Set, dessen Größe Wichtigkeit zeigt.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Mauerwerk-Layout
Ein Masonry-Layout packt Dinge unterschiedlicher Höhe in Spalten. Sie füllen vertikale Lücken, ohne sich Zeilen zu teilen.
Ein Inspirationsboard passt hohe und breite Karten in ausgewogene Spalten mit wenig leerem Platz.
- Verwenden Sie es, wenn
- Verwenden Sie es zum Durchsuchen von Bildern, wenn ein strikter Zeilen-für-Zeilen-Vergleich nicht wichtig ist.
- Nutze es nicht, wenn
- Vermeide es, wenn die Quell-Reihenfolge, die Reihenfolge für die Tastatur oder der erwartete Lese-Pfad verwirrend werden.
- In Code verwendeter Name
columns / masonry
Bento Grid
Ein Bento-Grid packt Kacheln unterschiedlicher Größe in ein Layout. Größere Bereiche zeigen, welcher Inhalt am wichtigsten ist.
Eine Produktübersicht gibt dem Live-Diagramm eine große Kachel. Weniger wichtige Zahlen bekommen kleinere Kacheln.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn Inhalte eine echte Wichtigkeitsreihenfolge haben. Lassen Sie das Layout diese Reihenfolge zeigen.
- Nutze es nicht, wenn
- Verteile Kacheln niemals zufällig. Das kann die Leserichtung stören und Stil ohne Bedeutung hinzufügen.
- In Code verwendeter Name
grid-column: span n
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| Mauerwerk-LayoutMasonry Layout | Verwenden Sie es zum Durchsuchen von Bildern, wenn ein strikter Zeilen-für-Zeilen-Vergleich nicht wichtig ist. | Vermeide es, wenn die Quell-Reihenfolge, die Reihenfolge für die Tastatur oder der erwartete Lese-Pfad verwirrend werden. | columns / masonry |
| Bento GridBento Grid | Verwenden Sie es, wenn Inhalte eine echte Wichtigkeitsreihenfolge haben. Lassen Sie das Layout diese Reihenfolge zeigen. | Verteile Kacheln niemals zufällig. Das kann die Leserichtung stören und Stil ohne Bedeutung hinzufügen. | grid-column: span n |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Mauerwerk-Layout (Masonry Layout), Bento Grid (Bento Grid) für unseren echten Nutzerfluss. Nutze diese Regel: Mauerwerk packt Karten unterschiedlicher Höhe in Spalten. Ein Bento-Raster verwendet geplante Kartengrößen, um das Wichtigste zu zeigen. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.