Adobe XD: Verwendung der Funktion zum automatischen Animieren

Adobe XD
(Bildnachweis: Adobe)

Trotz des späten Einstiegs in das Prototyping-Spiel ist Adobe XD eines der besten und schnellsten verfügbaren Wireframing- und Prototyping-Tools. Prototyping ist ein Schlüsselprozess im Design-Lebenszyklus, spielt aber auch eine wichtige Rolle bei der Entwicklung, indem es Designern und Entwicklerteams bei der Workflow-Wartung hilft.

Als Designer benötigen wir häufig viele Tools, um die verschiedenen Phasen des User Experience-Workflows zu gestalten. Adobe entwickelt aktiv ein plattformübergreifendes Tool, mit dem Entwürfe getestet, Drahtmodelle erstellt, Spezifikationen an das Entwicklerteam übergeben und gemeinsam entworfen werden können (siehe unsere Liste von) Drahtgitterwerkzeuge für mehr Optionen).



Mit der Funktion 'Automatisch animieren' kann Adobe XD auch zum Erstellen nahtloser Mikrointeraktionen und Animationen wie Tools wie 'Prinzip' verwendet werden. Auf diese Weise können Designer umfangreiche Prototypenerfahrungen erstellen, darunter Onboarding-Flows, Animationen für mobile Karussells, Fortschrittsanzeigen und vieles mehr. Das Beste an dieser Funktion ist, dass sie einfach zu erlernen und auszuführen ist.



In diesem Artikel werde ich erklären, wie einfache Mikroanimationen mit der Funktion 'Automatisch animieren' erstellt werden. Wir werden sowohl gestenbasierte als auch tippenbasierte Interaktionen betrachten.

Wenn Sie Adobe XD noch nicht haben, lesen Sie unsere Anleitungen Laden Sie Adobe XD herunter poste und schau dir dann unseren Favoriten an Adobe XD-Plugins .



01. Wischen Sie mit den Wischen, um sie zu den Favoriten hinzuzufügen oder zu löschen

Adobe XD

(Bild: Vamsi Batchu)

Swipe-Interaktionen sind eine der am häufigsten verwendeten Mikrointeraktionen in mobilen Apps. In diesem Beispiel sehen wir uns eine Musikwiedergabeliste an. Für die erste Zeichenfläche erstellen wir einen Wiedergabelistenbildschirm mit fünf Titeln. Jedes Lied ist eine einzelne Karte. Wenn jede Karte nach links gewischt wird, sollte das Lied aus der Wiedergabeliste entfernt werden. Wenn eine Karte nach rechts gewischt wird, sollte sie das Lied zur Warteschlange hinzufügen.




Beginnen wir und erstellen die erste Karte. Sie können grundlegende Details wie den Namen des Songs, den Namen des Künstlers, die Länge des Songs und die Bewertung hinzufügen. Gruppieren Sie nun alle diese Elemente in einer einzigen Ebene. Dupliziere es, bis fünf der ähnlichen Karten hergestellt sind. Sie können sie nach Ihrem Geschmack bearbeiten.

Fall für neues MacBook Pro 15 Zoll

Für die erste Karte - C1 - fügen wir einen linken Wisch für die Löschaktion hinzu. Erstellen Sie also ein kleines Quadrat mit rotem Hintergrund, fügen Sie Text löschen und ein Symbol hinzu, wie im folgenden Screenshot gezeigt. Gruppieren Sie alle diese Elemente in einer Ebene namens A1. Kombinieren Sie nun C1 und A1 zu einer Ebene 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 eine Aktion zum Hinzufügen der rechten Maustaste zur Warteschlange 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 Ebene mit dem Namen L2. Jetzt ist die erste Zeichenfläche (S1) fertig. Duplizieren wir die gesamte Zeichenfläche zweimal in zwei Zustände - S2 und S3. Wir werden S2 zum Löschen von Wischen und S3 zum Hinzufügen zu Wischen in der Warteschlange verwenden. Dazu müssen wir für jede dieser Zeichenflächen einige Änderungen vornehmen. Hier sind die Einstellungen für beide Wischbewegungen:

● S1 - Ändern Sie die Deckkraft von A1 und A2 auf 0% und ordnen Sie L1, L2 so an, dass sie mittig ausgerichtet sind.

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

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


03. Animieren Sie die Zeichenflächen

Nachdem die Zeichenflächen vollständig eingerichtet sind, besteht der nächste Schritt darin, sie zu animieren. Sie können dies tun, indem Sie in den Prototyp-Modus oben links im Tool wechseln. Klicken Sie nun auf der S1-Zeichenfläche auf die Ebene L1 und fügen Sie eine Interaktion auf der rechten Seite des Werkzeugs hinzu, indem Sie Auslöser auf Ziehen, Aktion auf Automatisch animieren und Ziel auf Zeichenfläche S2 setzen. Sie können auch eine Lockerung hinzufügen, die Ihren Vorlieben entspricht. Testen Sie diese Interaktion, indem Sie oben rechts im Werkzeug auf die Wiedergabetaste klicken. Klicken Sie auf der S1-Zeichenfläche auf die Ebene L2 und fügen Sie eine ähnliche Interaktion mit denselben Einstellungen hinzu. Setzen Sie in diesem Fall das Ziel auf S3. Diese Interaktion erzeugt den linken Wisch.

04. Erweitern Sie Ihre Karten

Adobe XD

(Bild: Vamsi Batchu)

