Ein einfacher Tipp zum Verwalten von ‘ungeraden’ Elementen in Ihrem Entwurfssystem

Ich habe kürzlich eine Frage darüber gelesen, wie die Konsistenz bei Objekten gewährleistet werden kann, die nicht genau zum Raster Ihres Entwurfssystems passen, z. ein 1-Pixel-Linienteiler oder ein 23-Pixel-großes und 17-Pixel-breites Symbol.

Unser Design Language System (DLS) basiert auf einem „harten“ 8-Punkt-Raster, mit dem sich leicht feststellen lässt, ob ein Fehler vorliegt. Infolgedessen behandeln wir ungewöhnlich geformte Elemente anders als einige andere Designteams:

Wir packen sie in eine Kiste!

Für uns bedeutet das, dass das kleinste Objekt in unserem DLS 8 x 8 px ist.

Beispiel: So sieht eine 1px-Trennlinie in unserem System aus:

Ich habe dem transparenten Rechteck aus Gründen der Klarheit einen Farbton hinzugefügt.

Die 1px-schwarze Linie ist perfekt in einem 8 x 8 Pixel großen Feld zentriert, sodass die Linie selbst das Raster „durchbricht“. Da die Linie jedoch in einem transparenten 8x8-Pixel-Feld eingekapselt ist, bietet sie sofort Vorteile im Vergleich zu einigen anderen Lösungen zur Behebung dieses Problems:

  • Beseitigt ungleichmäßige Abstände zwischen Elementen über und unter der Linie
  • Beseitigt die Notwendigkeit von Hacky-Lösungen (z. B. Verwendung von Schatten)
  • Macht die Gruppierung von Elementen schmerzlos

Der Hauptnachteil dieses Ansatzes besteht natürlich darin, dass Sie zwei Zeilen sehr nahe beieinander platzieren müssen, z. ein zweizeiliges Trennzeichen. Wir lösen dieses Problem, indem wir das Zeilenlayout in ein einzelnes Feld einfügen oder zwei Elemente verwenden, die eng beieinander liegen:

Links eine doppelte Zeile in einem einzelnen Feld. Auf der rechten Seite der gleiche Effekt durch Stapeln von zwei Instanzen dieses Elements und Umschalten der Sichtbarkeit einiger Linien. Viel hängt vom Abstand ab, den Sie erreichen müssen.

Wir verfolgen diesen Ansatz für alle Dinge, die mit dem Raster nicht gut zu tun haben. Beispielsweise werden alle unsere kleinen Symbole in 24 x 24 Pixel große Kästchen eingefügt, unabhängig davon, ob sie dem Raster entsprechen oder nicht.

Indem sichergestellt wird, dass jedes Element in unserem System mindestens 8 x 8 Pixel groß ist, können Sie ganz einfach sicherstellen, dass alle Elemente mit dem Raster übereinstimmen.

Ein Realitätscheck

Ein pixelgenaues Gitterdesign kann im Code selten erreicht werden. Es wird immer Kompromisse geben, die auf Zeit, Budget und Fähigkeiten der Entwickler basieren. Adaptive / Responsive Interfaces sollen per Definition das Raster durchbrechen.

Ich hoffe jedoch, dass Ihre Entwickler den Wert von „pixelgenauer Absicht“ erkennen können, wenn es darum geht, einen einheitlichen Abstand und eine einheitliche Größe der Elemente zu gewährleisten. Indem Sie Ihre „ungeraden“ Elemente in gitterfreundlichen Feldern aufbewahren, können Sie dieses Ziel auf einfache Weise erreichen.