20 beste Werbegeschenke für aufstrebende UX Motion Designer

Interface-Designer interessieren sich mehr für UX-Design mit animierten Mockups, die Benutzeraktionen nachahmen. Diese UX-Modelle sich auf Bewegung verlassen mit animierten Effekten zu definieren wie eine Schnittstelle auf Benutzereingaben reagieren soll.

Die meisten UX-Designer lernen, Software zum Erstellen dieser Animationen zu verwenden. Die zwei beliebtesten Optionen sind Adobe After Effects und Principle (nur OS X). Sie können Design-Interface-Modelle in einem Programm wie Photoshop, und verschieben Sie die Benutzeroberflächen in diese Programme zur Animation.

Wenn Sie sich für UX-Animationen interessieren, sind Freebies eine enorme Bereicherung. Sie können die Arbeit anderer studieren und mit ihren Entwürfen spielen, um zu sehen, wie alles funktioniert.

Im Folgenden finden Sie die besten Freebies für Principle- und AE-Benutzer Einstieg in UX Motion Design. Sie werden dir sicherlich helfen zu verstehen Wie funktioniert die UX-Animation?, und wie du deine eigenen konstruieren kannst.

1. Aktion löschen

Wischen ist eine sehr häufige Aktion in mobilen Apps für verschiedene Zwecke. Die Standard-Wischaktion von iOS wird verwendet alternative Optionen zum Bearbeiten / Löschen von Elementen anzeigen, und genau das bekommen Sie in diesem von Ramil Derogongun kreierten Werbegeschenk.

Sie können die kostenlose AEP-Datei für After Effects herunterladen und selbst ausprobieren. Die Benutzeroberfläche folgt a sehr einfaches Wireframe-Schema wobei die Benutzereingabe als blauer Punkt angezeigt wird. Diese Arten von Benutzerverhalten lassen sich am besten darstellen durch Animation weil es Entwicklern eine Chance gibt, zu sehen wie das Interface funktionieren soll.

2. Widget Swipe

Hier ist ein weiteres animiertes Swipe-Modell, das fokussiert auf dem Warenkorb Artikel in einer Diashow. Diese kostenlose Swipe-Animation enthält eine von Leon Wu entwickelte PRD-Datei, die für Principle erstellt wurde.

Die Animation ist extrem einfach und zeigt, wie sich Elemente auf dem Bildschirm bewegen sollen wenn Druck ausgeübt wird. Sie bekommen auch ein Gefühl für das Lockerungseffekt Immer wenn die Wischaktion ausgelöst wird.

3. Dualshock-Benutzeroberfläche

Hier ist ein unglaublich dynamischer UX-Animationseffekt, den Alexander Boychenko gemeinsam nutzt. Dieses Modell basiert auf dem PlayStation Controller für eine mobile App-Benutzeroberfläche. Es enthält eine Sketch- und Principle-Datei, die Sie kostenlos herunterladen können.

In diesem Gratisartikel wird gezeigt, wie man Übergänge so erstellen kann Streichen Sie zwischen den Bildschirmen. Sie können jedoch auch sehen, wie Seitenelemente auf dem Bildschirm animiert werden in verschiedene Richtungen.

4. Hamburger Menüanimation

Hamburger Icons sind in mobilen Interfaces immer noch angesagt. Dieses Menü-Symbol zeigt, wie es geht Animieren Sie das Dreibalkensymbol in ein "X" -Symbol.

Es ist ein Animation wiederholen, Das "X" animiert also wieder zu einem Hamburger-Menüsymbol. Dies ist ein großartiger Werbegeschenk, über den Sie erfahren können Vektormanipulation für UI-Elemente.

5. Snapster

Dieses kostenlose Modell ist für eine mobile App mit dem Namen Snapster. Es konzentriert sich auf dem Begrüßungs- / Onboarding-Bildschirm Hier können Benutzer Demos der App sehen und erfahren, wie sie tatsächlich funktioniert.

Es handelt sich um eine PRD-Datei, die leider nicht mit After Effects kompatibel ist. Daher können nur Principle-Benutzer davon profitieren.

