Hinzufügen von Overlays

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. 

Tastatur als Overlay auf der Zeichenfläche
Tastatur als Overlay auf der Zeichenfläche

  1. Wählen Sie im Designmodus eine Quellzeichenfläche und eine zweite Zeichenfläche als Overlay. Sie können eine Overlay-Zeichenfläche mehrmals verwenden.

  2. 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

  3. Klicken Sie auf den grünen Positionsknopf (+), ziehen Sie ihn und legen Sie ihn ab, um die Position eines Overlays auf der Quellzeichenfläche anzupassen.

  4. Wenn Sie die Overlays in unterstützten Browsern in der Vorschau anzeigen möchten, 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?

  1. 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.
  2. Wechseln Sie zum Prototypmodus, um die Quellzeichenfläche mit der Overlay-Zeichenfläche zu verbinden.
  3. 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.
  4. Verbinden Sie nach Bedarf mehrere Quellzeichenflächen mit der Overlay-Zeichenfläche. 
  5. 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:

  1. Wählen Sie eine Quellzeichenfläche und eine Overlay-Zeichenfläche mit einer Dropdown-Liste mit Elementen.  
  2. Wechseln Sie zum Prototypmodus, um die Quellzeichenfläche mit der Overlay-Zeichenfläche zu verbinden.
  3. 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.
  4. Verbinden Sie nach Bedarf mehrere Quellzeichenflächen mit der Overlay-Zeichenfläche. 
  5. 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.

Best Practices

„Overlays sind eine sehr flexible Funktion, die sich vielfältig einsetzen lässt. Die Aufgaben, die Benutzer ausführen möchten, werden immer komplexer und mit Overlays wird vieles einfacher.“ So Oliver Lindberg. Sehen Sie sich sein Blog zu Best Practices beim Gestalten von Overlays an.