Component & Layout

Ein Inhaltsbereich wächst beim Umschalten seiner Kopfzeile weich auf volle Höhe oder schrumpft auf null.

Füge bei [wo] ein Akkordeon (Accordion Expand-Collapse) hinzu, auch collapse oder disclosure genannt.
Wenn eine Kopfzeile gedrückt wird, soll ihr Bereich weich auf die volle Höhe seines Inhalts wachsen und beim nächsten Drücken wieder ganz zuklappen, während sich der Pfeil in der Kopfzeile passend dreht: schnell und weich, ohne Nachfedern.
Animiere auf die echte Höhe des Inhalts statt auf einen festen Schätzwert, mach die Kopfzeile zu einem echten Button, der seinen aufgeklappten Zustand angibt, und sorg dafür, dass alles per Tastatur funktioniert.

Eine durchscheinende dunkle Ebene blendet hinter einem Overlay ein und dunkelt die Seite ab.

Füge bei [wo] einen „Backdrop Scrim Fade“ hinzu (auch overlay fade oder scrim genannt).
Wenn das Overlay aufgeht, soll eine durchscheinende dunkle Ebene sanft über der Seite dahinter einblenden, etwas langsamer als das Overlay selbst, und beim Schließen wieder ausblenden.
Halte den Scrim im hellen wie im dunklen Theme dunkel und verhindere, dass die Seite dahinter scrollt oder Klicks annimmt, solange er sichtbar ist.

Ein Panel gleitet vom unteren Rand herein, oft ziehbar und an festen Höhen einrastend.

Füge bei [wo] ein „Bottom Sheet Slide-Up“ hinzu (auch bottom drawer oder sheet genannt).
Das Panel soll vom unteren Rand hochgleiten, während die Seite dahinter abdunkelt, und weich abbremsend ohne Nachfedern an seinem Platz ankommen.
Spiel es bei jedem Öffnen einmal ab, lass es beim Schließen wieder nach unten gleiten und halte den Tastaturfokus im Sheet, solange es offen ist.

Die Slides bleiben an ihrem Platz und blenden ineinander über, statt zu gleiten.

Füge bei [wo] einen „Carousel Crossfade“ hinzu (auch fade slideshow oder carousel fade genannt).
Die Slides sollen an ihrem Platz bleiben und langsam ineinander überblenden – die alte blendet aus, während die nächste gleichzeitig einblendet – und dann ein paar Sekunden stehen bleiben bis zum nächsten Wechsel.
Springe nahtlos zurück zur ersten Slide, pausiere bei Hover oder Fokus und wechsle bei reduzierter Bewegung (prefers-reduced-motion) nicht automatisch weiter.

Slides ziehen horizontal durch einen sichtbaren Ausschnitt und rasten jeweils eine nach der anderen ein.

Füge bei [wo] ein „Carousel Slide“ hinzu (auch slider oder swipe carousel genannt).
Jeder Schritt soll die Reihe seitwärts schieben, sodass die nächste Slide in der Mitte einrastet, weich und abbremsend, während die Nachbarn an den Rändern hervorschauen und die Positionspunkte mitgehen.
Bewege immer eine Slide auf einmal, unterstütze Wischen auf Touch-Geräten ebenso wie Buttons und Pfeiltasten, und beschrifte die Steuerelemente für Screenreader.

Eine Karte wächst zur vollständigen Detailansicht, wobei ein einziger sichtbarer Container seine Form ändert und neue Inhalte zeigt.

Füge bei [wo] einen „Container Transform“-Übergang hinzu (auch card expand to detail oder expandable card genannt).
Wenn die Karte geöffnet wird, soll derselbe Container weich zur vollständigen Detailansicht wachsen: Der alte Inhalt blendet schnell aus, und der neue blendet ein, wenn das Wachsen fast fertig ist; beim Schließen läuft es rückwärts.
Halte es als einen durchgehenden Container statt einer Überblendung zwischen zwei getrennten Boxen, und setz den Fokus beim Öffnen in die Detailansicht.

Beim Ziehen eines Eintrags gleiten die anderen aus dem Weg und ordnen sich in der neuen Reihenfolge ein.

Füge bei [wo] eine „Drag-to-Reorder List“ hinzu (auch sortable list genannt).
Der gezogene Eintrag soll dem Zeiger direkt folgen und sich leicht abheben, während die anderen Einträge weich aus dem Weg gleiten; beim Loslassen soll er schnell in den nächstgelegenen Platz einrasten.
Unterstütze Touch ebenso wie Maus, und biete eine Möglichkeit, Einträge per Tastatur zu verschieben, wobei die neue Position für Screenreader angesagt wird.

Ein Seitenpanel gleitet vom linken, rechten oder oberen Rand herein und schiebt oder überdeckt den Inhalt.

Füge bei [wo] einen „Drawer Slide“ hinzu (auch off-canvas oder side sheet genannt).
Das Panel soll vom seitlichen Rand über den Inhalt hereingleiten, während die Seite dahinter abdunkelt, schnell und weich abbremsend, und beim Schließen auf demselben Weg wieder hinausgleiten.
Halte den Tastaturfokus im offenen Drawer, schließ ihn mit Escape oder einem Klick auf den abgedunkelten Bereich und gib den Fokus an den Button zurück, der ihn geöffnet hat.

Nach einer Layoutänderung gleiten die Elemente weich an ihre neuen Positionen und Größen.

Füge bei [wo] eine „FLIP Layout Animation“ hinzu (auch layout animation oder First-Last-Invert-Play genannt).
Wenn sich das Layout ändert, soll jedes Element von seiner alten Position zur neuen gleiten statt zu springen, anfangs schnell und dann sanft einrastend.
Animiere nur mit Transforms, damit die Seite nicht in jedem Frame neu umbricht, und wechsle bei reduzierter Bewegung (prefers-reduced-motion) direkt zum neuen Layout.