6. Spinner laden

Hier ist ein AEP After Effects-Werbegeschenk für Spinner für mobiles Laden. Diese Arten von animierten GIFs wurden sehr populär, als Ajax in die Mainstream-Webentwicklung einstieg.

Jetzt sind diese mobilen Lader ein Dutzend, und sie können sogar sein stark angepasst für bestimmte Schnittstellen. Dieses Freebie enthält eine AEP-Datei und eine Sketch-Datei, um die Vektoren zu bearbeiten, wenn Sie sie ändern möchten.

7. Wiedergabe / Pause-Übergang

Übergangseffekte Sie wirken oft sehr einfach, erfordern aber viel Arbeit. Diese von Alex Pronsky erstellte Play / Pause-Animation ist ein hervorragendes Beispiel.

Mit diesem Freebie können Sie untersuchen, wie Sie verschiedene dünne Liniensymbole animieren in Formen und Symbole. Wenn Sie das Programm einmal gelernt haben, wird es viel einfacher, diese Art von Aufgaben zu erledigen, so dass es Ihnen hilft, kostenlose Werbematerial für Forschungszwecke zur Verfügung zu haben.

8. iPhone-Modell

Diese Freebie enthält zwar keine Animationen, ist aber dafür gedacht, verwendet zu werden für die Produktion von iPhone-Anwendungen. Es ist eine kostenlose iPhone 5S-AEP-Datei für die Verwendung in After Effects als iPhone-Vorlage.

Importieren Sie einfach Ihr Schnittstellenmodell und erstellen Sie die Animationen in After Effects. Dann können Sie es an dieses iPhone-Modell anschließen, um es mit Ihrem Team zu teilen.

9. iPhone Vorlage

Dies ist ein anderes benutzerdefinierte After Effects-Vorlage mit einer moderneres iPhone-Design. Das kostenlose Angebot ist auf dieser Seite bei UX in Motion verfügbar.

Alles in der Vorlage ist super einfach zu gestalten. Auf der Downloadseite finden Sie auch einen Abschnitt mit der Bezeichnung "Videoanweisungen", in dem Sie lernen können, wie Sie die App animieren.

10. Micro Animation

Selbst kleinste App-Animationen können die Benutzererfahrung stark beeinflussen. Dieses Werbegeschenk zeigt a "Like" Mikroanimation wann immer ein Benutzer einen Beitrag "mag".

Das Herz-Symbol hat eine eigene Animation das Profilfoto des Benutzers wurde dem Stapel von Likes hinzugefügt. Diese Freebie ist nur für Prinzip und Sie haben auch eine .mov Datei zum Herunterladen, wenn Sie möchten.

11. Brieftasche App

Digitale Geldbörsen werden immer beliebter, und mit diesem Werbegeschenk wird es einfacher, eine zu gestalten. Sie erhalten eine Sketch-Datei mit allen rohen Vektorelementen sowie eine kostenlose PRD-Datei für die Prinzipanimation.

Dieses Werbegeschenk wurde von Sergey Bykov als lustiges kleines Nebenprojekt entworfen. Es kann jedoch sehr lehrreich sein, wenn Sie es auseinander nehmen und Schritt für Schritt mit der Animation arbeiten.

12. iOS-Schalter

Mit Apples iOS 7 erhielt die Welt einen neu gestalteten Schalter für On / Off-Labels. Dies führte zu vielen verschiedenen Effekten einschließlich einer kostenlosen Animation ahmt den nativen Ein / Aus-Schalter nach.

In dieser Datei erhalten Sie einen sehr einfachen Animationseffekt mit einer grundlegenden Beschleunigung. Der Schalter bewegt sich hinüber und der Hintergrund wird grün und kehrt dann zurück, wenn der Schalter ausgeschaltet wird.

13. Ritter App

Hier ist ein weiteres großartiges Werbegeschenk, das Sergey Bykov für die Ritter-App veröffentlicht hat. Dazu gehören eine kostenlose Sketch-Datei für die Vektorschnittstelle sowie eine kostenlose PRD-Datei für die Prinzipanimation.

