Erstellen von Prototypen mit Videos

Sie können eine vorgegebene oder benutzerdefinierte Wiedergabeoption für Ihr Video wählen und festlegen, wie andere Interaktionen damit funktionieren. Sehen Sie sich beim Erkunden der Videowiedergabeoptionen und -interaktionen einige realistische Beispiele für das Prototyping mit Videos an.

Vorbereitung

Informieren Sie sich, wie Sie Videos importieren und Einstellungen anpassen können.

Wiedergabeoption festlegen

Wiedergabeoptionen und zugeordnete Interaktionen

Wenn Sie im Designmodus eine Wiedergabeoption für Ihr Video festlegen, werden im Prototypmodus die zugeordneten Interaktionen automatisch festgelegt.

Per Antippen abspielen

Wenn Per Antippen abspielen ausgewählt ist, wird der Trigger Antippen automatisch auf die Standardaktion Wiedergabe/Pause umschalten gesetzt.

Automatisch abspielen

Wenn Sie Automatisch abspielen auswählen, wird der Trigger Zeitgesteuert automatisch auf eine Verzögerung von 0 Sekunden gesetzt.

Keine Wiedergabe

Wenn Sie Keine Wiedergabe auswählen, wird im Prototypmodus keine Interaktion erstellt.

Videowiedergabe anpassen

Nehmen Sie im Prototypmodus folgende Anpassungen vor:

 Sie können ein Video nicht so einstellen, dass es mit einem Ziehen-Trigger wiedergegeben wird.

Videowiedergabe mit anderen Interaktionen verwenden

Interaktionen und Videowiedergabeverhalten 

Ihr Video wird basierend auf den Interaktionen, die Sie für andere Objekte festgelegt haben, angehalten oder weiter abgespielt:

• Die Wiedergabe des Videos wird angehalten, wenn andere Aktionen als Auto-Animate und Lottie-Wiedergabe ausgelöst werden.
• Wenn Ihr Video weiter abgespielt werden soll, wenn Sie den Mauszeiger über ein anderes Objekt bewegen oder darauf tippen, verwenden Sie „Auto-Animate” als Aktion für die Trigger „Hover” und „Antippen”.

Trigger „Video” und „Zeitgesteuert”

Auf einer beliebigen Zeichenfläche:

• Sie können mehrere Zeit-Triggers nacheinander basierend auf ihrer Verzögerung verwenden.
• Sie können ein Video und mehrere Lottie-Animationen so einstellen, dass sie nach derselben Verzögerung zusammen abgespielt werden. Sie können sie auch so einstellen, dass sie automatisch zusammen spielen (Verzögerung auf 0 s eingestellt).
• Wenn Sie „Zeitgesteuert”-Trigger mit derselben Verzögerung für Zeichenfläche, Video und Lottie festlegen, lautet die Priorität: Zeichenfläche > Video > Lottie.

Beispiele für Prototyping

Nachdem Sie nun gelernt haben, wie Sie eine Wiedergabeoption für Ihr Video festlegen und es mit anderen Interaktionen verbinden, probieren wir einige Beispiele aus.

Beispiel 1: Einen Prototyp für die Schaltfläche „Maximierte Darstellung” für Videos erstellen

Erfahren Sie, wie Sie einen Prototyp für die Schaltfläche „Maximierte Darstellung” für Videos erstellen.

Ex 1-artboard 1

1. Importieren Sie im Designmodus das Video „Tipp 1” und platzieren Sie es auf der Zeichenfläche. Stellen Sie es auf „Per Antippen abspielen” ein.
2. Platzieren Sie das „Maximieren”-Symbol (im Abschnitt „Symbole” rechts neben den Zeichenflächen enthalten) in der unteren rechten Ecke des Videos. 
3. Verknüpfen Sie im Prototypmodus das „Maximieren”-Symbol mit „Ex 1-artboard 2” und stellen Sie es auf einen „Antippen“-Trigger mit „Auto-Animate” als Aktionstyp ein.

Ex 1-artboard 2

