Veröffentlicht am 19-02-2019

Arten der Animation für mobile Apps

12 Animationstypen für mobile Apps und 12 Hauptprinzipien des Designs

Animationen für mobile Anwendungen sind ein wichtiges und wesentliches Element für die Erstellung einer großartigen Benutzererfahrung. Die kritische Herausforderung besteht darin, den Benutzern die App-Logik zu erklären. Der häufigste Fehler ist jedoch die rücksichtslose Verwendung von Animationen, bei der die Benutzererfahrung nicht unbedingt verbessert wird. Um eine App großartig zu gestalten, nicht nur gut oder mittelmäßig, muss die Animation korrekt integriert sein und sollte nicht überflüssig sein.

In diesem Artikel erfahren Sie, welche Arten von Animationen für mobile Apps verfügbar sind. Wir beschreiben auch die wichtigsten Prinzipien des Designs. Weiter lesen!

Arten von Animationen für mobile Apps

Benutzer davon zu überzeugen, einige Apps herunterzuladen, wird für Entwickler von mobilen Produkten immer schwieriger. Noch schwieriger ist es jedoch, die Loyalität und das Vertrauen des Publikums zu gewinnen. Durch die kontinuierliche Verbesserung der UX können Besitzer von Apps eine fruchtbare und langfristige Beziehung zu ihrer Zielgruppe aufbauen. Animierte Elemente vermitteln Benutzern ein Gefühl der Interaktion mit realen Objekten. Wenn die Animation in der Benutzeroberfläche korrekt implementiert ist, merken die App-Benutzer nicht einmal, wie sie sie verwenden - alles geschieht intuitiv.

Überladen Sie die Benutzeroberfläche nicht mit Animation, da dies eine mobile App und kein Film ist. Eine erfolgreiche mobile App verwendet eine eingängige Animation nur dort, wo sie wirklich benötigt wird. Bei der Entwicklung einer App ist es wichtig zu verstehen, welche Art von Animation für welche Funktionen besser passt. Es gibt verschiedene Arten von Animationen für mobile Apps, aber wir beschreiben die wichtigsten. Lass uns Schritt für Schritt gehen.

# 1. Animierter Begrüßungsbildschirm

Laut aktuellen Untersuchungen sind 82% der Smartphone-Nutzer zuversichtlich, dass die App in weniger als 3 Sekunden gestartet werden sollte. 71% der Benutzer verzichten darauf, wenn sie länger als 5 Sekunden warten müssen. Es ist unrealistisch, eine sofortige Auslastung einer komplexen mobilen App mit bestimmten Funktionen zu erwarten. In diesem Fall hilft die Animation des Begrüßungsbildschirms, die Benutzer zu unterhalten, wenn sie auf den Start der App warten, und das Gefühl, dass das Laden schneller geht. Es gibt viele Tricks, wie man Ladeanimationen erstellt. Wählen Sie die Animation, die am besten zu Ihrer mobilen App passt - einfaches oder kreatives animiertes Logo, eine Zeitraffer-Animation usw. Bei Bedarf können Sie auch einen animierten Anmeldebildschirm erstellen.

Quelle der Animation: Verbündeter

# 2. Visuelles Feedback

Im wirklichen Leben sind Menschen daran gewöhnt, mit Objekten zu interagieren, und wollen dies auch von einem Smartphone. Visuelles Feedback ist das Hauptmerkmal des UI / UX-Designs. Es gibt den Benutzern ein Gefühl der physischen Interaktion mit Objekten und zeigt, dass die App stabil arbeitet - auf Anfragen und Funktionen korrekt reagiert. Mit einem Telefon kann ein Benutzer kein Tastendruck spüren, er kann es jedoch sehen. Zum Beispiel ändert eine Schaltfläche ihre Farbe oder Größe, wenn sie gedrückt wird, und ein Bild wird mit dem Wischen in die richtige Richtung gedreht. Benutzer erhalten visuelles Feedback, eine App ist aktiv, und nichts lenkt sie vom Inhalt ab.

Quelle der Animation: Lei Xiang

#3. Animierte Onboarding-Bildschirme

Benutzer sollten von Anfang an effektiv in der App-Struktur geführt werden, da sie sonst auf die Verwendung der App verzichten können. In-App-animierte Navigation ist ein Muss für ein strukturiertes und intuitives mobiles Design. Jedes bewegliche Element hat seine eigene spezifische Funktion und hilft Benutzern, die komplexe App-Struktur und ihre Logik zu verstehen. Der Leitfaden wird hauptsächlich beim Start der App geöffnet, sollte jedoch jederzeit verfügbar sein.

Quelle der Animation: Divan Raj

# 4. Änderungen von Anzeigeelementen

