Verwenden Sie Adobe XD, um Mikrointeraktionen zu erstellen

Adobe XD kann bei der Prototypisierung helfen - einer der wichtigsten Prozesse im Design-Life-Cycle, die eine entscheidende Rolle in der Entwicklung spielt, indem Sie Designer und Dev-Teams mit der Wartung von Workflow unterstützen. In der Prototyping-Landschaft gab es kürzlich einige große Änderungen in der Prototyping-Landschaft: Designer sind für die Wahl verwöhnt.

Wie viele andere Disziplinen gibt es kein einzelnes Design- und Prototyping-Tool, das alles erreichen kann. Unterschiedliche Stufen erfordern einen einzigartigen Werkzeugsatz. Vorbei sind die Tage, an denen Designer sich allein auf Photoshop und Skizze verlassen haben. Obwohl sie großartige UI-Design-Tools sind, haben sie nicht die Funktionen für schnelle Benutzerflüsse und Wireframes (siehe unseres Tops Wireframe-Tools. Für mehr Wireframing-Optionen).

Jetzt mit dem wachsenden Betrag der Interaktionen in Designs - wie Animationen, Gesten und Sprachsteuerung - ist es schwierig, ein Tool zu finden, das alle diese Prototyping-Fähigkeiten erreichen und dennoch die Dinge einfach aufhalten kann. Codierung ist eine Möglichkeit, diese Wechselwirkungen zu erstellen, aber es ist zeitaufwändig. Glücklicherweise ist Adobe XD zur Rettung gekommen, indem ein Update auf sein Prototyping-Tool freigegeben wird, das eine praktische Funktion namens 'Auto Animate' enthält. Es ist bei weitem die größte Ergänzung zum leistungsstarken Werkzeugsatz.

• Holen Sie sich Adobe Creative Cloud

Die Idee hier ist einfach: Auto Animate ermöglicht Designer, interaktive Prototypen mit tumanen Animationen aufzubauen, indem Sie einfach ein Argbord duplizieren oder die Eigenschaften eines Objekts ändern. Diese Eigenschaften könnten alles sein, wie die Abmessungen, Position von X und Y, Deckkraft, Rotation. Zuvor bot Adobe XD grundlegende Wechselwirkungen an, z. B. Gleiten, Push und Aufzulösen.

Mit dem Zusatz der neuen Funktionen können Designer problemlos bewegungsbasierte Animationen erstellen, was dem Benutzer wiederum dabei helfen, mentale Informationsmodelle zu erstellen, wenn sie zwischen mehreren Bildschirmen navigieren. Dies kann auch verwendet werden, um visuelle Hierarchien, CTAs oder Nachrichten zu erstellen, die vorübergehend in oder aus dem Bildschirm verblassen.

In diesem Artikel erhebt ich, wie Sie einfache Micro-Animationen mit dieser neuen Auto-Animate-Funktion von Adobe XD erstellen können. Bevor wir beginnen, gibt es ein paar Dinge, um darüber zu berücksichtigen, wie Objekte für die automatische Animation behandelt werden müssen:

• Wenn ein Objekt oder ein Element nicht auf dem Zielkassett ist, verblasst es normalerweise, wenn sie in der Vorschau angezeigt werden
• Wenn ein Element in der anfänglichen Artboard nicht vorhanden ist, neigt sie dazu, in zu verblassen
• Verdrahten Sie immer die Kartonboards, wenn Sie sich im Prototyp-Modus befinden, der die Interaktionen erstellt
• Wenn Sie Animationen erstellen, stellen Sie immer sicher, dass Objekte und Elemente übereinstimmende Namen in den Ebenen haben, und auch der Name der Gruppe, in der sie sich befinden

Machen Sie eine Zustandsänderung mit automatisch animieren

Beginnen wir mit einem einfachen Beispiel für Statusänderung mit automatisch animieren. In diesem Beispiel sind die Eigenschaften, die sich ändern würden, Breite, Höhe und Farbe. Für alle auto animierten Übergänge benötigen Sie mehr als zwei Kartonien.

Zeichnen Sie auf der anfänglichen Artboard eine Form - in unserem Beispiel ist es ein grünes Rechteck von 500px x 200px. Duplizieren Sie dieses Artboard und wählen Sie das Rechteck auf der zweiten Artboard aus. Wir müssen die Eigenschaften des Rechtecks ​​ändern, indem wir die Breite auf 1000 erhöhen und die Höhe auf 500 erhöht. Sie können auch weitere Modifikationen ausführen, z. B. die Änderung der Deckkraft auf 50% oder das Farbrosa.

