Adobe XD: So verwenden Sie die automatische Animate-Funktion

Sep 11, 2025

wie man

(Bildkredite: Adobe)

Trotz des späten Einstiegs in das Prototyping-Spiel ist Adobe XD eines der besten und schnellsten Wireframing- und Prototyping-Tools verfügbar. Prototyping ist ein Schlüsselprozess im Design-Lebenszyklus, spielt jedoch auch eine entscheidende Rolle in der Entwicklung, indem sie Designer und Dev-Teams mit der Wartung von Workflow hilft.

Als Designer brauchen wir oft viele Tools, um die verschiedenen Phasen des Benutzererfahrungs-Workflows zu gestalten. Adobe innoviert aktiv ein plattformübergreifendes Werkzeug, das zum Testen von Designs, Erstellen von Wireframes, zur Abgabe von Spezifikationen für das Dev-Team und auch das kollaborative Design (siehe unsere Liste von Wireframe-Tools. Für weitere Optionen).

Das Auto-Animate-Merkmal bedeutet, dass Adobe XD auch verwendet werden kann, um nahtlose Mikro-Interaktionen und Animationen wie Werkzeuge wie Grundsatz zu erstellen. Dies hilft, Designer dazu beizutragen, Rich Prototype-Erlebnisse, von Onboarding-Flüssen, Animationen für mobile Karussells, Fortschrittsindikatoren und mehr. Das Beste an dieser Funktion ist, dass es einfach zu lernen und auszuführen ist.

In diesem Artikel werde ich erklären, wie einfache Micro-Animationen mit der automatisch animierten Funktion erstellt werden. Wir werden sowohl auf Geste-basierte als auch auf tippenbasierte Wechselwirkungen ansehen.

Wenn Sie noch kein Adobe XD erhalten haben, sehen Sie unsere How bis Laden Sie Adobe XD herunter Post, und schau dir dann unser Favorit an Adobe XD-Plugins. .

01. Swipe Gestes, um zum Favoriten hinzuzufügen oder zu löschen

Swipe-Interaktionen sind eines der am häufigsten verwendeten Mikrointeraktionen auf mobilen Apps. Sehen wir uns für dieses Beispiel eine Musik-Wiedergabeliste an. Für die erste Artboard erstellen wir einen Playlist-Bildschirm mit fünf Songs. Jeder Song ist eine einzelne Karte und im Wesentlichen, wenn jede Karte links abgesaugt wird, sollte der Song aus der Wiedergabeliste entfernen. Wenn eine Karte richtig geschlagen wird, sollte es dem Song der Warteschlange hinzufügen.

Lassen Sie uns anfangen und die erste Karte erstellen. Sie können grundlegende Details wie den Namen des Songs, den Namen des Künstlers, der Länge des Songs und der Bewertung hinzufügen. Gönnen Sie sich jetzt alle diese Elemente in eine einzige Ebene. Duplizieren Sie es, bis fünf der ähnlichen Karten gemacht werden. Sie können sie basierend auf Ihrem Geschmack bearbeiten.

Für die erste Karte - C1 - Wir werden einen linken Wischen für die Löschaktion hinzufügen. Lassen Sie uns also ein kleines Quadrat mit einem roten Hintergrund erstellen, ein gewisser Löschtext und ein Symbol hinzufügen, wie im Bildschirm des Screenshots gezeigt. Gruppieren Sie alle diese Elemente in eine Layer namens A1. Kombinieren Sie jetzt C1 und A1 in eine Schicht L -, so dass sich A1 auf der rechten Seite von C1 befindet.

02. Erstellen Sie die zweite Karte

Für die zweite Karte - C2 - werden wir auf ähnliche Weise ein Hinzufügen zum Warteschlangen hinzufügen. Erstellen Sie eine Gruppe A2 mit Symbol, Text und grünem Hintergrund. Fügen Sie es links von der Gruppe C2 hinzu und erstellen Sie eine kombinierte Schicht mit dem Namen L2. Nun ist die erste Artboard (S1) abgeschlossen. Lassen Sie uns das gesamte Karton zweimal in zwei Zustände - S2 und S3 kopieren. Wir werden S2 zum Löschen von Swipe und S3 verwenden, um den Warteschlangen-Swipe hinzuzufügen. Um dies zu tun, müssen wir einige Änderungen für jeden dieser Artboards vornehmen. Hier sind die Einstellungen für beide Swipes:

