Wählen Sie im Designmodus eine Quellzeichenfläche und eine zweite Zeichenfläche als Overlay. Sie können eine Overlay-Zeichenfläche mehrmals verwenden.
Zuletzt aktualisiert am
25. Februar 2022
- 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
Hier erfahren Sie, wie Sie Overlays hinzufügen, um interaktive Einblendeffekte zu simulieren.
Mit Adobe XD können Sie Inhalte über einer anderen Zeichenfläche stapeln, anstatt sie auf mehrere Zeichenflächen zu duplizieren, um Effekte wie Dropdown-Listen, Einblenden der Tastatur und mehr zu simulieren.
-
-
Im Prototypmodus ziehen Sie die Verbindungslinie per Drag & Drop von der Quellzeichenfläche zur Zeichenfläche mit den Overlay-Inhalten. 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 eine Option aus.
- Aktion: Wählen Sie Overlay aus. Sie können einem einzelnen Trigger wie Antippen auch zwei Aktionen zuweisen: Dazu setzen Sie die erste Aktion im Eigenschafteninspektor auf Overlay, klicken für die zweite Aktion auf das Pluszeichen (+) und setzen sie auf eine Nicht-Übergangsaktion wie Audiowiedergabe oder Sprachwiedergabe.
- Animation: Wählen Sie den Animationstyp aus. Wenn Sie Nach oben hineinbewegen oder Nach unten hineinbewegen auswählen, wird das Overlay von XD automatisch am Rand der Quellzeichenfläche platziert.
- Easing: Wählen Sie eine Option aus, um Easing-Effekte zu simulieren.
- Dauer: Geben Sie die Dauer an. Die Höchstdauer, die Sie für den Übergang zwischen Zeichenflächen festlegen können, beträgt fünf Sekunden.
Tastatur als Overlay auf der Quellzeichenfläche hinzufügen
Tastatur als Overlay auf der Quellzeichenfläche hinzufügen -
Um die Position eines Overlays auf der Quellzeichenfläche anzupassen, klicken Sie auf den grünen Positionsknopf (+) und ziehen ihn auf die gewünschte Position.
-
Um in unterstützten Browsern eine Vorschau der Overlays anzuzeigen, klicken Sie auf
.
Verschachtelte Overlays
Adobe XD unterstützt keine verschachtelten Overlays, bei denen Sie ein Overlay über einem anderen Overlay anwenden. Wenn Sie in solchen Szenarien die erste Zeichenfläche mit einer anderen Zeichenfläche verbinden, wird die erste Zeichenfläche ausgeblendet, bevor die zweite Zeichenfläche eingeblendet wird.
Beispiele und Beispieldateien
Möchten Sie interaktive Overlays mit Weichzeichnen-Effekt für den Hintergrund erstellen?
- Wählen Sie eine Quellzeichenfläche und eine Overlay-Zeichenfläche, deren Hintergrund weichgezeichnet wird. Informationen zum Hinzufügen von Weichzeichnen-Effekten für den Hintergrund finden Sie unter Arbeiten mit Weichzeichnen-Effekten in XD.
- Wechseln Sie zum Prototypmodus, um die Quellzeichenfläche mit der Overlay-Zeichenfläche zu verbinden.
- Wählen Sie aus den folgenden Optionen im Eigenschafteninspektor:
- Trigger: Wählen Sie Antippen.
- Aktion: Wählen Sie Overlay aus.
- Animation: Wählen Sie Ausblenden.
- Easing: Wählen Sie Ease Out.
- Dauer: Geben Sie 0,2s ein.
- Verbinden Sie nach Bedarf mehrere Quellzeichenflächen mit der Overlay-Zeichenfläche.
- Verwenden Sie die Vorschau, um eine Vorschau des Effekts anzuzeigen.
Ein ausführliches Tutorial und Beispieldateien zum Herunterladen finden Sie unter Interaktives Overlay erstellen.
Möchten Sie erfahren, wie Sie mit Overlays einen Hineinbewegen-Effekt für Dropdown-Listen erstellen können? Sehen Sie sich das Tutorial am Ende dieses Beispiels an und führen Sie die folgenden Schritte aus:
- Wählen Sie eine Quellzeichenfläche und eine Overlay-Zeichenfläche mit einer Dropdown-Liste mit Elementen.
- Wechseln Sie zum Prototypmodus, um die Quellzeichenfläche mit der Overlay-Zeichenfläche zu verbinden.
- Wählen Sie aus den folgenden Optionen im Eigenschafteninspektor:
- Trigger: Wählen Sie Antippen aus.
- Aktion: Wählen Sie Overlay aus.
- Animation: Wählen Sie Nach rechts hineinbewegen aus.
- Easing: Wählen Sie den Effekt Ease Out aus.
- Dauer: Geben Sie 0,3s ein.
- Verbinden Sie nach Bedarf mehrere Quellzeichenflächen mit der Overlay-Zeichenfläche.
- Verwenden Sie die Vorschau, um eine Vorschau des Effekts anzuzeigen.
Weitere Informationen
Im folgenden Video erhalten Sie weitere Informationen zu Overlays in XD.
Dauer: 10 Minuten
Sie können auch in der XD Community nach weiteren Tutorials und Beispieldateien suchen.
Ähnliche Themen
Adobe MAX
Die Konferenz für Kreative
14. bis 16. Oktober in Miami Beach und online
Adobe MAX
Die Konferenz für Kreative
14. bis 16. Oktober in Miami Beach und online