La lista envolvente es una combinación de una fila de contenido y una vista previa del elemento seleccionado. Presenta contenido en un viewport más grande.
Recursos
| Tipo | Vínculo | Estado |
|---|---|---|
| Diseño | Fuente del diseño (Figma) | Disponible |
| Implementación | Jetpack Compose | Disponible |
Lo más destacado
- Vista previa del contenido dinámico. Cuando un usuario navega por la fila de contenido, el área de vista previa se actualiza automáticamente para mostrar el elemento enfocado actual.
- El componente de lista envolvente incluye un viewport más grande para mostrar contenido, lo que facilita que los usuarios vean y aprecien los detalles visuales del elemento enfocado.
- Las listas envolventes proporcionan información relevante y contextual sobre el elemento destacado, lo que ayuda a los usuarios a tomar decisiones fundamentadas sin salir de la experiencia de navegación.
- El componente de lista envolvente usa la divulgación progresiva para revelar más detalles sobre el contenido a medida que los usuarios navegan, lo que reduce la carga cognitiva y mantiene la participación del usuario.
- El componente de lista envolvente garantiza interacciones coherentes en toda la app, lo que brinda a los usuarios una experiencia conocida y predecible.
Anatomía
- Fondo de la imagen
- Bloque de contenido
- Tarjeta en primer plano
- Cuadrícula de contenido
- Lámina cinematográfica
- Póster
- Color de fondo
Especificaciones
Comportamiento
Cuando navegas entre tarjetas en la lista envolvente, los detalles de la tarjeta seleccionada se revelan de forma progresiva en segundo plano.
Cuando la lista envolvente está enfocada, su altura aumenta para revelar información adicional, como el título y la descripción del fondo, como se muestra en el siguiente video.
Uso
Usa carruseles envolventes cuando quieras atraer la atención hacia contenido destacado o promocionado, como lanzamientos nuevos, programas populares o títulos exclusivos. El viewport más grande y la vista previa dinámica proporcionan una forma atractiva de mostrar estos elementos de alta prioridad.
Visualización de imágenes
- Enfoque de la tarjeta: A medida que el usuario navega por el carrusel, se enfatiza la tarjeta enfocada visualmente y se escala un 1.1 con un borde y otros indicadores visuales como elevación para indicar su selección. Asegúrate de que los títulos del contenido dentro de la miniatura de la tarjeta enfocada sean visibles y fáciles de leer.
- Imagen de fondo: Cuando una tarjeta está enfocada, se muestra la imagen de fondo correspondiente en el viewport más grande. Te recomendamos que esta imagen de fondo sea de alta calidad y atractiva visualmente, ya que proporciona un fondo envolvente y atractivo para el contenido.
Composición
Qué debes hacer
Qué no debes hacer
Para garantizar que las imágenes que se usan como fondos en el componente de la lista envolvente se vean bien, asegúrate de ajustarlas de forma adecuada para que no se vean borrosas ni distorsionadas.
Relación de aspecto
Usa una relación de aspecto de 16:9 para las imágenes de fondo siempre que sea posible a fin de garantizar un diseño visualmente atractivo y coherente.
