Schablonen gruppieren und organisieren

Durch das Gruppieren einzelner Schablonen können Sie Ihren Workflow beschleunigen und vereinfachen. Gruppierte Elemente – oder zusammengesetzte Schablonen – können als einzelne Einheit verschoben, angepasst, gestaltet und dupliziert werden.

Wenn Sie neue Schablonen hinzufügen und gruppieren, wird Ihre Seite zu einem komplexen Mosaik aus Objekten: Schablonen, zusammengesetzte Schablonen, Bilder und Icons. Um Ihr Design effektiv zu verfeinern und zu bearbeiten, müssen Sie einzelne Objekte und tief in größeren Gruppen verschachtelte Objekte identifizieren und auffinden.

Das können Sie schnell und einfach. Alle Objekte werden hervorgehoben, wenn Sie mit der Maus über sie fahren; sie werden auch hervorgehoben, wenn Sie über ihren Objektnamen im Gliederungs-Panel fahren. Dies erleichtert die Auswahl dünner oder kleiner Objekte und reduziert verfehlte Klicks.

Das Gliederungs-Panel hilft Ihnen, Ihre Seite zu verwalten – und Ihren Workflow zu optimieren – indem es alle Ihre Objekte in einer einzigen, durchsuchbaren Liste organisiert hält.

In diesem Artikel erfahren Sie, wie Sie Objekte auf der Seite gruppieren, sperren, anordnen und ausrichten können. Wir zeigen Ihnen auch, wie Sie das Gliederungs-Panel navigieren und verwenden, um Objekte umzubenennen, zu suchen, neu zu organisieren, die Sichtbarkeit umzuschalten und zu löschen.

Schablonen gruppieren und Gruppierung aufheben

Wenn Objekte gruppiert sind, können sie als einzelne Einheit verschoben, formatiert, gestaltet und dupliziert werden. Das Gruppieren funktioniert für alle Objekte: Schablonen, Vorlagen, Bilder und Icons.

Um Objekte zu gruppieren oder die Gruppierung aufzuheben, verwenden Sie die Gruppe-Schaltfläche in der Kontextuellen Symbolleiste.

Um Schablonen zu gruppieren:

  1. Schablonen auswählen:

    • Maus über mehrere Schablonen ziehen

      oder

    • Strg/Cmd + Klick verwenden, um Schablonen einzeln auszuwählen

  2. Schablonen gruppieren:

    • Zur Kontextuellen Symbolleiste navigieren und auf die Schaltfläche Gruppe klicken

      oder

    • Rechtsklicken auf eines der Objekte und Auswahl gruppieren wählen

Um die Gruppierung von Schablonen aufzuheben:

  • Wählen Sie die Gruppe von Objekten aus, deren Gruppierung Sie aufheben möchten

  • Zur Kontextuellen Symbolleiste navigieren und auf die Schaltfläche Gruppierung aufheben klicken

    oder

  • Rechtsklicken auf eines der Objekte und Auswahl gruppieren aufheben wählen

Sie können auch Gruppen innerhalb von Gruppen erstellen und verschachteln.

Um die Gruppenverschachtelung rückgängig zu machen, entpackt und vereinfacht die Tastenkombination Strg/Cmd + Shift + Alt/Option + G eine Gruppe zu einer einschichtigen Gruppe.

Gruppen von Schablonen bearbeiten

Sobald Objekte gruppiert sind, können Sie sie als einzelnes Element verschieben, formatieren und gestalten. Möglicherweise möchten Sie jedoch ein einzelnes Element separat von seiner Gruppe bearbeiten.

Um auf ein einzelnes Objekt innerhalb einer Gruppe zuzugreifen, doppelklicken Sie auf dieses Objekt. Jetzt können Sie dieses einzelne Element formatieren, gestalten oder löschen.

Größenänderungsbeschränkungen

Beschränkungen verankern Elemente innerhalb eines Designs, um das Anpassen und Ändern der Größe von Layouts schnell und einfach zu machen. Beschränkungen gelten nur für Gruppen und gelten nicht für eine Auswahl von Objekten.

Um Beschränkungen anzuwenden, müssen Sie zunächst die Funktion aktivieren. Dann können Sie automatische Beschränkungen wählen oder Anker manuell für jedes Objekt innerhalb der Gruppe festlegen.

So funktioniert es:

Beschränkungen legen Größenänderungsregeln für Objekte innerhalb einer Gruppe fest. Diese Regeln bestimmen, wie Objekte reagieren werden, wenn Sie die Gruppe an neue Kontexte oder Bildschirmgrößen anpassen.

