Pictograme
Elemente grafice mici și simple care îmbunătățesc componentele web principale, comunicând idei rapid și eficient.
Literale, funcționale și geometrice — pictogramele noastre distilează ideile la forma lor cea mai pură, transmițând un scop clar și o simplitate atemporală.
Tip
Pictogramele Spaceship sunt disponibile în două tipuri: regular și comp. Tipul comp combină o pictogramă regular cu o pictogramă din Biblioteca de iconografie Spaceship, permițându-ne să transmitem concepte mai complexe și mai specifice.
Versiuni
Toate pictogramele Spaceship sunt disponibile în două versiuni: umplută (primară) și conturată (secundară). Versiunea conturată ar trebui folosită doar atunci când o pictogramă are nevoie de mai puțină greutate vizuală decât pictogramele, textul sau componentele UI din apropiere. Acest lucru ajută la stabilirea unei ierarhii vizuale în layouturi complexe.
Construcție
Pictogramele se bazează pe un set de reguli, de la grila de bază până la parametrii pentru degradeu și contur, pentru a asigura rezultate consecvente și echilibrate.
Dimensiune
Pictogramele Spaceship sunt concepute pentru a fi scalabile, menținând consecvența vizuală și asigurând cea mai bună lizibilitate. Există cinci dimensiuni de pictograme în sistemul nostru de design.
Culori
Pictogramele folosesc, în general, o singură nuanță. Singura excepție este tipul comp, care poate include culori de brand sau de notificare, despre care vei găsi mai multe informații mai jos. Pentru a asigura consecvența în contexte UI, pictogramele urmează referințele de culoare din Spaceship Design System.
Culoare implicită
Griul este culoarea implicită pentru pictograme și ar trebui folosit pentru a reprezenta mesaje, acțiuni sau funcționalități. În cazuri excepționale, poate fi folosit și pentru produse. Pictogramele conturate sunt disponibile doar în culoarea implicită.
Culori de brand
SPS Blue, SPS Dark Gray sau alb pot fi folosite, de asemenea, în locul culorii implicite atunci când este nevoie de un impact vizual mai mare sau pentru a consolida identitatea Spaceship. Consultă pagina de culori pentru mai multe detalii.
Culori de produs
Culoarea principală a produsului ar trebui folosită pentru pictograme în contexte dedicate produsului (pagini de produs, carduri de produs etc.) pentru toate produsele actuale și viitoare.
Culori de notificare
Aceste culori ar trebui folosite pentru a întări un mesaj de notificare. Versiunea comp ar trebui folosită doar în mesaje generice de sistem și nu în stări de avertizare.
Îndrumare
Iată câteva exemple despre ce trebuie evitat la crearea și utilizarea pictogramelor.
Nu permite ca elementele-cheie ale pictogramei regular să ajungă în colțul din dreapta jos.
Nu folosi degradeuri complexe sau multicolore în versiunile umplute.
Nu combina elemente umplute și conturate în tipul comp.
Nu folosi alte culori în versiunile umplute în afară de cele identificate mai sus.
Nu folosi nicio altă culoare pentru versiunile conturate în afară de culoarea implicită.
Nu combina culoarea implicită cu nicio altă culoare în afară de culoarea principală de brand Spaceship și culorile de notificare.