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ók legyenek.
Alapok
Meghatározzák vizuális nyelvünk alapvető szabályait — színek, tipográfia, térközök, rácsok, mozgás és tokenek. Egységes alapot adnak a munkánkhoz.
Komponensek
Életre keltik az alapok szabályait olyan újrahasználható felületi elemekben, amelyek a mindennapi tervezési problémákat oldják meg.
Sablonok
Bemutatják, hogyan működnek együtt a komponensek és a minták a kontextusban, kész struktúrákat biztosítva teljes oldalakhoz és élményekhez.
Minták
Rögzítik a bevált megoldásokat és legjobb gyakorlatokat, biztosítva, hogy munkánk minden érintkezési ponton következetes, akadálymentes é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, az akadálymentességet és a rugalmasságot a különböző termékekben.
Tipográfia
Hierarchiát és egyértelműséget teremt egy olyan tipográfiai skálával, amely könnyen olvashatóvá és áttekinthetővé teszi a tartalmat.
Térközök
Rendszerszintű skálát biztosít a margókhoz, belső térközökhöz és az elrendezés ritmusához a következetes felületek fenntartása érdekében.
Rácsok
Reszponzív elrendezéseket hoz létre, amelyek alkalmazkodnak a különböző eszközökhöz, miközben megőrzik a struktúrát és az igazítást.
Mozgás
Átmeneteket és animációt használ a figyelem irányítására, az állapotok kommunikálására és arra, hogy az interakciók természetesnek hassanak.
Design Tokenek
Az alapértékeket kódra fordítják, egyetlen hiteles forrásként szolgálva, miközben lehetővé teszik a gyors és egyszerű frissítéseket.
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 kezdenénk.
Komponensek
Ezek a Spaceship Design System újrahasználható elemei. Mindegyik egy adott felületi problémát old meg — a gomboktól és beviteli mezőktől a navigációig és a visszajelző üzenetekig. Minden komponens akadálymentes, reszponzív, és könnyen igazítható különböző kontextusokhoz vagy eszközökhöz.
Az újrahasználható komponensek biztosítják, hogy minden általunk készített termék gyorsabban elkészüljön, és kapcsolódjon az átfogóbb képhez.
Sablonok
A sablonok hidat képeznek az építőelemek és a felhasználói élmény között. Az alapokat és a komponenseket teljes oldalkontextusokká egyesítik, 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 az adott kontextushoz igazítják.
Megosztható komponensek
Az összetettebb, újrahasználható struktúrák, például az összehasonlító táblázatok vagy árkártyák, úgy készülnek, hogy következetesen kezeljék az egyedi helyzeteket a különböző termékekben.
A kész struktúráknak 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 kezelésével.
Minták
A minták összegzik, mit tanultunk a tesztelésből, a visszajelzésekből és a valós használatból, és ezeket újrahasználható, szabványosított megoldásokká alakítják. Minden minta a felhasználói szándékon alapul, legyen szó a fizetési folyamat egyszerűsítéséről, a hibák kezeléséről vagy a felhasználók űrlapokon való végigvezetéséről.
A bevált megoldások meghatározásával a minták célirányossá teszik a munkánkat, biztosítva, hogy minden élmény ne csak funkcionális, hanem átgondoltan megtervezett is legyen.