Ohne aktivierte Beschränkungen ist das Standardverhalten einfach, Objekte beim Ändern der Größe der Gruppe zu „strecken".

Mit angewandten Beschränkungen können Sie die Größe der Gruppe ändern und dabei sicher sein, dass die Elemente auf logische und vorhersehbare Weise angepasst werden – und das bereits etablierte Layout nicht „beschädigen".

Standard-Streck-Größenänderung

In Moqups sind Beschränkungen standardmäßig deaktiviert. Das bedeutet, dass sich beim Ändern der Größe einer Gruppe die darin enthaltenen Objekte strecken:

  • Objekte mit einem entsperrten Seitenverhältnis (wie Formen und Platzhalter) werden in die Richtung gestreckt, in die Sie die Gruppe verkleinern.
  • Objekte mit einem gesperrten Seitenverhältnis (wie Icons und Avatare) behalten ihre Proportion bei, werden aber größer oder kleiner, wenn Sie die Größe der Gruppe ändern.

Größenänderungsbeschränkungen aktivieren

Beachten Sie, dass Sie bereits eine Gruppe von Objekten erstellt haben müssen, um Größenänderungsbeschränkungen anzuwenden.

So aktivieren Sie Beschränkungen:

  1. Klicken Sie auf die Gruppe, um den Abschnitt Gruppenoptionen des Format-Panels anzuzeigen.

  2. Aktivieren Sie das Kontrollkästchen Größenänderungsbeschränkungen aktivieren.

    oder

    • Klicken Sie in der Kontextuellen Symbolleiste auf die Schaltfläche Größenänderungsbeschränkungen aktivieren
  3. Dies aktiviert unsere Automatische Beschränkungsfunktion. Weitere Informationen zu Auto- vs. Manuellen Beschränkungen finden Sie unten.

  4. Klicken Sie dann auf ein beliebiges Objekt innerhalb der Gruppe, um den Abschnitt Beschränkungen des Format-Panels zu öffnen.

Automatische Beschränkungen

Wenn Sie Beschränkungen aktivieren, werden Anker automatisch auf jedes Objekt innerhalb der Gruppe angewendet. Diese automatischen Anker spiegeln sowohl das Layout der Objekte als auch ihre erwartetsten und intuitivsten Verhaltensweisen beim Ändern der Größe wider.

So sehen Sie die automatischen Anker:

  1. Klicken Sie auf ein beliebiges Objekt innerhalb der Gruppe, um die Beschränkungssteuerungen zu öffnen.
  2. Die Ankerschaltflächen zeigen die horizontalen und vertikalen Beschränkungen an, die auf das ausgewählte Objekt angewendet werden können.
  3. Anker, die bereits automatisch angewendet wurden, sind blau hervorgehoben.
  4. Auf der Seite zeigen gepunktete blaue Linien an, wo das ausgewählte Objekt verankert ist.

Beim Ändern der Größe der Gruppe sollten automatische Beschränkungen für die meisten Anwendungsfälle ausreichen, um ein logisches Layout aufrechtzuerhalten.

Manuelle Beschränkungen

Sie können automatische Beschränkungen überschreiben und Anker manuell für jedes Objekt innerhalb der Gruppe auswählen. Anker können sowohl horizontal als auch vertikal angewendet werden.

Wenn Sie auf ein beliebiges Objekt innerhalb der Gruppe klicken und über die Ankerschaltflächen fahren, erklärt ein Tooltip, wo sie dieses Objekt bei Auswahl verankern. Sie sehen auch die Proportionalen Ankerschaltflächen, die wir im nächsten Abschnitt besprechen.

Wenn Sie ein Objekt sowohl links als auch rechts (oder oben und unten) verankern, kann das Objekt sich entsprechend strecken, wenn Sie die Größe ändern.

Um manuelle Beschränkungen auf ein Objekt anzuwenden:

  1. Klicken Sie auf ein beliebiges Objekt innerhalb der Gruppe, um die Beschränkungssteuerungen zu öffnen.
  2. Die Ankerschaltflächen zeigen die horizontalen und vertikalen Beschränkungen an, die auf das ausgewählte Objekt angewendet werden können.
  3. Klicken Sie auf eine Ankerschaltfläche, um sie auf das Objekt anzuwenden.
  4. Die von Ihnen ausgewählten Anker werden auf der Seite als gepunktete blaue Linien sichtbar sein.
  5. Wenn Sie zu automatischen Ankern für dieses Objekt zurückkehren möchten, aktivieren Sie einfach erneut das Kontrollkästchen Automatisch anpassen.

