L'elenco immersivo è una combinazione di una riga di contenuti e di un'anteprima dell'elemento selezionato. I contenuti vengono mostrati in un'area visibile più grande.
Risorse
Tipo | Collega | Stato |
---|---|---|
Progettazione | Origine progettazione (Figma) | Disponibile |
Implementazione | Jetpack Compose | Disponibile |
In evidenza
- Anteprima dei contenuti dinamici. Quando un utente naviga nella riga di contenuti, l'area di anteprima viene aggiornata automaticamente per mostrare l'elemento attivo corrente.
- Il componente Elenco immersivo ha un'area visibile più grande per la visualizzazione dei contenuti, che consente agli utenti di visualizzare e apprezzare più facilmente i dettagli visivi dell'elemento attivo.
- Gli elenchi immersivi forniscono informazioni pertinenti e contestuali sull'elemento attivo, aiutando gli utenti a prendere decisioni consapevoli senza abbandonare l'esperienza di navigazione.
- Il componente Elenco immersivo utilizza un'informativa progressiva per rivelare più dettagli sui contenuti man mano che gli utenti navigano, riducendo il carico cognitivo e mantenendo alto il coinvolgimento degli utenti.
- Il componente Elenco immersivo garantisce interazioni coerenti all'interno dell'app, offrendo agli utenti un'esperienza familiare e prevedibile.
Anatomia
- Sfondo immagine
- Blocco di contenuti
- Scheda su messa a fuoco
- Griglia dei contenuti
- Tela cinematografica
- Poster
- Colore dello sfondo
Specifiche tecniche
Comportamento
Quando ti sposti tra le schede nell'elenco Immersive, i dettagli della scheda selezionata vengono progressivamente rivelati in background.
Quando l'elenco immersivo è attivo, la sua altezza aumenta per mostrare ulteriori informazioni, come il titolo e la descrizione dello sfondo, come mostrato nel seguente video.
Utilizzo
Utilizza caroselli immersivi quando vuoi attirare l'attenzione su contenuti in primo piano o promossi, ad esempio nuove uscite, programmi popolari o titoli esclusivi. L'area visibile più grande e l'anteprima dinamica offrono un modo efficace per mettere in evidenza gli elementi ad alta priorità.
Visualizzazione immagine
- Stato della scheda: mentre l'utente naviga nel carosello, la scheda in primo piano viene enfatizzata visivamente, scalandola di 1, 1, utilizzando un bordo e altri elementi visivi come l'elevazione per indicarne la selezione. Assicurati che i titoli dei contenuti all'interno della miniatura della scheda attiva siano chiaramente visibili e più facili da leggere.
- Immagine di sfondo: quando una scheda è a fuoco, nell'area visibile più grande viene mostrata un'immagine di sfondo corrispondente. Ti consigliamo di utilizzare un'immagine di sfondo di alta qualità e visivamente accattivante, in quanto fornisce uno sfondo immersivo e coinvolgente per i contenuti.
Composizione
Per assicurarti che le immagini utilizzate come sfondi nel componente Elenco immersivo siano di buona qualità, assicurati di ridimensionarle correttamente in modo che non siano sfocate o distorte.
Proporzioni
Se possibile, utilizza un rapporto 16:9 per le immagini di sfondo per garantire un layout visivamente accattivante e coerente.