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 Iconography Library a Spaceship, permițându-ne să transmitem concepte mai complexe și particulare.
Versiuni
Toate pictogramele Spaceship sunt disponibile în două versiuni: pline (primare) și conturate (secundare). Versiunea conturată ar trebui folosită doar atunci când o pictogramă necesită o greutate vizuală mai mică decât pictogramele, textele sau componentele UI din apropiere. Acest lucru ajută la stabilirea ierarhiei vizuale în machete complexe.
Construcție
Pictogramele sunt bazate pe un set de reguli, de la grila de bază la parametrii de gradient și contur, pentru a asigura rezultate consistente și echilibrate.
Dimensiune
Pictogramele Spaceship sunt proiectate să fie scalabile, menținând consistența vizuală și asigurând cea mai bună lizibilitate. În sistemul nostru de design există cinci dimensiuni de pictograme.
Culori
Pictogramele folosesc, în general, o singură nuanță. Singura excepție este tipul comp, care poate include culori de brand sau de notificare, pentru care veți găsi mai multe informații mai jos. Pentru a asigura consistenț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 în locul culorii implicite atunci când este nevoie de un impact vizual mai mare sau pentru a întări identitatea Spaceship. Consultați pagina de culori pentru detalii suplimentare.
Culori de produs
Culoarea principală a produsului ar trebui folosită pentru pictogramele din 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.
Ghidaj
Iată câteva exemple de ce trebuie evitat la crearea și utilizarea pictogramelor.
Nu permiteți ca elementele cheie ale pictogramei regular să fie poziționate în colțul din dreapta jos.
Nu folosiți degradeuri complexe sau multicolore în versiunile pline.
Nu amestecați elemente pline și conturate în tipul comp.
Nu folosiți alte culori în versiunile pline decât cele identificate mai sus.
Nu folosiți nicio altă culoare pe versiunile conturate în afară de culoarea implicită.
Nu combinați culoarea implicită cu nicio altă culoare în afară de culoarea principală de brand Spaceship și culorile de notificare.