Seitenlayouts

Überblick

Seitenlayouts bieten eine solide Grundlage für die effiziente Erstellung von Anwendungen. Sie gewährleisten Konsistenz und Reaktionsfähigkeit über verschiedene Anwendungstypen hinweg und ermöglichen eine nahtlose Gestaltung der Benutzeroberfläche. Designer und Entwickler können aus unseren verfügbaren Seitenlayouts und anderen Inhaltslayoutkomponenten auswählen und diese an die spezifischen Anforderungen der jeweiligen Anwendung anpassen.

Genau wie Architekturzeichnungen, die die Form, Größe und Anordnung eines Raums veranschaulichen, definieren Seitenlayouts die Struktur und Organisation einer Benutzeroberfläche und sorgen so für Klarheit und Benutzerfreundlichkeit.

Aufbau

1. Kopfzeile: Die Kopfzeile ermöglicht eine konsistente Navigation in allen Anwendungsoberflächen. Sie definiert den obersten Teil einer Seite. Kopfzeilen sind Containerkomponenten. Mit anderen Worten: Sie enthalten andere Komponenten für einen spezifischen Anwendungsfall.
2. Unterkopfzeile: Die Unterkopfzeile befindet sich unterhalb der Kopfzeile und enthält zusätzlichen Kontext oder Aktionen in Bezug auf den Hauptinhalt der Seite.
3. Seitenbereich: Der Seitenbereich ordnet die Inhaltsstruktur und bietet Kontext zur Orientierung der Benutzer. Befindet sich auf der linken Seite des Fensters und erstreckt sich vertikal von der Kopfzeile bis zum unteren Rand der Seite.
4. Tool-Seitenbereich: Wird für zusätzliche Aktionen, Gegenüberstellungen und vergleichende Informationen verwendet. Es fungiert als Arbeitsbereich-Overlay oder als Push-Panel zum Umschalten von Einstellungen und Details.
5. Fußzeile: Ein persistenter Bereich unten auf der Seite, der in der Regel rechtliche Hinweise, eine sekundäre Navigation oder unterstützende Aktionen enthält.

Lösungen in Jutro Design System

Jutro Design System umfasst verschiedene Komponenten für die Gestaltung von Seiten- und Inhaltslayouts und erleichtert die Design- und Implementierungsaufgaben durch eine Kombination aus generischen und spezifischen Lösungen.

Seitenlayoutkomponenten

Mit Seitenlayoutkomponenten können Designer und Entwickler schnell mit der Erstellung von Anwendungen beginnen und so eine konsistente und responsive Gestaltung der Benutzeroberfläche für verschiedene Anwendungstypen sicherstellen. Teams können aus fünf verfügbaren einzelnen Seitenlayoutkomponenten auswählen und diese an spezifische Anwendungsanforderungen anpassen. Oder sie können die AppFloorPlan-Komponente verwenden, die einen vordefinierten Satz von Optionen enthält.

Warning: Die nun verfügbaren neuen individuellen Seitenlayoutkomponenten stellen keine Alternative zu einigen Funktionen der AppFloorPlan-Komponente dar.

Die Verwendung der Seitenlayoutkomponenten erfordert die Gestaltung und Implementierung von Inhalten für die verschiedenen Seitenbereiche, z. B. Kopfzeile, Menüs und Fußzeile. Außerdem muss bei diesen Komponenten das Routing in den Anwendungen unabhängig verarbeitet werden. In der AppFloorPlan-Komponente hingegen sind diese Faktoren enthalten.

Prüfen Sie die Anforderungen des jeweiligen Projekts, bevor Sie eine entsprechende Entscheidung treffen.

Worin liegt der Unterschied zwischen einzelnen Layoutkomponenten und AppFloorPlan?

Funktion	Einzelne Seitenlayoutkomponenten	AppFloorPlan
Flexibilität	Flexibel, Anpassungen möglich	Starre, vordefinierte Strukturen und Optionen
Themes	Vollständig Token-basiert, zur Sicherstellung von Konsistenz und einfacherem Theming	Nicht Token-basiert
Aufgabentrennung	Nur auf UX-Aspekte konzentriert	UX und Routing
Inhalt	Keine vordefinierten Inhalte	Vordefinierte Inhalte mit Anpassungsoptionen: Menüs, Kopfzeilenelemente und Layout

Einzelne Seitenlayoutkomponenten

Seitenlayouts sind flexibel und Token-basiert, was eine Individualisierung und einfachere Anpassung an verschiedene Oberflächen ermöglicht. Jede Seitenlayoutkomponente ist völlig unabhängig vom darin angezeigten Inhalt. Folgende Seitenlayoutkomponenten sind verfügbar:

• HeaderPanel
• SubHeaderPanel
• BurgerMenu
• SidePanel
• ToolsSidePanel
• FooterPanel

AppFloorPlan-Komponente

Die AppFloorPlan-Komponente weist eine strengere Struktur mit vordefinierten Regeln und Inhalten auf, z. B. mit einer Kopfzeile und einem Navigationsmenü, und umfasst außerdem das Routing.

Inhaltslayout-Hilfskomponenten

Die Inhaltslayout-Hilfskomponenten erleichtern die Erstellung verschiedener Strukturen für die Verteilung von Inhalten. Während mit den verschiedenen Seitenlayoutkomponenten bestimmte Bereiche der Seite gesteuert werden, z. B. die Kopfzeile oder die Fußzeile, bieten diese Hilfskomponenten allgemeine Lösungen zum Organisieren von Inhalten innerhalb der Seite, z. B. das Verwalten von Spalten, Zeilen und deren Inhalten. Folgende Inhaltslayout-Hilfskomponenten sind verfügbar:

• Flex und FlexItem: Implementierung von Flex-Containern mit vordefinierten Optionen
• Grid und GridItem: Implementierung von Grid-Containern und untergeordneten Elementen
• GridLayout: Vereinfachung der Grid-Komponente
• ColumnLayout: Komponente für die Spaltenstruktur

Inhaltslayout-Hilfskomponenten sind meist für Entwickler bestimmte Komponenten.

Beispiele für Seitenlayouts

Jutro enthält mehrere Beispiele für Seitenlayouts. Diese Beispiele dienen als Starter-Kits und Referenzen und veranschaulichen, wie Sie Seitenlayouts effektiv nutzen können. Sie können sie sich als Varianten von Seiten vorstellen, beispielsweise als Landingpage oder Detailansicht. Die Beispiele sollen Ihnen eine visuelle Vorstellung davon vermitteln, wie ein Layout aussehen kann, damit Sie Ihr Design vor Beginn der eigentlichen Arbeit konzipieren und präzisieren können. Anstatt bei Null anzufangen, können Sie sich von diesen Beispielen inspirieren lassen und sie an Ihre Anforderungen anpassen, wodurch sich der gesamte Prozess effizienter und nahtloser gestalten lässt.

Note: Die Beispiele sind zwar für spezifische Anwendungsfälle konzipiert, können aber je nach Projektanforderungen für verschiedene andere Szenarios angepasst werden.