Klicken Sie nun auf die Prototyp-Registerkarte in der oberen linken Ecke. Wählen Sie die erste Artboard aus und verknüpfen Sie ihn mit dem Pfeil auf der zweiten Karton. Wenn Sie dies tun, gibt es eine Interaktionsregisterkarte rechts von der App, mit der Parameter wie Auslöser, Aktion, Ziel und Lockerung festgelegt werden können. Jeder Parameter kann nach Ihren Bedürfnissen angepasst werden. Es gibt fünf Arten von Trigger - einschließlich Tap, Drag & timed -, die die Animation initiiert.

Legen Sie die Registerkarte Aktion fest, um automatisch animieren zu können, und setze in unserem Beispiel nur zwei Künstlere, die Registerkarte "Ziel-Registerkarte" auf Seite 2 festlegen. Klicken Sie auf das Play-Symbol oben rechts, um das automatische Animate zu sehen, indem Sie seine Magie tun und das Rechteck animieren. Wenn mehr als zwei Elemente vorhanden sind, die gleichzeitig geändert werden müssen, stellen Sie sicher, dass die Namen dieser Elemente sowohl in den Kartellplatten gleich sind. Dadurch wird die Anwendung informiert, dass diese beiden Elemente animiert werden müssen.

Karten ausbauen

Lassen Sie uns nun mit mehr Interaktivität zu einem Beispiel fortschreiten, das mehrere Elemente enthält. Beginnen wir mit der Erstellung der ersten Karton dafür, dass dies aus einer Karte besteht. Die Karte enthält Elemente wie einen Header, eine Beschreibung und einen Link an der unteren Leserungsansicht-Historie. Neben dem Link gibt es ein Pfeilsymbol nach unten. Wenn der Benutzer auf den Link klickt, öffnet sich die Karte wie eine Schublade, um vorherige Einträge anzuzeigen. Da dies auf der Click- / Tap-Funktion geschieht, sollten die vorherigen Einträge in der ersten Artboard nicht erstellt werden.

Als nächstes duplizieren wir diese Artboard und ändern ein paar Eigenschaften der Karte. Das erste, was man tun soll, erhöht die Höhe der rechteckigen Karte, um es wie einen erweiterten Zustand auszusehen. Der Header und die nachstehende Beschreibung sollten unverändert sein. Jetzt ist es an der Zeit, diese Einträge hinzuzufügen, die wir zuvor erwähnt haben.

Stellen Sie sich vor, es gibt drei Einträge für die Karte. Jeder Eintrag hat einen Eingabenamen, ein Einstiegsdatum und eine Schaltfläche, wie im Hauptbild gezeigt. Sie können einen Eintrag erstellen und zweimal duplizieren, um eine Gruppe von Einträgen zu erstellen. Ordnen Sie sie fest, wie im Hauptbild gezeigt, und legen Sie den Textlink Ansicht History Text unter diesen Einträgen ein. Da es sich in einem erweiterten Zustand befindet, drehen Sie das Pfeilsymbol so, dass er nach oben gerichtet ist. Das ist es. Sie haben die Einrichtung der Künstlere abgeschlossen.

Um die Animation zu erstellen, gehen Sie zur ersten Artboard und klicken Sie in der linken oberen Ecke auf die Registerkarte Prototype. Klicken Sie nun auf den Link "History-Link anzeigen" auf der ersten Artboard und ziehen Sie den Prototyp-Link auf die zweite Karton. Dadurch wird der Ansichtsverlauf den Auslöser verknüpfen. Ändern Sie die Eigenschaften in der Registerkarte Interaction auf der rechten Seite, indem Sie den Trigger einstellen, um Tippen und Aktion zum automatischen Animieren zu starten. Testen Sie es, um die glatte Schubladenanimation zu sehen. Änderungen an der Locking-Option in der Registerkarte Interaktion vornehmen Wenn Sie feststellen, dass die Animation nicht glatt genug ist.

Drag-Animationen machen

Ziehen ist eine der häufigsten Animationen, wenn es um mobile Wechselwirkungen geht. Lassen Sie uns ein einfaches Beispiel mit zwei Kartons versuchen. Beginnen Sie für die erste Artboard mit einem Kreis von Farb- und Abmessungen. Erstellen Sie nun ein Rechteck mit einer Breite von 250px und einer Höhe von 25 px. Duplizieren Sie dieses Rechteck achtmal, wodurch ein Raum von 20px zwischen jedem Duplikat aufrechterhalten wird, sodass er einen Stapel erstellt. Legen Sie den Kreis auf das erste Rechteck, bevor Sie diese Artboard duplizieren.

