Elenco immersivo

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

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

1. Sfondo immagine
2. Blocco di contenuti
3. Scheda su messa a fuoco
4. Griglia dei contenuti

1. Tela cinematografica
2. Poster
3. 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

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

check_circle

Cosa fare

Scala e allinea il soggetto nell'angolo in alto a destra per creare un'esperienza cinematografica.

cancel

Cosa non fare

Evita di utilizzare il ritaglio a schermo intero, che ti consente di ritagliare il soggetto sotto i contenuti.

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.