1. Importieren Sie im Designmodus das Video „Tipp 1” und platzieren Sie es auf der Zeichenfläche (Video im Vollbildmodus). Stellen Sie es auf „Per Antippen abspielen” ein.
   
2. Platzieren Sie das „Minimieren”-Symbol (im Abschnitt „Symbole” enthalten) in der unteren rechten Ecke des Videos. 
3. Verknüpfen Sie im Prototypmodus das „Minimieren”-Symbol mit „Ex 1-artboard 1” und stellen Sie es auf einen „Antippen“-Trigger mit „Auto-Animate” als Aktionstyp ein.
   

Wenn Sie die Verknüpfung der Interaktionen abgeschlossen haben, zeigen Sie den Prototyp in der Vorschau an und überprüfen Sie die Interaktionen.

Beispiel 2: Einen Prototyp-für die Wiedergabe erstellen

Erfahren Sie, wie Sie Videos in XD hintereinander wiedergeben können.

Ex 2-artboard 1

1. Importieren Sie im Designmodus das Video „Intro” und platzieren Sie es im Abschnitt „Einführung”. Stellen Sie es auf „Keine Wiedergabe” ein.
   
2. Importieren Sie die Videos „Tipp 1” und „Tipp 2” und platzieren Sie sie im Abschnitt „Tipps”. Stellen Sie sie auf „Keine Wiedergabe” ein.
3. Platzieren Sie eine Kopie der Schaltfläche „Abspielen“ (im Abschnitt „Symbole” enthalten) auf allen Videos.
4. Im Prototypmodus:

• Verknüpfen Sie die Schaltfläche „Abspielen“ des „Intro”-Videos mit „Ex 2-artboard 2”.
  
•  Verknüpfen Sie die Schaltfläche „Abspielen“ des „Tipp 1”-Videos mit „Ex 2-artboard 3”.
  
• Verknüpfen Sie die Schaltfläche „Abspielen“ des „Tipp 2”-Videos mit „Ex 2-artboard 4”. 

Stellen Sie sie alle auf einen Trigger „Antippen“ mit „Übergang” als Aktionstyp.

Ex 2-artboard 2

1. Importieren Sie im Designmodus das Video „Intro” und platzieren Sie es über dem Abschnitt „Tipps”. Stellen Sie es auf „Automatisch abspielen” ein.
2. Verknüpfen Sie im Prototypmodus das Video mit „Ex 2-artboard 3” und stellen Sie es auf einen Trigger vom Typ „Ende der Wiedergabe“ mit „Übergang” als Aktionstyp ein.
   

Ex 2-artboard 3

1. Importieren Sie im Designmodus das Video „Tipp 1” und platzieren Sie es über dem Abschnitt „Tipp 1”. Stellen Sie es auf „Automatisch abspielen” ein.
   
2. Verknüpfen Sie im Prototypmodus das Video mit „Ex 2-artboard 4” und stellen Sie es auf einen Trigger vom Typ „Ende der Wiedergabe“ mit „Übergang” als Aktionstyp ein.
   

Ex 2-artboard 4

1. Importieren Sie im Designmodus das Video „Tipp 2” und platzieren Sie es über dem Abschnitt „Tipp 2”. Stellen Sie es auf „Automatisch abspielen” ein.
2. Verknüpfen Sie im Prototypmodus das Video mit „Ex 2-artboard 1” und stellen Sie es auf einen Trigger vom Typ „Ende der Wiedergabe“ mit „Übergang” als Aktionstyp ein.
   

Wenn Sie die Verknüpfung der Interaktionen abgeschlossen haben, zeigen Sie den Prototyp in der Vorschau an und überprüfen Sie die Interaktionen.

Weitere Beispiele

Entdecken Sie weitere Beispiele mit Videos, Lottie-Animationen und Komponentenzuständen.

Weitere Beispiele

Weitere Informationen

Sehen Sie sich dieses 2-minütige Video an, um einige Profi-Tipps für die Arbeit mit Videos in XD zu erhalten.

Verwandte Ressourcen

• Erstellen interaktiver Prototypen
  
• Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
  
• Arbeiten mit Lottie-Animationen

Noch Fragen oder Ideen?