← Design Rules

Philosophie

Body, Role und Skin

        ╔═══════════════════════════════════════╗
        ║ ┌───────────────────────────────────┐ ║
        ║ │                                   │ ║
        ║ │         ╭───────────────╮         │ ║
        ║ │         │   Speichern   │         │ ║
        ║ │         ╰───────────────╯         │ ║
        ║ │                                   │ ║
        ║ │     Ceci n'est pas un bouton.     │ ║
        ║ │                                   │ ║
        ║ └───────────────────────────────────┘ ║
        ╚═══════════════════════════════════════╝

Wörtlich genommen stimmt es sogar: die Pfeife im Bild kann man nicht rauchen, und die Master Component in Figma kann man nicht drücken. Beide sind Abbilder. Nur haben wir beim Button vergessen, dass es eines ist, und angefangen, die Bibliothek der Abbilder für das System zu halten.

Dabei geht verloren, was den Button zum Button macht: dass er etwas tut. Ein eingefrorener Zustand hat seine Rolle und seine Bedeutung noch, er kann sie aber nicht mehr ausüben. Er kann sich nicht mehr anders entscheiden.

Warum nicht Atomic Design

Atomic Design leiht seine Metapher bei der Chemie: Atome, Moleküle, Organismen. Das klingt nach Wachstum, stammt aber aus dem unbelebtesten Bereich der Wirklichkeit. Ein Atom kann nichts werden. Es kann sich nur verbinden.

Aus dieser Entscheidung folgt alles Weitere zwingend. Wenn die kleinste Einheit sich nicht verändern kann, ist Kombination der einzige Vorgang, der zur Verfügung steht. Vielfalt entsteht dann nur über mehr Einheiten. Für jede Verbindung aus Verhalten, Aussehen und Zustand braucht es ein eigenes fertiges Ding, und irgendwann ist die Pflege der Bibliothek aufwändiger als die Arbeit, für die sie da ist. Dahin führt die Metapher auch dann, wenn man sie korrekt anwendet.

Am Hover sieht man es am deutlichsten. Er steckt im Button, noch einmal im Chip und ein drittes Mal in der Tabellenzeile. Das passiert auch bei sorgfältiger Arbeit, denn ein Atom trägt seine Eigenschaften bei sich und bezieht sie nicht von außen. Ändert sich die Regel, muss jemand sie an drei Stellen ändern, und oft erwischt er nur zwei.

Die Biologie kennt einen zweiten Vorgang, den die Chemie nicht hat: Differenzierung. Dieselbe Zelle wird zu Verschiedenem, je nach Kontext. Vielfalt entsteht ohne mehr Einheiten. Deshalb setzt der Gegenentwurf auf eine andere Materie statt auf „kleinere Teile" oder „besser gepflegte Teile".

Die Frage „haben wir für alles ein fertiges Teil?" ist damit die falsche Frage. Die richtige lautet: Was ist die kleinste Anzahl an Regeln, mit der wir das meiste erschaffen können?

Das Modell

Ein Body ist zunächst nichts. Er ist formbare, bedeutungsfreie Materie, im Web ein div, in React Native ein View. Er bekommt seine Bedeutung erst aus zwei Zuweisungen.

Schicht Was sie beiträgt Beispiel
Body (der Körper) Die formbare Materie. Ohne Bedeutung, ohne Aussehen ein neutrales Element
Role (die Seele) Was der Body tut. Ein reines Verhaltenspaket, ohne jede Aussage über das Aussehen pressable, toggleable, editable, navigable, readable
Skin (die Haut) Wie der Body aussieht. Ein reines Stil-Rezept auf Token-Basis, ohne jeden Interaktions-Code press, chip, track, tab, field, row, text

Dazu kommen die zwei Schichten, die das Ganze tragen:

Schicht Was sie beiträgt
Tokens (die DNA) Die Werte, aus denen der Skin gemacht ist. Zustände wie Hover sind Stufen derselben Palette
Grammatik Welche Kombinationen einen Namen haben, welche verboten sind, und warum