Einträge blenden beim Hinzufügen gleitend ein und beim Entfernen animiert aus, während die Nachbarn die Lücke schließen.

Füge bei [wo] eine „List Item Enter/Exit“-Animation hinzu (auch animated list genannt).
Ein neuer Eintrag soll zuerst seinen Platz öffnen und dann gleitend einblenden; ein entfernter Eintrag soll zuerst ausblenden und dann zusammenklappen, sodass die Nachbarn die Lücke weich schließen.
Lass einen entfernten Eintrag an seinem Platz, bis sein Ausblenden fertig ist, damit die Liste beim Hinzufügen oder Entfernen nie springt.

Eine Inhaltszeile läuft in einer endlosen, nahtlosen Schleife seitwärts durch.

Füge bei [wo] eine Laufschrift (Marquee) hinzu – ein endlos horizontal durchlaufendes Band, auch Ticker genannt.
Der Inhalt soll langsam und gleichmäßig von rechts nach links laufen, als nahtlose Schleife ohne sichtbaren Sprung.
Halte sie beim Hovern an und stoppe die Bewegung bei reduzierter Bewegung (prefers-reduced-motion).

Beim Filtern oder Sortieren ordnen sich Rasterkacheln neu an, blenden aus oder gleiten an neue Plätze.

Füge bei [wo] einen „Masonry / Grid Shuffle“-Effekt hinzu (auch filterable grid animation genannt).
Wenn ein Filter angewendet wird, sollen die Kacheln, die nicht mehr passen, an ihrem Platz schrumpfen und ausblenden, während die übrigen weich an ihre neuen Plätze gleiten; beim Zurücksetzen des Filters läuft es rückwärts.
Verhindere, dass die umgebende Seite springt, während sich die Höhe des Rasters ändert, und mach die Filter zu echten Buttons, die angeben, welcher Filter ausgewählt ist.

Ein Dialog blendet über der abgedunkelten Seite ein und wächst dabei leicht aus seiner Mitte.

Füge bei [wo] eine „Modal Scale-Fade In“-Animation hinzu (auch dialog open animation oder zoom-fade dialog genannt).
Der Dialog soll einblenden und dabei leicht aus seiner Mitte wachsen, während die Seite dahinter abdunkelt: schnell und dezent, ohne Nachfedern.
Spiel sie bei jedem Öffnen einmal ab, setz den Fokus in den Dialog und halte ihn dort, und nutze bei reduzierter Bewegung (prefers-reduced-motion) nur ein einfaches Einblenden.

Ein schwebendes Menü blendet ein und wächst dabei von der Stelle aus, an der sein Auslöser sitzt.

Füge bei [wo] eine „Popover / Dropdown Open“-Animation hinzu (auch menu pop oder dropdown scale-fade genannt).
Das Menü soll einblenden und dabei leicht aus der Ecke neben seinem Auslöser herauswachsen, schnell und knackig, und beim Schließen etwas schneller ausblenden.
Halte es am Auslöser verankert, schließe es mit Escape oder einem Klick außerhalb und gib den geöffneten Zustand am Auslöser für Screenreader an.

Ein Element scheint sich in ein passendes Element an neuer Stelle zu bewegen und seine Größe anzupassen, als wäre es dasselbe.

Füge bei [wo] eine „Shared Layout Animation“ hinzu (auch In-Page Shared Element genannt).
Wenn sich die Auswahl ändert, soll das Element sanft von seiner alten Position an die neue gleiten und dabei seine Größe anpassen, weich einrastend, sodass es als ein Objekt wirkt statt als zwei.
Zeige immer nur eine Kopie und verhindere, dass das umgebende Layout während der Bewegung springt.

Eine Unterstreichung oder Pille gleitet vom alten Tab zum neu ausgewählten Tab.

Füge bei [wo] einen „Tab Indicator Slide“ hinzu (auch sliding underline oder active tab indicator genannt).
Wird ein neuer Tab gewählt, soll die Unterstreichung vom alten zum neuen Tab gleiten, schnell und sanft abbremsend, und sich an die Breite des neuen Tabs anpassen, falls sie abweicht.
Behalte eine korrekte Tab-Semantik mit Navigation per Pfeiltasten bei und setze den Indikator bei reduzierter Bewegung (prefers-reduced-motion) ohne Gleiten um.

Eine kurze Meldung gleitet oder blendet am Bildschirmrand ein, bleibt kurz und verschwindet dann; gestapelte Toasts rücken zur Seite, um Platz zu machen.

Füge bei [wo] einen „Toast Slide-In“ hinzu (auch Snackbar oder Toast Notification genannt).
Jede Meldung soll vom Bildschirmrand hochgleiten und dabei einblenden, sanft abbremsend; kommt ein neuer Toast hinzu, sollen die bereits sichtbaren sanft zur Seite rücken, um Platz zu machen.
Kündige die Meldung für Screenreader an, ohne den Fokus zu stehlen, lass sie lange genug zum Lesen stehen und pausiere das automatische Schließen bei Hover oder Fokus.

Ein kleines Label blendet nach kurzer Hover-Verzögerung neben einem Element ein und rückt dabei leicht an seinen Platz.

Füge bei [wo] einen „Tooltip Fade“ hinzu (auch Tooltip Reveal genannt).
Nach einer kurzen Hover-Verzögerung soll das Label einblenden und dabei leicht neben das Element rücken, dann ohne Verzögerung schnell verschwinden, sobald der Zeiger es verlässt.
Zeige ihn auch bei Tastaturfokus, lass ihn mit Escape schließen und verknüpfe ihn mit dem Element, damit Screenreader ihn vorlesen.