Source: https://cd.union-investment.de/grundlagen/Basiselemente/motion-prinzipien
Die Motion-Prinzipien von Union Investment sind essentiell, um eine markenadäquate Charakteristik von Animationen in allen digitalen Medien zu gewährleisten. Die Prinzipien geben vor, wie Animationen eingesetzt werden und sich verhalten.
Animationen erzeugen Aufmerksamkeit, unterstützten Informationen und lenken den Nutzer in der Interaktion. Dabei sollte innerhalb eines Mediums auf einen ausgewogenen, zielführenden Einsatz geachtet werden.
Bitte beachten
Den Nutzern stehen die Animations-Pattern für die digitalen Anwendungen von Union Investment im Solid Design System zur Verfügung. Diese gelten als generelle Richtlinie für die Umsetzung der Animationsprinzipien.
Für Animationen im Web gelten dieselben Vorgaben zur Barrierefreiheit wie im Bewegtbild . Diese sollten schon bei der Erstellung berücksichtigt werden. Untertitel, Audiodeskription und zugängliche Player sind essenziell. Achten Sie zusätzlich auf klare Kontraste und einfache Sprache.
Anwendungsbeispiele
Animationsprinzipien
Animationsdynamik
Einsatz
Barrierefreiheit
Die Motion-Prinzipien können einzeln angewendet werden oder kommen miteinander kombiniert zum Einsatz.
In Kombination werden die einzelnen Aspekte der Prinzipien wie Typik, Animationsverhalten und Nutzerführung optimal miteinander verknüpft.
Natürlichkeit
Jede Animation ist natürlich, sie wirkt menschlich und lebendig. Die gewählte Animationsdauer folgt einer, dem zu animierenden Element adäquaten Zeit.
Die natürliche Bewegungsdynamik ist bestimmt, aber niemals hektisch. Die Elemente werden in einer nachvollziehbaren und sinnvollen Abfolge animiert.
Animierte Elemente bedingen sich gegenseitig und stehen in einem natürlichen Verhältnis zueinander.
Vorwärtsgerichtetes Aufstreben
Die charakteristische Typik entsteht durch ein vorwärtsgerichtetes Aufstreben der animierten Elemente. Das heißt, eine diagonal aufstrebende Bewegungsrichtung ist das grundlegende Richtungsmuster für das „Erscheinen“, „Bewegen“ und „Hervorheben“ von Elementen.
Diagonaler Aufbau von Elementen Inszenierung von Elementen in einer nach rechts oben aufstrebenden Bewegung
Vorwärtsgerichtet aufstrebender Auf- und Abbau von Elementen
Aufbau einer vorwärtsgerichtet aufstrebenden Fläche nach Aktivierung
Fokussierung
Das Fokussieren von Elementen unterstützt eine optimale Nutzerführung.
Das Wesentliche soll im Fokus stehen – durch „Anvisieren“ und „Hervorhebung“ von Elementen und dem gleichzeitigen „Verdrängen“ oder „Abschwächen“ umliegender Elemente.
Fokussierung eines anvisierten Inhalts durch Vergrößerung
Fokussierung eines anvisierten Inhalts durch Vergrößerung innerhalb eines statischen Rahmens
Räumlich Hervorhebung und gleichzeitige Verdrängung
Hervorhebung und Inszenierung von Elementen, die in das Blickfeld wandern
Die Animationsdynamik beschreibt das Verhalten der animierten Elemente und gibt die übergreifende Bewegung und Geschwindigkeit vor.
Die Animationsdynamik von Union Investment drückt ein zielgerichtetes Aufeinander zugehen aus: Sie startet mit zügiger Beschleunigung, die Professionalität und Engagement vermittelt, führt in einen konstanten Mittelpart und endet mit sanftem Abbremsen. Letzteres kommuniziert den Aspekt Partnerschaftlichkeit.
Web-Anwendungen – CSS:
transition-timing-function:
cubic-bezier(0.4,0.03,0.4,0.97);
Adobe After Effects:
Ausgehende Geschwindigkeit: 40 %
Ankommende Geschwindigkeit: 85 %
Animation sollten immer den Inhalt unterstützen – auf zu viele Animationen innerhalb eines Mediums oder Animationen aus rein dekorativen Zwecken sollte verzichtet werden.
Es gilt, eine ausgewogene Balance zwischen „statisch” und „dynamisch” zu finden.
Im Kontext der Barrierefreiheit, sollten schnelle oder starke Animationen möglichst minimiert oder deaktivierbar sein. Werden Inhalte über Animationen vermittelt, müssen dieser auch über eine Alternative zugänglich sein, beispielsweise durch Text oder statische Bilder. Zu vermeiden sind Flackern bzw. Animationen, die mehr als dreimal pro Sekunde blinken oder aufblitzen. Diese Effekte können Anfälle auslösen. Werden Animationen eingesetzt, die länger als fünf Sekunden dauern, muss es die Möglichkeit geben, diese anzuhalten oder auszublenden. Animationen sollte grundsätzlich nur so eingesetzt werden, dass sie Nutzende im Verständnis, zur Navigation oder zur Verdeutlichung von Interaktionen unterstützen, ohne dabei abzulenken. Beispielhafte Animationsumsetzungen finden Sie hier im Solid Design. Testen Sie Animationen auf verschiedenen Geräten, Bildschirmgrößen und Zoomstufen, um die Lesbarkeit in allen Szenarien zu gewährleisten.
Im Kapitel Bewegtbild finden Sie die Anwendungsprinzipien von konkreten Bewegtbildinhalten sowie Gestaltungsvorlagen zum Download.
Zum Kapitel Bewegtbild
Vorheriges Kapitel Iconstil Nächstes Kapitel Soundlogo
