Benutzerhandbuch Abbrechen

Erstellen zeitgesteuerter Übergänge

  1. Adobe XD Benutzerhandbuch
  2. Einführung
    1. Neue Funktionen in Adobe XD
    2. Häufige Fragen
    3. Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
    4. Farbmanagement
    5. Systemanforderungen
      1. Hardware- und Softwareanforderungen
      2. Adobe XD, Big Sur und Apple silicon | macOS 11
    6. Arbeitsbereich – Grundlagen
    7. Ändern der in Adobe XD angezeigten Sprache
    8. Zugriff auf UI-Design-Kits
    9. Barrierefreiheit in Adobe XD
    10. Tastaturbefehle
    11. Tipps und Tricks
  3. Design erstellen
    1. Zeichenflächen, Hilfslinien und Ebenen
      1. Erste Schritte mit Zeichenflächen
      2. Verwenden von Hilfslinien und Rastern
      3. Bildlauffähige Zeichenflächen erstellen
      4. Arbeiten mit Ebenen
      5. Erstellen von Bildlaufgruppen
    2. Formen, Objekte und Pfade
      1. Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
      2. Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
      3. Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
      4. Festlegen von Strichen, Flächen und Schlagschatten für Objekte
      5. Erstellen sich wiederholender Elemente
      6. Perspektivisches Design mit 3D-Transformationen
      7. Bearbeiten von Objekten mithilfe boolescher Operationen
    3. Text und Schriften
      1. Arbeiten mit Zeichen- und Textwerkzeugen
      2. Schriften in XD
    4. Komponenten und Zustände
      1. Arbeiten mit Komponenten
      2. Arbeiten mit verschachtelten Komponenten
      3. Hinzufügen mehrerer Zustände zu Komponenten
    5. Maskierung und Effekte
      1. Erstellen einer Maske mit Formen
      2. Arbeiten mit Weichzeichnen-Effekten
      3. Erstellen und Ändern von Farbverläufen
      4. Fülleffekte anwenden
    6. Layout
      1. Responsive Resize und Bedingungen
      2. Festlegen fester Innenabstände für Komponenten und Gruppen
      3. Erstellen dynamischer Designs mit Stapeln
    7. Videos und Lottie-Animationen
      1. Arbeiten mit Videos
      2. Erstellen von Prototypen mit Videos
      3. Arbeiten mit Lottie-Animationen
  4. Prototypen erstellen
    1. Erstellen interaktiver Prototypen
    2. Animieren von Prototypen
    3. Für Auto-Animate unterstützte Objekteigenschaften
    4. Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
    5. Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
    6. Erstellen zeitgesteuerter Übergänge
    7. Hinzufügen von Overlays
    8. Sprachprototypen erstellen
    9. Erstellen von Ankerlinks
    10. Erstellen von Hyperlinks
    11. Testen von Designs und Prototypen
  5. Freigeben, Exportieren und Review
    1. Ausgewählte Zeichenflächen freigeben
    2. Freigeben von Designs und Prototypen
    3. Zugriffsberechtigungen für Links festlegen
    4. Arbeiten mit Prototypen
    5. Prototyp-Review
    6. Arbeiten mit Design-Spezifikationen
    7. Freigeben von Design-Spezifikationen
    8. Auswerten von Design-Spezifikationen
    9. Navigation in Design-Spezifikationen
    10. Reviews und Kommentarfunktion zu Design-Spezifikationen
    11. Exportieren von Design-Assets
    12. Exportieren und Herunterladen von Assets aus Design-Spezifikationen
    13. Gruppenfreigabe für Unternehmen
    14. Sichern oder übertragen von XD Elementen
  6. Design-Systeme
    1. Design-Systeme mit Creative Cloud-Bibliotheken
    2. Arbeiten mit Dokumentelementen in Adobe XD
    3. Arbeiten mit Creative Cloud-Bibliotheken in Adobe XD
    4. Von verknüpften Elementen zu Creative Cloud-Bibliotheken migrieren
    5. Arbeiten mit Designtoken 
    6. Verwenden von Elementen aus Creative Cloud-Bibliotheken
  7. Cloud-Dokumente
    1. Cloud-Dokumente in Adobe XD
    2. Zusammenarbeit und Co-Editing
    3. Co-Editing bei für Sie freigegebenen Dokumenten
  8. Integrationen und Plug-ins
    1. Arbeiten mit externen Elementen
    2. Arbeiten mit Design-Elementen aus Photoshop
    3. Kopieren und Einfügen von Elementen aus Photoshop
    4. Importieren oder Öffnen von Photoshop-Designs
    5. Arbeiten mit Illustrator-Elementen in Adobe XD
    6. Öffnen oder Importieren von Illustrator-Designs
    7. Vektordateien aus Illustrator nach XD kopieren
    8. Plug-ins für Adobe XD
    9. Erstellen und Verwalten von Plug-ins
    10. Jira-Integration für Adobe XD
    11. Slack-Plug-in für XD
    12. Zoom-Plug-in für XD
    13. Designs von XD aus auf Behance freigeben
  9. XD für iOS und Android
    1. Testen der Prototypen auf iOS/Android
    2. Adobe XD unter iOS/Android – Häufige Fragen
  10. Fehlerbehebung
    1. Bekannte und behobene Probleme
      1. Bekannte Probleme
      2. Behobene Probleme
    2. Installation und Updates
      1. XD scheint unter Windows nicht kompatibel zu sein
      2. Fehlercode 191
      3. Fehlercode 183
      4. Probleme beim Installieren von XD Plug-ins
      5.  Aufforderung zur Deinstallation und erneuten Installation von XD | Windows 10
      6. Probleme mit der Migration von Einstellungen
    3. Absturz beim Programmstart
      1.  Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
      2.  XD wird beendet, wenn Sie sich von Creative Cloud abmelden
      3. Problem mit dem Abonnementstatus unter Windows
      4. Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
      5. Generierung von Absturzbildern auf Windows
      6. Sammlung und Freigabe von Absturzprotokollen
    4. Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
      1. Probleme mit XD Cloud-Dokumenten
      2. Probleme mit verknüpften Komponenten
      3. Probleme mit Bibliotheken und Links
    5. Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
      1. Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
      2. Probleme mit Arbeitsabläufen für die Veröffentlichung
      3. Veröffentlichte Links werden in Browsern nicht angezeigt
      4. Prototypen werden in Browsern nicht korrekt dargestellt
      5. Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
      6. Bibliotheken können nicht veröffentlicht werden
    6. Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
      1. Import und Export in XD
      2. Photoshop-Dateien in XD
      3. Illustrator-Dateien in XD
      4. Von XD nach After Effects exportieren
      5. Sketch-Dateien in XD
      6. Apps von Drittanbietern sind im Export nicht sichtbar

