Tervezési rendszer: mi ez, miért és hogyan kell létrehozni

A tervezési rendszerek témája, úgy tűnik, már minden oldalról szóba került: sok cikket, bejegyzést, jelentést és egyéb anyagot találhat róla tervezési rendszer létrehozása. Ennek ellenére mindenkinek, aki találkozik ezzel a kifejezéssel, sok kérdése van. Megpróbálunk részletesen válaszolni a főbb kérdésekre:

• Mi az a tervezési rendszer?
• Mire való?

Mi az a tervezési rendszer?

A tervezési rendszer egy olyan struktúra, amely vizuális összetevőket, kódkönyvtárat és használati irányelveket tartalmaz.

A kezdő tervezők gyakran elkövetik azt a hibát, hogy leegyszerűsítik a koncepciót azzal, hogy a tervezési rendszert csak egy felhasználói felületnek tekintik – egy olyan dokumentumot, amely grafikus felületelemeket, tipográfiát és színeket tartalmaz.

A tervezési rendszer három szintből áll:

A UI készlet egy olyan termék vizuális nyelve, amelyhez tervezőrendszert hoznak létre. Ezek színek, betűtípusok, ikonok, gombok, felsorolásjelek, váltókapcsolók, csúszkák, képek, animáció. Az elemek változnak, és a digitális termék sajátosságaitól függenek. Mindegyik segít létrehozni a felület látható részét, amellyel a felhasználó interakcióba lép.

A keretrendszer egy kódkönyvtár, amely mindegyik elemhez van írva, valamint animációs beépülő modulok, címkék és címkék a navigációhoz.

Irányelvek sablonok és szabályok összessége a munkafolyamatot szervező elemek használatához. Az irányelveknek köszönhetően a tervezőt nem egyszerű feladatokban, hanem egy fejlesztőt azonnal bevonják.

Például az irányelvek meghatározzák a weboldalon lévő felugró ablak paramétereit: behúzások a szövegből, a cím és a törzsszöveg helye és mérete, egy gomb helye, és hogy az ablak hogyan fog kinézni kevesebb ill. több szöveget.

Tervező rendszerek típusai

Nincs egységes besorolás, de a szakértők kétféle tervezési rendszert különböztetnek meg – nyílt és zárt forráskódú.

A nyílt forráskódú rendszerekben bármely vállalat felhasználhat anyagokat, és adaptálhatja azokat projektjeihez – megváltoztathatja a gombok színét, betűtípusait és ikonjait. Például a Ant Design, Human Interface Guidelines és Material Design rendszerekben.

A zárt forráskódú tervezési rendszereket jellemzően egy adott céghez vagy termékhez hozzák létre. Ezek vagy teljesen zárt anyagok, csak az alkalmazottak számára hozzáférhetők, vagy részben nyitottak.

Hogyan készítsünk tervezési rendszert

A tervezési rendszerek fejlesztése az atomi tervezés elvein alapul. Az atomi tervezés olyan technika, amely öt szintű tervezési elemet foglal magában: atomokat, molekulákat, organizmusokat, mintákat és oldalakat.

Tervezési rendszer felépítése:

• atomok a legkisebb összetevők: gombok, ikonok, beviteli mezők és betűtípusok.
• molekulák több egyszerű elem kombinációja: két gomb, egy cím és egy beviteli sor, egy értesítési sáv, egy jelölőnégyzet és egy szöveg.
• organizmusok teljes összetevők: webhely fejléce, engedélyezési űrlap, termékkártyák és értesítési szalaghirdetés.
• sablonok – tartalom nélküli oldalelrendezések: menü, oldal megjelenése.
• Oldalak tartalommal teli oldalak.

Az általános algoritmus így néz ki:

• Válasszon színeket és betűtípusokat, állítson be moduláris rácsokat, és válasszon animációt, képeket és hangokat.
• Alapvető interfész elemek létrehozása.
• Tervezési elemek kombinációi és elrendezései.
• Hozzon létre egy listát az elemekről a szabályokkal együtt. Az útmutatóban adja meg, hogy mi az elem, hol használják, és milyen feladatokat old meg.

Jellemzően a tervezőrendszereket nem a semmiből hozzák létre, hanem a már kidolgozott anyagok: felhasználói felület készletek, irányelvek vagy márkakönyvek alapján épülnek fel.

Miért van szükség tervezési rendszerre?

Mint minden IT-terméknél, itt is nagyon fontos megválaszolni azt a kérdést: „Mire való a tervezőrendszer?” Vagy ahogy néhány kolléga a boltban megjegyzi, „na és mi van”?

A kérdésre adott válasz segít megérteni a termék értékét. Ennek egy része már a fent leírtakból is látható. De bontsuk fel, és nézzük meg mélyebben.

Automatizálás

Az automatizálás nyújtja a legnyilvánvalóbb előnyt. A tervezési rendszer segít a műveletek automatizálásában, így időt szabadít fel más feladatokra.

Iterativitás

A tervezési rendszerelemek módosításainak öröklése és automatikus alkalmazása értékes eszköz egy termékcsapat számára. Gyorsan kozmetikai vagy akár nagy változtatásokat is végrehajthat egy helyen. Ily módon mindig javíthatja a terméket.

Következetesség

A konzisztencia azt állítja, hogy a termékben ugyanazt a funkciót betöltő objektumoknak és entitásoknak egységre és hasonlóságra kell törekedniük.

Ha egy termékben hasonló funkciókat használunk, azok ismerősek és kényelmesek lesznek: ösztönösen megértjük a gomb működését és megjelenését, valamint azt, hogy hol helyezkedik el.

Reméljük, mindenki tanult valami értékeset a cikkből. És ismét meggyőződtünk arról, hogy egy cikken való munka strukturálja a tudást, és további tanulásra sarkall.