Hierarchia
A Spaceship Design System rétegekből épül fel, amelyek mindegyike tisztaságot, struktúrát és célt ad hozzá. Ezek egy hierarchiát alkotnak, amely irányt mutat a tervezés, fejlesztés és termékek skálázása során – a legapróbb vizuális döntéstől a legátfogóbb felhasználói útig.
Az Atomic Design alapelveit követve fő erőforrásainkat a következő kategóriákba rendeztük, hogy minden csapat számára könnyebben használhatóak legyenek.
Alapok
Meghatározzák vizuális nyelvünk alapvető szabályait — színek, betűtípus, térközök, rácsok, mozgás és tokenek. Ezek biztosítják a következetes alapot a munkához.
Komponensek
Az alapelveket újrahasznosítható felületi elemekben keltik életre, amelyek mindennapi tervezési problémákat oldanak meg.
Sablonok
Bemutatják, hogyan működnek együtt a komponensek és minták a kontextusban, kész szerkezeteket biztosítva teljes oldalakhoz és élményekhez.
Minták
Bevált megoldásokat és legjobb gyakorlatokat rögzítenek, biztosítva, hogy munkánk minden érintkezési ponton következetes, hozzáférhető és felhasználóközpontú maradjon.
Alapok
A Spaceship Design System alapvető atomjai. Meghatározzák azokat a vizuális és szerkezeti szabályokat, amelyekre minden komponens és minta épül.
Szín
Meghatározza a márka- és funkcionális palettákat, amelyek biztosítják a harmóniát, akadálymentességet és rugalmasságot a termékek között.
Tipográfia
Hierarchiát és egyértelműséget teremt egy betűméret-skálával, amely megkönnyíti a tartalom olvasását és átfutását.
Térköz
Rendszerezett skálát biztosít a margókhoz, kitöltésekhez és az elrendezés ritmusához, hogy következetes felületeket tartsunk fenn.
Rácsok
Reszponzív elrendezéseket hoz létre, amelyek alkalmazkodnak az eszközökhöz, miközben megtartják a szerkezetet és az igazítást.
Mozgás
Átmeneteket és animációkat használ a figyelem irányítására, az állapotok kommunikálására és a természetes interakciók megteremtésére.
Design tokenek
Az alapértékeket kóddá alakítják, egyetlen igazságforrásként szolgálnak, miközben gyors és egyszerű frissítéseket tesznek lehetővé.
A világos alapok kevesebb akadályt, nagyobb befogadást és több időt jelentenek a valódi problémák megoldására, ahelyett, hogy mindent a nulláról kellene kezdeni.
Komponensek
Ezek a Spaceship Design System újrahasznosítható elemei. Mindegyik egy adott felhasználói felületi problémát old meg — a gomboktól és beviteli mezőktől a navigációig és visszajelző üzenetekig. Minden komponens akadálymentes, reszponzív, és könnyen alkalmazkodik különböző kontextusokhoz vagy eszközökhöz.
Az újrahasznosítható komponensek biztosítják, hogy minden általunk készített termék gyorsabban elkészüljön, és kapcsolódjon a nagyobb egészhez.
Sablonok
A sablonok hidat képeznek az építőelemek és a felhasználói élmény között. Összekapcsolják az alapokat és a komponenseket teljes oldalszintű kontextusokban, bemutatva, hogyan működik a rendszer a gyakorlatban.
Termékoldal sablonok
Magas szintű oldalstruktúrák landing és termékoldalakhoz, ahol a tervezők főként a tartalmat frissítik és a modulokat igazítják az adott kontextushoz.
Megosztható komponensek
Összetettebb, újrahasznosítható struktúrák, mint például az összehasonlító táblázatok vagy árkártyák, amelyek célja, hogy következetesen kezeljék a speciális helyzeteket a termékek között.
A kész szerkezeteknek köszönhetően a csapatok kevesebbet foglalkozhatnak az elrendezési döntésekkel, és többet a valódi felhasználói igények kielégítésével.
Minták
A minták a tesztelésből, visszajelzésekből és a valós használatból szerzett tapasztalatokat rögzítik, újrahasznosítható, szabványosított megoldásokká alakítva azokat. Minden minta a felhasználói szándékon alapul, legyen szó a fizetési folyamat egyszerűsítéséről, hibakezelésről vagy űrlapokon való végigvezetésről.
A bevált megoldások meghatározásával a minták célt adnak munkánknak, biztosítva, hogy minden élmény ne csak funkcionális, hanem átgondoltan tervezett is legyen.