Piktogramme
Kleine, einfache grafische Elemente, die wichtige Webkomponenten aufwerten und Ideen schnell sowie effektiv vermitteln.
Wörtlich, funktional und geometrisch — unsere Piktogramme reduzieren Ideen auf ihre reinste Form und vermitteln einen klaren Zweck sowie zeitlose Einfachheit.
Typ
Spaceship-Piktogramme gibt es in zwei Typen: regular und comp. Der comp-Typ kombiniert ein regular-Piktogramm mit einem Symbol aus der Iconography Library von Spaceship, sodass wir komplexere und spezifischere Konzepte vermitteln können.
Versionen
Alle Spaceship-Piktogramme sind in zwei Versionen verfügbar: filled (primär) und outlined (sekundär). Die outlined-Version sollte nur verwendet werden, wenn ein Piktogramm weniger visuelles Gewicht als benachbarte Piktogramme, Text oder UI-Komponenten haben soll. Dies hilft dabei, in komplexen Layouts eine visuelle Hierarchie zu schaffen.
Konstruktion
Piktogramme basieren auf einer Reihe von Regeln, vom Grundraster bis hin zu Verlaufs- und Konturparametern, um konsistente und ausgewogene Ergebnisse sicherzustellen.
Größe
Spaceship-Piktogramme sind so gestaltet, dass sie skalierbar sind, visuelle Konsistenz bewahren und die bestmögliche Lesbarkeit gewährleisten. In unserem Designsystem gibt es fünf Piktogrammgrößen.
Farben
Piktogramme verwenden in der Regel einen einzelnen Farbton. Die einzige Ausnahme ist der comp-Typ, der Marken- oder Benachrichtigungsfarben enthalten kann; weitere Informationen dazu finden Sie unten. Um Konsistenz in UI-Kontexten sicherzustellen, 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. Konturierte 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 Einzelheiten finden Sie auf der Farbseite.
Produktfarben
Die Hauptproduktfarbe sollte für Piktogramme in produktspezifischen Kontexten (Produktseiten, Produktkarten usw.) für alle aktuellen und kommenden Produkte verwendet werden.
Benachrichtigungsfarben
Diese Farben sollten verwendet werden, um eine Benachrichtigung zu verstärken. Die comp-Version sollte nur in allgemeinen Systemmeldungen und nicht in Warnzuständen verwendet werden.
Richtlinien
Hier sind einige Beispiele dafür, was beim Erstellen und Verwenden von Piktogrammen vermieden werden sollte.
Achten Sie darauf, dass wichtige Elemente des regular-Piktogramms nicht in die untere rechte Ecke fallen.
Verwenden Sie in ausgefüllten Versionen keine komplexen oder mehrfarbigen Verläufe.
Mischen Sie im comp-Typ keine ausgefüllten und konturierten Elemente.
Verwenden Sie in den ausgefüllten Versionen keine anderen Farben als die oben genannten.
Verwenden Sie bei konturierten Versionen keine andere Farbe als die Standardfarbe.
Kombinieren Sie die Standardfarbe nicht mit anderen Farben als den primären Markenfarben von Spaceship und den Benachrichtigungsfarben.