● S1 - Ändern Sie die Deckkraft von A1 und A2 auf 0% und arrangieren Sie L1, L2, sodass sie mitten ausgerichtet sind.

● S2 - Ordnen Sie die L1-Karte an, sodass der rechte Rand von L1 mit den anderen Karten ausgerichtet ist. Ändern Sie die Deckkraft von A2 auf 0%.

● S3 - Ordnen Sie die L2-Karte an, sodass der linke Rand von L2 mit den anderen Karten ausgerichtet ist. Ändern Sie die Deckkraft von A1 auf 0%.

03. Animieren Sie die Künstlerinnen

Nun, da die Künstlerin vollständig eingerichtet sind, ist der nächste Schritt, sie zu animieren. Sie können dies tun, indem Sie in den Prototyp-Modus auf der oberen linken Seite des Werkzeugs gehen. Klicken Sie nun auf der S1-Artboard auf die Ebene L1 und fügen Sie eine Interaktion auf der rechten Seite des Tools hinzu, indem Sie den Auslöser einstellen, um Ziehen, Aktion zum automatischen Animieren und Ziel auf die Artboard S2 zu ziehen. Sie können auch die Lockerung basierend auf Ihren Vorlieben hinzufügen. Testen Sie diese Interaktion, indem Sie auf die Wiedergabetaste auf der oberen rechten Seite des Werkzeugs klicken. Klicken Sie auf der S1-Artboard auf die Ebene L2 und fügen Sie eine ähnliche Interaktion mit denselben Einstellungen hinzu, aber stellen Sie in diesem Fall das Ziel auf S3 ein. Diese Interaktion erstellt den linken Swipe.

04. Erweitern Sie Ihre Karten

Die zweite Interaktion, die wir betrachten, ist allgemein auf den meisten Apps und Websites zu sehen, in denen Sie eine Liste oder einen Katalog von Produkten durchlaufen, und wenn Sie auf eines von diesen klicken, werden Sie auf eine neue Seite mit mehr Details zum Produkt aufgenommen . Auto-Animate macht es super einfach, diese Art der Interaktion zu animieren. Lassen Sie uns für dieses Beispiel mit der Erstellung einer Produktkatalogseite anfangen. Sie können jedes Produkt auswählen, wie beispielsweise ein Mobiltelefon (das unser Beispiel sein wird), Apparel usw. für die erste Artboard (S1), erstellen Sie eine Header-Leiste mit einem Hamburger-Menü und einem Profilsymbol.

05. Arbeiten Sie an Bildern und Details

Erstellen Sie nun ein Header-Textelement mit der Anzahl der Katalogelemente. Für jede der Produktkarten haben wir ein Bild, den Namen des Telefons, des Preises und der Bewertungen. Wir können diese Karten C1 bis C6 anrufen. Der beste Weg, dies zu tun, besteht darin, die erste Karte (C1) zu erstellen, und verwenden Sie dann ein erstaunliches Merkmal von XD mit dem Namen Wiederholungsnetz, das auf der oberen rechten Ecke des Werkzeugfensters gefunden wird. Auf diese Weise können Sie Elemente mit Leichtigkeit duplizieren, um die Ausrichtung und den Abstand intakt zu halten. Die Einrichtung dieses Artboards ist abgeschlossen. Wir werden die zweite Karte animieren, daher ist es wichtig, die Elemente dieser Karte nicht anzuheben, sodass XD automatisch animieren kann.

06. Entwerfen Sie die zweite Artboard

Nun, um an der zweiten Artboard arbeiten zu können. Duplizieren Sie die erste Artboard und löschen Sie Karten C1, C3-C6. Wir werden die vorhandene Karte C2 verwenden, um diese Seite zu erstellen, sodass die Namen der Ebenen gleich sind. Erweitern Sie zuerst den Hintergrund der Karte, damit er die gesamte Seite unterhalb der Header-Leiste deckt. Wir können nun die anderen Gegenstände in irgendeiner Weise arrangieren, die wir wollen - die Grundidee, dass es sich dadurch unterscheiden sollte, wie sich die Karte in der Artboard S1 befand, da Sie den Übergang sehen können. Aus diesem Grund schlagen wir den Namen des Mobiltelefons auf 25px auf und machen es mutig. Erhöhen Sie in ähnlicher Weise die Größe des Preises und setzen Sie ihn unter dem geutigen Namen. Als nächstes ist der wichtige Teil - das Bild des Mobiltelefons. Sie müssen seine Größe erheblich erhöhen und auch in der Mitte ausrichten.

