Wie viele Abstandsstufen braucht ein System?

Bevor du irgendeiner Empfehlung vertraust, miss dein eigenes Produkt: grep die Stylesheets nach jedem margin-, padding- und gap-Wert und zähl die unterschiedlichen Ergebnisse. Ausgereifte Produkte, die ohne System gewachsen sind, landen üblicherweise zwischen 30 und 60 verschiedenen Werten — 12px neben 13px, 20px neben 22px neben 24px. Dann listest du die Aufgaben auf, die diese Werte erledigen — Icon-Abstand, Padding von Bedienelementen, Abstand zwischen Formularfeldern, Card-Padding, Abstand zwischen Cards, Blockumbruch, Abschnittsumbruch, Seitenrand — und die Liste kommt auf etwa acht.

Ein Abstandssystem braucht sechs bis zehn Stufen: ein oder zwei Mikro-Stufen für das Innere von Komponenten, drei oder vier mittlere Stufen für den Raum zwischen Elementen und Komponenten und zwei oder drei Makro-Stufen für Abschnitte und Seitenbereiche. Die Lücke zwischen den vierzig verwendeten Werten und den acht zu erledigenden Aufgaben ist die Antwort auf „wie viele” — ein System braucht etwa so viele Stufen, wie es Aufgaben gibt, plus ein wenig Spielraum.

Dieser Artikel teilt die Stufen Zone für Zone auf, erklärt, warum so wenige perzeptiv standhalten, und behandelt den einen legitimen Grund, eine hinzuzufügen — die Dimensionierungsfrage innerhalb des umfassenderen Systems für Abstände.

Wie viele Abstandswerte sammeln sich in Produkten ohne System an?

Führe das Experiment konkret durch:

grep -rhoE '(margin|padding|gap)[^;]*:[^;]*px' src/styles \
  | grep -oE '[0-9]+px' | sort -n | uniq -c | sort -rn

Das Histogramm hat meist eine wiederkehrende Form: ein paar Schwergewichte an der Spitze (16px hundertfach verwendet, 8px und 24px knapp dahinter) und dann ein langer Schwanz — 18px 22-mal verwendet, 22px 9-mal, 13px zweimal. Jeder Wert im Schwanz war einmal eine lokale Entscheidung: ein Abstand, der nachjustiert wurde, um einen überfüllten Screen zu retten, eine Rundung, die nie abgeglichen wurde, die Vermutung einer dritten Entwicklerin darüber, was die zweite gemeint hatte. Keiner davon ist für sich genommen falsch; zusammen bedeuten sie, dass dieselbe Design-Entscheidung Dutzende Male mit leicht unterschiedlichen Ergebnissen neu getroffen wird.

Stell die beiden Zahlen nebeneinander — gut 40 verwendete Werte, etwa acht unterschiedliche Aufgaben — und die Frage beantwortet sich von selbst. Du brauchst nicht mehr Stufen; du brauchst für jede Aufgabe genau eine.

Wie solltest du sechs bis zehn Stufen aufteilen?

Nach Zone, denn Abstands-Aufgaben ballen sich in drei unterschiedlichen Größen. Mit einer 16px-Basis, Ratio 2 und zwei Zwischenschritten pro Verdopplung erzeugt die Skala sieben Stufen — 8, 11, 16, 23, 32, 45, 64 — und die verteilen sich so:

Die Aufteilung erklärt beide Fehlermodi. Weniger als sechs Stufen hungern eine Zone aus — meist die Mikro-Zone, und Komponenten springen von gedrängt (8) zu locker (16), ohne etwas dazwischen. Deutlich mehr als zehn, und das Menü ist nicht mehr kurz: benachbarte Stufen haben keine eigenen Aufgaben mehr, man wählt zwischen ihnen nach Laune, und die Entscheidungsmüdigkeit, die die Skala beseitigen sollte, schleicht sich wieder ein — jetzt mit einem Token-Namen versehen.

Öffne diese siebenstufige Skala in Scale Composer — drei Zahlen erzeugen alle sieben Stufen, dicht am Mikro-Ende und licht am Makro-Ende.

Warum decken wenige Stufen trotzdem jede Aufgabe ab?

