User Interface

UI Animation

Motion macht das User Interface (UI) persönlicher und interaktiver. Sie verdeutlicht eine Reaktion, hilft bei der Navigation, hebt die nächsten Schritte hervor und macht das digitale Produkt und die Nutzererfahrung einzigartig. Basierend auf unseren Motion-Prinzipien sollten Animationen einfach, schnell und sinnvoll sein.

UI Animation
  • Dauer
  • Easing
  • Bewegung
  • Beispiele

Dauer

DPDHL Group User Interfaces reagieren schnell. Die Wahl der geeigneten Animationsdauer ist entscheidend, um das Nutzererlebnis zu verbessern, ohne die Performance zu verlangsamen. Die Dauer hängt in der Regel von der Größe der Objekte und der Distanz ab, die sie überbrücken. Verwenden Sie die folgende Tabelle als Orientierungshilfe, um die richtige Dauer für Ihre Animationen auszuwählen.  

Animationstyp

Dauer

Mikroanimation

Allgemeine Zustandsanzeigen, gedrückte Tasten

0.15s

Komponentenupdate
Warndisplay, Tasten-Hover

0.3s

Anzeigenänderung
Modale Animation

0.4s

Seitenübergang

0.55s

Easing

Elemente bewegen sich mit Hilfe von natürlichen Easing-Kurven. Das bedeutet, dass sie die Fähigkeit haben, schneller oder langsamer zu werden. Wenn man dies entsprechend nutzt, fühlt sich das Interface reaktionsschnell an. Hereinkommende Elemente verwenden einen Ease-Out Übergang, der schnell startet und am Ende verlangsamt wird. Dieser Übergang gilt auch für benutzergesteuerte Aktionen. Ausgehende Elemente verwenden einen Easy-In Übergang, der die Aktion schnell durchführt.

Von links nach rechts: easeInCubic: cubic-bezier(0.55, 0.05, 0.68, 0.19), easeOutCubic: cubic-bezier(0.22, 0.61, 0.35, 1), easeInOut (Custom): cubic-bezier(0.3,0.2,0.35,1)

Bewegung

Subtile Bewegungen von Elementen können dem Benutzer helfen, durch die Oberfläche zu navigieren. Die Fokussierung auf horizontale und vertikale Bewegungen sorgt für Einfachheit und verleiht dem Interface ein unverwechselbares Design. Die Animationen sollten dabei auf einheitlichen Bewegungen und Verhaltensweisen basieren, um Verwirrung zu vermeiden.

Beispiele