Jede mobile Plattform für Android und iOS enthält verschiedene Designelemente wie Schaltflächen, Symbole, Dropdown-Listen, Menüleisten, Bilder usw. Und Änderungen sind unvermeidlich. Bei dieser Art von Animation wird die eigentliche Aktion wiederholt, sodass der Benutzer sehen kann, was passiert ist. Wenn Sie Benutzern mithilfe von Animationen neue Funktionen von Elementen anzeigen, wird die Interaktion und das Verständnis vereinfacht und verbessert. Wenn Sie Animationen hinzufügen, um Änderungen anzuzeigen, werden Benutzer dazu aufgefordert, die Anpassung an die Elementumwandlung zu verbessern.

Animationsquelle: Mathias Frey

# 5. Reibungslose und logische animierte Übergänge

Machen Sie Ihre mobile App für Benutzer angenehmer und flüssiger. Die Struktur mobiler Anwendungen ist komplex und hat viele Navigationsschichten. Animierte Übergänge halten die Verbindung in einem Kontext und sorgen für einen reibungslosen Übergang.

Animationsquelle: Zak Steele-Eklund

# 6. Strukturierung von Informationen, Hierarchie und Interaktion von App-Elementen

Hierarchie und Interaktion von App-Elementen sind entscheidend für eine intuitive Benutzeroberfläche. Jedes App-Element hat seine eigene Funktion und hat seinen eigenen Platz. Diese Art der Animation ermöglicht es, verschiedene Elemente der Benutzeroberfläche zu beschreiben, ihre Interaktionen und Mikrointeraktionen zu veranschaulichen, Strukturinformationen zu erstellen und zu bestimmen, welche Inhalte betrachtet werden sollen.

Animationsquelle: Dannniel

# 7. Visuelle Hinweise

Diese Art von Animation wird als Hinweis verwendet, um ein bestimmtes Element oder eine Menüleistenoption hervorzuheben. Es hilft Benutzern, in die richtige Richtung geleitet zu werden. Wenn Sie ständig animierte Hinweise verwenden, fühlen sich die Benutzer eingeschränkt, und die Animation leitet sie an einen einzelnen Fluss weiter.

Quelle der Animation: Virgil Pana

# 8. Zustand des Systems und animierte Aktivitätsindikatoren

Verborgene Prozesse in einer aktiven App und die dafür aufgewendete Zeit sind für Benutzer nicht sichtbar. Wenn keine Statusleiste zum Herunterladen von Mediendateien oder zum Aktualisieren einer App angezeigt wird, ist ein Benutzer verwirrt und versteht nicht, wann der Vorgang abgeschlossen ist. Daher ist es wichtig, das Publikum von der Kontrolle aller Prozesse zu überzeugen und den Fortschritt eines Prozesses zu visualisieren.

Animationsquelle: Giedrius Butkus

# 9. Animation Animation

Wenn Sie Ihre mobile App noch unkonventioneller und einprägsamer gestalten möchten, ist die Animationsanimation die ideale Lösung. Es kann auch als Belohnung für eine erfolgreiche Aktion verwendet werden. Es macht die Interaktion mit der App zu einem angenehmen Erlebnis und zieht mehr Nutzer an.

Quelle der Animation: Minh Pham

# 10. 3D Animation

Mit der 3D-Modellierung können Sie realistische 3D-Bilder, Objekte und Szenen erstellen und diese mit den neuesten professionellen Modellierungs- und Visualisierungstechnologien visualisieren. Verwenden Sie Werkzeuge zum Animieren, Modellieren, Rendern, Nachbearbeitung von Videos, Erstellen interaktiver Spiele.

Quelle der Animation: Aurélien Salomon

# 11. Benutzerdefinierte Animation

Benutzerdefinierte Animationen werden für eine enge Zielgruppe für bestimmte mobile Apps verwendet. Es kann helfen, Ihr Produkt unter anderem hervorzuheben und die Bekanntheit der Marke zu erhöhen, jedoch nur, wenn Sie den goldenen Mittelwert finden. Stellen Sie sicher, dass die Animation leicht und intuitiv erscheint und die Benutzer nicht von den Hauptfunktionen ablenkt.

Quelle der Animation: Jack Harvatt

# 12. Animation zum Ziehen und Aktualisieren

Diese Art der Animation zeigt, dass der Benutzer die obere Grenze mit dem Inhaltslauf erreicht hat und dass der Anwendungsbildschirm aktualisiert wurde. Es ist beliebt bei Besitzern von mobilen Apps und ist ein großartiges Feld für Kreativität. Mit der Animation zum Aktualisieren können Benutzer Ihre Marke besser merken und erkennen.

Quelle der Animation: Clement Gourdeau

Die wichtigsten Prinzipien des Designs

Eine großartige mobile App sollte kritische Benutzerprobleme lösen, anstatt neue zu erstellen. Das Design der Benutzeroberfläche muss für Benutzer intuitiv und benutzerfreundlich sein, damit sie die effizienteste und schnellste Lösung finden können. Um das UI / UX-Design zu verbessern, sollten Sie die wichtigsten Funktionsprinzipien beachten.

