Grafik von Matt Rae
Adobe XD unterstützt verschiedene Medientypen, von Bildern und Vektorgrafiken bis hin zu Musik- und Audiodateien, um das Designen und Prototyping beeindruckender digitaler Erlebnisse mühelos zu gestalten.
In dieser Anleitung erfährst du, wie du zwei dieser Medientypen, Video und Lottie, einsetzt, um einen Prototyp für eine Social-Video-Sharing-App zu erstellen, ähnlich wie TikTok und Instagram Reels. Lade die Datei „Starter files“ herunter und öffne sie in Adobe XD, um dieses Tutorial nachzuvollziehen.
Hinzufügen von Video- und Lottie-Dateien zu Adobe XD
Vor dem Tutorial solltest du wissen, wie Video- und Lottie-Medien in Adobe XD funktionieren. Wie Bilder und Vektorgrafiken kannst du auch Video- und Lottie-Dateien einfach von deinem Computer auf die Arbeitsfläche ziehen. Auf der Arbeitsfläche kannst du die Datei an die gewünschte Position verschieben. Die Einstellungen können im Eigenschafteninspektor im Design-Modus angepasst werden.
Wie bei Bildern maskiert das Ziehen eines dieser Dateitypen auf eine Vektorform oder einen Pfad die Form automatisch innerhalb der Formengrenzen. So können Platzhalterformen mit Videos und Lottie-Inhalten gefüllt werden. Dies kann sehr hilfreich sein, wenn du ein Wireframe-Layout mit Elementen mit hoher Wiedergabetreue ausfüllst. Nachdem eine Video- oder Lottie-Datei zu einer Form hinzugefügt wurde, kannst du durch Doppelklicken auf die Maske die Position der Datei innerhalb der Maske anpassen.
Adobe XD unterstützt derzeit MP4-Videodateien mit einer Größe von bis zu 15 MB, um Geschwindigkeit und Leistung zu optimieren. Lottie-Dateien werden im JSON-Format akzeptiert und können von „LottieFiles“ heruntergeladen oder von Adobe After Effects mithilfe des LottieFiles-Plug-ins für After Effects exportiert werden.
Unter „Starter files“ oben findest du einen Ordner mit mehreren Video- und Lottie-Dateien, die in diesem Tutorial-Projekt verwendet werden können.
Die bereitgestellte Startdatei enthält eine Reihe von Assets, Komponenten und UI-Elementen, mit deren Hilfe du das Design und den Prototyp für eine mobiles Videoplattform mit kurzen Videoclips erstellen kannst. In dieser Anleitung wird hauptsächlich das Hinzufügen von Video- und Lottie-Dateien behandelt. Daher findest du darin mehrere Seiten, mit denen du direkt arbeiten kannst.
Erstellen des Login-Flows der App
Die erste zu erstellende Experience ist der Flow beim Anmelden – der erste Kontakt für Anwender mit der mobilen Plattform. Dieser Flow beginnt mit dem App-Logo, das auf dem Startbildschirm animiert wird. Danach folgt die Anmeldesequenz mit einem Video, das automatisch im Hintergrund abgespielt wird.
Animiertes App-Logo
Suche die Komponente Animated Logo im Bedienfeld „Dokument-Assets“ und ziehe eine Instanz auf den ersten Bildschirm, um das Platzhalterrechteck in der Mitte der Zeichenfläche zu ersetzen. Diese Komponente enthält eine Lottie-Datei, die in After Effects erstellt und in Adobe XD importiert wurde.
Damit die Logoanimation automatisch wiedergegeben wird, müssen die Wiedergabeeinstellungen im Eigenschafteninspektor aktualisiert werden. Wähle im Abschnitt Interaktive Medien im Dropdown-Menü Automatisch abspielen aus. In der Vorschau des Designs wird angezeigt, dass die Lottie-Animation beim Öffnen des Vorschaufensters automatisch wiedergegeben wird.
Da diese Logo-Animation das Laden einer App simuliert, sollte der Prototyp zum nächsten Bildschirm wechseln, sobald die Animation beendet ist. Wähle dazu erneut die Lottie-Animation aus und wechsle in den Modus Prototyp. Klicke im Menü „Interaktionen“ auf + und füge eine neue Interaktion mit dem Trigger Ende der Wiedergabe hinzu. Du solltest nicht den Trigger Zeit überschreiben, da diese Interaktion die automatisch abzuspielende Animation auslöst.
Wähle Ende der Wiedergabe als Trigger aus und stelle den ersten Bildschirm des Login-Flows als Ziel ein („Home Screen Loading“). Dadurch kann der Prototyp nach dem Ende der Animation fortfahren.
Hintergrundvideo
Als Nächstes musst du eine Videodatei als Hintergrund des Anmeldebildschirms hinzufügen. Da dieser Teil des Login-Flows aus mehreren Bildschirmen besteht, ist es hilfreich, den Hintergrund auf einem Bildschirm einzurichten und ihn dann zu kopieren und in die anderen einzufügen.
Wähle auf dem ersten Bildschirm im Bedienfeld „Ebenen“ die Ebene „Video Placeholder“ aus und verschiebe sie an den Anfang des Stapels (dadurch ist es einfacher, das Video hinzuzufügen, und es geht per Tastenkombination). Ziehe dann die Datei „HomeScreen.mp4“ aus dem Beispieldateiordner in die rechteckige Form (lass die Maustaste los, wenn das Rechteck blau wird).
Doppelklicke in das Rechteck, um die Maske nach Bedarf anzupassen. Navigiere zum Eigenschafteninspektor und öffne die Videoeinstellungen. Das Video soll in Endlosschleife laufen, daher musst du den Umschalter „Schleife“ umlegen. Wähle im Dropdown-Menü „Videoeinstellungen“ die Option Automatisch abspielen aus.
Kopiere dieses Videoelement in die Zwischenablage, wähle die verbleibenden Zeichenflächen im Anmelde-Flow aus und füge sie ein (XD fügt den Inhalt automatisch in alle ausgewählten Zeichenflächen ein).
Verschiebe die einzelnen Instanzen auf jeder Zeichenfläche schließlich ans Ende des Ebenenstapels (Tastenkombination „Umschalttaste + [“). Die Zeichenflächen in diesem Anmelde-Flow wurden bereits mit Auto-Animate verbunden. In der Vorschau wird daher angezeigt, dass das Video automatisch abgespielt und während der Navigation durch den Prototypen weiterhin wiedergegeben wird. Stell auf den letzten beiden Zeichenflächen die Wiedergabeoption „Keine Wiedergabe“ ein, da das Video auf diesen Bildschirmen nicht sichtbar ist.
Erstellen der Ladeanzeige
Nach der Anmeldung erfolgt der Übergang zur Ladeanzeige und schließlich zur Startseite der App. Um dies zu erstellen, kannst du zwischen der Anmeldung und der Startseite eine weitere Lottie-Animation zum Bildschirm hinzufügen.
Ziehe die Datei „Loading Indicator“ aus den Dokument-Assets auf das Platzhalterrechteck der Zeichenfläche mit dem Titel „App Loading“. Wie beim animierten Logo stellst du die Animation auf „Automatisch abspielen“ und das Ziel nach Abschluss der Wiedergabe auf die Zeichenfläche „Mid Phase“ ein, damit ein automatischer Übergang zur Startseite erfolgt.
Für einen fließenden Übergang platzierst du eine Kopie der Ladeanzeige auf dem letzten Bildschirm der Anmeldesequenz, allerdings mit geringerer Größe und 0 % Deckkraft. Beim Seitenübergang mit Auto-Animate scheint sich die Ladeanzeige beim Abspielen zu erweitern.
Erstellen eines vertikalen Videokarussells
Wenn die Anmeldesequenz abgeschlossen ist, kannst du dich der Startseite der App widmen. Diese funktioniert wie ein vertikales Videokarussell, das nach Abschluss der Wiedergabe zum nächsten Video scrollt. Die Erstellung ist ähnlich wie bei „Bildbasierte Karussells mit Adobe XD“ und erzeugt ein interaktives Element. In diesem Fall wird die Videowiedergabe jedoch so gesteuert, dass immer nur ein Video abgespielt wird und das Karussell nach Abschluss des Videos automatisch zum nächsten Video wechselt.
Erstellen der Videokomponenten
Die Komponenten für dieses Element wurden bereits erstellt. Suche im Abschnitt „Komponenten“ der Übungsdatei nach „Main Component“. Für jedes der vier Videos, die in den Feed aufgenommen werden sollen, wurde eine Instanz erstellt.
Wähle zunächst die erste Instanz mit der Bezeichnung „Post Element“ und das Rechteck für das Platzhalterbild wie zuvor aus. Ziehe das Video „Berg.mp4“ aus dem Elementordner und passe die Maske wie gewünscht an. Die anderen Einstellungen musst du noch nicht anpassen, da sie in jedem Zustand der Komponente angepasst werden.
Wiederhole diesen Schritt mit den anderen drei Instanzen auf der Seite und füge die Videos „Walk.mp4“, „Dive.mp4“ und „River.mp4“ zu jedem Videoplatzhalter hinzu.
Kompiliere jedes dieser Videoelemente schließlich in eine Komponente, indem du sie vertikal übereinander stapelst, sodass sie eine Komponente mit dem Namen „Video Feed“ bilden.
Für diesen Video-Feed gibt es eine Ziehen-Aktion, um zum nächsten Video zu gelangen, sowie eine automatische Progression am Ende der Videowiedergabe. Um dies zu erreichen, werden statt der Komponentenzustände einzelne Zeichenflächen verwendet, und die Positionierung der Komponente bewegt sich einfach nach oben und unten, je nachdem, welches Video abgespielt wird.
Positionierung der kompilierten Komponente
Wähle eine Instanz der kompilierten Komponente (da jede Komponente irreguläre Formate hat) und platziere sie auf der ersten Zeichenfläche für den Startseiten-Feed. Verschiebe die Zeichenfläche mithilfe der Tastenkombination mit eckiger Klammer oder des Bedienfelds „Ebenen“ ans Ende des Ebenenstapels und vergewissere dich, dass der Anfang der Komponente (erstes Video im Stapel) oben ist.
Doppelklicke auf die Komponente und lege für die Videowiedergabe für das erste Video Automatisch abspielen fest. Für jede Zeichenfläche sollte nur das angezeigte Video auf Automatisch abspielen gestellt werden. Daher solltest du diese Änderungen auf Instanzen der kompilierten Komponente und nicht auf die Hauptkomponente anwenden.
Videointeraktionen des Prototyps
Um die Videos miteinander zu verbinden, erstellst du jeweils zwei Interaktionen. Die erste Interaktion findet im Video selbst statt – wähle im ersten Video das Video im Bedienfeld „Ebenen“ aus. Stelle im Prototypmodus eine neue Interaktion mit dem Trigger Ende der Wiedergabe und die nächste Zeichenfläche in der Serie als Ziel ein. Verwende Auto-Animate als Aktionstyp und wähle eine Beschleunigung deiner Wahl. Diese Interaktion navigiert automatisch zum nächsten Video, sobald das erste Video vollständig wiedergegeben wurde.
Wenn ein Video lang ist oder ein Benutzer das Video überspringen und zum nächsten gelangen möchte, kann eine Ziehen-Interaktion hinzugefügt werden. Wähle dazu die kompilierte Videokomponente selbst aus und füge im Prototypmodus eine Interaktion mit dem Trigger Ziehenhinzu. Wähle dann mit Auto-Animate erneut die nächste Zeichenfläche in der Serie aus. Wenn ein Anwender nun die Videokomponente zieht, zeigt der Prototyp eine Animation zum Nach-oben-Scrollen der Videos und springt zum nächsten Video.
Verbindung der mit dem Rest der App
Auf der Arbeitsfläche stehen weitere Zeichenflächen mit bereits eingebetteten Videos zur Verfügung. Nutze diese bereitgestellten Elemente, um eine Videodetailansicht auf der Profilseite zu erstellen, oder gestalte eigene Elemente für das Verlassen der Video-App.
Erfahre mehr über die Prototyperstellung mit Adobe XD und finde heraus, wie du mit diesen Prototyping-Tutorials weitere Erlebnisse wie dieses erstellst.
