Las cuadrículas presentan elementos en un diseño de cuadrícula.
Esta plantilla es útil cuando los usuarios dependen principalmente de las imágenes para realizar sus selecciones.
Esta plantilla se puede incorporar en la plantilla de pestaña para brindar navegación con pestañas.
Incluye lo siguiente:
- Encabezado con una barra de acciones opcional (la barra de acción se reemplaza por pestañas cuando esta plantilla se incorpora en la plantilla de pestaña)
- Elementos de cuadrícula (consulta la nota a continuación), cada uno con un ícono o una imagen de tamaño grande
- Texto principal para cada elemento de la cuadrícula (obligatorio)
- Texto secundario para cada elemento de la cuadrícula (opcional)
- Botón de acción flotante opcional
Ejemplos de plantillas de cuadrícula
Los siguientes ejemplos de Android Auto y SO Android Automotive (AAOS) se compilaron con la plantilla de Grid.
Cuadrícula en la que algunos elementos tienen texto secundario (ejemplo de Android Auto)
Cuadrícula con el ícono de un elemento reemplazado temporalmente por un ícono giratorio de carga y el texto principal de otro elemento truncado porque su longitud supera el espacio disponible (ejemplo de AAOS)
Requisitos de UX de las plantillas de cuadrícula
Desarrolladores de apps:
| SE RECOMIENDA | Limita la longitud de las strings de texto principales y secundarias para evitar el truncamiento. |
| SE RECOMIENDA | Tener una acción asociada con cada elemento de la cuadrícula (no se recomiendan los elementos solo informativos) |
| SE RECOMIENDA | Indica claramente el estado del elemento (para los elementos de cuadrícula que tienen varios estados, como seleccionado y no seleccionado) mediante variaciones de imagen, ícono o texto. |
| NO DEBES | Incluye una barra de acciones y un botón de acción flotante al mismo tiempo. |
| MAYO | Muestra un ícono giratorio de carga en lugar del ícono o la imagen de un elemento de la cuadrícula cuando hay una acción asociada con el elemento en curso. |