Proportionale Anker

Ohne proportionale Beschränkungen bleiben Objekte an ihrer festen Position von ihren Ankern (oben, unten, Seiten oder Mitte), wenn Sie die Größe der Gruppe ändern.

Das Auswählen proportionaler Beschränkungen behält die Anker eines Objekts bei – ob automatisch oder manuell gesetzt – passt aber den Abstand des Objekts von jedem Ankerpunkt proportional zur Größenänderung an.

Um proportionale Beschränkungen für ein Objekt festzulegen, klicken Sie auf das Prozentsymbol am Ende der Ankerschaltflächen.

Moqups Format-Panel mit den Schaltflächen für proportionale Anker

Das folgende Video demonstriert das Standard-Streckverhalten im Vergleich zu automatischen Beschränkungen und proportionalen Beschränkungen:

Beschränkungen für verschachtelte Gruppen

Wenn Sie Größenänderungsbeschränkungen für eine übergeordnete Gruppe aktivieren, werden verschachtelte Gruppen wie einzelne Objekte behandelt und können entweder automatische oder manuelle Anker erhalten.

Wenn Sie Anker für Objekte innerhalb dieser „untergeordneten" Gruppen festlegen möchten, müssen Sie Beschränkungen für diese separat aktivieren. Danach können Sie Anker für Objekte innerhalb der verschachtelten Gruppe festlegen, genau wie für die größere übergeordnete Gruppe.

So aktivieren Sie Beschränkungen für eine verschachtelte Gruppe:

  1. Wählen Sie die verschachtelte Gruppe aus.
  2. Wählen Sie im Abschnitt Gruppenoptionen die Option Größenänderungsbeschränkungen aktivieren.
  3. Klicken Sie auf ein beliebiges Objekt innerhalb der verschachtelten Gruppe, um die Beschränkungssteuerungen zu öffnen.
Größenänderungsbeschränkungen für verschachtelte Gruppen

Größenänderungsbeschränkungen deaktivieren

So deaktivieren Sie Beschränkungen:

  1. Klicken Sie auf die Gruppe, um den Abschnitt Gruppenoptionen des Format-Panels anzuzeigen.

  2. Deaktivieren Sie das Kontrollkästchen Größenänderungsbeschränkungen aktivieren

    oder

    • Klicken Sie in der Kontextuellen Symbolleiste auf die Schaltfläche Größenänderungsbeschränkungen deaktivieren
Größenänderungsbeschränkungen deaktivieren

Schablonen sperren und entsperren

Sobald ein Objekt gesperrt ist, ist es an Ort und Stelle fixiert – und kann weder verschoben noch gestaltet werden. Dadurch können Sie weiterhin die restlichen Objekte auf der Seite bearbeiten, ohne die abgeschlossenen Teile Ihres Designs zu stören.

Um mit einem gesperrten Objekt zu arbeiten, müssen Sie zuerst absichtlich darauf klicken. Um die versehentliche Auswahl gesperrter Objekte zu verhindern, reagieren sie nicht auf die Auswahl durch Mausziehen.

Um eine Schablone zu sperren:

  • Wählen Sie die Schablone aus und verwenden Sie dann das Rechtsklick-Kontextmenü, um die Option Auswahl sperren zu wählen, oder verwenden Sie das Tastaturkürzel: Strg/Cmd + L (dieser Tastendruck funktioniert sowohl für Sperren als auch für Entsperren).

    oder

  • Klicken Sie oben im Format-Panel auf die Sperren-Schaltfläche rechts neben dem Objektnamen; sobald ein Objekt gesperrt ist, sind alle Formatierungsoptionen für dieses Objekt nicht verfügbar, bis es entsperrt wird.

    oder

  • Klicken Sie im Gliederungs-Panel auf die Sperren-Schaltfläche rechts neben dem Schablonennamen; die Schaltfläche wird dunkler, wenn gesperrt.

Wenn gesperrt, zeigt die Schablone beim Hovern einen roten Rahmen an, und sobald die Schablone ausgewählt ist, erscheint eine Sperren-Schaltfläche in der oberen linken Ecke des roten Rahmens. Diese Schaltfläche kann verwendet werden, um die Schablone zu entsperren.

