Designs, Lineale, Hilfslinien und Gitter

In der Einführung in den Arbeitsbereich haben wir einen Überblick über die Einstellungsschaltfläche und die Optionen gegeben.

Dieser Artikel beschreibt, wie Sie das visuelle Design des Editors ändern können. Außerdem zeigen wir Ihnen, wie Sie unsere Lineale, Hilfslinien, Gitter, Ausrichten- und Messfunktionen nutzen können, um Ihren Workflow beim Positionieren von Objekten auf der Seite zu beschleunigen.

Wir erklären, wie Sie all diese Optionen – sowie unsere Hotspots, Zoom-Steuerung und Live-Zusammenarbeits-Werkzeuge – anzeigen oder ausblenden können.

Der nächste Artikel, Erweiterte Einstellungen, behandelt detailliertere Steueroptionen, die beeinflussen, was der Editor anzeigt und wie Ihr Cursor mit Objekten auf der Seite interagiert.

Designs

Sie können das Erscheinungsbild des Editors ändern, indem Sie sein Design wechseln. Der Standard ist der Hell-Modus, aber Sie können einfach zu Dunkel, Klassisch, Neutral oder Mitternacht wechseln. Sie können auch die Option "System anpassen" wählen, wenn Moqups die Einstellungen Ihres Browsers spiegeln soll.

So ändern Sie das Design des Editors:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Fahren Sie mit der Maus über die Option Design und wählen Sie aus den Optionen Hell, Dunkel, Klassisch, Neutral, Mitternacht oder System anpassen.

Seiten-Lineale

Seiten-Lineale erscheinen entlang der linken und oberen Ränder Ihrer Arbeitsfläche und sind in Pixeln kalibriert.

Lineale sind standardmäßig aktiviert und müssen angezeigt werden, wenn Sie Benutzerdefinierte Hilfslinien zu Ihrer Seite hinzufügen möchten.

So zeigen oder verbergen Sie Lineale:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Aktivieren oder deaktivieren Sie die Option Lineale anzeigen aus dem Dropdown-Menü.

Benutzerdefinierte Hilfslinien

Das Hinzufügen Benutzerdefinierter Hilfslinien zur Seite kann Ihrem Team bei der relativen Positionierung von Objekten oder Objektgruppen helfen.

Hilfslinien sind nur im Bearbeitungsmodus als dünne blaue Linien sichtbar, wo sie als temporäre Layout- und Ausrichtungswerkzeuge dienen. Sie werden nicht angezeigt, wenn Sie Ihre Seite in der Vorschau anzeigen oder exportieren.

Wenn Sie Hilfslinien anzeigen, ausblenden oder löschen, geschieht dies für alle Mitarbeiter mit Bearbeitungsrechten.

Bevor Sie benutzerdefinierte Hilfslinien hinzufügen, müssen Sie sicherstellen, dass die Option Lineale anzeigen im Menü Einstellungen ausgewählt ist und dass die Lineale entlang der Ränder der Arbeitsfläche sichtbar sind.

Hilfslinien hinzufügen

So fügen Sie eine horizontale oder vertikale Hilfslinie hinzu:

Klicken Sie auf einen beliebigen Punkt entlang des Lineals

oder

Klicken Sie auf das Lineal und ziehen Sie in Richtung der Seite

Hilfslinien anzeigen oder ausblenden

Im Einstellungs-Dropdown ist die Option Benutzerdefinierte Hilfslinien anzeigen standardmäßig ausgewählt. Wenn sie deaktiviert ist, wird sie automatisch wieder aktiviert, wenn Sie irgendwo entlang der Lineale klicken.

So zeigen oder verbergen Sie Hilfslinien:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Aktivieren oder deaktivieren Sie die Option Benutzerdefinierte Hilfslinien anzeigen aus dem Dropdown-Menü.
3. Ihre Wahl gilt für das gesamte Projekt.

Einzelne Hilfslinien anpassen oder entfernen

Um einzelne Hilfslinien anzupassen, fahren Sie mit der Maus über die blaue Linie, bis das Anpassungswerkzeug erscheint, und klicken und ziehen Sie die Hilfslinie, um sie neu zu positionieren.

Um einzelne Hilfslinien von einer Seite zu entfernen, fahren Sie mit der Maus über die blaue Linie, bis das Anpassungswerkzeug erscheint, und klicken und ziehen Sie die Hilfslinie von der Arbeitsfläche über das Lineal hinaus.

Alle Hilfslinien löschen

So entfernen Sie alle Hilfslinien dauerhaft von einer ausgewählten Seite:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Wählen Sie die Option Hilfslinien löschen aus dem Dropdown-Menü.
3. Klicken Sie auf OK, um zu bestätigen.

Seiten-Gitter