Was das praktisch ändert

Das Hover-Problem, aristotelisch gelöst: das Verhalten wird einmal definiert und auf beliebige Bodies angewendet.

Body + Skin (pill)   + Role (pressable)  =>  klickbarer Pill-Button
Body + Skin (chip)   + Role (pressable)  =>  klickbarer Chip
Body + Skin (row)    + Role (navigable)  =>  Navigations-Zeile
Body + Skin (chip)   + Role (readable)   =>  Badge

Die letzten beiden Zeilen zeigen den Kern. Chip und Badge sehen gleich aus und verhalten sich verschieden. In Atomic Design sind das zwangsläufig zwei Atome mit doppeltem Stil, weil ein Atom sein Aussehen bei sich trägt. Als Bodies ist es derselbe Skin mit zwei Roles.

Die Komplexität wandert aus dem einzelnen Ding in das System, wo sie wiederverwendbar bleibt. Aus Multiplikation wird Addition. Bisher braucht es Verhalten mal Skin mal Schwere als Einzelteile. Jetzt reichen Verhalten plus Skins plus Schweregrade.

Zwei Prüfsteine

Der Orthogonalitäts-Test. Etwas ist nur dann eine eigene Achse, wenn es sich mit allen anderen Achsen sinnvoll kombinieren lässt. Existiert es nur in einer einzigen Kombination, ist es ein benannter Einzelfall und kein Bauprinzip. Daran ändert sich auch später nichts.

Ausnahmen sind unentdeckte Achsen. Der abweichende Hover eines Fehler-Buttons ist keine Ausnahme von der Hover-Regel. Er ist die Schwere-Achse: die Regel zeigt auf den Hover-Wert der jeweils aktiven Palette, und die Abweichung wird zu Daten statt zu Code. Wer stattdessen ein wenn in die Regel schreibt, hat die Achse übersehen.

Daraus die Faustregel: Verhalten hart abstrahieren, Aussehen nur als überschreibbarer Vorschlag. Und wenn eine Regel ein zweites „außer wenn" braucht, ist das eine neue benannte Variante, kein weiteres wenn.

Warum das erst jetzt geht

Atomic Design hatte seinen Sinn als Kompression für Menschen: eingefrorene, bewiesene Kombinationen, die niemand jedes Mal neu herleiten musste. Wer keine Regeln im Kopf behalten kann, braucht ein Regal mit fertigen Teilen. Eine KI braucht diese Abkürzung nicht. Sie kann eine Grammatik anwenden, also Regeln kombinieren, statt Vokabeln nachzuschlagen.

Damit wird das Design-System von einer Teileliste zu einer Sprache. Was davon ohne diese Haltung für jedes Projekt gilt, steht in Verhalten und Aussehen bleiben getrennt und in Verhalten und Aussehen werden nicht in der Ansicht nachgebaut.

Zur Wortwahl

Die Metapher ist die Zelle, das Paradigma heißt Cellular Design. Das einzelne Ding heißt trotzdem Body und nicht „Zelle", weil Zelle in Oberflächen schon vergeben ist: die Tabellenzelle. Auf Deutsch ist der Body der Körper, die Role die Seele, der Skin die Haut. Die englischen Wörter stehen hier, weil sie im Code dieser Haltung genauso heißen. Wo body mit dem <body>-Element kollidieren könnte, hilft die Langform cell body.

Nicht verwendet werden „Atom", „Molekül" und „Organismus", weil sie zu Atomic Design gehören. Ebenso wenig „Baustein" und „Komponente". Die Wörter sind an sich nicht schlecht, sie beschreiben aber dieselbe Welt: totes Material, das verbaut wird und danach bleibt, was es ist. Das Problem liegt in der Metapher darunter, das Wort zeigt es nur an. Diese Wortwahl gilt für Texte in dieser Haltung. Die Regeln daneben sprechen normal.

Verwandt