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 del diseño (Figma) | Disponible |
Implementación | Jetpack Compose | Próximamente |
Lo más destacado
- Las listas son colecciones continuas de texto o imágenes.
- Las listas deben parecer naturales y poder escanear.
- Las listas se componen de elementos que contienen acciones principales y complementarias representadas por íconos y texto.
Variantes
Existen tres tipos de listas: lista de una línea, lista de dos y lista de tres líneas.
- Lista de una línea: Es una sola línea para comunicar cada elemento. Este diseño simple garantiza que cada elemento sea claramente distinto 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 la sobrecarga cognitiva.
- Lista de tres líneas: Usa tres líneas paralelas para representar cada elemento. Este diseño decorativo crea un alto nivel de importancia visual.
Anatomía
- Ícono: Es un pequeño gráfico que representa un objeto o una acción específicos, que a menudo se usa para comunicar visualmente una idea o un concepto.
- Descripción general: Es una línea corta de texto que aparece sobre el título o 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 sirve como encabezado principal de un elemento o página de diseño.
- Subtítulo: Una línea de texto más pequeña que proporciona información o contexto adicional debajo del título principal.
- Control: Es un elemento interactivo que permite al usuario ingresar una decisión.
Estados
Especificaciones
Uso
Las listas son grupos de imágenes y texto organizados verticalmente. Una lista, optimizada para la comprensión de lectura, consta de una sola columna continua de elementos. Los elementos de lista pueden contener acciones principales y complementarias representadas por íconos y texto.
Controles de selección
Los controles muestran información y acciones para los elementos de lista. Se pueden alinear en el borde inicial o final del elemento de lista.
- Casillas de verificación: Selecciona uno o más elementos de la lista.
- Botones de selección: Selecciona exactamente un elemento de la lista.
- Interruptores: Activa o desactiva un control.
Íconos
Imágenes y avatares
Los elementos de lista pueden incluir imágenes en un recorte circular para representar a una persona o entidad.