Die zweite Interaktion, die wir betrachten werden, wird häufig auf den meisten Apps und Websites angezeigt, auf denen Sie eine Liste oder einen Produktkatalog durchgehen. Wenn Sie auf eine dieser Interaktionen klicken, werden Sie auf eine neue Seite mit weiteren Details zum Produkt weitergeleitet . Auto-Animate macht es sehr einfach, diese Art von Interaktion zu animieren. In diesem Beispiel erstellen wir zunächst eine Produktkatalogseite. Sie können ein beliebiges Produkt auswählen, z. B. ein Mobiltelefon (das unser Beispiel sein wird), Kleidung usw. Erstellen Sie für die erste Zeichenfläche (S1) eine Kopfzeile mit einem Hamburger-Menü und einem Profilsymbol.

05. Arbeiten Sie an Bildern und Details

Erstellen Sie nun ein Kopfzeilentextelement mit der Anzahl der Katalogelemente. Für jede der Produktkarten haben wir ein Bild, den Namen des Telefons, den Preis und die Bewertungen. Wir können diese Karten C1 bis C6 nennen. Der beste Weg, dies zu tun, besteht darin, die erste Karte (C1) zu erstellen und dann eine erstaunliche XD-Funktion namens Wiederholungsgitter zu verwenden, die sich in der oberen rechten Ecke des Werkzeugbedienfelds befindet. Auf diese Weise können Sie Elemente problemlos duplizieren und dabei die Ausrichtung und den Abstand beibehalten. Die Einrichtung dieser Zeichenfläche ist abgeschlossen. Wir werden die zweite Karte animieren, daher ist es wichtig, die Gruppierung der Elemente dieser Karte aufzuheben, damit XD die automatische Animation durchführen kann.

06. Entwerfe die zweite Zeichenfläche

Nun können Sie an der zweiten Zeichenfläche arbeiten. Dupliziere die erste Zeichenfläche und lösche die Karten C1, C3-C6. Wir werden die vorhandene Karte C2 verwenden, um diese Seite zu erstellen, daher sind die Namen der Ebenen gleich. Erweitern Sie zunächst den Hintergrund der Karte so, dass er die gesamte Seite unterhalb der Kopfzeile abdeckt. Wir können jetzt die anderen Elemente nach Belieben anordnen. Die Grundidee ist, dass sie sich von der Position der Karte in der Zeichenfläche S1 unterscheiden sollte, da Sie dann den Übergang sehen können. Erhöhen Sie aus diesem Grund den Namen des Mobiltelefons auf 25 Pixel und machen Sie es fett. Erhöhen Sie in ähnlicher Weise den Preis und platzieren Sie ihn unter dem Namen des Mobiltelefons. Als nächstes kommt der wichtige Teil - das Bild des Mobiltelefons. Sie müssen die Größe erheblich erhöhen und sie auch in der Mitte ausrichten.

07. Den letzten Schliff geben

Um alles aufzuräumen und das Design fertigzustellen, ordnen Sie die Bewertungen und die Sterne unter allem und links an. Da diese Zeichenfläche die detaillierte Version des Produkts darstellt, können Sie jetzt zusätzliche Informationen zum Telefon hinzufügen, z. B. Speicher, verfügbare Farben des Telefons, mit dem Telefon geliefertes Zubehör usw., je nach Ihren Vorlieben. Alles andere folgt, wenn Sie durch die Zeichenfläche scrollen. Sie können auch das Kopfzeilensymbol des Hamburgers ändern, damit der Benutzer zur vorherigen Zeichenfläche S1 zurückkehren kann. Denken Sie daran, den Namen des Symbols so zu ändern, dass er mit dem Symbolnamen auf der ersten Zeichenfläche übereinstimmt.

08. Erstellen Sie die Mikrointeraktion

Gehen wir jetzt zum Prototyp-Modus, um die Mikrointeraktion zu erstellen. Wählen Sie dazu die Karte C2 in der Zeichenfläche S1 aus und ziehen Sie den blauen Pfeil auf die Zeichenfläche S2. Stellen Sie im Interaktionsfenster auf der rechten Seite den Auslöser als Tippen, die Aktion als Automatisch animieren und das Ziel als S2 ein. Für reibungslosere Interaktionen empfiehlt es sich, Ease Out for Easing und eine Zeit von 0,4 oder 0,6 Sekunden zu verwenden. Klicken Sie auf das Symbol für den hinteren Pfeil auf der Zeichenfläche S2 und ziehen Sie den Pfeil auf S1. Sie können dieselben Einstellungen verwenden, um die Konsistenz zu gewährleisten. Klicken Sie nun auf S1 und spielen Sie den Prototyp, um die Magie zu sehen. Sie werden eine flüssige Animation beobachten, wenn Sie auf die Karte C2 tippen. Passen Sie die Easing-Einstellungen an, um die Animation flüssiger zu gestalten.

09. Gehen Sie über die Grundlagen hinaus

Adobe XD

(Bild: Vamsi Batchu)

Sie haben jetzt eine grundlegende Vorstellung davon, wie Sie einfache Interaktionen erstellen. Sie können auch versuchen, automatisch zu animieren, indem Sie die Farben der Elemente, Größen und Formen ändern, um glatte Übergänge zwischen mehreren Zeichenflächen zu sehen. Neben dem Tippen und Ziehen von Triggern gibt es noch andere Trigger, mit denen Designer experimentieren können, z. B. die Verwendung von Tastaturtasten und Gamepad-Tasten, um Prototypen bei einem bestimmten Tastendruck auszulösen. Es gibt auch einen Modus, in dem Sie Sprachprototypen für Alexa, Siri usw. erstellen und entwerfen können, in dem Sie Sätze zuweisen und sie sprechen können, um bestimmte Antworten zu erhalten.

Weiterlesen: