Zum Hauptinhalt springen

Überblick über Grundrisse und Layouts

Überblick über Grundrisse und Layouts in Storybook

Verwendung​

Grundrisse ermöglichen es dem Designer, sofort mit der Erstellung seiner Anwendungen zu beginnen. Sie ermöglichen eine konsistente und reaktionsschnelle UI-Komposition über Anwendungstypen hinweg. Designer können aus vier verfügbaren Grundrissen wählen und sich an die Anforderungen der Anwendung anpassen. Ähnlich wie Architekturzeichnungen, die die Form, Größe und Anordnung eines Raumes veranschaulichen, definieren Grundrisse die Form, das Layout und die Komponenten einer Seite. Grundrisse optimieren das Design über mehrere Formfaktoren hinweg. Weitere Informationen erhalten Sie im folgenden Video:

Was sind Grundrisse?​

Download transcript

Aufbau​

Jutro umfasst derzeit vier verschiedene Grundrisse, die für gängige Anwendungsfälle ausgerichtet sind:

Eine Seitenleiste hat eine maximale Breite von 320 Pixeln. Sie verschiebt den Inhalt in den Hauptinhaltsbereich und zwingt ihn, responsiv zu sein. Hinweis: Seitenleisten überlappen nicht den Hauptinhaltsbereich.

Inhaltslayouts bestimmen die Spaltengrößen für Komponenten im Hauptinhaltsbereich. Fünf Layoutoptionen sind verfügbar:

  1. Globale Kopfzeile: Die Kopfzeile ermöglicht eine konsistente Navigation über Anwendungserfahrungen hinweg. Sie definiert den obersten Teil einer Seite. Kopfzeilen sind zusammengesetzte Komponenten. Mit anderen Worten, sie kombinieren andere Komponenten, um einen bestimmten Anwendungsfall zu erfüllen.
  2. Linke Navigation: Die linke Navigation organisiert die Inhaltsstruktur und bietet Kontext zur Orientierung der Benutzer. Sie nimmt die linke Seite des Bildschirms ein und erstreckt sich vertikal von der Kopfzeile bis zum unteren Rand der Seite.
  3. Rechte Seitenleiste: Die Jutro-Grundrisse bieten Platz für Push- und Overlay-Modelle der rechten Seitenleiste. Das Push-Modell der rechten Seitenleiste enthält Informationen, die sich auf den Hauptinhaltsbereich beziehen. Es ist nützlich, um Informationen zu vergleichen und gegenüberzustellen. Das Overlay-Modell fungiert als Arbeitsbereich. Es ermöglicht Benutzern unter anderem die Eingabe von Informationen, das Umschalten und Festlegen von Daten.

Best Practices​

  • Trennen nach der Platzierung und Größenanpassung: Grundrisse müssen getrennt werden, um Inhalte darin zu platzieren. Die enthaltenen Komponenten und/oder Stile werden weiterhin aktualisiert.
  • Der Zugriff auf die Grundrisse erfolgt über das Menü der Symbolbibliothek oder ein vordefiniertes Symbol auf einer Zeichenfläche mit einem Ebenenraster, das Sie kopieren und in eigenen Dateien einfügen können.
  • Alle Grundrisse sind symbolisiert. Um Änderungen vorzunehmen, müssen Sie sie zuerst trennen.
  • Überlegen Sie bei der Auswahl eines Grundrisses, welche der folgenden Elemente Sie benötigen: linke Navigation, globale Kopfzeile, rechte Seitenleiste. Alle Grundrisse verfügen über die globale Kopfzeile.
  • Verwenden Sie Grundrisse in L-Form, wenn Sie die Kopfzeile und die linke Navigation benötigen.
  • Verwenden Sie Grundrisse in I-Form, wenn Sie lediglich die Kopfzeile benötigen.
  • Verwenden Sie Grundrisse in C-Form, wenn Sie die Kopfzeile, die linke Navigation und die rechte Seitenleiste benötigen.
  • Verwenden Sie Grundrisse in R-Form, wenn Sie die Kopfzeile und die rechte Seitenleiste benötigen.
  • Grundrisse in R-Form mit einem Push-Modell eignen sich besonders für einspaltige, 2:1-, 1:2- und 1:1-Layouts.

Reaktionsfähigkeit/Anpassungsfähigkeit​

Jutro bietet responsive Layouts, die sich an unterschiedliche Bildschirme und Formfaktoren anpassen. Für die Layouts wird ein 12-Spalten-Raster für Desktop-Geräte, ein 8-Spalten-Raster für Tablets und ein 4-Spalten-Raster für Smartphones verwendet, alle mit einem Abstand von 24 Pixeln zwischen den Spalten.

Für alle Form- und Layoutkombinationen gelten die folgenden Messpunkte.

Karten​

Karten werden am Spaltenraster ausgerichtet und sind die primären Container für die Platzierung von Inhalten auf dem Layoutraster im Hauptbereich.

Karten als Panels​

Karten als Panels (<Card isPanel />) werden für die linke und rechte Seitenleiste für kontextbezogene Inhalte wie z. B. Navigation oder Steuerelemente verwendet.

Layoutpanels: Beispiele​

L-Form 2:1, linker Navigationsbereich reduziert
L-Form 2:1, linker Navigationsbereich erweitert
I-Form 1:1
I-Form 1:1:1

Interaktionen​

Die linke Navigation beinhaltet vorgruppierte Komponenten für die Navigation. Wenn Sie aus diesen Elementen auswählen, ändert sich die Ansicht des Hauptinhaltsbereichs entsprechend der Auswahl.

Auch bei der rechten Seitenleiste wird das Push-Modell verwendet, mit dem die Größe des responsiven Hauptbereichs entsprechend geändert und die jeweiligen Kontextinhalte angezeigt werden.

Ikonografie​

Die Symbole für die linke Navigation und die globale Kopfzeilenfunktion sind standardmäßig verfügbar. Sie haben jedoch die Möglichkeit, diese zu überschreiben.