Piktogrammer
Små, enkla grafiska element som förbättrar viktiga webbkomponenter och snabbt och effektivt förmedlar idéer.
Bokstavliga, funktionella och geometriska — våra piktogram destillerar idéer till deras renaste form och förmedlar ett tydligt syfte och tidlös enkelhet.
Typ
Spaceship-piktogram finns i två typer: regular och comp. Comp-typen kombinerar ett regular-piktogram med en ikon från Spaceships Iconography Library, vilket gör att vi kan förmedla mer komplexa och specifika koncept.
Versioner
Alla Spaceship-piktogram finns i två versioner: fylld (primär) och konturerad (sekundär). Den konturerade versionen bör endast användas när ett piktogram behöver mindre visuell tyngd än närliggande piktogram, text eller UI-komponenter. Detta hjälper till att skapa visuell hierarki i komplexa layouter.
Konstruktion
Piktogram bygger på en uppsättning regler, från basrutnät till parametrar för gradient och linjebredd, för att säkerställa konsekventa och balanserade resultat.
Storlek
Spaceship-piktogram är utformade för att vara skalbara, bibehålla visuell konsekvens och säkerställa bästa möjliga läsbarhet. Det finns fem piktogramstorlekar i vårt designsystem.
Färger
Piktogram använder i allmänhet en enda nyans. Det enda undantaget är comp-typen, som kan innehålla varumärkes- eller aviseringsfärger, och mer information om detta finns nedan. För att säkerställa konsekvens i UI-sammanhang följer piktogram färgreferenserna i Spaceship Design System.
Standardfärg
Grå är standardfärgen för piktogram och bör användas för att representera meddelanden, åtgärder eller funktioner. I undantagsfall kan den också användas för produkter. Konturpiktogram finns endast i standardfärgen.
Varumärkesfärger
SPS Blue, SPS Dark Gray eller vit kan också användas i stället för standardfärgen när större visuell effekt behövs eller för att förstärka Spaceship-identiteten. Se färgsidan för mer information.
Produktfärger
Den huvudsakliga produktfärgen bör användas för piktogram i produktspecifika sammanhang (produktsidor, produktkort osv.) för alla nuvarande och kommande produkter.
Aviseringsfärger
Dessa färger bör användas för att förstärka ett aviseringsmeddelande. Comp-versionen bör endast användas i generiska systemmeddelanden och inte i varningslägen.
Vägledning
Här är några exempel på vad du bör undvika när du skapar och använder piktogram.
Låt inte viktiga element i regular-piktogrammet hamna i det nedre högra hörnet.
Använd inte komplexa eller flerfärgade gradienter i fyllda versioner.
Blanda inte fyllda och konturerade element i comp-typen.
Använd inte andra färger i de fyllda versionerna än de som anges ovan.
Använd ingen annan färg i konturerade versioner än standardfärgen.
Kombinera inte standardfärgen med någon annan färg än Spaceships primära varumärkesfärg och aviseringsfärger.