Du wirst kriegen viele verschiedene Animationen In diesem Freebie, denke ich, wäre es für einen fortgeschrittenen Designer mehr nützlich. Anfänger können auch viel davon lernen, haben aber eine steile Lernkurve.

14. Freunde einladen

Wir alle kennen und lieben das Plus-Symbol-Flyout-Menü von Google. Nun, Jardson Almeida hat ein Friends Invite-Menü erstellt, das auf einem einfachen Material Design-Konzept basiert.

Alles wurde in Sketch entworfen und zur Animation in Principle importiert. Sie erhalten beide Dateien als Gratis-Download zum Download und zum Spielen.

15. Karte streichen

Hier ist ein weiteres allgemeines Freisprechen, das nur für Principle-Benutzer gedacht ist. Das ist ein Karten-Swipe-Schnittstelle erstellt für allgemeine Diashows oder native Benutzeroberflächen von Anwendungen.

Ich denke, das ist das perfekte Werbegeschenk für einen Anfänger, der sich gerade mit Principle beschäftigt. Es ist nicht so kompliziert, dass Sie sich verloren fühlen, aber es ist nicht so einfach, dass Sie sich trivialisiert fühlen.

16. Chat auf der Karte

Viele Designer verwenden Photoshop immer noch für Schnittstellen, und dies gilt auch für diesen Karten-Chat. Sie können eine PSD-Datei für die Schnittstelle und eine PRD-Datei für die Prinzipanimation herunterladen.

Es ist eine überraschend zahme Animation für den Stil, sieht aber dennoch großartig aus und funktioniert genauso wie Sie es von einer einfachen Karten- / Geolocation-App erwarten würden.

17. App wird geladen

Mobile Apps werden häufig verwendet Ladebildschirme Besuchern sagen, dass im Backend etwas passiert. Eine meiner Lieblings-Werbegeschenke in dieser Sammlung ist diese Ladeanimation, die von Roman Wagner erstellt wurde.

Es lädt einzelne Elemente einer nach demanderen Sobald der Ladebildschirm beendet ist. Diese Animation ist sehr flüssig und absolut glaubwürdig im Bereich Mobile App Design.

18. Onboarding-Karten

Benutzer onboarding ist ein entscheidender Schritt für jede neue mobile Anwendung. Es ist immer schön, zu diesem Zeitpunkt einige Animationen hinzuzufügen. Deshalb können diese Onboarding-Kartenanimationen für App-Designer sehr hilfreich sein.

Dieses wurde von Austin Baird erstellt und ist kostenlos für alle UI / UX-Projekte freigegeben.

19. Prinzipdemos

Wenn Sie sich eingehend mit Principle beschäftigen, lernen Sie viele fortgeschrittene Workflow-Techniken. Eine der besten Werbegeschenke für das Yalantis Kreativteam.

Dies ist eine völlig kostenlose Ressource für Principle-Benutzer zum Herunterladen und Spielen. Es behandelt ein paar Tricks, die zeigen, wie man bei der Principle-Animation zum Profi wird.

20. Dropdown-Menüs

Menü-Dropdowns verwenden oft verrückte Animationen, um unsere Aufmerksamkeit zu erregen. Dieses After Effects-Freebie verwendet a Dropdown-Treppenanimation im Menü für einzelne Elemente, um sie wie eine Treppe fallen zu lassen.

Dies ist möglicherweise nicht für alle nützlich, aber es ist sicherlich eine großartige Möglichkeit, etwas über die Animation der After Effects-Benutzeroberfläche zu lernen.

Letzte Worte

Alle diese Ressourcen können kostenlos heruntergeladen und in Ihren eigenen Projekten verwendet werden. Wenn Sie völlig neu in der UX-Animation sind, garantiere ich, dass Sie durch das Studium dieser Werbegeschenke viel lernen. Wenn Sie andere großartige Ressourcen kennen, können Sie Links in den Kommentaren ablegen.