Gitter können Ihren Workflow beschleunigen, indem sie klare Strukturen und visuelle Hierarchien für die Designs Ihres Teams schaffen. Dies beseitigt das Raten – und hält Ihr Team konsistent –, wenn es Elemente auf verschiedenen Seiten, Plattformen und Geräte-Mockups skaliert, positioniert und beabstandet.

Moqups hat zwei Gitter-Konfigurationen: das Papiergitter und das Layout-Gitter, die separat oder kombiniert verwendet werden können.

Gitter sind nur im Bearbeitungsmodus sichtbar, wo sie als temporäre Layout- und Ausrichtungswerkzeuge dienen. Sie werden nicht angezeigt, wenn Sie Ihre Seite in der Vorschau anzeigen oder exportieren.

Gitter anzeigen und ausblenden

Gitter sind standardmäßig deaktiviert. Bevor Sie ihre Einstellungen anpassen, müssen Sie sie sichtbar machen.

So zeigen oder verbergen Sie Gitter:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Aktivieren oder deaktivieren Sie die Optionen Papiergitter anzeigen und/oder Layout-Gitter anzeigen.
3. Ihre Wahl gilt für das gesamte Projekt.

Papiergitter

Das Papiergitter sieht aus wie traditionelles Millimeterpapier und besteht aus anpassbaren, unterteilten Quadraten oder Rechtecken.

So passen Sie die Papiergitter-Einstellungen an:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Stellen Sie sicher, dass Papiergitter anzeigen bereits ausgewählt ist.
3. Wählen Sie die Option Papiergitter-Einstellungen.
4. Passen Sie im Papiergitter-Einstellungen-Pop-up die Breite und Höhe der Gitterkomponentenblöcke an.
5. Aktivieren Sie das Kontrollkästchen Papiergitter über Objekte zeichnen, wenn das Gitter Ihr Design überlagern soll.
6. Klicken Sie auf Anwenden.

Layout-Gitter

Das Layout-Gitter folgt den Protokollen, die ursprünglich im Printbereich etabliert wurden und Ränder, Spalten und Zwischenräume für Ihre Seiten festlegen. Zusammen können sie das zugrundeliegende Gerüst für die Struktur Ihrer Seite bilden und den Betrag an "weißem" oder "negativem" Raum zwischen Ihren Inhaltsbausteinen bestimmen.

Die Layout-Gitter-Einstellungen ermöglichen es Ihnen, Werte einzugeben und diese Elemente wie folgt anzupassen:

• Gitter-Voreinstellung: Wählen Sie zwischen Werten als Feste Pixelgrößen oder als Responsive Prozentsätze der Seite.
• Spalten: Legen Sie die Gesamtanzahl der Spalten fest.
• Spaltenbreite: Legen Sie die Breite aller Spalten fest.
• Zwischenraum: Legen Sie den Abstand zwischen den Spalten fest.
• Linker/Rechter Rand: Legen Sie den Abstand zwischen den äußersten Spalten und dem Seitenrand fest.

So passen Sie die Layout-Gitter-Einstellungen an:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Stellen Sie sicher, dass Layout-Gitter anzeigen bereits ausgewählt ist.
3. Wählen Sie die Option Layout-Gitter-Einstellungen, um das Layout-Gitter-Einstellungen-Pop-up zu öffnen.
4. Legen Sie die Gitter-Voreinstellung fest und geben Sie Werte ein, um Ihr Gitter anzupassen.
5. Aktivieren Sie das Kontrollkästchen Layout-Gitter über Objekte zeichnen, wenn das Gitter Ihr Design überlagern soll.

Ausrichten und Messen

Der Arbeitsbereich bietet eine Reihe von Ausrichten- und Messwerkzeugen, um Ihren Workflow schneller und präziser zu gestalten:

Ausrichten

Alle drei Ausrichten-Optionen (unten beschrieben) sind standardmäßig aktiviert, können jedoch einzeln im Einstellungs-Dropdown deaktiviert werden. Objekte rasten an ihrem Ziel ein, wenn sie innerhalb von 3 Pixeln sind.

An Gittern und Hilfslinien ausrichten:

Objekte rasten automatisch an Ihren benutzerdefinierten Hilfslinien oder an den Linien Ihrer Gitter ein, wie Sie diese festgelegt haben:

An Seite ausrichten:

Objekte rasten automatisch an den vertikalen und horizontalen Seitenrändern ein. Sie rasten auch an der Mitte der Seite sowohl von ihren Rändern als auch von ihrer Mitte aus ein:

An anderen Objekten ausrichten:

Objekte rasten automatisch ein, um sich sowohl an der Mitte als auch an den Rändern anderer Objekte auf der Seite auszurichten:

Abstands-Ausrichtung