Weil das Auge Abstände proportional vergleicht, nicht nach Pixelzahl. Der Unterschied zwischen 8px und 12px ist unverkennbar — der eine Abstand ist anderthalbmal so groß wie der andere. Der Unterschied zwischen 56px und 64px sind dieselben 8 Pixel und fällt kaum auf. Zwei Stufen können nur dann zwei unterschiedliche Aufgaben tragen, wenn Leser sie zuverlässig auseinanderhalten können, und bei großen Größen braucht das ein sichtbares Verhältnis, kein festes Inkrement.

Das ist die Eigenschaft, die eine nichtlineare Skala konstruktionsbedingt garantiert. In der siebenstufigen Skala oben ist jede Stufe etwa 41 % größer als die vorherige (2^(1/2) ≈ 1,414) — jedes benachbarte Paar ist auf einen Blick unterscheidbar, von 8 gegen 11 bis hin zu 45 gegen 64. Ein lineares Menü wie die 8, 16, 24, 32, 40, 48, 56, 64 des 8-Punkt-Rasters verschwendet die Hälfte seiner Optionen auf Unterscheidungen am großen Ende, die kaum ein Leser je wahrnehmen wird. Wenige, proportional verteilte Stufen sind kein Kompromiss gegenüber einem reicheren Menü; sie sind das Menü, aus dem die nicht wahrnehmbaren Optionen entfernt wurden.

Wann solltest du eine Abstandsstufe hinzufügen?

Wenn ein wiederkehrender Abstand echt zwischen zwei vorhandenen Stufen liegt — derselbe Rollen-Test wie beim Hinzufügen einer Schriftgröße. Ein einzelner Screen, auf dem sich 23 locker und 16 eng anfühlt, ist kein Beleg; ein Abstand, der über viele Screens hinweg bei beiden Nachbarn verliert, ist eine Rolle ohne Stufe — und hat sich eine verdient.

Ändere lieber die Dichte der Skala, als einen einzelnen Wert einzufügen: von zwei Zwischenschritten pro Verdopplung auf drei zu wechseln erzeugt das ganze Menü neu, mit sanfteren Inkrementen (jede Stufe etwa 26 % größer statt 41 %), sodass die neuen Zwischenwerte weiterhin der Logik der Skala folgen. Eine von Hand eingefügte 20 zwischen 16 und 23 löst eine Lücke und bricht die Arithmetik, der jede andere Stufe gehorcht.

Welche Stufenanzahlen verwenden öffentliche Design-Systeme?

Öffentliche Skalen sind eine nützliche Kalibrierung, richtig gelesen. Shopify Polaris etwa dokumentiert seine Space Scale offen: benannte Stufen, dicht am kleinen Ende, dünner werdend zum großen Ende hin — dieselbe Form, die die Zonen-Aufteilung erzeugt. Behandle sie als Beleg für die Form einer brauchbaren Skala, nicht als Autorität über dein Produkt: Polaris ist auf die Dichte von Shopifys Admin-Oberflächen kalibriert, und eine content-lastige Marketing-Site oder ein datendichtes Dashboard landet an anderen Punkten innerhalb des Bereichs von sechs bis zehn. Das übereinstimmende Muster über veröffentlichte Systeme hinweg — ein kurzes, nichtlineares Menü — ist die übertragbare Lektion; die genaue Anzahl misst du selbst.

Miss deine Lücke, dann wähl deine Dichte

Das Audit liefert dir die zwei Zahlen, auf die es ankommt: verwendete Werte und zu erledigende Aufgaben. Die verbleibende Entscheidung ist die Dichte — ob die Mitte-Zone deines Produkts drei Stufen braucht oder vier. Vergleiche die Kandidaten direkt: dieselbe Basis und Ratio mit drei Zwischenschritten pro Verdopplung lässt das Menü von sieben Stufen Richtung zehn wachsen, und jede hinzugefügte Stufe muss den Rollen-Test bestehen — welche wiederkehrende Aufgabe besitzt genau diese? Geh die dichtere Skala durch und beurteile jede Ergänzung an deinem eigenen Histogramm: öffne die Vergleichsskala in Scale Composer.