Abstände
Abstände (Spacer) sind unsichtbare Elemente, die vertikalen Raum zwischen anderen Elementen erzeugen. Sie helfen dir, ein luftigeres und übersichtlicheres Layout zu erstellen.
Abstand erstellen
Section titled “Abstand erstellen”- Tippe auf + in der Toolbar
- Wähle Abstand aus der Liste
- Ein neuer Abstand wird hinzugefügt
- Das Smart Panel öffnet sich automatisch
Abstand-Tab
Section titled “Abstand-Tab”Der Abstand hat nur einen Tab mit wenigen, aber wichtigen Einstellungen.
Schnellauswahl
Section titled “Schnellauswahl”Was es macht: Vordefinierte Höhen für schnelle Auswahl.
So findest du es: Abstand > Größe > Schnellauswahl
Optionen:
| Wert | Verwendung |
|---|---|
| 8 px | Minimaler Abstand zwischen zusammengehörigen Elementen |
| 16 px | Standard-Abstand |
| 24 px | Mittlerer Abstand |
| 32 px | Größerer Abstand zwischen Abschnitten |
| 48 px | Maximaler Abstand für deutliche Trennung |
Bedienung: Tippe auf einen der Chips um die Höhe sofort zu setzen.
Eigene Höhe
Section titled “Eigene Höhe”Was es macht: Ermöglicht die genaue Einstellung der Höhe.
So findest du es: Abstand > Größe > Eigene Höhe
| Einstellung | Standard | Bereich |
|---|---|---|
| Höhe | 16 px | 4-100 px |
Bedienung: Ziehe den Schieberegler nach links (kleiner) oder rechts (größer).
Wann welchen Abstand verwenden?
Section titled “Wann welchen Abstand verwenden?”8 px - Minimal
Section titled “8 px - Minimal”Nutze 8 px Abstände:
- Zwischen eng zusammengehörigen Elementen
- Nach einer Überschrift vor dem ersten Eintrag
- Innerhalb einer Gruppe von Einträgen
16 px - Standard
Section titled “16 px - Standard”Nutze 16 px Abstände:
- Als Standard-Abstand zwischen Elementen
- Nach einer Trennlinie
- Zwischen normalen Einträgen
24 px - Mittel
Section titled “24 px - Mittel”Nutze 24 px Abstände:
- Zwischen thematisch verschiedenen Einträgen
- Vor einer neuen Überschrift
32 px - Groß
Section titled “32 px - Groß”Nutze 32 px Abstände:
- Zwischen deutlich getrennten Abschnitten
- Nach einer Gruppe von Einstellungen
48 px - Maximal
Section titled “48 px - Maximal”Nutze 48 px Abstände:
- Für sehr deutliche visuelle Trennung
- Vor dem Logout-Button
- Am Ende der Liste
Beispiel-Struktur
Section titled “Beispiel-Struktur”[Überschrift] Darstellung 8 px Abstand[Eintrag] Dunkler Modus[Eintrag] Sprache 16 px Abstand-------- Trennlinie -------- 16 px Abstand[Überschrift] Benachrichtigungen 8 px Abstand[Eintrag] Push-Mitteilungen[Eintrag] E-Mail 32 px Abstand-------- Trennlinie -------- 48 px Abstand[Logout-Button]Abstand vs. Trennlinie
Section titled “Abstand vs. Trennlinie”| Merkmal | Abstand | Trennlinie |
|---|---|---|
| Sichtbar | Nein | Ja |
| Zweck | Luftigeres Layout | Visuelle Trennung |
| Wann nutzen | Immer zwischen Elementen | Zwischen Abschnitten |
| Kombinieren | Ja, mit Trennlinien | Ja, mit Abständen |