Piktogramy
Małe, proste elementy graficzne, które wzbogacają kluczowe komponenty stron internetowych, szybko i skutecznie przekazując idee.
Dosłowne, funkcjonalne i geometryczne — nasze piktogramy sprowadzają idee do ich najczystszej formy, przekazując jasny cel i ponadczasową prostotę.
Typ
Piktogramy Spaceship występują w dwóch typach: regular i comp. Typ comp łączy zwykły piktogram z ikoną z biblioteki ikonografii Spaceship, co pozwala nam przekazywać bardziej złożone i szczegółowe koncepcje.
Wersje
Wszystkie piktogramy Spaceship są dostępne w dwóch wersjach: wypełnionej (podstawowej) i obrysowanej (drugorzędnej). Wersja obrysowana powinna być używana tylko wtedy, gdy piktogram potrzebuje mniejszego ciężaru wizualnego niż pobliskie piktogramy, tekst lub komponenty UI. Pomaga to ustanowić hierarchię wizualną w złożonych układach.
Konstrukcja
Piktogramy opierają się na zestawie zasad — od siatki bazowej po parametry gradientu i obrysu — aby zapewnić spójne i zrównoważone rezultaty.
Rozmiar
Piktogramy Spaceship zostały zaprojektowane tak, aby można je było skalować, zachowując spójność wizualną i zapewniając jak najlepszą czytelność. W naszym systemie projektowym istnieje pięć rozmiarów piktogramów.
Kolory
Piktogramy zazwyczaj wykorzystują jeden odcień. Jedynym wyjątkiem jest typ comp, który może zawierać kolory marki lub powiadomień; więcej informacji na ten temat znajdziesz poniżej. Aby zapewnić spójność w kontekstach UI, piktogramy są zgodne z odniesieniami kolorystycznymi Spaceship Design System.
Kolor domyślny
Szary jest domyślnym kolorem piktogramów i powinien być używany do przedstawiania komunikatów, działań lub funkcji. W wyjątkowych przypadkach może być również używany dla produktów. Obrysowane piktogramy są dostępne wyłącznie w kolorze domyślnym.
Kolory marki
SPS Blue, SPS Dark Gray lub biały mogą być również używane zamiast koloru domyślnego, gdy potrzebny jest większy efekt wizualny lub aby wzmocnić tożsamość Spaceship. Więcej szczegółów znajdziesz na stronie kolorów.
Kolory produktów
Główny kolor produktu powinien być używany dla piktogramów w kontekstach dedykowanych produktowi (strony produktów, karty produktów itp.) dla wszystkich obecnych i nadchodzących produktów.
Kolory powiadomień
Te kolory powinny być używane do wzmocnienia komunikatu powiadomienia. Wersja comp powinna być używana wyłącznie w ogólnych komunikatach systemowych, a nie w stanach ostrzegawczych.
Wytyczne
Oto kilka przykładów tego, czego należy unikać podczas tworzenia i używania piktogramów.
Nie umieszczaj kluczowych elementów zwykłego piktogramu w prawym dolnym rogu.
Nie używaj złożonych ani wielokolorowych gradientów w wersjach wypełnionych.
Nie mieszaj elementów wypełnionych i obrysowanych w typie comp.
Nie używaj innych kolorów w wersjach wypełnionych poza tymi wskazanymi powyżej.
Nie używaj żadnego koloru w wersjach obrysowanych poza kolorem domyślnym.
Nie łącz koloru domyślnego z żadnym innym kolorem poza podstawowym kolorem marki Spaceship i kolorami powiadomień.