Bewegung und Interaktion #

Diese Seite ist für Theme-Designer, die einem Theme Bewegung und Verhalten hinzufügen: Übergänge, Menüs, die sich öffnen, Akkordeons, Slider. Bewegung hilft, wenn sie eine Veränderung erklärt, und schadet, wenn sie dekoriert: Sie bremst Menschen, lenkt ab und kann manchen Besuchern übel werden lassen. Die Regeln zur Barrierefreiheit stehen in Reduzierte Bewegung und Tastatur und Fokus, wie Skripte in ein Theme gelangen, in JavaScript laden. Diese Seite handelt davon, Bewegung und Interaktion gut festzulegen.

Inhalt #

1. Wozu Bewegung dient
2. Dauern und Easing als Tokens
3. Reduzierte Bewegung
4. Karussells und Slider
5. Aufklappbereiche, Menüs und Dialoge
6. Wie Interaktion ins Theme gelangt
7. Bewegung bei der Übergabe festlegen

Wozu Bewegung dient #

Verwenden Sie Bewegung, um:

• zu zeigen, woher etwas kam oder wohin es ging (ein Menü, das aus seiner Schaltfläche gleitet);
• eine Aktion zu bestätigen (eine kurze Hervorhebung nach dem Speichern);
• zwei Zustände zu verbinden (ein Akkordeon, das sich öffnet).

Verwenden Sie sie nicht, um das Scrollen zu dekorieren, Inhalte beim Lesen ins Bild zu animieren oder eine Seite "lebendig wirken" zu lassen. Inhaltswebsites werden gelesen; Bewegung, die mit dem Lesen konkurriert, kostet mehr, als sie bringt.

Dauern und Easing als Tokens #

Halten Sie zwei oder drei Dauern und eine oder zwei Easing-Kurven bereit, und machen Sie sie wie die anderen Werte zu Tokens (Design-Tokens):

:root {
  --site-duration-fast: 120ms;   /* hover, focus, small fades */
  --site-duration-base: 200ms;   /* menus, accordions */
  --site-ease: cubic-bezier(0.2, 0, 0, 1);
}

Kurz ist besser: Übergänge in der Oberfläche über etwa 300 ms wirken bei Wiederholung langsam. Bewegungs-Tokens sind hell und dunkel gleich.

Reduzierte Bewegung #

Besucher können ihr System um weniger Bewegung bitten. Das Muster der Hilfe für Designer schreibt Bewegung nur innerhalb von @media (prefers-reduced-motion: no-preference), sie muss also ausdrücklich zugelassen sein (Reduzierte Bewegung). Gestalten Sie für jede Animation auch die reduzierte Fassung: meist eine sofortige Veränderung oder ein Überblenden statt einer Bewegung. Das Menü öffnet sich trotzdem; es gleitet nur nicht.

Karussells und Slider #

Blocktypen wie Slider und Karussell gibt es im Layout-Editor, Redakteure werden sie also verwenden (Blockdefinitionen). Wenn Ihr Theme sie gestaltet:

• keine automatische Rotation, oder eine sichtbare Pause-Steuerung und ein Halt bei Hover und Fokus;
• Steuerungen für zurück und weiter, die echte Schaltflächen sind und mit der Tastatur erreichbar;
• eine Positionsangabe ("2 von 5");
• jede Folie ohne die Bewegung lesbar; die erste Folie trägt den wichtigsten Inhalt, denn viele Besucher sehen die anderen nie;
• ein Design für nur eine Folie, bei dem die Steuerungen verschwinden.

Oft dient ein Raster-Ansichtstyp desselben Blocks Besuchern besser; bieten Sie ihn neben dem Slider an (Layoutblöcke entwerfen).

Aufklappbereiche, Menüs und Dialoge #

• Aufklappbereiche (Akkordeons, "mehr anzeigen"): Der Auslöser ist eine Schaltfläche, die sagt, ob sie geöffnet ist; der Inhalt öffnet sich darunter. Die nativen Elemente details und summary leisten das ohne Skript.
• Menüs: öffnen sich bei Klick oder Enter, schließen sich mit Escape und wenn der Fokus sie verlässt; Menüs nur für Hover versagen auf Touchscreens und bei Tastaturen (Navigation und Menüs gestalten).
• Dialoge: sparsam verwenden; der Fokus wandert in den Dialog und kehrt danach zum Auslöser zurück. Das native Element dialog übernimmt vieles davon.

Gestalten Sie für jedes den geöffneten und den geschlossenen Zustand und die Fokusposition nach dem Öffnen und Schließen.

Wie Interaktion ins Theme gelangt #

Verhalten wird in JavaScript-Dateien des Designs geschrieben, die in den Skript-Einstellungen des Designs aufgeführt oder aus einem Template angefordert und von ezjscore gepackt werden. Templates enthalten keine Inline-Skripte und keine on*=-Attribute, sodass eine strenge Content Security Policy möglich ist (Kein Inline-JavaScript, CSP-sicheres Design). Wo jQuery verwendet wird, ist es die Version, die ezjscore mitliefert (jQuery in Designs). Skripte schalten Klassen und ARIA-Attribute um; das Stylesheet zeichnet daraus die Zustände (Interaktive Zustände gestalten).

Bewegung bei der Übergabe festlegen #

Schreiben Sie für jedes animierte Element eine Zeile:

Eine kurze Bildschirmaufnahme eines Prototyps hilft, aber nach der Tabelle baut der Entwickler.

Verwandte Seiten #

• Reduzierte Bewegung
• JavaScript laden
• Für Performance-Budgets gestalten
• Freie Dokumentation: Diese Seite dürfen Sie unter der GNU FDL 1.3 frei kopieren, übersetzen und verbessern.