Sie haben wahrscheinlich den Spruch “gutes Design ist offensichtlich; großartiges Design ist unsichtbar” gehört. Das gleiche Prinzip gilt für die Animationen in der Benutzeroberfläche: Eine wirklich gute Animation macht die Benutzeroberfläche benutzerfreundlich und kreativ, darf aber die Nutzer nicht von der eigentlichen App ablenken. In diesem Beitrag besprechen wir, wie man Animationen in mobilen Apps verwendet.
Grundlegende Ziele des Motion Designs
Lassen Sie uns die Vorteile der UI-Animationen sehen und wie sie großartige App-Konzeptionen in außergewöhnliche individuelle Lösungen verwandeln können.
Erklären Sie die Logik. Die Hauptaufgabe jeder Animation besteht darin, dem Benutzer die Navigation durch die App zu erleichtern, indem sie die Zusammenhänge zwischen den Elementen der Benutzeroberfläche versteht. Mithilfe von Motion Graphics gibt eine App den Nutzern eine Rückmeldung auf ihre Aktionen, sodass sie wissen, was geschieht. Außerdem können Animationen die Hierarchie der Seiten und Bildschirme darstellen und die Aufmerksamkeit auf wesentliche Elemente und Funktionen lenken.
Sorgen Sie für eine hohe Nutzerinteraktion. Animationen für mobile Apps können auch dazu verwendet werden, einen Nutzer dazu zu bewegen, Maßnahmen zu ergreifen, die für ein Unternehmen wichtig sind. Nehmen wir zum Beispiel die Reaktionen auf Facebook. Die Möglichkeit für Nutzer, auf Facebook-Beiträge zu reagieren, ist entscheidend, um soziale Interaktionen und Engagement zu gewährleisten.
Erstellen Sie ein einzigartiges Erlebnis. In-App-Animationen können ein spannendes und unvergessliches Nutzererlebnis gewährleisten. Bewegungsanimationen können zudem die Markenidentität stärken, indem sie die Vorteile einer bestimmten Marke hervorheben und die Werte der Marke an die Kunden vermitteln.
Im Rahmen dieses Artikels teilen wir unsere Fachkenntnisse zur Gestaltung wunderschöner und nützlicher Animationen. Alle beschriebenen Prinzipien gelten für die Benutzeroberflächen von iOS-, Android- und Web-Apps, digitalen Uhren, Haushaltsgeräten und anderen Produkten. Um nützliche Animationen zu entwerfen und zu optimieren, sollten wir verstehen, wo sie in Ihrer App ihren Platz haben und welche Funktion sie erfüllen.
Typen von Animationen und Besonderheiten ihrer Implementierung
Es gibt sieben Arten von mobilen Animationen, und jede hat ihre eigenen Designprinzipien.
1. Visuelles Feedback
Visuelle Feedback-Systeme sind für jede Benutzeroberfläche unerlässlich. In der physischen Welt reagieren Objekte auf unsere Interaktionen mit ihnen. Menschen erwarten die gleiche Reaktionsfähigkeit von App-Elementen. Visuelle sowie akustische und haptische Feedback-Systeme in einer App sorgen dafür, dass die Nutzer sich in die Kontrolle zurückfinden.
Visuelle Feedback-Informationen erfüllen auch eine einfachere Funktion: Sie zeigen an, dass Ihre App ordnungsgemäß funktioniert! Wenn eine Schaltfläche wächst oder ein verschwenkter Bildinhalt in eine bestimmte Richtung bewegt wird, ist klar, dass die App auf die Eingaben des Benutzers reagiert.
Alle Smartphone-Nutzer haben Situationen erlebt, in denen sie auf eine App tippen und nichts passiert. Zum Beispiel kann das wiederholte Tippen in einer Shopping-App die Menge eines Artikels im Warenkorb erhöhen. Das gleiche Designproblem in einer Hospitality-App könnte dazu führen, dass der Nutzer mehrmals ein Hotelzimmer bucht.
Situationen wie diese zeigen auf ein schlechtes UX-Design hin. Doch Animationen können dazu beitragen, diese zu vermeiden, indem sie eine angemessene visuelle Rückmeldung bieten.
Beispiele für großartige visuelle Feedback-Animationen
Tinders bekannter Swipe-Link, um zu „Like“ zu stimmen, und der Swipe-Link, um einen Pass zu erlangen, ist eine Art visuelle Feedbackanimation. Wir haben diese Animation in unserer Open-Source-Bibliothek Koloda implementiert.
In der unten gezeigten App helfen Animationen dem Benutzer zu erkennen, dass ein Menüpunkt dem Warenkorb hinzugefügt wurde. Darüber hinaus machen die Animationen das Benutzererlebnis unterhaltsam und lebendig.
2. Funktionsänderung
Diese Art von Animation zeigt, wie sich ein Element verändert, wenn ein Benutzer mit ihm interagiert. Sie eignet sich besonders gut, wenn Sie veranschaulichen möchten, wie die Funktion eines Elements sich verändert. Funktionale Animationen werden oft mit Toggles, Schaltern, Schaltflächen, Symbolen und anderen kleinen Designelementen eingesetzt.
Im folgenden Beispiel sehen Sie, dass das Symbol in der Schaltfläche „Schnelle Aktion“ sein Aussehen von einem Hamburgermenü zu einem X ändert, um anzuzeigen, dass die Funktion der Schaltfläche geändert wurde. Außerdem können Sie bei diesem Animationsbild erkennen, wie sich die Rücktaste nach den Interaktionen orientiert.
[Ein Musik-Streaming-Player, der von Yalantis entwickelt wurde]
Im nächsten Beispiel sehen Sie, wie die Wegewarnfunktion sich ändert, wenn der Benutzer mit der Maus über die Schaltfläche „Wegewarnung“ fährt.
Lesen Sie auch: Wie man einen Kalender in seine App einbetten und warum Kalender in der App nicht so einfach sind
3. Struktur und Navigation
Die meisten mobilen Apps haben komplexe Strukturen, und es ist Aufgabe des Designers, die Navigation so einfach wie möglich zu gestalten. Animationen können dabei sehr hilfreich sein. Wenn Ihre Animation zeigt, wo ein Element versteckt ist, kann ein Benutzer es leicht finden.
In diesem Beispiel hilft eine Animation dem Benutzer, die Navigation der App zu verstehen. Alle Übergänge sind fließend und verdeutlichen, woher ein Benutzer kommt und wie man zurückkehrt. Der Schieberegler auf der linken Seite hilft uns außerdem, die Struktur und die Navigation der App zu verstehen.
[Eine Musik-Streaming-App, die von Yalantis entwickelt wurde]
Lesen Sie auch: Wie wir eine benutzerfreundliche Oberfläche mit animierten Elementen für eines unserer Projekte geschaffen haben
4. Hierarchie der Elemente und deren Wechselwirkungen
Animationen eignen sich hervorragend zur Darstellung von Teilen der Benutzeroberfläche und zur Darstellung der Interaktion zwischen diesen Elementen. Jedes Element hat seine eigene Funktion und seinen eigenen Platz innerhalb der Animation.
Wenn beispielsweise eine Schaltfläche eine Pop-up-Menüoption aktiviert, ist es besser, dass das Menü direkt über die Schaltfläche angezeigt wird, anstatt dass es nur von der Seite des Bildschirms heruntergespult wird. Wenn das Menü über die Schaltfläche angezeigt wird, hilft dies dem Benutzer, die Beziehung zwischen den Elementen zu erkennen.
[Connect Home-App entwickelt von Yalantis]
Alle Animationen sollten verdeutlichen, wie die Elemente miteinander verbunden sind. Die Struktur der Elemente und die Interaktionen zwischen ihnen sind für eine intuitive Benutzeroberfläche unerlässlich.
Im folgenden Beispiel sehen Sie, wie eine Karte mit Informationen über ein Element durch eine glatte Animation mit dem Inhalt dieses Elements verbunden wird. Die Karte wird erweitert und zusätzliche Informationen erscheinen fließend und konsistent. Auch das Verhalten der Funktion “In Ihre Liste hinzufügen” ist dank einer Animation deutlich erkennbar.
5. Visuelle Anweisung
Animationen geben Hinweise darauf, wie man mit Elementen interagiert. Es ist besonders wichtig, visuelle Hinweise anzubieten, wenn eine App ein unvorhersehbares Interaktionsdesign aufweist. In diesem Beispiel ist zu sehen, dass die Animation neuen Benutzern zeigt, wie sie mit der Benutzeroberfläche interagieren können.
[Konzept des Menüs „Teilen und Statistiken“ von Yalantis]
6. Systemstatus
Im Hintergrund Ihrer App finden immer mehrere Prozesse statt: Daten werden vom Server heruntergeladen, Berechnungen werden durchgeführt usw. Ihre Aufgabe ist es, dem Benutzer zu zeigen, dass die App nicht eingefroren oder abgestürzt ist, und den Status der laufenden Prozesse anzuzeigen. Dann kommen Fortschrittsanimationen ins Spiel.
Visuelle Anzeichen von Fortschritt geben dem Benutzer ein Gefühl der Kontrolle über die Leistung der App. Idealerweise sollte jeder Prozess in Ihrer App von einer separaten Animation begleitet werden. Wenn beispielsweise eine Audioaufnahme läuft, kann der App-Bildschirm eine sich bewegende Audio-Track anzeigen. Realtime-Animationen von Schallwellen können anzeigen, wie laut der Ton ist.
[Die Funktion „Sprachzu-Text“ in einer App, die von Yalantis für KPMG entwickelt wurde]
Einfache Animationen, die uns alle gut bekannt sind, sind die Ladevorgänge. Ihre Funktion besteht darin, den Status eines Prozesses anzuzeigen. Hier ist eine gängige Animation in Messengern, die zeigt, dass Ihr Gesprächspartner eine Nachricht schreibt. Diese Animation gibt Feedback und zeigt den Systemzustand an.
7. Spaßige Animationen
Spaßige Animationen können gut oder schlecht sein. Oft werden sie unnötig eingesetzt und können die App-Entwicklung ernsthaft erschweren. Aber eine wirklich einzigartige Animation kann für die Nutzer ansprechende Wirkung haben und Ihre App hervorheben. Es ist eines der Geheimnisse der Animationen, die Designer nutzen können, wenn sie möchten, dass die Nutzer sich in ihre Produkte verlieben.
Das haben unsere Designer bei der Entwicklung der oben beschriebenen App für die Planung und Kalenderaktivitäten im Hinterkopf behalten. Wenn Sie zurückscrollen, sehen Sie, wie die Benutzeroberfläche auf die Stornierung von Ereignissen reagiert und sich in einen Rauchwolke verwandelt.
In einem anderen Beispiel wirken sich bewegende Kreise ungewöhnlich an und lenken die Aufmerksamkeit des Nutzers ab. Die Möglichkeit, diese Kreise auf dem Bildschirm zu bewegen, sorgt für Freude und ein wenig Gamification. Es ist einfach und macht Spaß.
Bei der Gestaltung einer unterhaltsamen Animation sind zwei Dinge zu beachten. Erstens sollte sichergestellt werden, dass die Animation keine Funktionen Ihrer App überdeckt oder verdeckt. Zweitens darf die Bedienung der animierten Benutzeroberfläche nicht zu viel Zeit in Anspruch nehmen oder kompliziert sein.
Hauptprinzipien der Animation-Design
Wir haben die wichtigsten Arten und Funktionen von Animationen betrachtet. Um wirklich erfolgreiche Animationen zu erstellen, sollten Sie sich diese 10 Animationprinzipien merken, die ursprünglich von Walt Disney formuliert wurden, aber auch für die Gestaltung von Benutzeroberflächen effektiv angewendet werden können.
1. Material
Zeigen Sie, aus was Ihr Element besteht: Ist es leicht oder schwer, steif oder flexibel, flach oder mehrdimensional? Geben Sie den Nutzern ein Gefühl dafür, wie Ihre Benutzeroberflächenelemente miteinander interagieren.
2. Bewegungsbahn
Man muss die Natur der Bewegungen definieren. Allgemeine Prinzipien besagen, dass unbebautes mechanisches Material in der Regel eine gerade Bahnverlauf hat, wohingegen lebende Wesen eine flexiblere und weniger gerade Bahnverlauf haben. Entscheiden Sie, welche Wirkung Sie von Ihrer Benutzeroberfläche erzeugen möchten, und bleiben Sie dabei.
3. Timing
Die Zeitplanung ist zweifellos eine der wichtigsten Aspekte beim Entwerfen von Animationen. In der realen Welt bewegen sich physische Objekte nicht nach den Regeln linearer Bewegung, da sie Zeit benötigen, um sich zu beschleunigen und zu verlangsamen. Verwenden Sie Kurven, um Ihre Objekte natürlich zu bewegen.
4. Fokus der Animation
Fokusieren Sie die Aufmerksamkeit auf einen bestimmten Bereich des Bildschirms. Zum Beispiel kann ein blinkendes Symbol den Benutzer auf animierte Benachrichtigungen hinweisen. Diese Art von Animation wird in Bedienfeldern eingesetzt, die zu viele Details und Elemente enthalten und in denen es keine andere Möglichkeit gibt, die Aufmerksamkeit zu lenken.
5. Nachverfolgung und Überschneidung
Die Fortsetzung ist die Beendigung einer Aktion. Objekte stoppen nicht schnell und beginnen auch nicht, sich zu bewegen. Jede Bewegung kann als eine Reihe kleinerer Bewegungen dargestellt werden, wobei jedes Teil des Objekts mit seiner eigenen Geschwindigkeit bewegt wird. Wenn Sie beispielsweise einen Ball werfen, bewegt sich Ihre Hand nach dessen Ablegen weiterhin.
Das Überschneiden bedeutet, dass eine zweite Aktion beginnt, bevor die erste abgeschlossen ist. Dies hält das Interesse des Betrachters wach, da es keine Stillstandszeit zwischen den Aktionen gibt.
6. Sekundäre Maßnahmen
Das Prinzip der sekundären Aktionen ähnelt dem Prinzip der Nachführung und der Überlagerung. Kurz gesagt: Eine Hauptanimation kann durch sekundäre Aktionen ergänzt werden. Diese sorgen für mehr Lebendigkeit im Design, aber wenn man nicht aufpasst, können sie ablenken.
7. Einfach einlegen/einfach auslegen
Die „Ease-in/ease-out“-Prinzipien sind ein grundlegendes Designprinzip, das sowohl für Animationen im Allgemeinen als auch für UI-Animationen in der mobilen Entwicklung gleichermaßen wichtig ist. Obwohl sie gut verstanden werden, wird dieses Prinzip oft übersehen.
Das Prinzip „Einfach ein- und ausfahren“ beruht auf der Tatsache, dass reale Objekte nicht sofort in Bewegung kommen oder stehenbleiben können. Jedes Objekt benötigt eine gewisse Zeit für Beschleunigung und Verzögerung. Wenn Sie Animationen nach dem Prinzip „Einfach ein- und ausfahren“ gestalten, entsteht ein realistischer Bewegungsablauf.
8. Vorhersage
Das Prinzip der Voraussicht gilt auch für visuelle Elemente wie Anweisungen. Zunächst müssen die Benutzer etwas Zeit haben, um zu voraussagen, dass etwas passieren wird. Eine Möglichkeit, diese Voraussicht zu erreichen, ist die oben beschriebene „Ease-in“-Methode.
Es ist auch möglich, eine visuelle Anhaltspunkte dafür zu geben, dass ein Objekt auf eine bestimmte Weise bewegt werden kann: Sie können beispielsweise die letzte Karte in der Stapel zu einer bestimmten Position neigen, um anzuzeigen, dass Benutzer sie verschieben können.
9. Rhythmus
Rhythmus in Animationen erfüllt dieselbe Funktion wie in Musik und Tanz: Er strukturiert die Bewegung. Die Verwendung von Rhythmus in Ihren Animationen verleiht ihnen eine natürlichere Ausstrahlung.
10. Übertreibung
Übertreibung wird oft von Animationen verwendet, kann aber nicht einfach veranschaulicht werden, da sie auf der Idee basiert, eine erwartete Handlung oder Wirkung zu übertreiben. Sie hilft dabei, besonderes Augenmerk auf eine bestimmte Eigenschaft zu lenken.
Achtung bei der Implementierung von Animationen in mobilen Apps
- Denken Sie daran, wer Ihre Zielgruppe ist und gestalten Sie Ihre mobile Benutzeroberflächenanimation als Lösung für ihre Probleme.
- Stellen Sie sicher, dass jedes einzelne Element Ihrer animierten Grafiken eine logische Grundlage hat.
- Um Ihr Produkt hervorzuheben, streben Sie nach einer natürlichen Animation, die die Bewegungen der realen Welt nachahmt.
- Rufen Sie alle Phasen Ihres Projekts mit den Entwicklern ab, da deren Code die App-Design beeinflusst.
In diesem Artikel haben wir über die Arten animierter Benutzeroberflächeninteraktionen und die Prinzipien der Gestaltung benutzerdefinierter Animationen gesprochen, die Ihnen helfen können, eine einzigartige und nützliche Animation für Ihre App zu erstellen. Sie können gerne die von Yalantis erstellten Designkomponenten ausprobieren und nutzen, die wir hier teilen. GitHub. Wenn Ihr Unternehmen eine Partner für Softwarelösungen, Wir helfen Ihnen gerne bei der gesamten Softwareentwicklung, dem Consulting und der Supportleistung.
Wollen Sie Projekte sehen, an denen wir gearbeitet haben?
Das ist eine gute Idee.
Über den Autor
