Erstellen von Bildlaufgruppen in Adobe XD

Hier erfahren Sie, wie Sie Bildlaufgruppen für Bereiche erstellen, deren Inhalt unabhängig vom Rest der Zeichenfläche verschoben werden kann.

Mit Bildlaufgruppen in Adobe XD können Sie Bereiche innerhalb einer Zeichenfläche definieren, die unabhängig vom Rest der Zeichenfläche bildlauffähig sind, und so horizontale oder vertikale Bildlaufeffekte erstellen. Bildlaufgruppen sind praktisch, wenn Sie UI-Elemente wie Bilderkarusselle, Schieberegler für Produkte oder interaktive Karten erstellen möchten.

Im Folgenden wird erläutert, wie Sie in XD für eine Gruppe einen Bildlauf in horizontalervertikaler oder sowohl in horizontaler als auch in vertikaler Richtung erstellen können.

Karusselleffekt, der mithilfe von Bildlaufgruppen erstellt wurde
Karusselleffekt, der mithilfe von Bildlaufgruppen erstellt wurde

Bereits Benutzer von Adobe XD?

Applikation aktualisieren

Überblick über die neuen Funktionen

Jetzt testen

Beispieldatei abrufen

.xd; 81 MB

Vorbereitung

Vergewissern Sie sich, dass Sie mit den Entwurfs-, Prototyp- und Freigabemodi in XD vertraut sind.

Einschränkung

Bildlaufgruppen funktionieren nicht in Design-Spezifikationen. Fügen Sie als Workaround Bildlaufgruppen in einer separaten Zeichenfläche hinzu und veröffentlichen Sie sie als Teil der Design-Spezifikationen.

Horizontalen Bildlaufeffekt erstellen

Möchten Sie aus einem Karussell mithilfe eines horizontalen Bildlaufs einen Prototyp erstellen? Die animierte Illustration und die nachfolgenden Schritte zeigen, wie Sie einen horizontalen Bildlaufeffekt erstellen.

horizontaler Bildlauf

  1. Wählen Sie im Designmodus die Objekte aus, die Sie in eine bildlauffähige Gruppe umwandeln möchten.
  2. Klicken Sie auf das Symbol  im Eigenschafteninspektor. Der Viewport passt seine Abmessungen automatisch an, sodass Sie das Ergebnis gleich sehen können. Sie können auch ⇧⌘H auf macOS bzw. Umschalt + Strg + H auf Windows verwenden, um einen horizontalen Bildlaufeffekt zu erstellen.
  3.  Um den gesamten horizontalen Bildlaufeffekt zu testen, klicken Sie auf .

Vertikalen Bildlaufeffekt erstellen

Möchten Sie aus einem Karussell mithilfe eines vertikalen Bildlaufs einen Prototyp erstellen? Die animierte Illustration und die nachfolgenden Schritte zeigen, wie Sie einen vertikalen Bildlaufeffekt erstellen.

vertikaler Bildlauf

  1. Wählen Sie im Designmodus die Objekte aus, die Sie in eine bildlauffähige Gruppe umwandeln möchten.
  2. Klicken Sie auf das Symbol  im Eigenschafteninspektor, damit der Benutzer nach oben oder unten scrollen kann. Der Viewport passt seine Abmessungen automatisch an, sodass Sie das Ergebnis gleich sehen können. Sie können auch ⇧⌘V auf macOS bzw. Umschalt + Strg + V auf Windows verwenden, um einen vertikalen Bildlaufeffekt zu erstellen.
  3.  Um den gesamten vertikalen Bildlaufeffekt zu testen, klicken Sie auf .

Horizontalen und vertikalen Bildlaufeffekt erstellen

Eine Kombination aus horizontalem Bildlauf und vertikalen Effekten ist nützlich, wenn Sie Objekte erstellen, die in alle Richtungen bildlauffähig sind, z. B. interaktive Karten. Sehen Sie sich die animierte Illustration an und befolgen Sie die nachfolgenden Schritte.

horizontal und vertikal

  1. Wählen Sie im Designmodus die Objekte aus, die Sie in eine bildlauffähige Gruppe umwandeln möchten.
  2. Klicken Sie auf das Symbol  im Eigenschafteninspektor. Der Viewport passt seine Abmessungen automatisch an, sodass Sie das Ergebnis gleich sehen können. Sie können auch⇧⌘D auf macOS bzw. Umschalt + Strg + D auf Windows verwenden, um eine Kombination aus horizontalen und vertikalen Bildlaufeffekten zu erstellen.
  3. Um den gesamten horizontalen und vertikalen Bildlaufeffekt zu testen, klicken Sie auf .

Weitere Informationen

Das folgende Video bietet weitere Informationen zu horizontalen und vertikalen Bildlaufgruppen in XD.

Dauer: 6 Minuten

Tipps und Tricks

Jetzt, wo Sie wissen, wie Sie horizontale und vertikale Bildlaufeffekte in XD erstellen, hier einige praktische Tipps und Tricks:

  • Verwenden Sie bei der Vorschau Ihres Prototyps auf Windows und im Web das Trackpad, das Mausrad und klicken und ziehen Sie, um sowohl horizontale als auch vertikale Bildlaufeffekte zu prüfen.
  • Verwenden Sie in der macOS-Vorschau das Trackpad und das Mausrad und klicken und ziehen Sie, um sowohl horizontale als auch vertikale Bildlaufeffekte zu überprüfen.
  • Kombinieren Sie Bildlaufgruppen mit Komponentenzuständen und Aktionstypen wie Overlay, Auto-Animate oder Bildlauf zu
  • Verwenden Sie Innenabstände, um Abstände in der Bildlaufgruppe besser zu regeln.
  • Verwenden Sie verschachtelte Bildlaufgruppen, wenn Sie in Ihren Designs mehrere Ebenen mit Bildlauf erstellen.

Wie geht’s weiter?

Sie wissen jetzt, wie Sie horizontale und vertikale Bildlaufeffekte erstellen. Lernen Sie als Nächstes, wie Sie interaktive Prototypen erstellen und für Stakeholder und andere Designer freigeben, um Feedback einzuholen.

Noch Fragen oder Ideen?

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-Logo

Bei Ihrem Konto anmelden