Las listas son una representación visual de uno o más elementos relacionados. Por lo general, se usan para mostrar una colección de opciones.
Recursos
Tipo | Vínculo | Estado |
---|---|---|
Diseño | Fuente de diseño (Figma) | Disponible |
Implementación | Jetpack Compose | Disponible |
Destacados
- Las listas son una colección continua de texto o imágenes.
- Las listas deben parecer naturales y poder analizarse.
- Las listas están compuestas por elementos que contienen información principal y complementaria acciones representadas por iconos y texto.
Variantes
Existen tres tipos de listas: de una línea, de dos líneas y lista de tres líneas.
- Lista de una línea: Incluye una sola línea para comunicar cada elemento. Así de sencillo diseño garantiza que cada elemento sea claramente diferente del otro.
- Lista de dos líneas: Usa dos líneas paralelas para comunicar cada elemento. Este diseño estructurado garantiza una legibilidad natural y evita cuestiones cognitivas sobrecarga.
- Lista de tres líneas: Utiliza tres líneas paralelas para representar cada elemento. Este diseño decorativo crea un alto nivel de importancia visual.
Anatomía
- Ícono: Un gráfico pequeño que representa un objeto o una acción específicos, a menudo para comunicar visualmente una idea o un concepto.
- Antetítulo: Es una línea corta de texto que aparece sobre el título o el subtítulo. a menudo se usa para proporcionar contexto o énfasis adicional.
- Título: Es una línea de texto grande y en negrita que funciona como encabezado principal de un elemento o página de diseño.
- Subtítulo: Línea de texto más pequeña que brinda información adicional o contexto debajo del título principal.
- Control: Es un elemento interactivo que le permite al usuario ingresar una decisión.
Estados
Especificaciones
Uso
Las listas son grupos de imágenes y texto organizados verticalmente. Optimizada para la comprensión lectora, una lista consta de un solo como una columna continua de elementos. Los elementos de lista pueden contener acciones principales y complementarias representadas por iconos y texto.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/container-do.webp?authuser=19&hl=es)
Qué debes hacer
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/container-dont.webp?authuser=19&hl=es)
Precaución
Controles de selección
Controla la información de visualización y las acciones de los elementos de lista. Se pueden alinear al borde inicial o final del elemento de la lista.
![Casilla de verificación de selección](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-checkbox.webp?authuser=19&hl=es)
![Radio de selección](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-radio.webp?authuser=19&hl=es)
![Interruptor de selección](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-switch.webp?authuser=19&hl=es)
- Casillas de verificación: Selecciona uno o más elementos de la lista.
- Botones de selección: Selecciona exactamente uno. elemento de la lista.
- Interruptores: Activa o desactiva un control.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-do.webp?authuser=19&hl=es)
Qué debes hacer
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/selection-dont.webp?authuser=19&hl=es)
Qué no debes hacer
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/action-dont.webp?authuser=19&hl=es)
Qué no debes hacer
Íconos
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/icon-do.webp?authuser=19&hl=es)
Qué debes hacer
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/lists/icon-dont.webp?authuser=19&hl=es)
Qué no debes hacer
Imágenes y avatares
Los elementos de lista pueden incluir imágenes en un recorte circular para representar una persona o entidad.