Raum in Designsystemen

Von den Grundlagen zu erweiterten Konzepten, um Raum mit Absicht anzuwenden

Ich habe lange auf Farbe, Typ und Symbole als "Big 3" der visuellen Sprache eines Systems Bezug genommen. Alle UI-Komponenten - ab Buttons - werden mit ihnen erstellt. Aber ich habe etwas ausgelassen. Der Weltraum, unsere letzte Grenze.

Raum Rivalen Farbe

Der Raum ist überall. CSS verwendet Eigenschaften wie Auffüllen, Rand und die absolute Positionierung von links, rechts, oben und unten, um Objekte zu trennen. In fünf Bibliotheken (Bootstrap, Salesforce Lightning, Foundation, ein vorheriges Projekt und ein aktuelles Projekt) habe ich das Auftreten dieser Raumeigenschaften im Verhältnis zu den Eigenschaftsgruppen Farbe, Größe, Typ, Layout und mehr verglichen.

Space-Rivalen färben sich in der Nutzungshäufigkeit innerhalb der Stilregeln einer Bibliothek

Nach dem Entfernen von Effekten ("nullte" Werte wie: 0; und reservierten Begriffen wie transparent oder auto), bei denen CSS uns bereits ein System für Entscheidungen bietet, erschienen Leerzeichen mehr als alles andere als Farbe. Nichts anderes - nicht Typ, Größe, Layout - war auch nur knapp. In unsere Bibliotheken ist so viel räumliche Komplexität eingebaut, geschweige denn unsere Produkte!

Raum teilt uns

Der Weltraum verkörpert die Lücke zwischen Design und Entwicklung. Wir haben lange darüber geklagt, dass unsere Designs mit roten Linien übersät sind. Es fühlt sich nie wert an. Sie bleiben jedoch bestehen, ohne dass dies durch das fertige Material unseres Produkts unterstrichen wird: das Box-Modell von HTML.

Die Kosten sind immens: Kommentieren, Übersetzen, Diskutieren und visuelles Reinigen während der Qualitätssicherung. All das funktioniert… für etwas, das noch nicht gut genug ist. So fordert der Raum auch einen emotionalen Tribut.

Raumkonzepte sind primitiv

Wir könnten bewusstere räumliche Konzepte durch Design, Code und Konversation verweben. Aber wir tun es nicht. Wir verwenden nur T-Shirt-Größen und nennen es einen Tag. Wir können es besser machen. Wir können die rot umrandete Wut mit dem roten Gesicht ersetzen, um unseren Weg in eine Zukunft der räumlichen Klarheit einzuschieben, zu zerquetschen, zu dehnen und zu stapeln.

Vor diesem Hintergrund sind hier die Grundlagen, ein erweiterter Wortschatz und weitere Erfahrungen, die ich mit der Anwendung von Speicherplatz auf Systemarbeit gemacht habe.

Grundlagen des Weltraums

Gitter ≠ Raum. Gitter ist eine Komponente, die den Raum nutzt.

Raster sind reich an räumlichen Entscheidungen für Spalten, Dachrinnen, äußere Ränder und reaktionsschnelle Nuancen. Teams greifen Raster frühzeitig an, sodass Benutzer problemlos eine Seite erstellen können. Leider ist dies häufig der Fall, wenn räumliche Gespräche unterbrochen werden.

Rasterkonventionen für Rand (blau) und Rinne (lindgrün)

Ein Gitter ist kein vollständiges räumliches System. Ein Gitter ist eine Komponente, die wie jede andere Komponente Platz beansprucht. Ein Gitter fühlt sich anders an. Es ist unsichtbar, kommt früh und braucht nur Platz. Raum ist aber mehr als Gitter.

Imbiss: Führen Sie räumliche Konventionen mit einem Raster ein, aber hören Sie dort nicht auf. Richten Sie die Ränder, Rinnen und Spaltenwerte eines Rasters an tieferen räumlichen Konzepten aus, die durch eine gesamte Komponentenbibliothek verflochten sind.

Legen Sie eine denkwürdige Basiszahl und Erwartungen fest

