Wie man eine Pull-to-Refresh-Geste animiert
Lernen Sie, wie Sie Pull to Refresh gestalten: progressiver Widerstand, Schwellenwert-Feedback, Ladeschleife und barrierefreie Alternativen.
Kernaussage
Pull to Refresh basiert auf progressiver Dehnung. Zieht der Nutzer nach unten, verringert sich der sichtbare Versatz logarithmisch. Beim Überschreiten der Schwelle bestätigt ein taktiles oder optisches Signal das Einrasten, der Indikator geht in eine Ladeschleife über und die Liste federt sanft zurück, sobald neue Daten geladen sind.
Widerstandsphysik während der Zugphase
Ein starres 1:1-Mitwandern wirkt unkontrolliert. Setzen Sie eine progressive Widerstandsfunktion ein, bei der jeder Wischpixel des Fingers weniger Versatz erzeugt und so die Spannung einer Feder nachahmt.
Feedback an der Schwelle und Statuswechsel
Definieren Sie eine klare Schwelle (meist 60 bis 80 px). Überschreitet der Zug diesen Punkt, dreht sich das Pfeilsymbol oder eine kurze Vibration signalisiert, dass ein Loslassen die Aktualisierung auslöst.
- Wenden Sie abnehmenden Versatz beim Herabziehen an
- Geben Sie spürbares Feedback beim Überschreiten der Schwelle
- Halten Sie die Liste ohne Ruckeln in der Ladeposition
- Lassen Sie die Liste nach Abschluss weich per Feder zurückgleiten
Konflikte mit nativem Scrolling vermeiden
Erlauben Sie die Geste nur dann, wenn der Scroll-Container exakt bei scrollTop === 0 steht. Hat der Nutzer bereits gescrollt, muss die Geste als normales Weiterscrollen fungieren.
Alternativen für Barrierefreiheit
Ziehgesten sind für manche Nutzer schwierig. Stellen Sie stets eine zugängliche Alternative bereit, etwa eine Aktualisieren-Schaltfläche in der Kopfzeile oder ein Tastenkürzel.
Wichtige Prinzipien
- Nutzen Sie progressiven Widerstand gegen unkontrolliertes Ausdehnen
- Aktivieren Sie die Geste nur exakt am oberen Rand des Scrollbereichs
- Bestätigen Sie das Erreichen der Schwelle vor dem Loslassen
- Bieten Sie immer eine Tastatur- und Schaltflächen-Alternative an
Häufige Fragen
Quellen
- Swipe to Refresh Pattern — Material Design 3
- Touch and Gestures — Apple Human Interface Guidelines