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 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.

1. 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.
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 cuestiones cognitivas sobrecarga.
3. 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

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

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

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.

1. Casillas de verificación: Selecciona uno o más elementos de la lista.
2. Botones de selección: Selecciona exactamente uno. 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 a mejorar la experiencia general del usuario.

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 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 ruido visual y mejorar la experiencia del usuario. Evita usar íconos en una lista cuando no tengan 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.

Imágenes y avatares

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