Esta página se ha traducido con Cloud Translation API.

Cuadrículas

La vista de cuadrícula muestra dos o más columnas de imágenes que representan elementos de contenido, con un breve texto debajo de cada imagen. Esta vista es ideal cuando los usuarios se basan principalmente en imágenes para realizar sus selecciones.

Las cuadrículas se desplazan verticalmente y pueden variar en tamaño, espaciado y número de columnas. El contenido de la cuadrícula también se puede agrupar en categorías.

Componente de elementos de lista

Las listas proporcionan una forma alternativa de mostrar contenido que requiere más texto explicativo.

Anatomía

Las cuadrículas contienen texto y controles de interfaz de usuario. Dado que los usuarios deben responder a ellas, nunca deben quedar ocultas, ni por otros elementos ni por el borde de la pantalla.

1. Elemento de cuadrícula
2. Texto primario y secundario
3. Fondo de cuadrícula

Especificaciones

Componente de elementos de lista

Especificaciones, pautas de estilo y más.

Cuadrícula de contenido (3 o 4 columnas)

Cuadrícula de aplicaciones (4 columnas)

Cuadrícula de aplicaciones con elementos usados frecuentemente en la fila superior

Ubicación del icono indicador en el diseño de cuadrícula

Diseños de escala

Estos diseños de referencia muestran cómo adaptar las cuadrículas para pantallas de diferentes anchos y alturas. Tenga en cuenta que todos los valores de los píxeles se expresan en píxeles renderizados, antes de cualquier muestreo ascendente o descendente.

Pantallas de ancho estándar

Pantallas anchas

Pantallas extra anchas y súper anchas

Espaciado vertical de las cuadrículas de aplicaciones en pantallas de distintas alturas

Para pantallas cortas, se debe reducir el espaciado vertical entre los elementos de contenido de la cuadrícula y entre los íconos y títulos de las aplicaciones.

Estilos

Tipografía

Estilo de tipografía	Tipografía	Peso	Tamaño (dp)
Cuerpo 1	Roboto	Regular	32
Cuerpo 2	Roboto	Regular	28
Cuerpo 3	Roboto	Regular	24

Color

Elemento	Color (modo día)	Color (modo nocturno)
Tipo primario / iconos	Blanco	Blanco @ 88%
Tipo secundario / iconos	Blanco @ 72%	Blanco al 60%
Línea divisoria	Blanco @ 22%	Blanco al 12%
Fondo de cuadrícula	Negro	Negro
Redacción de contenido	N / A	Negro @ 22%
Truncamiento de gradiente	Negro al 0-100% en el 10% del espacio de texto	Negro al 0-100% en el 10% del espacio de texto

Apresto

Elemento	Tamaño (dp)
Icono de la aplicación	76
Célula de aplicación mínima	135
Celda de contenido mínimo	158

Elevación

Elemento	Color	Eje Y	Difuminar
Mosaico de cuadrícula	Negro @ 22%	2	2