Erstellen sich wiederholender Elemente

Suchen

Last updated on | Also Applies to Adobe XD

Anhand eines Wiederholungsrasters Elemente erstellen, die sich wiederholen

Beim Entwerfen von Seiten für das Web oder für mobile Apps müssen oft Elemente, die sich wiederholen, oder Inhaltslisten definiert werden. Solche Elemente zu erstellen oder bei Design-Änderungen zu aktualisieren, kann jedoch recht zeitaufwendig sein.

Die Funktion „Wiederholungsraster“ macht aus einer Gruppe von Elementen ein sich wiederholendes Element. Sie ziehen das Element einfach in eine beliebige Richtung und das Raster wird wiederholt. Wenn Sie den Stil eines Elements ändern, wird die Änderung in allen anderen Elementen des Rasters ausgeführt. Angenommen, Sie ändern in einem der Elemente die Bildgröße, so wird die Größe aller Bilder im Raster automatisch angepasst.

Wenn sich ein Textelement im Raster befindet, wird nur der Stil des Textelements repliziert und nicht der Inhalt. Auf diese Weise können Sie Textelemente schnell formatieren, obwohl der Inhalt in den einzelnen Rasterelementen unterschiedlich ist.

Sie können Platzhaltertext in einem Wiederholungsraster ersetzen, indem Sie eine Textdatei auf das Raster ziehen.

Wiederholungsraster erstellen

Im Grunde ist ein Wiederholungsraster eine spezielle Art von Gruppe. Sie erstellen ein Wiederholungsraster, indem Sie ein Objekt oder eine Objektgruppe auswählen und sie in ein Wiederholungsraster konvertieren.

Erstellen Sie das Grundelement, das wiederholt werden soll, z. B. eine Kombination aus Miniaturbildern und Text.

Wählen Sie die Elemente aus, die wiederholt werden sollen.

Konvertieren Sie die Auswahl in ein Wiederholungsraster, indem Sie im Eigenschafteninspektor auf die Schaltfläche „Wiederholungsraster“ klicken oder Cmd + R (macOS) bzw. Strg + R (Windows) drücken.

An der Elementbegrenzung werden große Griffe angezeigt.

Griffe zum Wiederholen eines Elements oder einer Elementgruppe

Um das Element in einem vertikalen Raster zu wiederholen, ziehen Sie den Griff am unteren Rand des Elements. Um das Element in einem horizontalen Raster zu wiederholen, ziehen Sie den Griff am rechten Rand des Elements.

Um Elemente in einem Raster für die Bearbeitung auszuwählen, doppelklicken Sie auf das Raster.

Um die Gruppierung der Rasterelemente aufzuheben und diese einzeln zu bearbeiten, wählen Sie das Raster aus und klicken im Eigenschafteninspektor auf „Gruppierung des Wiederholungsrasters aufheben“.

Um auf einzelne Komponenten des Wiederholungsrasters zuzugreifen, doppelklicken Sie in die Gruppe.

Nachdem Sie alle Änderungen vorgenommen haben, schließen Sie den Bearbeitungsmodus, indem Sie die Esc-Taste drücken.

Hinweis:

Sie können auch auf einzelne Komponenten zugreifen, indem Sie im Bedienfeld Ebene das betreffende Element ansteuern oder es direkt auswählen.

Abstand zwischen zwei Elementen in einem Wiederholungsraster anpassen

Um den Abstand zwischen zwei Elementen im Raster anzupassen, führen Sie den Mauszeiger über die Lücke zwischen den Elementen. Wenn der Cursor die Form eines Doppelpfeils annimmt, ziehen Sie, um den Abstand zu erhöhen bzw. zu verringern.

Vertikales Raster mit sich wiederholenden Elementen

Text in einem Wiederholungsraster

In einem Wiederholungsraster haben Sie verschiedene Möglichkeiten, um Text einzufügen oder zu bearbeiten. Sie können entweder jede einzelne Instanz eines Textobjekts in einem Wiederholungsraster aktualisieren oder Sie ziehen ein bereits ausgefülltes TXT-Dokument auf ein Wiederholungsraster, sodass der Inhalt der Textdatei automatisch auf die Instanzen des Textobjekts im Wiederholungsraster verteilt wird.

Einzelne Textelemente in einem Wiederholungsraster aktualisieren
Textdatei mit Zeilenumbruchzeichen auf ein Textobjekt im Wiederholungsraster ziehen

Einzelne Textelemente in einem Wiederholungsraster aktualisieren

Klicken Sie bei gedrückter Cmd- (macOS) bzw. Strg-Taste (Windows) auf ein Textobjekt, um es auszuwählen.

Um das Textelement zu bearbeiten, doppelklicken Sie darauf und ändern den Text.

Hinweis:

Änderungen am Inhalt werden nicht auf die anderen Textobjekte in einem Wiederholungs-Raster angewendet. Allerdings wird jedes Format, das auf ein Textobjekt angewendet wird, auch auf alle anderen Textobjekte übertragen.

Textdatei mit Zeilenumbruchzeichen auf ein Textobjekt im Wiederholungsraster ziehen

Sie können den Platzhaltertext in einem Wiederholungsraster ersetzen, indem Sie eine Textdatei auf das Raster ziehen.

