Klicken Sie im Prototypmodus auf den Titel der Ausgangszeichenfläche und verdrahten Sie sie mit der Zielzeichenfläche.
Zuletzt aktualisiert am
- Adobe XD Benutzerhandbuch
- Einführung
- Neue Funktionen in Adobe XD
- Häufige Fragen
- Erstellen von Designs und Prototypen und Freigeben mit Adobe XD
- Farbmanagement
- Systemanforderungen
- Arbeitsbereich – Grundlagen
- Ändern der in Adobe XD angezeigten Sprache
- Zugriff auf UI-Design-Kits
- Barrierefreiheit in Adobe XD
- Tastaturbefehle
- Tipps und Tricks
- Design erstellen
- Zeichenflächen, Hilfslinien und Ebenen
- Formen, Objekte und Pfade
- Auswählen, Vergrößern, Verkleinern und Drehen von Objekten
- Verschieben, Ausrichten, Verteilen und Anordnen von Objekten
- Gruppieren, Sperren, Duplizieren, Kopieren und Spiegeln von Objekten
- Festlegen von Strichen, Flächen und Schlagschatten für Objekte
- Erstellen sich wiederholender Elemente
- Perspektivisches Design mit 3D-Transformationen
- Bearbeiten von Objekten mithilfe boolescher Operationen
- Text und Schriften
- Komponenten und Zustände
- Maskierung und Effekte
- Layout
- Videos und Lottie-Animationen
- Prototypen erstellen
- Erstellen interaktiver Prototypen
- Animieren von Prototypen
- Für Auto-Animate unterstützte Objekteigenschaften
- Erstellen von Prototypen mit Tastatur- und Gamepad-Nutzung
- Erstellen von Prototypen mit Sprachbefehlen und Audiowiedergabe
- Erstellen zeitgesteuerter Übergänge
- Hinzufügen von Overlays
- Sprachprototypen erstellen
- Erstellen von Ankerlinks
- Erstellen von Hyperlinks
- Testen von Designs und Prototypen
- Freigeben, Exportieren und Review
- Ausgewählte Zeichenflächen freigeben
- Freigeben von Designs und Prototypen
- Zugriffsberechtigungen für Links festlegen
- Arbeiten mit Prototypen
- Prototyp-Review
- Arbeiten mit Design-Spezifikationen
- Freigeben von Design-Spezifikationen
- Auswerten von Design-Spezifikationen
- Navigation in Design-Spezifikationen
- Reviews und Kommentarfunktion zu Design-Spezifikationen
- Exportieren von Design-Assets
- Exportieren und Herunterladen von Assets aus Design-Spezifikationen
- Gruppenfreigabe für Unternehmen
- Sichern oder übertragen von XD Elementen
- Design-Systeme
- Cloud-Dokumente
- Integrationen und Plug-ins
- Arbeiten mit externen Elementen
- Arbeiten mit Design-Elementen aus Photoshop
- Kopieren und Einfügen von Elementen aus Photoshop
- Importieren oder Öffnen von Photoshop-Designs
- Arbeiten mit Illustrator-Elementen in Adobe XD
- Öffnen oder Importieren von Illustrator-Designs
- Vektordateien aus Illustrator nach XD kopieren
- Plug-ins für Adobe XD
- Erstellen und Verwalten von Plug-ins
- Jira-Integration für Adobe XD
- Slack-Plug-in für XD
- Zoom-Plug-in für XD
- Designs von XD aus auf Behance freigeben
- XD für iOS und Android
- Fehlerbehebung
- Bekannte und behobene Probleme
- Installation und Updates
- Absturz beim Programmstart
- Adobe XD stürzt ab, wenn es auf Windows 10 gestartet wird
- XD wird beendet, wenn Sie sich von Creative Cloud abmelden
- Problem mit dem Abonnementstatus unter Windows
- Warnung zu blockierter Applikation, wenn XD auf Windows gestartet wird
- Generierung von Absturzbildern auf Windows
- Sammlung und Freigabe von Absturzprotokollen
- Cloud-Dokumente sowie Creative Cloud-Bibliotheken.
- Erstellen und Veröffentlichen von Prototypen und Durchführen von Reviews
- Prototyp-Interaktionen können unter macOS Catalina nicht aufgezeichnet werden
- Probleme mit Arbeitsabläufen für die Veröffentlichung
- Veröffentlichte Links werden in Browsern nicht angezeigt
- Prototypen werden in Browsern nicht korrekt dargestellt
- Kommentarfeld wird plötzlich bei freigegebenen Links angezeigt
- Bibliotheken können nicht veröffentlicht werden
- Importieren, exportieren und Zusammenarbeit mit anderen Applikationen
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.
Um einen einfachen zeitgesteuerten Übergang zu erstellen, führen Sie die folgenden Schritte aus:
-
-
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.
-
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
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.
Bei Ihrem Konto anmelden