Listas

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.

1. 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.
2. 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.
3. 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

1. Í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.
2. 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.
3. 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.
4. Subtítulo: Una línea de texto más pequeña que proporciona información o contexto adicional debajo del título principal.
5. 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.

check_circle

Qué debes hacer

Los elementos de lista no son botones. Los elementos no tienen contenedores. De forma predeterminada, los elementos de lista no están seleccionados ni enfocados.

warning

Precaución

Usa el fondo del contenedor para los elementos de lista solo cuando sea necesario.

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.

1. Casillas de verificación: Selecciona uno o más elementos de la lista.
2. Botones de selección: Selecciona exactamente un elemento de la lista.
3. Interruptores: Activa o desactiva un control.

check_circle

Qué debes hacer

Usa un indicador de selección de íconos para mostrar claramente el elemento seleccionado en una lista. Esto ayudará a los usuarios a identificar fácilmente qué elemento seleccionaron y mejorará su experiencia general.

cancel

Qué no debes hacer

Evita confiar únicamente en el color de fondo para indicar la selección en una lista.

cancel

Qué no debes hacer

Evita colocar botones dentro de un elemento de la lista, ya que pueden causar confusión sobre qué elemento está enfocado actualmente.

Íconos

check_circle

Qué debes hacer

Si estás mostrando el mismo tipo de contenido en la lista, omite los íconos para reducir el ruido visual y mejorar la experiencia del usuario. Evita usar íconos en una lista cuando no tengan propósito y no proporcionen información adicional.

cancel

Qué no debes hacer

Evita usar el mismo ícono para todos los elementos de una lista. Esto puede resultar visualmente abrumador y confuso para los usuarios. En su lugar, usa íconos solo cuando agreguen valor o proporcionen información adicional.

Imágenes y avatares

Los elementos de lista pueden incluir imágenes en un recorte circular para representar a una persona o entidad.