12 kostenlose AE Tutorials für UX Professionals
Modernes Webdesign beinhaltet eine Menge beweglicher Teile wie Content Design, Icon Arbeit und UX Designstrategien . Ein neuerer Trend ist die Verwendung von Mikrointeraktionen auf Web- und Mobile-Projekten.
Diese sehen im endgültigen Projekt gut aus, sind aber mit einem statischen Modell nicht so einfach zu erstellen. Daher haben Designer Animationsprogramme wie After Effects aufgenommen, um bewegungsbasierte Modelle zu erstellen.
Wenn Sie versuchen, diese Fähigkeiten zu erlernen, empfehle ich diese kostenlosen Videos auf YouTube. Sie werden Ihnen nicht alles beibringen, aber sie werden die Grundlagen abdecken und Ihnen eine solide Grundlage geben, um Ihre Fähigkeiten zu verbessern.
1. Schaltfläche Benutzeroberfläche animiert
Das sehr kurze UI-Animation Tutorial ist perfekt für Anfänger mit wenig bis keine AE-Erfahrung. Es erfordert etwas Geduld, um durch die Schnittstelle zu arbeiten, aber die Anweisungen sind kristallklar.
Sie lernen, einen kleinen Button-Animationseffekt zu erstellen, der sich hervorragend für Websites oder mobile Apps eignet.
Das ist nichts Spektakuläres, aber am Ende werden Sie dieses Konzept viel besser verstehen.
2. Prototyp-Bewegung
Eine andere einfache Animation, die Sie machen können, ist ein gleitendes Menü wie In diesem Video . Es zeigt Ihnen, wie Sie ein Menü in After Effects animieren und wie Sie mit einzelnen Ebenen in der Software arbeiten.
Es ist ein ziemlich langes Tutorial mit mehr als 40 Minuten Schritt-für-Schritt Anleitung. Aber es ist die Zeit wert, wenn Sie es bis zum Ende durchschauen können.
3. AE Icon Animation
Kleine Symbolanimationen werden nicht direkt zur Benutzeroberfläche hinzugefügt, können jedoch die Benutzerfreundlichkeit verbessern. Diese Icon-Bewegungen beziehen sich auf die zuvor erwähnten kleinen Mikrointeraktionen.
Und Dieses Symbol Animation tut spricht über Mikrointeraktionen mit leicht zu folgen Richtungen. Sie könnten sogar herunterladen kostenlose Icons im PSD / AI-Format und verwende diese für die Animation.
Aber das ist auch praktisch für Icon-Designer, die ihre eigenen Icons von Grund auf neu erstellen und für die Produktion animieren möchten.
4. Animierte UI / UX-Cursor
Viele Designer erstellen UX-Animationen, um zu zeigen, wie eine Schnittstelle funktionieren sollte. Dies würde natürlich Mausklicks / Wischen beinhalten, weil Sie sehen möchten, wie Inhalte sich über die Seite bewegen.
Wenn du möchtest fügen Sie Cursorbewegungen hinzu zu deinen Modellen dann ist dieses Tutorial für dich. Es ist ein ziemlich kurzer Leitfaden, nur 15 Minuten lang, aber die Informationen sind sehr wertvoll und relevant für sowohl mobile und Web-Designer.
5. iPhone App Benutzeroberfläche
Ein weiteres gutes Beispiel für eine benutzerorientierte Animation ist dieses nach einer typischen iPhone App-Eingabe. Sie erstellen den Pfad eines Benutzers über eine iPhone-App und füllen einzelne Formularfelder aus.
An sich scheint das nicht viel zu sein, da die Leute wissen, wie dieser Prozess aussieht.
Aber wenn Sie eine Webseite oder Anwendung entwerfen, die einen einzigartigen Fluss hat, dann hilft es, das gesamte Benutzerverhalten von der Eingabe von Informationen bis zur Anmeldung und vielleicht mehr zu zeigen.
6. App Seite Swipes
Mobile App-Designer können Seitenwischungen für mehrseitige Schnittstellen verwenden. Diese funktionieren hervorragend für Galerien und für paginierte Effekte.
Im Dieses kurze Tutorial Sie erfahren, wie Sie mit After Effects Seitenüberstreichungsanimationen mithilfe einiger vorhandener Modelle erstellen. Dieses Video kommt kostenlos von UX in Bewegung wo sie eine Menge ähnlicher Tutorials und privater Workshops haben.
Das Thema UX motion wird im Web nicht viel behandelt, aber diese Jungs sind eine der wenigen guten, die sich wirklich in die Details vertiefen. Sieh dir den gesamten YouTube-Kanal an, wenn du mehr erfahren möchtest.
7. Jelly UI Animationen
Wahrscheinlich haben Sie in Android-Apps oder sogar im Internet seltsame Flüssigkeit-Gelee-Menüs gesehen. Diese sind nicht sehr häufig, da sie im Code schwer zu erstellen sind, aber mit dieses Jelly UI Tutorial Sie können die Animationen zumindest von Grund auf neu erstellen.
Es ist ein weiteres Freebie von UX in Motion und es dauert nur etwa 5 Minuten.
Aber Sie werden viel über After Effects und den gesamten UX-Animationsprozess lernen. Insbesondere, wie man Vektoren importiert und mit diesen Dateien über eine Zeitleiste arbeitet - wirklich nur die Grundlagen der Oberflächenanimation.
8. Entfaltung der Animation
Obwohl ich nicht sagen kann, dass diese Animation direkt auf die Benutzeroberfläche wirkt, ist es etwas, das Sie dem Logo Ihrer Website hinzufügen können. Entfalten von Animationen werden meist in Video Intros verwendet, um ein brandfähiges Bild zu erstellen.
Aber Webseiten können auch ähnliche Entfaltungsanimationen haben SVG-Grafiken und grundlegende JS-Animationen.
Auch wenn Sie keine Logoanimationen erstellen möchten, können Sie mit diesem Lernprogramm dennoch einen einfachen AE-Schnittstellen-Workflow ausführen. Perfekt für das Erlernen der Seile ohne viel Stress.
9. Grundlegende UI-Prototyp-Animationen
Mobile App-Menüs gibt es in vielen verschiedenen Stilen mit verschiedenen Animationstechniken. Dieses UI-Lernprogramm zeigt Ihnen, wie Sie das Flyout-Icon-Menü aktivieren können.
Dies wurde zuerst der Path-App gutgeschrieben, ist aber inzwischen zu einem allgemeinen Trend für Android- und iOS-Geräte geworden.
In diesem 20-minütigen Video erfahrt ihr Ideen für Icon-Animation und Menü-Design. Es ist ziemlich einfach zu arbeiten und Sie können vordefinierte Symbole für den Workflow verwenden, um Zeit zu sparen.
10. 3D-Ebenenaufteilungen
Präsentationsanimationen sind wertvoll für die Kundenarbeit oder für das Teilen von Ideen vor einem Team. Das ist wo diese 3D-Ebenenanimation Tutorial kann helfen.
Es lehrt Sie, wie Sie verschiedene Ebenenelemente auflösen und von der gesamten Oberfläche trennen können. Sie können sogar verschiedene Seitenelemente präsentieren, um anzuzeigen, wie die App / Website funktionieren soll.
Ich kann mir nicht vorstellen, dass dies für die persönliche Arbeit wertvoll wäre, aber es ist ein cooler Effekt, speziell für kommerzielle Gigs zu lernen.
11. iOS 8 Schalter
Animierte Ein / Aus-Schalter erschienen zuerst in frühen Versionen von iOS und haben sich seitdem auf Android- und allgemeine Websites ausgebreitet.
Die besten UI-Schalter verfügen über benutzerdefinierte Animationen und Sie können Ihre eigenen erstellen, indem Sie folgen dieses 25-minütige Tutorial . Es wird davon ausgegangen, dass Sie bereits die Switch-Grafik haben, aber Sie können auch herunterladen ein Freebie PSD und benutze das stattdessen.
Außerdem können Sie diese Animation für jede Art von Switch, den Sie in Zukunft entwerfen, verwenden. Ein tolles Tutorial für jemanden, der gerade in After Effects für UI / UX einsteigt.
12. Glatte Icon Animationen
Der letzte auf meiner Liste ist Dieses detaillierte Symbol Bewegung tut mit ein paar verschiedenen Vektorformen. Es ist ein ziemlich detaillierter Leitfaden, der insgesamt über 30 Minuten umfasst und ein paar verschiedene Techniken umfasst.
Sobald Sie sich mit After Effects auskennen, können Sie diese Ideen auf andere Symbolstile anwenden. Deshalb ist dieses Tutorial so gut für Anfänger; Es zeigt Ihnen, wie Sie mit speziellen Techniken für UI / UX-Designer in der AE-Schnittstelle arbeiten.
Aber mit jedem dieser Tutorials verbessern Sie Ihre UX-Animationsfähigkeiten, also stellen Sie sicher, dass Sie alle, die Ihnen auffallen, mit einem Lesezeichen versehen.