Teams richten eine unvergessliche, sogar magische Basisnummer ein, um alle anderen räumlichen Werte zu erden. Einige Teams bevorzugen die Basis 10, weil wir zählen (übrigens wegen unserer zehn Finger). Ich habe sogar ein Team gesehen, das eine Basis 6 - mit hilfreichen Faktoren 2 und 3 - verwendet, um Platz für ein überflexibles Array von 3s, 4s, 6s, 8s, 9s, 12s, 15s, 16s, 18s, 21s zu schaffen. 24s, 32s und mehr. Stoppen Sie den Wahnsinn!

Eine Reihe von Abstandsoptionen, die auf 6 basieren, jedoch ein Vielfaches von 3 und 2 liefern.

Die meisten Systeme, auf denen ich gearbeitet habe, verwenden 16. Dies ist eine gute Standardschriftgröße. Dies ist ein Faktor für alle Bildschirmauflösungen (320, 768, 1024). Und es bietet unvergessliche Vielfache mehr (32, 64, ...) und Faktoren weniger (8, 4, 2) als am Anfang.

Eine Reihe begrenzterer räumlicher Optionen, basierend auf 16

Zum Mitnehmen: Erden Sie die Reichweite Ihres räumlichen Systems mit einer einprägsamen Basisnummer und begrenzen Sie die Erwartungen hinsichtlich seiner Verwendung.

Optionen nichtlinear skalieren

Mit einer etablierten Basis können Teams immer noch in zufälligen Schritten ausrutschen (12, 14, 18, 22, 24, 28, 30, 32,…). Um dies zu verhindern, verwenden andere eine lineare Skala (4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44,…), bei der jeder Schritt ein festes Inkrement darstellt. Für mich wird jedes Ergebnis unvorhersehbar verwendet, da zu viele Optionen zu nahe beieinander liegen. Wann verwende ich 24 oder 28? Ich weiß nicht.

Linearer Verlauf von 4 auf 32. Brauchen Sie wirklich alle diese Optionen?

