Vereinfachung vs. Feder
Die Vereinfachung folgt einer festgelegten Zeitkurve. Eine Feder bewegt sich wie eine echte Feder und stoppt von selbst.
Verwenden Sie Easing für Überblendungen, Farbänderungen und zeitlich gesteuerte Schritte. Verwenden Sie eine Feder für Objekte, die sich bewegen oder einer Ziehung folgen.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Vereinfachung
Easing ist die Zeitkurve, die bestimmt, wie eine Animation schneller und wieder langsamer wird.
cubic-bezier()Ein Panel kommt schnell herein und hält sanft an. Das Verlassen ist kürzer und direkter.
- Verwenden Sie es, wenn
- Verwenden Sie Easing, wenn die Geschwindigkeit Gewicht, Richtung oder Zweck zeigen soll.
- Nutze es nicht, wenn
- Verwenden Sie niemals denselben großen Bounce für jede Interaktion.
- In Code verwendeter Name
cubic-bezier()
Federanimation
Die Federanimation folgt einem physikalischen Modell. Steifigkeit, Dämpfung, Masse und Startgeschwindigkeit steuern, wie sie sich bewegt.
stiffness / damping / massEine gezogene Karte bewegt sich ein kleines Stück über ihren Platz und rutscht dann zurück.
- Verwenden Sie es, wenn
- Verwenden Sie es für gestengeführte Bewegungen, die gestoppt werden können und die Geschwindigkeit des Benutzers beibehalten sollten.
- Nutze es nicht, wenn
- Füge niemals zu viel Federung zu gängigen Steuerelementen oder sensiblen Aufgaben hinzu.
- In Code verwendeter Name
stiffness / damping / mass
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| VereinfachungEasing | Verwenden Sie Easing, wenn die Geschwindigkeit Gewicht, Richtung oder Zweck zeigen soll. | Verwenden Sie niemals denselben großen Bounce für jede Interaktion. | cubic-bezier() |
| FederanimationSpring Animation | Verwenden Sie es für gestengeführte Bewegungen, die gestoppt werden können und die Geschwindigkeit des Benutzers beibehalten sollten. | Füge niemals zu viel Federung zu gängigen Steuerelementen oder sensiblen Aufgaben hinzu. | stiffness / damping / mass |
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 Vereinfachung (Easing), Federanimation (Spring Animation) für unseren echten Nutzerfluss. Nutze diese Regel: Die Vereinfachung folgt einer festgelegten Zeitkurve. Eine Feder bewegt sich wie eine echte Feder und stoppt von selbst. 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.