Werfen wir also einen Blick auf 5 inspirierende Beispiele f\u00fcr mobile Animationen und 3 Beispiele, die Sie mit dem Prototyping-Tool<\/a> von Justinmind herunterladen und ausprobieren k\u00f6nnen!<\/p>\n Alles, was Sie brauchen, ist eine kleine Aktion hier, ein Ausl\u00f6ser dort, und voila, schon haben Sie ein paar beeindruckende mobile Animationen. Lesen Sie weiter, um mehr zu erfahren. <\/p>\n Kennen Sie das, wenn Sie eine mobile App herunterladen und bevor Sie zu den Waren kommen, durchlaufen Sie ein Onboarding-Erlebnis oder einen Walkthrough?<\/p>\n Bei einem Walkthrough erhalten Sie Informationen \u00fcber die App, wichtige Funktionen oder sogar Tipps und Tricks. Wenn Sie wissen, wie man einen Walkthrough erstellt, ist das eine n\u00fctzliche F\u00e4higkeit, die Sie in Ihrem UX Design Arsenal haben sollten. Sie ist unerl\u00e4sslich, da mobile Apps in Design und Architektur immer komplexer werden. <\/p>\n John Gruber<\/a> schrieb, dass ein Benutzer in der Lage sein sollte, herauszufinden, wie man eine App benutzt, „indem er sie sich einfach ansieht“, aber es gibt gute Gr\u00fcnde f\u00fcr die Verwendung einer Komplettl\u00f6sung. Es kann sein, dass eine App f\u00fcr einen Benutzer intuitiv ist, f\u00fcr einen anderen aber komplex. Walkthroughs helfen in diesem Fall, ein Gleichgewicht zu finden. <\/p>\n Kostenlos herunterladen<\/a><\/p>\n Wenn Sie Ihre Benutzer informieren und ihnen das Gef\u00fchl geben, die Kontrolle zu haben, kann das zu einem besseren Benutzererlebnis beitragen. Die Heuristiken<\/a> von Jakob Nielsen enthalten einige Richtlinien, die das Design der Benutzeroberfl\u00e4che verbessern. Eine davon ist die Sichtbarkeit des Systemstatus – eine gute M\u00f6glichkeit, den Systemstatus sichtbar zu machen, sind Ladeanimationen. In Justinmind k\u00f6nnen Sie Ladeanimationen<\/a> hinzuf\u00fcgen, indem Sie dynamische Panels verwenden und Variablen erstellen, um Schleifen zu erm\u00f6glichen. <\/p>\n Stellen Sie sich vor, Sie schicken ein Formular ab – Sie erwarten eine Ladeanimation oder ein Signal, dass etwas<\/em> passiert. Niemand m\u00f6chte bei der Benutzererfahrung im Regen stehen gelassen werden, und deshalb k\u00f6nnen Sie Ihren Benutzern ein Feedback geben, um ihnen die Angst zu nehmen. Sie k\u00f6nnen Ladeanimationen verwenden, wenn Benutzer eine App zum ersten Mal \u00f6ffnen – um ihnen mitzuteilen, dass ihre Informationen geladen werden. <\/p>\n Wenn Sie ein mobiles Erlebnis schaffen m\u00f6chten, bei dem der Benutzer nicht scrollen muss, sollten Sie eine UI-Animation zur Bildschirmflussvalidierung verwenden. Wenn der Benutzer etwas eingibt, wird der n\u00e4chste Bildschirm eingeblendet, ohne dass der Benutzer scrollen muss. Mit einigen \u00dcbergangseffekten<\/a> und mobilen Gesten k\u00f6nnen Sie mit Justinmind in wenigen einfachen Schritten ein Formular zur Bildschirmvalidierung<\/a> erstellen. <\/p>\n Die Screenflow-Validierung nutzt die Vorteile der mobilen Animation, indem sie zum n\u00e4chsten Bildschirm weiterleitet, wenn der Benutzer die angeforderten Informationen eingegeben hat. M\u00f6glicherweise sehen Sie Screenflow-Validierungen in einem Anmeldeformular, wenn Sie eine App zum ersten Mal herunterladen und \u00f6ffnen, oder beim mobilen Banking. <\/p>\n Kostenlos herunterladen<\/a><\/p>\n Eine Kontaktliste ist eine weitere M\u00f6glichkeit, mobile Interaktion zu nutzen. Kontaktlisten sind in der Regel nicht der interessanteste Teil des UX-Designs. In Justinmind k\u00f6nnen Sie jedoch einen Hauch von Interaktivit\u00e4t hinzuf\u00fcgen, um die Kontaktliste dynamischer zu gestalten, indem Sie einige zus\u00e4tzliche Optionen in die Liste einf\u00fcgen. <\/p>\n In Justinmind lernen Sie, wie Sie mit dynamischen Panels und Tabellen-Widgets eine interaktive Kontaktliste<\/a> erstellen k\u00f6nnen. Der interaktive Teil besteht darin, dass Sie Ereignisse hinzuf\u00fcgen, wie z.B. das Ereignis ‚On Slide Left‘, mit dem Benutzer den Kontakt in der Kontaktliste streichen k\u00f6nnen, um Optionen wie Teilen oder Favoriten anzuzeigen. <\/p>\n Kostenlos herunterladen<\/a><\/p>\n Wenn es um progressive Offenlegung geht, ist ein Akkordeon Ihr bester Freund. Akkordeons sind ein vielseitiges kleines Design-Muster, das die Arbeitslast reduzieren und die kognitive \u00dcberlastung minimieren kann. Wenn Sie eine mobile App entwerfen und zu viele Informationen haben – z. B. viele Inhalte – dann ist die Platzierung dieser Informationen in einem Akkordeon, auf das die Benutzer klicken k\u00f6nnen, eine n\u00fctzliche M\u00f6glichkeit, mehr Informationen anzuzeigen, ohne kostbaren Platz zu verbrauchen. <\/p>\n Ein Akkordeon in Justinmind zu designen<\/a> ist auch keine Raketenwissenschaft. Mit ein paar einfachen Schritten, ein paar dynamischen Panels<\/a> und ein paar Ereignissen haben Sie Ihr Akkordeon im Handumdrehen erstellt und zum Laufen gebracht. <\/p>\n Animierte \u00dcberg\u00e4nge signalisieren dem Benutzer eine \u00c4nderung des Zustands. Das kann bedeuten, dass sie eine Bewegung im Navigationsfluss, die Erledigung einer Aufgabe, die Einf\u00fchrung oder das Entfernen von UI-Elementen auf dem Bildschirm und eine \u00c4nderung der Position in der Schnittstellenhierarchie signalisieren. Bei all der Komplexit\u00e4t der verschiedenen Bildschirme und UI-Elemente, die mobile Anwendungen aufweisen, k\u00f6nnen abrupte \u00c4nderungen dazu f\u00fchren, dass sich Ihre Benutzer verloren und verwirrt f\u00fchlen. Und genau hier kommen animierte \u00dcberg\u00e4nge ins Spiel. <\/p>\n Der Softwareentwickler und UX-Influencer Nick Babich definiert in seinem Beitrag Animation in Mobile UX Design<\/a> kurz und b\u00fcndig, was einen guten animierten \u00dcbergang von einem schlechten unterscheidet: <\/p>\n Effektive animierte \u00dcberg\u00e4nge:<\/p>\n Schlecht designte, animierte \u00dcberg\u00e4nge hingegen schon:<\/p>\n Animierte \u00dcberg\u00e4nge k\u00f6nnen mobile UIs dynamischer, ansprechender und benutzerfreundlicher machen. Wenn Sie sie jedoch falsch einsetzen, wirken sie sich negativ auf die Benutzerfreundlichkeit und die Konversionsrate aus. Deshalb ist es wichtig, diese Animationen in Ihren High-Fidelity-Prototypen<\/a> einzubauen, damit Sie sie testen und validieren k\u00f6nnen. <\/p>\n Die Erstellung eines unterdurchschnittlichen Animationseffekts kann ein Schuss ins eigene Knie sein. Sehen Sie sich diese Liste brillanter Animations-Apps<\/a> an, um professionelle Animationen in Ihren Prototypen zu erhalten. <\/p>\n<\/div>\n Hier bei Justinmind sind wir der Meinung, dass man einen Artikel wie diesen am besten mit ein paar schicken Beispielen illustriert, die Ihnen genau zeigen, wovon wir sprechen. Hier sind also 5 gute Beispiele f\u00fcr UI-Animationen, die wir wirklich m\u00f6gen. <\/p>\n Das Lottie-Animationssystem von Airbnb<\/a> zielt darauf ab, native UI-Animationen in seine iOS-, Android- und Webanwendungen zu bringen. Das Ziel ist, dass Entwickler Animationen genauso einfach integrieren k\u00f6nnen wie statische Elemente. <\/p>\n Das Ergebnis ist eine Reihe ansprechender, fr\u00f6hlicher UI-Animationen, die das Benutzererlebnis bereichern, ohne jemals vollst\u00e4ndig zu dominieren. Im ersten Beispiel wird der Wecker mit einem sich drehenden Effekt eingeblendet, der die Aufmerksamkeit auf sich zieht, ohne das Benutzererlebnis zu st\u00f6ren. Im zweiten und dritten Beispiel dienen die Animationen dazu, dem Benutzer zu zeigen, was erforderlich ist, und ihn in die vom UX-Team gew\u00fcnschte Richtung zu lenken. Sie sind so subtil, wie sie sein m\u00fcssen, und so klar, wie sie sein sollten. <\/p>\n <\/p>\n Diese Konzept-App zur Weltraumforschung<\/a> verf\u00fcgt \u00fcber eine animierte UI, die mit butterweichen \u00dcberg\u00e4ngen ein echtes Gef\u00fchl von Bewegung und Reisen vermittelt. Die Entscheidung f\u00fcr ein komplett individuelles UI-Design wie dieses kann riskant sein, aber wir sind der Meinung, dass der Designer Anton Skvortsov hier richtig gehandelt hat. Die Oberfl\u00e4che ist intuitiv und detailliert, aber dennoch einfach und leicht zu bedienen. <\/p>\n Unsere zwei Lieblingsdetails: Sehen Sie, wie die kleinen Symbole f\u00fcr die Planeten ihre Monde einschlie\u00dfen. Oh, und der Tesla, der in der N\u00e4he des Planeten Erde schwebt. <\/p>\n In vielen F\u00e4llen m\u00fcssen UI-Animationen Ihre App nicht mit Glanz und Glamour aufwerten. Eine kleine Bewegung nach einer Benutzerinteraktion kann oft schon ausreichen, um dem Benutzererlebnis ein angenehmes Erfolgserlebnis zu verleihen. <\/p>\n Der Zutatenbildschirm der Koch-App<\/a> von Vlad Fedoseyev ist ein gutes Beispiel daf\u00fcr. Wenn Sie auf eine Zutat tippen, um sie hinzuzuf\u00fcgen, wird eine ansprechende Animation ausgel\u00f6st, und die Zutat zoomt auf den ausgew\u00e4hlten Bereich. Wenn Sie weitere Zutaten hinzuf\u00fcgen, wird eine neue Schaltfl\u00e4che eingeblendet, die anzeigt, wie viele weitere Zutaten bereits hinzugef\u00fcgt wurden. In der Zwischenzeit wird die Liste der verf\u00fcgbaren Zutaten neu gestaltet, wenn Sie auf die Schaltfl\u00e4che Rezepte tippen. <\/p>\n Das alles geschieht mit minimaler Ablenkung und maximaler Klarheit. Ein gro\u00dfartiges Design. <\/p>\n \u00dcberg\u00e4nge sind wirklich die wichtigsten UI-Animationen – wenn Sie sie richtig hinbekommen, haben Sie es schon halb geschafft. Wenn Sie sie falsch machen – zu schnell, zu langsam, zu ruckartig -, besteht die Gefahr, dass die Benutzererfahrung unangenehm ist. <\/p>\n Das Konzept von Tubik f\u00fcr eine E-Commerce-App f\u00fcr Vinyl<\/a> ist ein gro\u00dfartiges Beispiel f\u00fcr eine gut gemachte UI-Animation. Sch\u00f6n flie\u00dfend, mit Elementen, die auftauchen und verschwinden, ohne dass man das Gef\u00fchl hat, dass die Verbindung abbricht oder dass man sich fragt: „Wo ist die denn hin?!“. Am besten gef\u00e4llt uns der Moment, in dem die Schallplatte aus der H\u00fclle rollt – die Tatsache, dass es sich um eine unserer Lieblingsplatten handelt, macht das Ganze noch besser. <\/p>\nAutomatische Diashow UI-Animation<\/h3>\n
![\"Diashow](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-ui-animation-ux-design-slider-slideshow-animation-ui-pattern.gif\")
<\/p>\n
\nLaden Sie jetzt das kostenlose Beispiel f\u00fcr eine automatische Diashow herunter<\/span><\/h2>\n
\n<\/div>\nUI-Animation zum Laden<\/h3>\n
![\"form](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-animation-ui-pattern-ux-design-ui-animation.gif\")
<\/p>\nBildschirmablauf-Validierung UI-Animation<\/h3>\n
\nLaden Sie hier das kostenlose Beispiel f\u00fcr die Validierung des Bildschirmablaufs herunter<\/span><\/h2>\n
\n<\/div>\n![\"Beispiel](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-animation-ui-pattern-ux-design-animation-ui-animation.gif\")
<\/p>\nInteraktive UI-Animation der Kontaktliste<\/h3>\n
\nLaden Sie hier das kostenlose Beispiel einer interaktiven Kontaktliste herunter<\/span><\/h2>\n
\n<\/div>\n![\"ui](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/04\/mobile-ui-animation-accordion-animations-ux-design.png\")
<\/p>\nAkkordeon UI Animation<\/h3>\n
Wozu dienen mobile UI-Animationen?<\/h3>\n
Was macht eine gute mobile UI-Animation aus?<\/h3>\n
\n
\n
5 UI-Animationen, die wir lieben<\/h2>\n
Airbnb – Lottie Animationssystem<\/h3>\n
![\"airbnb](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/airbnb-mobile-ui-animations-justinmind.gif\")
<\/p>\nUI-Animation der Sonnensystem-App<\/h3>\n
![\"Sonnensystem-App](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/xore-solar-system-app-UI-animations-justinmind.gif\")
<\/p>\nZutatenauswahl UI-Animation in einer Koch-App<\/h3>\n
![\"Kochen](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/ingredients-app-UI-animations-justinmind.gif\")
<\/p>\nVinyls E-Commerce-App UI-Animation<\/h3>\n
![\"Vinyl](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/vinyl-shop-app-UI-animations-justinmind.gif\")
<\/p>\nUI-Animation f\u00fcr soziale Netzwerke<\/h3>\n
![\"Soziale](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2018\/01\/social-app-UI-animations-justinmind.gif\")
<\/p>\n
![\"Kostenlos](\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2017\/01\/Download_free.png\")
<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"