Für die zweite Artboard ist nicht viel übrig zu tun. Reduzieren Sie einfach den Spalt zwischen jedem der doppelten Rechtecke, sodass er sich anfühlt, als würde er komprimiert werden. Stellen Sie dem ersten Kreis den Kreis auf das erste Rechteck auf den ersten Rechteck. Der letzte Schritt ist der Prototypen, indem Sie auf die Prototyp-Registerkarte von der oberen linken Ecke klicken. Klicken Sie nun auf den Kreis aus der ersten Karton und machen Sie es einen Abzug. Ändern Sie wie die vorherigen Beispiele die Eigenschaften in der Registerkarte Interaktionspunkte rechts, indem Sie den Trigger einstellen, um Ziehen und Aktion zum automatischen Animieren zu ziehen. Wenn Sie auf die Wiedergabetaste klicken, um eine Vorschau der Animation anzuzeigen, können Sie eine reibungslose Aktion sehen, als ob der Block von der Kugel komprimiert wird.

Erstellen Sie unendliche Loader-Animationen

Eine der besten Funktionen von Adobe XD ist, dass Auto-Animate zwischen mehreren Künstlers angewendet werden kann. Um eine solche Animation zu erledigen, müssen Sie nur einfache Änderungen an einem der Eigenschaften vornehmen.

Lassen Sie uns eine Ladeanimation erstellen, in der eine Batterie ausgefüllt wird. Der Schlüssel, um dies perfekt zu bringen, ist, die erste Karton ordnungsgemäß herzustellen. Die erste Artboard hat einen Batterieplatzhalter, wie im Bild gezeigt. Es kann mit rechteckigen Formen erstellt werden. Für die eigentliche Batterie innerhalb des Platzhalters sollte die erste Artboard leer sein (was 0% entspricht). Duplizieren Sie dieses Artboard und erstellen Sie ein grünes Rechteck mit einer 50px-Höhe, die perfekt in den Platzhalter passt. Erstellen Sie ähnliche Duplikate, so dass die Höhe der Batterie in der dritten Kerzentafel um 50px und so weiter erhöht wird. Fahren Sie fort, bis die Artboard vollständig gefüllt ist.

Jetzt müssen wir eine unendliche Schleife zwischen diesen Artboards erstellen, sodass eine synchrone Ladeanimation erstellt wird. Gehen Sie dazu in den Prototyp-Modus, klicken Sie auf die erste Artboard und ziehen Sie den Prototyp-Pfeil auf die zweite Karton. Ändern Sie die Eigenschaften in der Interaktionspanelle, indem Sie den Auslöser zum Zeitpunkt einstellen und dann die Verzögerung auf 0 Sekunden einstellen, wodurch der zweiten Karton animiert wird, wenn sie in der Vorschau animiert werden. Führen Sie die gleichen Änderungen an allen Artboards durch, indem Sie den zweiten auf den dritten und so weiter verbinden, bevor Sie die letzte Artboard zum ersten Mal verknüpfen. Wir haben erfolgreich alle Künstlere verknüpft, um eine unendliche Schleife zu bilden. Ändern Sie die Locking- und Dauereinstellungen gemäß Ihrer Anforderung, um die Belastung glatter zu machen.

Es gibt zwar Tonnen von Variationen, die mit Adobe XD versucht werden können, sind die aktuellen Funktionen des Tools begrenzt und werden noch regelmäßig vom Entwicklungsteam aktualisiert. Im Vergleich zu Werkzeugen wie Prinzip fühlen Sie sich möglicherweise, als hätte XD ein eingeschränktes Werkzeugsatz. Adobe hat jedoch eine hervorragende Aufgabe gemacht, das Werkzeug einfach zu lernen und zu verwenden. Das Erstellen komplexer Interaktionen kann einige Zeit und Anstrengungen dauern, aber sie erreichbar mit der automatischen Animate-Funktion von XD. Der Schlüssel ist, die Grundlagen der sich bewegenden Objekte zu verstehen, um sie zu ändern, die Schichten und die Verwendung von Auslöser hinzuzufügen.

Dieser Artikel erschien ursprünglich ein Ausgang 326 von Netz Das weltweit führende Magazin für Webdesigner und Entwickler. Kaufen Ausgabe 326. oder Abonnieren Sie hier .

Weiterlesen:

• 40 brillante Wordpress-Tutorials
• 11 Erstaunliche JavaScript-Frameworks
• Ist der Neutorphismus wirklich den heißesten Trend von 2020?