Vorlagen und Master

Mit Vorlagen und Mastern können Sie globale Layouts und Stile für viele Bildschirme in Ihren Prototypen definieren.

Vorlagen

Vorlagen sind nützlich, um Bildschirmraster zu erstellen und Standarddesigns für Elemente festzulegen.

Ein Bildschirmlayout designen

Mit einem Bildschirmraster können Sie die Formatierung und die Abstände in Ihrem Prototyp konsistent halten. Das Hinzufügen eines Rasters ist einfach:

1. Gehen Sie zur Palette Vorlagen und wählen Sie „Vorlage 1“, wodurch sich eine leere Leinwand öffnet. Wenn Sie die Vorlagenpalette nicht sehen, vergewissern Sie sich, dass sie im Menü Fenster sichtbar ist.
2. Bewegen Sie den Mauszeiger über die Lineale auf dem Canvas und klicken Sie, wenn Sie eine Layout-Hilfe platzieren möchten. Sie können auf eine bereits platzierte Hilfslinie klicken und ziehen, um ihre Position zu verschieben.
3. Gehen Sie zu einem Bildschirm in Ihrem Prototyp zurück und achten Sie darauf, wie die von Ihnen angelegten Hilfslinien reflektiert werden. Sie werden diese Hilfslinien auf jedem Bildschirm sehen, den Sie mit dieser Vorlage erstellen.

Als Nächstes beginnen Sie mit dem Aufbau des Inhalts des Layouts. Verwenden Sie Elemente und Widgets, um gängige Designs zu erstellen, die Sie voraussichtlich häufig verwenden werden, wie z.B. Kopfzeilen und Navigations-Sidebars.

Sie können sogar Ereignisse wie Links und Mouse-Over-Effekte zu Elementen innerhalb der Vorlage hinzufügen, die dann auf allen Bildschirmen funktionieren, die diese Vorlage verwenden.

Wenn Sie zu einem Bildschirm in Ihrem Prototyp zurückkehren, sehen Sie den Inhalt, den Sie soeben auf dem Canvas hinzugefügt haben. Der Inhalt der Vorlage wird eingefärbt, damit Sie wissen, dass er aus einer Vorlage stammt. Sie können die Färbung im Menü Ansicht deaktivieren.

Erstellen und Zuweisen einer neuen Vorlage

Sie können eine neue leere Vorlage zu Ihrem Prototyp hinzufügen, indem Sie auf die Schaltfläche ‚+‘ in der Palette Vorlagen klicken.

Nachdem Sie eine neue Vorlage erstellt haben, können Sie sie einem Bildschirm in Ihrem Prototyp zuweisen:

1. Wählen Sie einen Bildschirm, auf dem Sie die Vorlage verwenden möchten.
2. Klicken Sie auf den Namen des Bildschirms in der Ebenenpalette oder doppelklicken Sie auf den Canvas, um den Bildschirm auszuwählen.
3. Sehen Sie sich die Palette Eigenschaften an und ändern Sie die Vorlage in der Dropdown-Liste ‚Vorlage‘.

Definieren Sie Standard-Elementstile

Sie können auch grundlegende Widget-Eigenschaften wie Größe, Farbgebung und Schriftarten in einer Vorlage festlegen:

1. Klicken Sie mit der rechten Maustaste auf eine Vorlage in der Vorlagenpalette und wählen Sie ‚Vorlagenstil bearbeiten‘.
2. Wählen Sie Elemente aus der Popup-Liste aus und passen Sie deren Aussehen an.

Nun werden alle neuen Elemente, die Sie auf der Vorlage platzieren, und alle Bildschirme, die diese Vorlage verwenden, die von Ihnen festgelegten Stile anzeigen.

Masters

Master sind Elemente oder Gruppen von Elementen, die Sie in Ihrem Prototyp wiederverwenden können. Sie sind nützlich für die Erstellung von Basisdesigns, die Sie häufig verwenden möchten, wie CTA-Schaltflächen, Texte und Dropdowns.

Alle Änderungen, die Sie an einer Vorlage vornehmen, werden in jeder Instanz dieser Vorlage, die Sie in Ihrem Prototyp verwenden, übernommen. Im Gegensatz zu Vorlagen können Sie viele verschiedene Vorlagen auf einem Bildschirm verwenden.

Einen Master erstellen

Das Hinzufügen einer neuen Vorlage zu Ihrem Prototyp ist ganz einfach:

1. Gehen Sie zur Palette Master und klicken Sie auf die Schaltfläche ‚+‘, um einen neuen Master zu erstellen. Wenn Sie die Masters-Palette nicht sehen, vergewissern Sie sich, dass sie im Menü Fenster sichtbar ist.
2. Beachten Sie, dass Sie keine leere weiße Leinwand sehen, auf der Sie designen können, wie es bei einer Vorlage der Fall ist. Da Vorlagen unabhängig von einem Bildschirm sind, haben sie keinen regulären Hintergrund wie Bildschirme und Vorlagen. Stattdessen können Sie Elemente einfach per Drag & Drop auf die transparente Leinwand ziehen. Wie bei Vorlagen können Sie den Elementen in einer Vorlage Ereignisse hinzufügen.

Einen Master bearbeiten

Um einen Master zu bearbeiten oder zu ändern, klicken Sie ihn in der Masters-Palette an, oder doppelklicken Sie auf die Master-Instanz auf einem Bildschirm, um sie zur Bearbeitung zu öffnen.

Denken Sie daran, dass alle Änderungen, die Sie an einem Master vornehmen, auf alle seine Instanzen im gesamten Prototyp angewendet werden.

Wenn Sie einen Master nur für einen bestimmten Bildschirm bearbeiten möchten, klicken Sie mit der rechten Maustaste auf die Master-Instanz auf dem Canvas und wählen Sie ‚Vom Master lösen‘. Die Elemente des Masters auf diesem Bildschirm werden in einem Dynamic Panel-Container gruppiert, den Sie nach Belieben öffnen und bearbeiten können.