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

Destacados

• Las listas son una colección continua de texto o imágenes.
• Las listas deben ser naturales y fáciles de leer.
• Las listas se componen de elementos que contienen acciones principales y complementarias representadas por íconos y texto.

Variantes

Existen tres tipos de listas: de una línea, de dos líneas y 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 gráfico pequeño que representa un objeto o una acción específicos, que a menudo se usa para comunicar visualmente una idea o un concepto.
2. Subtítulo: Es una línea corta de texto que aparece sobre el título o el subtítulo y que, a menudo, se usa para proporcionar contexto o énfasis adicionales.
3. Título: Es una línea de texto grande y en negrita que sirve como encabezado principal de un elemento o una página de diseño.
4. Subtítulo: Es una línea de texto más pequeña que proporciona información o contexto adicional debajo de un 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 texto e imágenes organizados verticalmente. Las listas, optimizadas para la comprensión lectora, consisten en una sola columna contínua 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 la 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 con el borde anterior o posterior 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á la experiencia general del usuario.

cancel

Qué no debes hacer

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

cancel

Qué no debes hacer

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

Íconos

check_circle

Qué debes hacer

Si muestras el mismo tipo de contenido en la lista, omite los íconos para reducir el desorden visual y mejorar la experiencia del usuario. Evita usar íconos en una lista cuando no cumplan ningún 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 ser visualmente abrumador y confuso para los usuarios. En su lugar, usa íconos solo cuando agreguen valor o proporcionen información adicional.

Avatares e imágenes

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