Version:
GRID, SPACING & LAYOUT
Overview
Generelle Richtlinien
broken_image
Alle Komponenten und Layouts basieren auf dem 8-Pixel (px) Grid. Das bedeutet, dass alle Größen und Abstände in der GUI aus vielfachen von 8 Pixel bestehen, z.B. 16 px (8*2), 24, px (8*3) oder auch 4 px (8*0,5). Siehe folgende Design Tokens:
C--mate-spacing-000: 0rem;--mate-spacing-012: 0.125rem;--mate-spacing-025: 0.25rem;--mate-spacing-050: 0.50rem;--mate-spacing-075: 0.75rem;--mate-spacing-100: 1rem;--mate-spacing-125: 1.25rem;--mate-spacing-150: 1.5rem;--mate-spacing-200: 2rem;--mate-spacing-250: 2.5rem;--mate-spacing-300: 3rem;--mate-spacing-350: 3.5rem;
Raster (Grid)
Wie bereits im vorherigen Abschnitt beschrieben, basieren alle Komponenten und Layouts auf dem 8-Pixel (px) Grid. Die äußeren Abstände (Outer Spacings) beschreiben Abstände von Komponenten zueinander. Die inneren Abstände (Inner Spacings) beschreiben Abstände innerhalb von Komponenten.
broken_image
Info
Designern steht dazu in Figma ein Grid\-Style / Layout Raster / 8 pt zur Verfügung.
broken_image
Abstände (Spacings)
Abstände zwischen Komponenten
Komponenten definieren selbst kein Outer Spacing. Eine Ausnahme dazu bilden lediglich die Überschriften H1-H6 . Das Spacing zwischen Komponenten wird global (\-\-mate\-spacing\-100: 1rem = 16px) durch Container gesteuert. Diese Container verfügen über eine horizontale oder vertikale Richtung und können ineinander verschachtelt werden.
broken_image
Abstände von Überschriften
Überschriften definieren als einzige Komponente äußere Abstände. Siehe folgende Liste:
broken_image
Die Abstände von Überschriften lassen sich optional auch deaktivieren.
Info für Dev
Siehe Variante: text-no-margins im Showcase.
JavaTextDesign.of(heading).textNoMargins().component();
Abstände innerhalb eines Containers (Paddings)
Container können zueinander zusätzlich zum Spacing ihrer Kinder ein Padding aktivieren, welches sich rundherum erstreckt.
broken_image
Info
Designer sollten zur Umsetzung ein Figma Auto Layout mit folgenden Einstellungen nutzen:
broken_image
Leitlinien zur Verwendung
| 👍 Do | 👎 Don't |
|---|---|
broken_image Halte einen einheitlichen Abstand im Inhaltsbereich ein. | broken_image Achte darauf keine Container zu verschachteln und dadurch das Padding zu verdoppeln. Dies führt zu Uneinheitlichkeit. |
Abstände zwischen Layouts
Flex Layout (früher Floating Layout)
SEIT VERSION: 4.0.0
Nur noch das Flex Layout anstatt dem Floating Layout verwenden. Das Floating Layout ist deprecated.
broken_image
Für weitere Hinweise zur Verwendung und zum Verhalten siehe Layouts weiter unten.
Block Layout
broken_image | |
broken_image |
Info für Dev
Siehe Variante: double-padding im Showcase.
JavablockLayout.setDoubleBottomPadding(true);
Für weitere Hinweise zur Verwendung und zum Verhalten siehe Layouts weiter unten.
Layouts
Das Grundgerüst zum Layouten von Anwendungen wird durch die Application Bar , dem Global Header und das Product Layout bereitgestellt. Wie in nachfolgendem Bild dargestellt, sind Im Product Layout die Elemente Titelleiste, Navigationspanel, Navigationsleiste, Inhaltsbereich sowie die Funktionsleiste enthalten.
broken_image
Product Layout
Da das Layout in den oben genannten Komponenten bereits definiert ist, ist in der praktischen Arbeit vor allem der richtige Umgang mit den verschiedenen Layouts im Inhaltsbereich interessant. Die folgenden Best-Practices und Tipps für Entwickler helfen dabei zu einheitlichen und klaren Layouts zu kommen.
Flex Layout (früher Floating Layout)
SEIT VERSION: 4.0.0
Nur noch das Flex Layout anstatt dem Floating Layout verwenden. Das Floating Layout ist deprecated.
Das Flex Layout reiht die Inhalte horizontal hintereinander ein. Passen die Inhalte nicht mehr in eine Zeile, dann brechen diese einfach in die nächste Zeile um.
broken_image
Flex Layout bei dem alle Inhalte in eine Zeile passen
broken_image
Flex Layout mit Zeilenumbruch
Das Layout eignet sich besonders dazu Höhe im Layout zu sparen. Daher wird es z.B. auch in der Kopfzeile der Objektseite genutzt.
Info
Designer nutzen dazu in Figma am einfachsten in den Frames Auto Layout mit folgenden Einstellungen:
broken_image
Der vertikale Abstand ist weiterhin auf 16 Pixel eingestellt.
Block Layout
Inhalte wie z.B. Feldergruppen in Formularen, Diagramme oder Name-Wert-Facetten sollen in sinnvollen Einheiten bzw. Blöcken zusammengefasst werden. Das Block Layout hilft dabei, diese Inhalte einheitlich zu layouten. Das Block Layout richtet sich an den verfügbaren Container-Größen (Small, Medium mind. 768 Px, Large mind.1120 Px) aus und setzt damit die Inhalte responsiv um.
Siehe dir die folgenden Schaubilder an, um die zur Verfügung stehenden Block Layouts und ihr responsives Verhalten kennenzulernen.
broken_image | Container Größe L |
broken_image | Container Größe M |
broken_image | Container Größe S |
Info
Designern stehen dazu in Figma folgende Grid\-Styles zur Verfügung.
broken_image
Frames sollten zudem folgende Auto Layout Einstellungen haben:
broken_image
Für den vertikalen Abstand zwischen den Block Layouts sollte der globale Abstand von 16 px eingestellt bleiben. Dazu ist es am einfachsten die Frames wiederum in einen Frame mit folgenden Einstellungen zu gruppieren:
broken_image
Siehe auch die folgende Anwendungsbeispiele für die jeweiligen Layouts.
Block Layout 4-4-4
broken_image | Block Layout 4-4-4 erstes Beispiel |
broken_image | Block Layout 4-4-4 zweites Beispiel |
Block Layout 6-6
broken_image
Block Layout 6-6 Beispiel
Block Layout 4-8
broken_image
Block Layout 4-8 Beispiel
Block Layout 12
broken_image
Block Layout 12 Beispiel
Develop Vue
Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/pattern-block-layout--docs
Develop Flow
Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=pattern%252Fblock-layout