Alvenaria vs. Grade Bento
A alvenaria organiza cartões de diferentes alturas em colunas. Uma grade bento usa tamanhos de cartões planejados para mostrar o que é mais importante.
Use masonry para muitos itens separados com alturas diferentes. Use uma grade tipo bento para um conjunto pequeno cujo tamanho mostra importância.
Veja o que cada padrão faz
Experimente cada exemplo. Depois leia sobre o trabalho para o qual ele foi feito.
Layout de alvenaria
Um layout masonry encaixa itens de alturas diferentes em colunas. Os itens preenchem espaços verticais sem compartilhar linhas da mesma fileira.
Um quadro de inspiração encaixa cartões altos e largos em colunas equilibradas com pouco espaço vazio.
- Use-o quando
- Use-o para navegar por imagens quando a comparação estrita linha a linha não for importante.
- Não o use quando
- Evite quando a ordem do código fonte, a ordem do teclado ou o caminho esperado de leitura ficam confusos.
- Nome usado no código
columns / masonry
Grade Bento
Um grid bento agrupa blocos de tamanhos diferentes em um único layout. Espaços maiores mostram qual conteúdo é mais importante.
Uma visão geral do produto dá um bloco grande para o gráfico ao vivo. Os números menos importantes ganham blocos menores.
- Use-o quando
- Use-o quando o conteúdo tiver uma verdadeira ordem de importância. Deixe o layout mostrar essa ordem.
- Não o use quando
- Nunca espalhe tiles ao acaso. Isso pode quebrar a ordem de leitura e adicionar estilo sem significado.
- Nome usado no código
grid-column: span n
Comparação rápida
| Padrão de UI | Melhor para | Não para | Nome usado no código |
|---|---|---|---|
| Layout de alvenariaMasonry Layout | Use-o para navegar por imagens quando a comparação estrita linha a linha não for importante. | Evite quando a ordem do código fonte, a ordem do teclado ou o caminho esperado de leitura ficam confusos. | columns / masonry |
| Grade BentoBento Grid | Use-o quando o conteúdo tiver uma verdadeira ordem de importância. Deixe o layout mostrar essa ordem. | Nunca espalhe tiles ao acaso. Isso pode quebrar a ordem de leitura e adicionar estilo sem significado. | grid-column: span n |
Antes de lançar
- 01
Anote o que a pessoa precisa fazer.
- 02
Teste o teclado, foco, toque, zoom, carregamento, estados vazio e de erro.
- 03
Certifique-se de que as pessoas podem obter as mesmas informações sem passar o mouse ou movimento.
- 04
Teste com conteúdo real em telas pequenas e grandes.
Pedido de comparação para copiar
Copie isso quando o seu time precisar de ajuda para escolher entre os padrões.
Escolha o melhor padrão de Layout de alvenaria (Masonry Layout), Grade Bento (Bento Grid) para o nosso fluxo real de usuário. Use esta regra: A alvenaria organiza cartões de diferentes alturas em colunas. Uma grade bento usa tamanhos de cartões planejados para mostrar o que é mais importante. Anote a tarefa, a quantidade de conteúdo e o custo de parar o fluxo. Teste o comportamento de teclado, toque, carregamento, erro e movimento reduzido. Explique sua escolha e depois construa a menor versão acessível com o sistema de design do projeto.