Piktogramme
Kleine, einfache grafische Elemente, die wichtige Webkomponenten aufwerten und Ideen schnell sowie effektiv vermitteln.
Wörtlich, funktional und geometrisch – unsere Piktogramme destillieren Ideen auf ihre reinste Form und vermitteln klare Absicht sowie zeitlose Einfachheit.
Typ
Spaceship-Piktogramme gibt es in zwei Typen: regulär und comp. Der Comp-Typ kombiniert ein reguläres Piktogramm mit einem Icon aus der Spaceship Iconography Library und ermöglicht es uns, komplexere und spezifischere Konzepte zu vermitteln.
Versionen
Alle Spaceship-Piktogramme sind in zwei Versionen verfügbar: ausgefüllt (primär) und umrandet (sekundär). Die umrandete Version sollte nur verwendet werden, wenn ein Piktogramm weniger visuelles Gewicht als benachbarte Piktogramme, Text oder UI-Komponenten benötigt. Dies hilft, eine visuelle Hierarchie in komplexen Layouts zu schaffen.
Konstruktion
Piktogramme basieren auf einer Reihe von Regeln, von der Grundrasterung bis zu Verlauf- und Strichparametern, um konsistente und ausgewogene Ergebnisse zu gewährleisten.
Größe
Spaceship-Piktogramme sind so gestaltet, dass sie skalierbar sind, visuelle Konsistenz bewahren und die beste Lesbarkeit gewährleisten. In unserem Designsystem gibt es fünf Piktogrammgrößen.
Farben
Piktogramme verwenden in der Regel einen einzigen Farbton. Die einzige Ausnahme ist der Comp-Typ, der Marken- oder Benachrichtigungsfarben enthalten kann; dazu finden Sie unten weitere Informationen. Um Konsistenz in UI-Kontexten zu gewährleisten, folgen Piktogramme den Farbreferenzen des Spaceship Design Systems.
Standardfarbe
Grau ist die Standardfarbe für Piktogramme und sollte verwendet werden, um Nachrichten, Aktionen oder Funktionen darzustellen. In Ausnahmefällen kann sie auch für Produkte verwendet werden. Umrandete Piktogramme sind nur in der Standardfarbe verfügbar.
Markenfarben
SPS Blue, SPS Dark Gray oder Weiß können ebenfalls anstelle der Standardfarbe verwendet werden, wenn mehr visuelle Wirkung benötigt wird oder um die Spaceship-Identität zu stärken. Weitere Details finden Sie auf der Farbseite.
Produktfarben
Die Hauptproduktfarbe sollte für Piktogramme in produktbezogenen Kontexten (Produktseiten, Produktkarten usw.) für alle aktuellen und zukünftigen Produkte verwendet werden.
Benachrichtigungsfarben
Diese Farben sollten verwendet werden, um eine Benachrichtigungsnachricht zu verstärken. Die Comp-Version sollte nur in allgemeinen Systemnachrichten und nicht in Warnzuständen verwendet werden.
Leitfaden
Hier sind einige Beispiele dafür, was Sie beim Erstellen und Verwenden von Piktogrammen vermeiden sollten.
Lassen Sie nicht zu, dass Schlüsselelemente des regulären Piktogramms in die untere rechte Ecke fallen.
Verwenden Sie keine komplexen oder mehrfarbigen Verläufe in ausgefüllten Versionen.
Mischen Sie keine ausgefüllten und umrandeten Elemente im Comp-Typ.
Verwenden Sie in den ausgefüllten Versionen keine anderen Farben als die oben genannten.
Verwenden Sie bei umrandeten Versionen keine andere Farbe als die Standardfarbe.
Kombinieren Sie die Standardfarbe nicht mit anderen Farben außer den Spaceship-Markenprimär- und Benachrichtigungsfarben.