07. Wenden Sie die letzten Berührungen an

Alles aufgeräumt und das Design abschließen, die Ratings und die Sterne unterhalb von allem und nach links ordnen. Da dieses Artboard die detaillierte Version des Produkts darstellt, können Sie nun zusätzliche Informationen zum Telefon, z. B. Speicher, die verfügbaren Farben des Telefons, das mit dem Telefon angegebene Zubehör enthalten, und so weiter, basierend auf Ihren Vorlieben. Alles andere folgt, wenn Sie die Artboard scrollen. Sie können das Header-Symbol des Hamburgers auch ändern, damit der Benutzer zur vorherigen Artboard S1 zurückkehren kann. Denken Sie daran, den Namen des Symbols um den Symbolnamen in der ersten Karton zu ändern.

08. Erstellen Sie die Micro-Interaktion

Gehen wir nun in den Prototyp-Modus, um die Mikrointeraktion zu erstellen. Wählen Sie dazu die Karte C2 in der Artboard S1 aus und ziehen Sie den blauen Pfeil in die Artboard S2. Stellen Sie in der Interaktionsfelder auf der rechten Seite den Auslöser als Tippen ein, Action As AS AUTO-ANIMATE und DESTIDE als S2. Für reibungslose Wechselwirkungen ist es gut, zum Erleichtern und eine Zeit von 0,4 oder 0,6 Sekunden leicht zu gehen. Klicken Sie auf das Zurück-Pfeil-Symbol auf der Artboard S2 und ziehen Sie den Pfeil auf S1. Sie können die gleichen Einstellungen dafür verwenden, um es konsistent zu gestalten. Klicken Sie nun auf S1 und spielen Sie den Prototyp, um die Magie zu sehen. Sie werden eine reibungslose Animation beobachten, wenn die Karte C2 aufgeregt ist. Passen Sie die Lockereinstellungen an, um die Animation glatter zu machen.

09. Gehen Sie über die Grundlagen hinaus

Sie haben jetzt eine grundlegende Idee, wie Sie einfache Interaktionen erstellen können.Sie können auch automatisch animieren, indem Sie die Farben der Elemente, Größen und Formen ändern, um glatte Übergänge zwischen mehreren Künstlers anzuzeigen.Neben Tippen und Ziehen von Triggern gibt es andere Auslöser, mit denen Designer experimentieren können, z. B. die Verwendung von Keyboard-Tasten und Gamepad-Tasten, um Prototypen auf einem bestimmten Schlüsselhahn auszulösen.Es gibt auch einen Modus, in dem Sie Sprachprototypen für Alexa, Siri usw. erstellen und entwerfen können, wo Sie Sätze zuweisen und sie sprechen können, um bestimmte Antworten zu erhalten.

Weiterlesen:

Das Beste Website Builders.
Die Adobe XD-Verknüpfungen, die Sie kennen sollten (aber wahrscheinlich nicht)
Erstellen Sie Prototypen mit Adobe XD

Adobe XD: So verwenden Sie die automatische Animate-Funktion

01. Swipe Gestes, um zum Favoriten hinzuzufügen oder zu löschen

02. Erstellen Sie die zweite Karte

03. Animieren Sie die Künstlerinnen

04. Erweitern Sie Ihre Karten

05. Arbeiten Sie an Bildern und Details

06. Entwerfen Sie die zweite Artboard

07. Wenden Sie die letzten Berührungen an

08. Erstellen Sie die Micro-Interaktion

09. Gehen Sie über die Grundlagen hinaus

wie man - Die beliebtesten Artikel

Erste Schritte mit webvr

10 Regeln für die Herstellung von benutzerfreundlichen Webformularen

5 Möglichkeiten, die SEO Ihrer Website zu steigern

So gestalten Sie Grafikfiguren

Erstellen Sie in Maya bessere Zeichenanimationen

Erstellen Sie ein Zeichen mit einer starken Pose in Photoshop

Erstellen Sie einen Portal-Effekt in Maya

So gestalten Sie benutzerfreundliche mobile Schnittstellen

Kategorien