Carousel vs. Marquee
Ein Carousel zeigt einzelne Slides mit Bedienelementen. Ein Marquee hält eine Reihe von Inhalten in Bewegung.
Verwenden Sie ein Karussell, wenn jedes Element Zeit und Steuerung benötigt. Verwenden Sie ein Laufband nur für unwichtige Dekoration, die anhalten oder stoppen kann, wenn es verlangt wird.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Carousel
Ein Carousel zeigt ein paar Panels gleichzeitig. Man bewegt es mit Pfeilen, Punkten oder Wischbewegungen.
Eine Fotogalerie hat Previous- und Next-Buttons und zeigt die Nummer des Bildes. Sie unterstützt Wischgesten und kann das automatische Abspielen pausieren.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn Elemente eine Reihenfolge haben, aber nicht genug Platz vorhanden ist, um sie alle anzuzeigen.
- Nutze es nicht, wenn
- Verstecken Sie niemals wichtige Entscheidungen in einem Karussell oder lassen Sie es zu schnell von selbst bewegen.
- In Code verwendeter Name
aria-roledescription="carousel"
Laufband
Ein Streifen mit sich wiederholenden Inhalten, der sich ständig bewegt. Er muss Steuerungen oder eine ruhige Version für Menschen bieten, die empfindlich auf Bewegung reagieren.
Eine Festival-Seite bewegt eine kurze Sponsorenliste langsam. Sie macht bei Hover oder Fokus eine Pause und wird bei verringerter Bewegung zu einer ruhigen, umgebrochenen Liste.
- Verwenden Sie es, wenn
- Verwenden Sie es nur für kurzen, wiederholten Inhalt, der nicht wesentlich ist. Die Bewegung kann Stimmung hinzufügen, darf aber das Lesen nicht blockieren.
- Nutze es nicht, wenn
- Verwenden Sie es niemals für Anweisungen, lange Texte, dringende Nachrichten oder Wörter, die die Leute verfolgen müssen, um sie zu lesen.
- In Code verwendeter Name
overflow clip + duplicated track + prefers-reduced-motion
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| CarouselCarousel | Verwenden Sie es, wenn Elemente eine Reihenfolge haben, aber nicht genug Platz vorhanden ist, um sie alle anzuzeigen. | Verstecken Sie niemals wichtige Entscheidungen in einem Karussell oder lassen Sie es zu schnell von selbst bewegen. | aria-roledescription="carousel" |
| LaufbandMarquee | Verwenden Sie es nur für kurzen, wiederholten Inhalt, der nicht wesentlich ist. Die Bewegung kann Stimmung hinzufügen, darf aber das Lesen nicht blockieren. | Verwenden Sie es niemals für Anweisungen, lange Texte, dringende Nachrichten oder Wörter, die die Leute verfolgen müssen, um sie zu lesen. | overflow clip + duplicated track + prefers-reduced-motion |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Carousel (Carousel), Laufband (Marquee) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Carousel zeigt einzelne Slides mit Bedienelementen. Ein Marquee hält eine Reihe von Inhalten in Bewegung. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.