Vista de lista
Descripción general
Las vistas de lista se utilizan para ver rápidamente grandes conjuntos de datos. Existen junto con una vista de tabla y muestran datos estructurados. Las vistas de lista también pueden existir como un elemento de interfaz de usuario que solo muestra una lista de elementos. Un elemento de lista es ligero y, por lo general, solo contiene una línea de detalle, junto con acciones integradas.
Cuándo se debe utilizar
- Para mostrar datos generados por el sistema, como una lista de actividades recientes, historial de revisiones, contactos o registros agregados recientemente.
- Para mostrar elementos ligeros, como notas o una lista de documentos.
- Si el caso de uso principal es la visualización de datos.
Cuándo no se debe utilizar
- Si el caso de uso principal es la comparación de datos. En su lugar, utilice la vista de tabla.
- Si tiene datos complejos que mostrar. En su lugar, utilice la vista de tabla.
- Si desea centrar la atención del usuario en un solo objeto. En su lugar, utilice la vista de tarjetas.
Formato
Anatomía
- Título (obligatorio): Ofrece una breve descripción sobre la vista de lista, con un recuento opcional que indica la cantidad de elementos de lista en la vista.
- Filtro de búsqueda (opcional): Se utiliza para filtrar el conjunto de datos mediante la búsqueda de palabras clave.
- Subtítulo (opcional): El subtítulo proporciona información contextual adicional si fuera necesario.
- Acciones de la vista de lista (opcional): Proporciona los medios para realizar acciones en los datos, ya sea en el conjunto completo o en conjuntos de datos seleccionados desde la vista de lista.
- Elemento de lista (obligatorio): Elemento de la vista de lista que aparece en la vista con el formato definido.
- Control de paginación (opcional): Se utiliza para mostrar más elementos de lista según lo necesite el usuario.
Detalles de elementos de lista
Cada elemento de lista consta de los siguientes elementos:
- Control de selección (opcional): Permite la selección de uno o más elementos de la lista.
- Área de detalle (obligatoria): Muestra información dependiente de la aplicación sobre el elemento de lista.
- Acciones de elementos de lista (opcional): Proporciona los medios para realizar acciones en el elemento de lista.
Todos los elementos de la lista dentro de la vista de lista deben contener los mismos tipos de datos. No introduzca en un elemento de lista detalles que los otros no tengan.
Use íconos solo como un medio para proporcionar contexto adicional a los datos y mejorar visualmente el contenido que los acompaña. El uso de íconos para todos los elementos de lista debe ser uniforme: todos los elementos de la lista tienen íconos o ninguno de ellos los tiene.
Las acciones en los elementos de lista pueden ser botones de acción o botones de ícono.
Composición y disposición, dimensionamiento y comportamiento de repetición de flujo
- La vista de lista y los elementos de lista que la acompañan siempre ocupan todo el ancho del contenedor.
- Todo el contenido de un elemento de lista debe estar visible. El texto más largo en un elemento de lista se ajusta a la siguiente línea con la opción para ver más en una vista detallada (cajón, nueva página, modal). No trunque el texto en los elementos de lista.
Características de la vista de lista
Estado vacío y estado cargando
- Cuando no haya datos para mostrar o cuando las condiciones impidan que se muestren los datos, use el estado vacío para informar a los usuarios. El mensaje debe indicar claramente el problema y los medios para solucionarlo.
- Cuando se recuperen datos, utilice el estado cargando para informar a los usuarios. El mensaje debe comunicar con claridad que los datos se están cargando y explicar por qué el usuario está esperando.
- Los botones de acción se pueden utilizar para activar la actualización de la página si fuera necesario.
Ejemplo de un estado vacío de vista de lista
Ejemplo de un estado cargando de vista de lista
Capacidad de ser responsive
Las vistas de lista son totalmente responsive y se ajustan al tamaño de su contenedor en diferentes factores de forma.
De izquierda a derecha: vista de lista en computadoras de escritorio, en tablets y en dispositivos móviles.
Filtros de vista de lista
El filtrado proporciona los medios para manipular conjuntos de datos específicos. Se puede realizar mediante el filtro de búsqueda, con el que los usuarios pueden reducir el conjunto de datos ingresando una palabra clave.
Selección de elemento de lista
En la vista de lista, se puede habilitar la selección de elementos de lista única o múltiple, según el caso de uso.
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.