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
17. Februar 2022
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. Wenn du zwei Aktionen in einem einzigen Auslöser wie Tippen zuweisen möchtest, setze die erste Aktion + Schaltfläche im Eigenschaftsinspektor auf Overlay und setze die zweite Aktion + Schaltfläche auf eine nicht-transitionale Aktion wie Audiowiedergabe oder Sprachausgabe.
- 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.
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:
- Auslöser: Tippen auswählen.
- Aktion: Wählen Sie Overlay aus.
- Animation: Auflösen auswählen.
- 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.
- Wechsle in den Prototyp-Modus, um die Quell-Zeichenfläche mit der Overlay-Zeichenfläche zu verbinden.
- Wählen Sie aus den folgenden Optionen im Eigenschafteninspektor:
- Auslöser: Tippen auswählen.
- 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
Um mehr über Overlays in XD zu erfahren, schaue dir dieses Video an.
Wiedergabedauer: 10 Minuten
Sie können auch in der XD Community nach weiteren Tutorials und Beispieldateien suchen.
Ähnliche Themen
Entwerfen von UX-Prototypen mit Adobe XD
Erstelle interaktive Modelle für Websites und mobile Apps.
