Muratura vs. griglia Bento
La muratura inserisce carte di altezze diverse in colonne. Una griglia bento usa dimensioni delle carte pianificate per mostrare ciò che conta di più.
Usa il masonry per molti elementi separati con altezze diverse. Usa una griglia bento per un piccolo set la cui dimensione mostra importanza.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Layout a muratura
Un layout a masonry raggruppa elementi di altezze diverse in colonne. Gli elementi riempiono gli spazi vuoti verticali senza dividere le righe.
Una bacheca d'ispirazione fa stare carte alte e larghe in colonne bilanciate con poco spazio vuoto.
- Usalo quando
- Usalo per sfogliare immagini quando il confronto rigoroso riga per riga non è importante.
- Non usarlo quando
- Evitalo quando l'ordine di origine, l'ordine della tastiera o il percorso di lettura previsto creano confusione.
- Nome usato nel codice
columns / masonry
Griglia Bento
Una griglia bento impacchetta riquadri di dimensioni diverse in un solo layout. Le campate più grandi mostrano quali contenuti contano di più.
Una panoramica del prodotto dà al grafico in diretta un riquadro grande. I numeri meno importanti ottengono riquadri più piccoli.
- Usalo quando
- Usalo quando il contenuto ha un vero ordine di importanza. Lascia che il layout mostri quell'ordine.
- Non usarlo quando
- Non posizionare mai le tessere a caso. Può rompere l'ordine di lettura e aggiungere stile senza significato.
- Nome usato nel codice
grid-column: span n
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| Layout a muraturaMasonry Layout | Usalo per sfogliare immagini quando il confronto rigoroso riga per riga non è importante. | Evitalo quando l'ordine di origine, l'ordine della tastiera o il percorso di lettura previsto creano confusione. | columns / masonry |
| Griglia BentoBento Grid | Usalo quando il contenuto ha un vero ordine di importanza. Lascia che il layout mostri quell'ordine. | Non posizionare mai le tessere a caso. Può rompere l'ordine di lettura e aggiungere stile senza significato. | grid-column: span n |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Layout a muratura (Masonry Layout), Griglia Bento (Bento Grid) per il nostro reale flusso utente. Usa questa regola: La muratura inserisce carte di altezze diverse in colonne. Una griglia bento usa dimensioni delle carte pianificate per mostrare ciò che conta di più. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.