Erfahren Sie, wie Sie mithilfe von Triggern zeitgesteuerte Übergänge definieren.

Mit dem Trigger „Zeitgesteuert“ können Sie basierend auf zeitlicher Verzögerung und Dauer einen Übergang zwischen zwei Zeichenflächen erstellen.  

Sie können den Trigger Zeitgesteuert mit Aktionen kombinieren, um eine Vielzahl von Effekten wie Animationsschleifen, eine Fortschrittsanzeige und andere mehr zu erstellen. Hier ein Beispiel, in dem der Trigger Zeitgesteuert mit Auto-Animate kombiniert wurde, um einen Schleifeneffekt zu erzeugen.

Animierte Zähler für zeitliche Übergänge
Animierte Zähler für zeitliche Übergänge

Um einen einfachen zeitgesteuerten Übergang zu erstellen, führen Sie die folgenden Schritte aus:

  1. Klicken Sie im Prototypmodus auf den Titel der Ausgangszeichenfläche und verdrahten Sie sie mit der Zielzeichenfläche. 

  2. Klicken Sie auf die Verbindungslinie, um das Fenster Interaktion anzuzeigen, das im Eigenschafteninspektor erscheint, und legen Sie die folgenden Optionen fest:

    • Trigger: Wählen Sie Zeitgesteuert aus. Ist die Option Zeitgesteuert nicht verfügbar, haben Sie möglicherweise in Schritt 1 nicht die gesamte Zeichenfläche samt Titel ausgewählt.  
    • Verzögerung: Geben Sie die Zeitverzögerung ein, nach der der Übergang gestartet wird. Der akzeptable Bereich liegt zwischen 0,2 und 5 Sekunden.
    • Aktion: Wählen Sie die Option Übergang aus. Sie können den Trigger Zeitgesteuert auch mit anderen Aktionen wie Auto-Animate, Overlay oder Sprachwiedergabe kombinieren, um verschiedene Effekte zu erzielen. Im Abschnitt Beispiele und Beispieldateien lernen Sie u. a., wie Sie eine Animationsschleife erstellen.
    • Ziel: Zeigt die in Schritt 1 verdrahtete Zielzeichenfläche an, die Sie bei Bedarf ändern können.
    • Easing: Wählen Sie den Easing-Effekt aus, der auf die Quell-Zeichenfläche angewendet werden soll.
    • Dauer: Geben Sie die Dauer des Easing-Effekts an, d. h. wie lange der Effekt anhalten soll. Der akzeptierte Bereich liegt zwischen 0,2 und 5 Sekunden. 

    XD speichert Ihre Attribute auf der Zeichenfläche und schlägt sie als Standard für weitere Bildschirme vor.

  3. Um den zeitgesteuerten Übergang zu testen, klicken Sie auf .

Beispiele und Beispieldateien

Zähleranimationen werden eingesetzt, um Zahlen auf interessante und auffällige Weise anzuzeigen. Möchten Sie lernen, wie Sie durch Anwendung zeitgesteuerter Übergänge eine Anzeigetafel mit Zähleranimation erstellen können?

1. Wählen Sie im Prototypmodus die Zeichenfläche aus und nehmen Sie die folgenden Einstellungen vor:

  • Trigger: Wählen Sie Zeitgesteuert aus.
  • Verzögerung: Geben Sie als Zeitverzögerung 0,8 Sekunden an.
  • Aktion: Wählen Sie Auto-Animate aus.
  • Easing: Wählen Sie Ease In aus.
  • Dauer: Geben Sie eine Dauer von 4 Sekunden an.

2. Klicken Sie auf , um die Animation des Nummernzählers zu testen.

Laden Sie die Beispieldateien herunter. Das folgende Video zeigt, wie Sie die Beispieldateien ausprobieren können.

Dauer: 2 Minuten, 47 Sekunden.

Möchten Sie einen zeitgesteuerten Übergang verwenden, um eine Onboarding-Erlebnis für Ihre Applikation zu erstellen? Schauen Sie sich das folgende Video an und verwenden Sie dieses kostenlose UI-Kit, um einen Onboarding-Workflow zu erstellen.

Dauer: 5 Minuten, 2 Sekunden.

Onboarding-Erlebnis für eine Applikation

In unserer XD Support-Community finden Sie weitere Tutorials und Beispieldateien.

Tipps und Tricks

Wussten Sie, dass Sie den Übergang Zeitgesteuert mit Auto-Animate und Overlay kombinieren können, um interaktive Effekte erstellen? Im folgenden Video erhalten Sie weitere Informationen zu Auto-Animate.

Dauer: 8 Minuten, 33 Sekunden.


Verwandte Ressourcen

Kontaktaufnahme

Fragen Sie die Community

Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?