Um eine Schablone zu entsperren:

  • Wählen Sie die Schablone aus und klicken Sie auf die rote Sperren-Schaltfläche in der oberen linken Ecke des roten Rahmens.

    oder

  • Wählen Sie die Schablone aus und verwenden Sie dann das Rechtsklick-Kontextmenü, um die Option Auswahl entsperren zu wählen, oder verwenden Sie das Tastaturkürzel: Strg/Cmd + L (dieser Tastendruck funktioniert sowohl für Sperren als auch für Entsperren).

    oder

  • Klicken Sie im Gliederungs-Panel auf die Sperren-Schaltfläche rechts neben dem Schablonennamen; die Schaltfläche wird grau, wenn entsperrt.

Um eine Auswahl von Schablonen zu sperren oder zu entsperren:

  • Wählen Sie die Schablonen aus und verwenden Sie dann das Rechtsklick-Kontextmenü, um die Option Auswahl entsperren zu wählen, oder verwenden Sie das Tastaturkürzel: Strg/Cmd + L (dieser Tastendruck funktioniert sowohl für Sperren als auch für Entsperren)

Um alle Objekte zu entsperren, wenn es eine Mischung aus gesperrten und entsperrten Objekten auf der Seite gibt:

  1. Verwenden Sie Strg/Cmd + A, um alle entsperrten Objekte auf der Seite auszuwählen
  2. Verwenden Sie Strg/Cmd + L, um alle Objekte zu sperren
  3. Verwenden Sie Strg/Cmd + L noch einmal, um alle Objekte zu entsperren

Schablonen anordnen und ausrichten

Das Anordnen-Dropdown in der oberen Symbolleiste ermöglicht Ihnen, Objekte zu überlagern, auszurichten und zu verteilen, um ein sauberes und ausgewogenes Design zu erstellen.

Objekte anordnen

Die Anordnen-Funktion ermöglicht Ihnen, Objekte zu stapeln und dann durch die Ebenen hin und her zu verschieben.

Um ein Objekt anzuordnen:

  1. Wählen Sie das Objekt aus, das Sie anordnen möchten
  2. Zugriff auf die Anordnen-Funktion:
  • Navigieren Sie zur oberen Symbolleiste und klicken Sie auf die Anordnen-Schaltfläche, um das Dropdown zu öffnen

    oder

  • Rechtsklicken Sie auf das Objekt, um das Kontextmenü zu öffnen, und fahren Sie über die Option Anordnen, um das Dropdown zu öffnen

  • Wählen Sie eine Ebenen-Aktion: In den Vordergrund bringen, Vorwärts bringen, Rückwärts senden, In den Hintergrund senden

Objekte ausrichten

Die Ausrichtungs-Funktion ordnet Objekte entlang einer gemeinsamen vertikalen oder horizontalen Achse an und verteilt sie gleichmäßig in ihrem gemeinsamen Raum.

Die Kontextuelle Symbolleiste ist der schnellste Weg, mehrere Objekte auszurichten. Wenn Sie mehr als ein Objekt auswählen, erscheint die Symbolleiste automatisch direkt über dieser Auswahl. Neben der Ausrichtung ermöglicht die Symbolleiste auch das schnelle Gruppieren und Aufheben der Gruppierung der ausgewählten Objekte.

Sie können auch ein Referenzobjekt festlegen – was bedeutet, dass jede ausgewählte Gruppe von Objekten relativ zu diesem Objekt ausgerichtet wird.

Um ein Referenzobjekt festzulegen, wählen Sie mehrere Objekte aus und klicken Sie dann auf eines davon; sofort erscheint ein dicker blauer Rahmen um dieses Objekt. Alle Objekte werden sich jetzt relativ zu dem als Referenz bestimmten Objekt ausrichten. Um die Auswahl des Referenzobjekts aufzuheben, klicken Sie einfach außerhalb Ihrer Auswahl.

Es gibt drei weitere Möglichkeiten, auf die Ausrichtungs-Optionen zuzugreifen:

  • Navigieren Sie zur oberen Symbolleiste und klicken Sie auf die Schaltfläche Anordnen, um das Dropdown zu öffnen

oder

  • Rechtsklicken Sie auf ein Objekt, um das Kontextmenü zu öffnen, und fahren Sie über die Option Ausrichten, um das Dropdown zu öffnen

oder

  • Navigieren Sie zur Rechten Seitenleiste und öffnen Sie das Format-Panel. Oben finden Sie die Schnellausrichtungs- und Verteilungsschaltflächen