Eine Alternative ist nicht linear. Zu den Optionen gehören der Goldene Schnitt, die modulare Skalierung oder eine ähnliche geometrische Abfolge, die jeden Schritt verdoppeln kann. Ausgehend von der Basis fahren wir in beide Richtungen, um kleinere (16, 8, 4, 2) und größere (16, 32, 64 und ... das war's auch schon) Stationen auf der Skala zu erreichen.

Geometrische Progression, die jeden Schritt verdoppelt. % s stellen eine proportionale Verwendung in unserer Bibliothek dar.

Imbiss: Betrachten Sie einen geometrischen Verlauf oder etwas ähnlich Nichtlineares. Es kann gelegentlich zu Spannungen kommen, wenn Sie eine 24 zwischen 16 und 32 hinzufügen. Nach meiner Erfahrung sind solche Momente jedoch selten und rechtfertigen selten das Brechen des einfachen Systems.

Nennen Sie jeden Schritt für unvergessliche, genaue Wiederverwendung

Ich mag die kompakte, gemütliche und komfortable Umschaltfunktion von Google Mail. Als wir unser Raumfahrtsystem bauten, schlug ich vor, diese Etiketten in unserer Arbeit zu verwenden. Sofort forderte mich ein Teamkollege auf: "Wie nennen wir andere Schritte?" Meine spartanischen, jugendlichen und luxuriösen Optionen haben sich nicht bewährt.

Ein aussagekräftiges Etikett für jede Haltestelle? Achtung.

Also haben wir das gemacht, was wir immer gemacht haben: Verwenden Sie eine T-Shirt-Größenskala. Mittel entspricht Standard und S, XS, L, XL und - falls erforderlich - XXS und XXL sind weitere Optionen. Dies tun die meisten Bibliotheken (Bootstrap, Lightning usw.).

Zum Mitnehmen: Benennen Sie die Raumoptionen einfach, indem Sie eine Skala wie T-Shirt-Größen verwenden, um eine Sprache zu erstellen, an die sich die Menschen erinnern und die sie genau anwenden können. Wenn Sie aussagekräftigere Labels ausprobieren, sollten Sie darauf vorbereitet sein, dass Ihre Teamkollegen antworten: "Klein, mittel, groß, bitte."

Ich habe viele Bibliotheken überprüft und mit vielen Designern gesprochen. In einfachen Konventionen von Basiszahlen und einer benannten Skala enden die Gespräche normalerweise. Auch wenn diese wenigen Optionen einfach sind, fühlte sich die Nutzung des Platzes so… zufällig an. Ich brauchte mehr

Erweiterung eines Wortschatzes für den Weltraum

Bei der Überprüfung unserer aufkommenden Arbeiten gibt es nicht viele unterschiedliche Absichten für die Anwendung von Raum. Sehen wir uns zum Beispiel meine Lieblingskomponente an: die Karte.

Als Front-End-Entwickler stelle ich mir alle Felder mit Elementen vor, die Elemente zusammenfügen.

Die Karte bietet eine nützliche Illustration vieler Raumkonzepte, die wir verwenden: Einfügen von Inhalten von einer Kante, Variieren der Form einer Einfügung, Inline-Abstand von Elementen und Stapeln von Elementen innerhalb und zwischen Komponenten.

Diese Konzepte - Einfügung, Einfügung Quetschen, Einfügung Strecken, Stapeln, Inline und Raster - decken die überwiegende Mehrheit der CSS-Regeln unserer Bibliothek für Raum ab: Auffüllen, Rand, Links, Rechts, Oben und Unten. Diese Konzepte verbessern auch, wie jedes Atom in sich geschlossen ist, und verbessern die Zusammensetzbarkeit.

Konzept 1: (quadratische) Einfügung

Ein Einschub bietet Einrückungen auf allen vier Seiten wie die Mattierung des gerahmten Fotos an einer Wand. Der Einsatz ist bei vielen Komponenten in verschiedenen Größen weit verbreitet, unabhängig davon, ob es sich um 3-Up-Module und Blocknachrichten mit mittlerer Haptik, besonders kompakte Pillen oder geräumige Fußzeilen und Mastköpfe handelt.

Die Standardeinstellung ist auch ein nützlicher Ausgangspunkt für das erste mobile Design, das bei einer relevanten Ansichtsfensterbreite wie 768px zu groß wird.

Konzept 2: Squish Inset

Ein gequetschter Einsatz verringert den Platz oben und unten, in unserem Fall um 50%. Obwohl ein Squish seltener vorkommt als ein Squish im Quadrat, kommt es häufig in Elementen (wie einem Knopf) und zellenartigen Containern wie einer Datentabelle oder einem Listenelement vor.

Squished-Einschub in Schaltflächen, Datentabellenzellen und Listengruppenelementen

Konzept 3: Stretch Inset

Im Gegensatz zu einer Schaltfläche oder einem Pillen-Squish haben wir die Einfügungen von Textfeldern, Textbereichen und anderen Formularelementen vertikal gedehnt.

Konzept 4: Stack

Bei allem Respekt für die horizontal gescrollte Benutzeroberfläche scrollt die überwiegende Mehrheit vertikal. Und das bedeutet eines: Wir stapeln Dinge. Ich staple eine Nachricht auf einer Überschrift auf einer Datentabelle. Wir stapeln Module in Schienen. Wir stapeln Kopien, Pillen und Symbolleisten in einer Karte, jede in einem Raster. Verdammt, unendliche Schriftrolle bedeutet unendlichen Stapel! Wir stapeln, stapeln, stapeln.

Konzept 5: Inline

Wir ordnen Objekte auch inline an und schließen sie wie Text von links oder rechts ein. Solche Objekte - Pillen, Markierungen, Paniermehl und mehr - können allein stehen oder sich mit anderen Objekten stapeln und vermischen.

Konzept 6: Gitter

Ah, das Gitter zum Schluss aufheben? Wenn sich der Abstand stabilisiert, werden wir die Ränder und Rinnen des Rasters überarbeiten und diese Räume an unserem magischen Ausgangspunkt und anderen Verwendungszwecken ausrichten.

In Bezug auf eine Kartenkomponente können die Polsterung und der Rand des Stils folgendermaßen aussehen:

Die fiktive Anwendung von Einschüben, Stapeln und Inlines (oder generischen Abstandshaltern - ack!) Auf eine Karte

Was wir gelernt haben

Wenn wir Raumkonzepte verwenden, müssen wir uns an etwas Neues anpassen. In meinem Team dauerte es einen Tag, bis leichte Skepsis dem neuen Modell Platz machte.

Lehren Sie ein Raumsystem visuell

Die meisten Mitbearbeiter sehen keinen Platz, ein Hauptgrund dafür, dass er so willkürlich angewendet wird. Aber jetzt haben wir ein System: eine begrenzte Anzahl von Konzepten, die jeweils eine begrenzte Auswahl an Optionen bieten.

Eine visuelle Referenz, ähnlich einem Spickzettel, räumlicher Konzepte

Zum Mitnehmen: Unterrichten Sie Ihre räumlichen Konzepte mit einem engen Dokumentendiagramm oder einem Spickzettel. Solche Referenzen beschleunigen, wie wir die Konzepte durch Design und Code erfassen, anwenden und aufrechterhalten.

Bieten Sie einfache Helfer an und überwachen Sie die Verwendung

Sei nicht dumm. Diese sechs Modelle lösen nicht alles. Wir haben hier noch einen Margin-Bottom angepasst und dort von Zeit zu Zeit gelassen. Es ist also gerechtfertigt, bewusstere Platzierungsoptionen mit allgemeineren Alternativen (wie $ space-m) zu verfolgen.

Zum Mitnehmen: Geben Sie allgemeine Optionen an, gehen Sie sparsam damit um und erwarten Sie, dass die Produktteams sie verwenden. Wenn sie bei einer Kritik oder einer Pull-Anfrage auftauchen, sollten Sie Ihre Teamkollegen über spezifischere Konzepte wie Einschub oder Stapel informieren.

Vermeiden Sie Variablennamen mit Padding oder Margin

Wenn Sie etwas Komplizierteres einführen, sprechen sich andere zu Recht für etwas Bekanntes aus, wie z und auch die richtigen Eigenschaften. margin wird zum Stapeln, Gittern und Inline-Platzieren verwendet. Und wie wäre es mit Nicht-Web-Plattformen, die kein HTML verwenden?

Imbiss: Konzepte von Eigenschaftsnamen trennen. Sie bestehen aus mehreren und beschränken die Wiederverwendung auf eine einzige Plattform.

Lösen Sie Kollisionen wie Linienhöhe systematisch

Einfache Regeln für das Auffüllen von Einfügungen und Stapelrändern kollidierten mit einem seit langem bekannten räumlichen Gegner: der Zeilenhöhe. Diese Interaktion erhöht den Platz unvorhersehbar und fügt ein Pixel über und unter unserer einfacheren Standardeinstellung von 16px hinzu.

Wir folgten jedoch einem Ideenfunken (@ kevinmpowells "Lassen Sie uns einen negativen Randbereich mit Pseudoelementen verwenden! Aber wie viel?") Mit etwas Mathematik (ich kann meinen Hochschulabschluss verwenden!). Das Ergebnis war eine Mischformel, die die Schriftgröße und die Zeilenhöhe kombinierte, um den Raum über und unter kollidierenden Objekten zu reduzieren.

Imbiss: Verzichten Sie ausnahmsweise nicht auf systematische Klarheit. Versuche sie zu lösen. Wenn Sie solche Nuancen auch mit ein wenig CSS-Trick überwinden können, können Sie ein einfacheres Konzept beibehalten, an das sich jeder halten kann.

Verwenden Sie räumliche Konzepte zum Wählen der Dichte

Mit Konzepten wie Einschub, Stapel und Gitter können Sie die Dichtewerte mit Gelassenheit einstellen. Durchsuchen Sie ein Repository, suchen Sie nach interessanten Einfügungen und Stapeln und erweitern oder überschreiben Sie diese Regeln, um die Anzeigedichte zu optimieren.

Links Standardabstand. Auf der rechten Seite wird die Stimmung durch Erhöhen der Einfügung um 50% erhöht.

Zum Mitnehmen: Sie können die räumliche Dichte sogar mit einem kaum zu übertreffenden primitiven Satz von Optionen einstellen. Ohne sie ist die Dichtesteuerung ein Traum. Mit ihnen können Sie schrittweise auf eine leistungsstarke Engine umsteigen, um den Platz mit großer Absicht und geringerem Risiko zu finden, anzupassen und zu optimieren.

Sie möchten sich auf ein Design-System einlassen oder müssen tiefer in die Diskussion über Produkte und Akteure eintauchen? EightShapes führt Workshops zur Systemplanung durch und coacht Kunden zu Designsystemen. Lass uns reden!