Erstellen Sie eine Textdatei mit der Erweiterung „.txt“. Sie können die Textdatei mit TextEdit für Mac oder dem Windows-Editor oder jedem sonstigen Texteditor erstellen (und mit der Endung „.txt“ speichern). Stellen Sie sicher, dass die Kodierung auf UTF-8 festgelegt ist. Trennen Sie die einzelnen Datenzeilen durch Zeilenumbruchzeichen.

Ziehen Sie die Textdatei auf das Wiederholungsraster.

Die Textdatei wird auf ein Objekt in einem Wiederholungsraster gezogen - Muss noch aktualisiert werden

Das Wiederholungsraster wird mit dem Text aus der Textdatei aufgefüllt, und zwar in derselben Reihenfolge wie in der Textdatei. Wenn mehr Rasterbereiche als Textzeilen vorhanden sind, wird die Sequenz wiederholt.

Bilder in einem Wiederholungsraster

Mit Bildern können Sie sich wiederholende Muster von Objekten erstellen, wobei die Bildfläche eines Objekts in einem Muster wiederholt wird, das Sie selbst festlegen können.

Sie können das Muster, nach dem die Bildfläche gefüllt wird, festlegen, indem Sie ein Bild nach dem andern auf ein Objekt ziehen oder indem Sie mehrere Bilder auswählen und sie zusammen auf ein Objekt im Wiederholungsraster ziehen.

Die Bilddateien werden auf ein Objekt in einem Wiederholungsraster gezogen - Muss noch aktualisiert werden

Bilder in einem Wiederholungsraster ersetzen

Wenn Sie die Bilder im Raster ersetzen möchten, öffnen Sie den Finder oder Windows-Explorer und öffnen das Verzeichnis, in dem Sie die Bilder für Ihr Projekt gespeichert haben. Wählen Sie alle Bilder aus, die in dem Raster angezeigt werden sollen, und ziehen Sie sie auf das Zielobjekt innerhalb des Wiederholungsrasters.

Die älteren Bilder werden durch die neuen ersetzt, deren Größe automatisch angepasst wird.

Interaktionen aus einem Wiederholungsraster heraus erstellen

Im Prototypmodus haben Sie verschiedene Möglichkeiten, um in einem Wiederholungsraster Verdrahtungen mit anderen Zeichenflächen zu definieren:

Das gesamte Wiederholungsraster einer einzigen Interaktion zuordnen
Ein bestimmtes Element aus einem Wiederholungsraster einer Interaktion zuordnen
Innerhalb des Wiederholungsrasters eine Gruppe von Elementen erstellen und die gesamte Gruppe der Interaktion zuordnen

Das gesamte Wiederholungsraster einer einzigen Interaktion zuordnen

Erstellen Sie im Designmodus mithilfe des Werkzeugs „Zeichenfläche“ eine zweite Zeichenfläche.

Wechseln Sie zum Prototypmodus, indem Sie die Registerkarte „Prototyp“ öffnen oder Ctrl + Tab (macOS) bzw. Strg + Tab (Windows) drücken.

Wählen Sie auf der ersten Zeichenfläche das Wiederholungsraster aus. Rechts vom Objekt wird eine Verbindungslinie mit einem Pfeil in der Mitte angezeigt.

Ziehen Sie die Verbindungslinie zur nächsten Zeichenfläche. Wählen Sie im Popup-Menü die Optionen für den Übergang aus und drücken Sie die Esc-Taste oder klicken Sie auf eine Stelle außerhalb des Popup-Menüs, damit es wieder geschlossen wird.

Testen Sie die Interaktion, indem Sie oben rechts im Anwendungsrahmen auf die Wiedergabeschaltfläche klicken oder Cmd + Eingabe (macOS) bzw. Strg + Eingabe (Windows) drücken. Klicken Sie auf eine beliebige Stelle über dem Wiederholungsraster, um die Interaktion abzuspielen.

Ein bestimmtes Element aus einem Wiederholungsraster einer Interaktion zuordnen

Wählen Sie ein Objekt innerhalb des Wiederholungsrasters aus.

Ziehen Sie die Verbindungslinie auf der rechten Seite des Rechtecks auf die Zeichenfläche, die damit verdrahtet werden soll. Wählen Sie im Popup-Menü die Optionen für den Übergang aus und drücken Sie die Esc-Taste oder klicken Sie auf eine Stelle außerhalb des Popupmenüs, damit es wieder geschlossen wird.

Innerhalb des Wiederholungsrasters eine Gruppe von Elementen erstellen und die gesamte Gruppe der Interaktion zuordnen

Sie können auch innerhalb des Wiederholungsrasters eine Objektgruppe definieren und dann von dieser Gruppe ausgehend Interaktionen erstellen.

Wählen Sie im Wiederholungsraster ein Objekt aus und klicken Sie dann bei gedrückter Umschalttaste auf andere Objekte, um sie zu Ihrer Auswahl hinzuzufügen.

Nach Auswahl der Objekte klicken Sie mit der rechten Maustaste und wählen im Kontextmenü die Option Gruppe. Sie können diese Objekte auch mit dem Tastaturbefehl Cmd + G (macOS) bzw. Strg + G (Windows) gruppieren.

Wechseln Sie in den Prototypmodus. Ziehen Sie die Verbindungslinie von der Gruppe zu der Zeichenfläche, mit der Sie sie verdrahten wollen.

Inhalte mit Wiederholungsraster importieren

Es folgt ein 3-minütiges Beispielvideo zum Einstieg in Wiederholungsraster.