Die Abstands-Ausrichtung ermöglicht es Ihnen, mehrere Objekte schnell gleichmäßig abzuständen. Wenn Sie drei oder mehr Objekte auf der Seite haben und dann zwei davon ausrichten, aktiviert sich die Abstands-Ausrichtung, um Ihnen bei der Ausrichtung der restlichen Objekte zu helfen.

So aktivieren oder deaktivieren Sie die Abstands-Ausrichtung:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Wählen Sie die Option Erweiterte Einstellungen, um das Erweiterte Einstellungen-Pop-up zu öffnen.
3. Klicken Sie auf das Kontrollkästchen Abstands-Ausrichtung aktivieren.

Messen

Wenn Sie Objekte auf der Seite verschieben, können unsere Messwerkzeuge Ihnen helfen, diese Seitenelemente präzise zu positionieren. Hier erfahren Sie, wie Sie sie finden, und eine kurze Beschreibung ihrer Funktionsweise:

Um eines davon auszuwählen, klicken Sie auf die Option Erweiterte Einstellungen im Einstellungs-Dropdown, um das Erweiterte Einstellungen-Pop-up zu öffnen. Nachdem Sie die entsprechenden Kontrollkästchen aktiviert haben, klicken Sie auf Fertig.

Koordinaten-Tooltip anzeigen:

Ein dezenter Tooltip zeigt die Koordinaten eines ausgewählten Objekts an, während Sie es auf der Seite und der Arbeitsfläche verschieben.

Anmerkungen auf Ausrichtungshilfslinien anzeigen:

Wenn Sie ein Objekt auf der Seite verschieben, zeigt diese Option den Abstand des Objekts in Pixeln zu anderen nahe gelegenen Elementen an.

Hilfslinien beim Halten der Alt-Taste anzeigen:

Halten Sie Alt/Option gedrückt, um pinke Linien-Hilfslinien anzuzeigen, die den Abstand eines ausgewählten Objekts zu allen vier Seitenrändern anzeigen.

Und wenn Sie manuell Abstände messen müssen, vergessen Sie nicht unsere praktische Abstands-Spec-Schablone. Holen Sie sie sich bei Bedarf aus der Kategorie Spec-Werkzeuge des Schablonen-Panels, oder lassen Sie eine außerhalb des Seitenrandes in der Arbeitsfläche für schnellen und praktischen Zugriff:

Hotspots anzeigen und ausblenden

Das Workspace-Dropdown ermöglicht es Ihnen, alle Hotspots anzuzeigen oder auszublenden, die Sie einem Projekt hinzugefügt haben, während Sie Ihr Prototyp erstellen. Sie können dies auch direkt über das Interaktions-Panel tun.

Größe

So zeigen oder verbergen Sie Hotspots:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Aktivieren oder deaktivieren Sie die Option Hotspots anzeigen.

Interaktions-Indikatoren anzeigen und ausblenden

Interaktions-Indikatoren anzeigen fügt Objekten mit Interaktionen – auf der Seite und im Gliederungs-Panel – ein Blitz-Abzeichen hinzu, während Sie sich im Bearbeitungsmodus befinden. Sie können diese Option auch direkt über das Interaktions-Panel aktivieren oder deaktivieren.

So zeigen oder verbergen Sie Interaktions-Indikatoren:

1. Klicken Sie auf die Schaltfläche Einstellungen am unteren Ende der Linken Seitenleiste.
2. Aktivieren oder deaktivieren Sie die Option Interaktions-Indikatoren anzeigen.

Live-Zusammenarbeits-Werkzeuge anzeigen und ausblenden

Moqups verfügt über Live-Zusammenarbeits-Werkzeuge, die Ihren verteilten Teams helfen, in Echtzeit zusammenzuarbeiten.

• Live-Präsenz zeigt Ihnen, wer aktiv an einem Projekt mitarbeitet.
• Live-Chat hilft Ihrem Team, Ideen zu teilen und Fragen zu klären.
• Live-Auswahl ermöglicht es Ihnen, direkt zu der Stelle zu springen, an der Ihre Kollegen arbeiten.
• Live-Cursors zeigt den Cursor eines Kollegen an, während er bearbeitet.

So zeigen oder verbergen Sie Mitarbeiter-Cursors, Auswahlen oder Präsenz und Chat:

1. Klicken Sie auf die Workspace-Schaltfläche am unteren Ende der Linken Seitenleiste.
2. Aktivieren oder deaktivieren Sie die Live-Mitarbeiter-Optionen.

Fragen und Antworten

Kann ich benutzerdefinierte Hilfslinien wie Objekte sperren?

Nein, Hilfslinien können nicht gesperrt werden.

Verbessert das Ausblenden von Gittern die Leistung?

Chrome-Nutzer mit Seiten über 10.000 Pixeln können bei angezeigtem Layout-Gitter Verzögerungen erleben. Deaktivieren Sie in diesem Fall einfach die Option Layout-Gitter anzeigen.