Es gibt 12 Grundprinzipien der Animation, die ursprünglich von den Disney-Animatoren Ollie Johnston und Frank Thomas im Buch The Illusion of Life: Disney Animation erstellt wurden. Trotz der Tatsache, dass diese Prinzipien in den 1930er Jahren beschrieben wurden, sind sie immer noch relevant und werden in jeder Art von moderner Animation erfolgreich eingesetzt. Der Animator-Enthusiast Cento Lodigiani ging in seinem Video kreativ auf die Animation dieser Prinzipien ein.

Das „Squash and Stretch“ -Prinzip wird verwendet, um die Illusion zu erzeugen, dass ein animierter Charakter beim Bewegen Gewicht, Volumen und Elastizität hat.

Das „Antizipationsprinzip“ zeigt das Publikum, wenn eine große Aktion mit Hilfe spezifischer kleinerer Aktionen durchgeführt wird. Mit ihrer Hilfe werden Züge als realistischer empfunden.

Das „Bühnenprinzip“ präsentiert eine Idee so, dass sie dem Publikum ohne unnötige Details klar wird.

Das Prinzip „Straight Ahead und Pose to Pose“ setzt sich aus zwei unterschiedlichen Ansätzen zusammen. Zunächst wird eine verwendet, um die Bewegung Bild für Bild sequentiell zu animieren. Die zweite wird zum Zeichnen der Tastenbewegungen und zum Nachfüllen der Intervalle verwendet.

Das Prinzip "Folgen und Überlappen" ermöglicht, dass die Bewegungen eines Charakters realistischer aussehen - verschiedene Teile eines Charakters können nicht sofort anhalten, da sie unterschiedliche Geschwindigkeit haben

Mit dem Slow-In- und Slow-Out-Prinzip können Objekte über eine unterschiedliche Anzahl von Frames in jeder Phase der Aktion realistisch beschleunigt und verlangsamt werden.

Das Arcs-Prinzip besagt, dass alle Objekte ihrer natürlichen Bogenbahn oder einem leicht kreisförmigen Pfad folgen. Wenn Sie sich nicht an dieses Prinzip halten, wirken die Bewegungen unnatürlich.

Das Sekundäraktionsprinzip verwendet zusätzliche Maßnahmen, um die Hauptaktion realistischer zu gestalten und mehr Dimension

Das Timing-Prinzip lässt das Publikum glauben, dass animierte Handlungen die Gesetze der Physik einhalten. Mehr Zeichnungen verlangsamen und glätten die Aktionen, während weniger Frames Aktionen schneller und schärfer machen.

Das Prinzip der "Übertreibung" erlaubt es, die Realität exzentrisch oder surreal

Das Prinzip „Solid Drawings“ besagt, dass alle Objekte unter Berücksichtigung ihrer Formen im 3D-Raum mit relevantem Gewicht und Volumen animiert werden sollten.

Das Appeal-Prinzip ist, dass Charaktere geschaffen werden sollten, um ein Publikum zu begeistern und die Augen zu erfreuen

App-Designer sollten die von Apple erstellten Human Interface Guidelines und die von Google entwickelten Material Design Guidelines beachten.

Schlussfolgerungen

In diesem Artikel haben Sie über Animationsarten für mobile Apps und die wichtigsten Prinzipien des Designs informiert. Wenn Sie feststellen, welche Elemente in einer bestimmten Situation am effektivsten sind, können Sie die Aufmerksamkeit und das Verhalten der Benutzer steuern. All dies ist notwendig, um Benutzeroberflächen zu entwerfen, die die Probleme der Benutzer lösen und ihnen helfen, Ziele zu erreichen.

Wenn Ihnen das gefallen hat, zeigen Sie Ihre Unterstützung, indem Sie auf uns klatschen und mit anderen Personen auf Medium teilen.

Folgen Sie uns auf Facebook, Instagram, LinkedIn, Behance, Medium und besuchen Sie unseren Unternehmensblog für weitere Neuigkeiten und Artikel zu intelligenten Lösungen.

Irgendwelche Fragen? Fühlen Sie sich frei uns zu kontaktieren!

Ursprünglich für S-PRO Blog geschrieben.

Siehe auch

Top 10 der besten Digital Publishing-Software | KitabooRobin8 führt bahnbrechende APIs für künstliche Intelligenzdaten für Influencer in China und…Neue Komponenten zur Insolar Blockchain hinzugefügtMobile Marketing ist nicht die Zukunft - es ist die Gegenwart!Ich habe kein Telefon und ich habe diese 5 wichtigen Dinge vermisst.Neueste Forschungsergebnisse zu globalen chirurgischen Robotern für den Spine-Markt Top-Key-Player -2019