Wenn ein einzelnes Objekt (oder „gruppierte" Objekte) ausgewählt ist, richten die Ausrichtungssteuerungen das Objekt relativ zu den Grenzen der Seite aus. Beachten Sie, dass diese Funktion bei Verwendung der Kontextuellen Symbolleiste nicht verfügbar ist.

Das Gliederungs-Panel verwenden

Das Gliederungs-Panel hält alle Ihre Objekte in einer einzigen, durchsuchbaren Liste organisiert.

Durchsuchen Sie Objekte und ihre Hierarchien im Gliederungsbaum oder verwenden Sie das Suche-Eingabefeld, um schnell ein bestimmtes Objekt zu finden. Die Gliederungs-Icons vor Objektnamen erleichtern die Unterscheidung zwischen Schablonentypen.

Verwenden Sie den Gliederungsbaum, um Objekte umzubenennen, zu suchen, neu zu organisieren, zu sperren, die Sichtbarkeit umzuschalten und zu löschen.

Um das Gliederungs-Panel zu öffnen:

  1. Navigieren Sie zur Linken Seitenleiste
  2. Klicken Sie auf den Gliederungs-Tab. Der Tab wird blau und öffnet das Gliederungs-Panel

Um ein Objekt im Gliederungs-Panel auszuwählen:

  • Klicken Sie auf seinen Namen. Wenn Sie eine Gruppe auswählen, klicken Sie auf das Linke Pfeil-Symbol, um schnell den Inhalt und die Hierarchie der Gruppe anzuzeigen.

Sie können Objekte direkt aus dem Gliederungs-Panel sperren und entsperren, indem Sie auf die Sperren-Schaltfläche rechts neben dem Objektnamen klicken. Erfahren Sie mehr über das Sperren von Objekten hier.

Um ein Objekt oder eine Gruppe von Objekten im Gliederungs-Panel umzubenennen:

  1. Das Gliederungs-Panel listet alle Objekte auf der Seite auf: Schablonen, Vorlagen, Bilder und Icons
  2. Fahren Sie über ein Element im Gliederungsbaum und auf der Seite wird gleichzeitig ein blauer Rahmen das entsprechende Objekt hervorheben
  3. Nachdem Sie das Objekt gefunden haben, doppelklicken Sie auf seinen Namen, um ihn zu ändern

Sie können auch die Namenssynchronisierung im Gliederungs-Panel nutzen, wenn Sie mit Diagramm- oder Textschablonen arbeiten:

Wenn Sie Text in eine Flussdiagramm-Schablone oder in die Absatz-, Überschrift- und Beschriftungs-Schablonen eingeben, übernehmen diese Schablonen diesen Text automatisch als ihren Namen. Dies erleichtert die Identifikation bestimmter Objekte im Gliederungs-Panel, insbesondere in komplexen Ablauf- und Prozessdiagrammen oder in detaillierten Designs.

Wenn Sie ein Objekt nicht mit seinem Text beschriften möchten, überschreiben Sie einfach den automatisch generierten Namen entweder im Gliederungs-Panel oder im Format-Panel, und er wird beibehalten.

Um nach einem Objekt im Gliederungs-Panel zu suchen:

  1. Wählen Sie das Sucheingabefeld oben im Gliederungs-Panel aus
  2. Geben Sie den Namen des Elements ein, das Sie suchen möchten

Um ein Objekt oder eine Gruppe von Objekten im Gliederungs-Panel neu zu ordnen:

  1. Wählen Sie das Objekt aus, das Sie verschieben möchten
  2. Ziehen und ablegen Sie dieses Objekt entweder nach oben oder unten im Gliederungsbaum
  3. Beachten Sie, dass das Verschieben eines Objekts nach oben oder unten innerhalb einer Gruppenhierarchie oder im Gliederungsbaum auch seine Ebenen-Anordnung auf der Seite beeinflusst

Um ein Objekt auszublenden, schalten Sie einfach die Sichtbarkeit des Objekts um, indem Sie auf das Sichtbarkeits-Auge-Symbol rechts neben dem Namen des Objekts im Gliederungsbaum klicken.

Das Ändern der Sichtbarkeit eines Objekts ist wesentlich, wenn Sie Interaktionen hinzufügen. Oft möchten Sie, dass die Interaktion beginnt, wenn das Objekt unsichtbar ist. Um mehr über Interaktionen und Prototyping zu erfahren, gehen Sie hier.

Um ein Objekt oder eine Gruppe von Objekten aus dem Gliederungs-Panel zu löschen:

  1. Wählen Sie das Objekt aus, das Sie löschen möchten
  2. Verwenden Sie die Entfernen-Taste, um dieses Objekt zu löschen