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 oraz comp. Typ comp łączy zwykły piktogram z ikoną z Biblioteki Ikon Spaceship, co pozwala przekazywać bardziej złożone i szczegółowe koncepcje.
Wersje
Wszystkie piktogramy Spaceship są dostępne w dwóch wersjach: wypełnionej (podstawowej) oraz obrysowanej (drugorzędnej). Wersja obrysowana powinna być używana tylko wtedy, gdy piktogram powinien mieć mniejszą wagę wizualną niż sąsiadujące piktogramy, tekst lub elementy UI. Pomaga to ustalić hierarchię wizualną w złożonych układach.
Konstrukcja
Piktogramy opierają się na zestawie zasad — od podstawowej siatki po parametry gradientu i obrysu — aby zapewnić spójne i zrównoważone rezultaty.
Rozmiar
Piktogramy Spaceship są zaprojektowane tak, aby były skalowalne, zachowując spójność wizualną i zapewniając najlepszą czytelność. W naszym systemie projektowym dostępnych jest pięć rozmiarów piktogramów.
Kolory
Piktogramy zazwyczaj używają jednego koloru. Jedynym wyjątkiem jest typ comp, który może zawierać kolory marki lub powiadomień — więcej informacji znajdziesz poniżej. Aby zapewnić spójność w kontekstach UI, piktogramy korzystają z referencji kolorystycznych Spaceship Design System.
Domyślny kolor
Szary to domyślny kolor piktogramów i powinien być używany do przedstawiania wiadomości, akcji lub funkcji. W wyjątkowych przypadkach może być także używany dla produktów. Obrysowane piktogramy są dostępne tylko w domyślnym kolorze.
Kolory marki
SPS Blue, SPS Dark Gray lub biały mogą być używane zamiast domyślnego koloru, gdy potrzebny jest większy efekt wizualny lub aby wzmocnić tożsamość Spaceship. Zajrzyj na stronę z kolorami, aby uzyskać więcej szczegółów.
Kolory produktów
Główny kolor produktu powinien być używany dla piktogramów w kontekstach dedykowanych produktom (strony produktów, karty produktów itp.) dla wszystkich obecnych i przyszłych produktów.
Kolory powiadomień
Te kolory powinny być używane do wzmocnienia komunikatu powiadomienia. Wersja comp powinna być używana tylko w ogólnych komunikatach systemowych, a nie w stanach ostrzegawczych.
Wskazówki
Oto kilka przykładów, czego unikać podczas tworzenia i używania piktogramów.
Nie pozwalaj, aby kluczowe elementy zwykłego piktogramu znajdowały się w prawym dolnym rogu.
Nie używaj złożonych ani wielokolorowych gradientów w wersjach wypełnionych.
Nie mieszaj wypełnionych i obrysowanych elementów w typie comp.
Nie używaj innych kolorów w wersjach wypełnionych poza wymienionymi powyżej.
Nie używaj żadnego koloru w wersjach obrysowanych poza domyślnym kolorem.
Nie łącz koloru domyślnego z żadnym innym kolorem poza głównym kolorem marki Spaceship i kolorami powiadomień.