Piktogramok
Kis, egyszerű grafikai elemek, amelyek kiemelik a fontos webes komponenseket, és gyorsan, hatékonyan közvetítik az ötleteket.
A szó szerinti, funkcionális és geometrikus megközelítést követve piktogramjaink a lehető legtisztább formára egyszerűsítik az ötleteket, egyértelmű célt és időtlen egyszerűséget közvetítve.
Típus
A Spaceship piktogramok két típusban érhetők el: regular és comp. A comp típus egy regular piktogramot kombinál a Spaceship Iconography Library egyik ikonjával, így összetettebb és specifikusabb fogalmakat is ki tudunk fejezni.
Verziók
Minden Spaceship piktogram két verzióban érhető el: kitöltött (elsődleges) és körvonalas (másodlagos). A körvonalas verziót csak akkor szabad használni, ha egy piktogramnak kisebb vizuális hangsúlyra van szüksége, mint a közeli piktogramoknak, szövegnek vagy UI-elemeknek. Ez segít vizuális hierarchiát kialakítani az összetett elrendezésekben.
Felépítés
A piktogramok egy szabályrendszerre épülnek, az alapráccstól a színátmenet- és vonalparaméterekig, hogy egységes és kiegyensúlyozott eredményt biztosítsanak.
Méret
A Spaceship piktogramokat úgy terveztük, hogy skálázhatók legyenek, megőrizzék a vizuális egységességet, és a lehető legjobb olvashatóságot biztosítsák. Tervezési rendszerünkben öt piktogramméret található.
Színek
A piktogramok általában egyetlen árnyalatot használnak. Az egyetlen kivétel a comp típus, amely tartalmazhat márka- vagy értesítési színeket is; ezekről alább találsz további információt. Az UI-környezetekben való következetesség biztosítása érdekében a piktogramok a Spaceship Design System színhivatkozásait követik.
Alapértelmezett szín
A szürke a piktogramok alapértelmezett színe, és üzenetek, műveletek vagy funkciók megjelenítésére kell használni. Kivételes esetekben termékekhez is használható. A körvonalas piktogramok csak az alapértelmezett színben érhetők el.
Márkaszínek
Az SPS Blue, az SPS Dark Gray vagy a fehér az alapértelmezett szín helyett is használható, ha nagyobb vizuális hatásra van szükség, vagy a Spaceship arculatát szeretnénk erősíteni. További részletekért nézd meg a színekről szóló oldalt.
Termékszínek
A fő termékszínt kell használni a piktogramokhoz termékspecifikus környezetekben (termékoldalak, termékkártyák stb.) minden jelenlegi és közelgő termék esetében.
Értesítési színek
Ezeket a színeket értesítési üzenetek megerősítésére kell használni. A comp verzió csak általános rendszerüzenetekben használható, figyelmeztető állapotokban nem.
Útmutatás
Íme néhány példa arra, mit érdemes elkerülni a piktogramok létrehozásakor és használatakor.
Ne hagyd, hogy a regular piktogram kulcselemei a jobb alsó sarokba kerüljenek.
Ne használj összetett vagy többszínű színátmeneteket a kitöltött verziókban.
Ne keverd a kitöltött és a körvonalas elemeket a comp típusban.
A kitöltött verziókban ne használj más színeket a fent megadottakon kívül.
A körvonalas verziókban az alapértelmezett színen kívül ne használj más színt.
Ne kombináld az alapértelmezett színt a Spaceship elsődleges márkaszínein és az értesítési színeken kívül más színnel.