Mampostería vs. cuadrícula Bento
La mampostería agrupa tarjetas de diferentes alturas en columnas. Una cuadrícula bento usa tamaños de tarjeta planeados para mostrar lo que más importa.
Usa mampostería para muchos elementos separados con diferentes alturas. Usa una cuadrícula estilo bento para un conjunto pequeño cuyo tamaño muestra importancia.
Ver lo que hace cada patrón
Prueba cada ejemplo. Luego lea sobre el trabajo para el que fue hecho.
Diseño de mampostería
Un diseño de mampostería acomoda artículos de diferentes alturas en columnas. Los artículos llenan los espacios vacíos verticales sin compartir las mismas líneas de fila.
Un tablero de inspiración junta tarjetas altas y anchas en columnas equilibradas con poco espacio vacío.
- Úsalo cuando
- Úselo para explorar imágenes cuando la comparación estricta fila por fila no sea importante.
- No lo uses cuando
- Evítalo cuando el orden del código, el orden del teclado o el camino esperado al leer se vuelvan confusos.
- Nombre usado en código
columns / masonry
Cuadrícula Bento
Una cuadrícula tipo bento junta bloques de diferentes tamaños en un solo diseño. Los espacios más grandes muestran qué contenido es el más importante.
Una vista general del producto le da un bloque grande al gráfico en vivo. Los números menos importantes reciben bloques más pequeños.
- Úsalo cuando
- Úselo cuando el contenido tenga un verdadero orden de importancia. Deje que el diseño muestre ese orden.
- No lo uses cuando
- Nunca extiendas las fichas al azar. Puede romper el orden de lectura y agregar estilo sin significado.
- Nombre usado en código
grid-column: span n
Comparación rápida
| Patrón de UI | Mejor para | No para | Nombre usado en código |
|---|---|---|---|
| Diseño de mamposteríaMasonry Layout | Úselo para explorar imágenes cuando la comparación estricta fila por fila no sea importante. | Evítalo cuando el orden del código, el orden del teclado o el camino esperado al leer se vuelvan confusos. | columns / masonry |
| Cuadrícula BentoBento Grid | Úselo cuando el contenido tenga un verdadero orden de importancia. Deje que el diseño muestre ese orden. | Nunca extiendas las fichas al azar. Puede romper el orden de lectura y agregar estilo sin significado. | grid-column: span n |
Antes de lanzarlo
- 01
Escribe lo que la persona necesita hacer.
- 02
Probar el teclado, enfoque, tacto, zoom, carga, estados vacíos y de error.
- 03
Asegurarse de que las personas puedan obtener la misma información sin pasar el cursor o movimiento.
- 04
Probar con contenido real en pantallas pequeñas y grandes.
Petición de comparación que puedes copiar
Copia esto cuando tu equipo necesite ayuda para elegir entre los patrones.
Elige el mejor patrón de Diseño de mampostería (Masonry Layout), Cuadrícula Bento (Bento Grid) para nuestro flujo de usuario real. Usa esta regla: La mampostería agrupa tarjetas de diferentes alturas en columnas. Una cuadrícula bento usa tamaños de tarjeta planeados para mostrar lo que más importa. Anota la tarea, la cantidad de contenido y el costo de detener el flujo. Comprueba el teclado, toque, carga, errores y movimiento reducido. Explica tu elección y luego crea la versión accesible más pequeña usando el sistema de diseño del proyecto.