Aufbrechende Symmetrie sorgt für Kontrast und Anziehungskraft auf Ihre Projekte. Erfahren Sie, wann und wie Sie dies auf Ihre Projekte anwenden können.
Asymmetrisches Animations-Timing verbessert die Nutzererfahrung, da Sie damit Ihre Persönlichkeit zum Ausdruck bringen und gleichzeitig schnell auf Nutzerinteraktionen reagieren können. Es schafft einen Kontrast zur Haptik, wodurch die Benutzeroberfläche optisch ansprechender wird.
- Verwenden Sie asymmetrische Animations-Timings, um Ihrer Arbeit Persönlichkeit und Kontrast zu verleihen.
- Bevorzugen Sie immer die Interaktion des Nutzers. Reagieren Sie kürzer, wenn Sie auf Tipp- oder Klickaktionen reagieren, und reservieren Sie längere Zeiträume für Zeiten, in denen Sie dies nicht tun.
Wie bei den meisten „Regeln“ für Animationen sollten Sie experimentieren, um herauszufinden, was für Ihre Anwendung funktioniert. In Bezug auf die User Experience sind die Nutzenden jedoch bekanntlich ungeduldig. Als Faustregel gilt: Reagiere immer schnell auf eine Nutzerinteraktion. Allerdings ist die Aktion des Nutzers meist asymmetrisch, was bedeutet, dass die Animation auch sein kann.
Wenn ein Nutzer beispielsweise tippt, um eine Seitenleistennavigation aufzurufen, sollten Sie diese so schnell wie möglich mit einer Dauer von etwa 100 ms aufrufen. Wenn der Nutzer das Menü schließt, können Sie es sich jedoch leisten, die Ansicht etwas langsamer zu animieren, etwa um die 300 ms-Marke.
Im Gegensatz dazu wird beim Aufrufen einer modalen Ansicht normalerweise ein Fehler oder eine andere kritische Meldung angezeigt. In solchen Fällen sollte die Ansicht etwas langsamer erscheinen, wieder etwa nach der 300-ms-Marke, aber das Verlassen, das vom Nutzer ausgelöst wird, sollte sehr schnell erfolgen.
Daher gilt folgende allgemeine Faustregel:
- UI-Animationen, die durch eine Nutzerinteraktion ausgelöst werden, z. B. Ansichtsübergänge oder das Einblenden eines Elements, sollten ein schnelles Intro (kurze Dauer), aber ein langsames Outro (längere Dauer) haben.
- UI-Animationen, die durch Ihren Code ausgelöst werden, z. B. Fehler oder modale Ansichten, haben ein langsameres Intro (längere Dauer), aber ein schnelles Outro (kurze Dauer).