Carosello vs. Marquee
Un carousel mostra diapositive separate con dei controlli. Un marquee mantiene in movimento una riga di contenuti.
Usa un carosello quando ogni elemento richiede tempo e controlli. Usa un nastro solo per decorazioni poco importanti che possono fermarsi e interrompere il movimento su richiesta.
Vedi cosa fa ogni modello
Prova ogni esempio. Poi leggi del lavoro che è stato creato per fare.
Carosello
Un carousel mostra uno o pochi pannelli alla volta. Le persone lo muovono con frecce, pallini o strisciando.
Una galleria fotografica ha i pulsanti Precedente e Successivo e mostra il numero della diapositiva. Supporta lo swipe e può mettere in pausa la riproduzione.
- Usalo quando
- Usalo quando gli elementi hanno un ordine ma non c'è spazio a sufficienza per mostrarli tutti.
- Non usarlo quando
- Non nascondere mai scelte importanti in un carosello o farlo muovere troppo velocemente da solo.
- Nome usato nel codice
aria-roledescription="carousel"
Marquee
Una striscia di contenuto ripetuto che si muove sempre. Deve offrire controlli o una versione ferma per le persone sensibili al movimento.
La pagina di un festival muove lentamente un breve elenco di sponsor. Si ferma al passaggio del mouse o alla messa a fuoco e diventa un elenco fermo sotto forma di elenco con il reduced motion.
- Usalo quando
- Usalo solo per contenuti brevi e ripetuti che non sono essenziali. Il movimento può aggiungere atmosfera ma non deve bloccare la lettura.
- Non usarlo quando
- Non usarlo mai per istruzioni, testi lunghi, messaggi urgenti o parole che le persone devono inseguire per leggere.
- Nome usato nel codice
overflow clip + duplicated track + prefers-reduced-motion
Confronto rapido
| Pattern UI | Migliore per | Non per | Nome usato nel codice |
|---|---|---|---|
| CaroselloCarousel | Usalo quando gli elementi hanno un ordine ma non c'è spazio a sufficienza per mostrarli tutti. | Non nascondere mai scelte importanti in un carosello o farlo muovere troppo velocemente da solo. | aria-roledescription="carousel" |
| MarqueeMarquee | Usalo solo per contenuti brevi e ripetuti che non sono essenziali. Il movimento può aggiungere atmosfera ma non deve bloccare la lettura. | Non usarlo mai per istruzioni, testi lunghi, messaggi urgenti o parole che le persone devono inseguire per leggere. | overflow clip + duplicated track + prefers-reduced-motion |
Prima di spedire
- 01
Scrivi cosa la persona deve fare.
- 02
Testare tastiera, focus, touch, zoom, caricamento, stati vuoti e di errore.
- 03
Assicurati che le persone possano ottenere le stesse informazioni senza hover o movimento.
- 04
Testare con contenuti reali sia su schermi piccoli che grandi.
Richiesta di confronto che puoi copiare
Copia questo quando il tuo team ha bisogno di aiuto per scegliere tra i modelli.
Scegli il modello migliore da Carosello (Carousel), Marquee (Marquee) per il nostro reale flusso utente. Usa questa regola: Un carousel mostra diapositive separate con dei controlli. Un marquee mantiene in movimento una riga di contenuti. Scrivi il compito, la quantità di contenuti e il costo di interrompere il flusso. Controlla il comportamento della tastiera, del touch, del caricamento, degli errori e della modalità ridotta. Spiega la tua scelta, quindi costruisci la versione più piccola accessibile con il sistema di design del progetto.