Tervező rendszerek kiadása

Összekapcsolt kimenetek átadása az átvevők számára az idő múlásával

A Design Systems kiadó sorozat 1. és 6. száma:
Kimenetek | Cadence | Verziók | Törés | Függőségek | Folyamat

A vállalatok felismerik a tervezőrendszer értékét, amikor a termékek bevezetése olyan rendszert használ, amely tapasztalatokat tesz és átad az ügyfeleknek. Ennek az értékláncnak a részeként a rendszer idővel felszabadítja a szolgáltatásokat. Ez a rendszert az ügyfelek kezébe adja: a tervezők és a mérnökök munkáját végzik.

Az erős rendszerrel foglalkozó csapatok komolyan veszik a kiadásokat. Nem látják, hogy csak komponens könyvtári kódot bocsátanak ki. Ehelyett még sok más outputot szolgáltatnak: tervezési tokeneket, dokumentációt, tervezési eszközöket és egyéb erőforrásokat.

Ez a sorozat a megjelenő tervezőrendszerek sok aspektusát leírja. Először a rendszer sok kimenete és azok szállítási helyének meghatározásával kezdődik. A következő cikkek a ritmus, a verziókészítés, a változások törése, a függőségek és a lépésről-lépésre történő témákat tárgyalják.

Ezek a történetek tükrözik azt, amit megtanultam a rendszerek felszabadításával kapcsolatban, mint például a Discovery Education, a Morningstar, a Target és a REI. Ezeket kiemeli a Salesforce, az Adobe, az Atlassian, a Shopify és a Financial Times munkatársainak betekintése. Köszönjük, hogy szívesen megosztotta idejét és gyakorlatait!

Kimenetek: Mi jelent meg?

A tervezőrendszer-programok nemcsak kódot, hanem sokféle kimenetet is kiadnak. Ennek eredményeként egy rendszernek meg kell különböztetnie és közölnie kell ezt a verziószámú kimenetet a fejlesztőkkel, tervezőkkel és más ügyfelekkel.

Kód, az igazság forrása

A legtöbb rendszer egyetlen forrást kínál a prezentációs réteg kódjaként, mint:

  • UI komponens könyvtár HTML jelölőként és CSS-ként. Ezt a csomagot, amelyet gyakran „CSS-nek” neveznek, a CSS egységes vizuális stílus alapvonalaként történő felhasználásakor vagy összeállítása jelenti, a HTML-kódrészletek újbóli felhasználásával együtt.

és / vagy ...

  • Az UI Components Library Javascript formátumban: Számos rendszer HTML-t és CSS-t csomagol JavaScript-sel a logika megerősítésére, a stílus beillesztésére, valamint az integráció és karbantartás közvetlen megkönnyítésére a választott keretek között. Míg a legtöbb könyvtár egy meghatározott keretet céloz meg (React, Vue, Ember, Angular,…), az iparági jelek arra utalnak, hogy az összes keret webes alkotóelemeinek elkészítéséhez fordulnak. Az utolsó hat rendszer erőfeszítéseim? Később 2017: Vanília HTML, Vanília HTML. 2018 eleje: Reakció, Vue. Később 2018: Webes összetevők, Webes összetevők.

Ezenkívül más kiemelkedő kimenetek külön is kiadhatók:

  • Tervező tokenek, amelyek szemantikailag értelmes ingatlan-érték párok segítségével hozzák létre a vizuális stílust. A tokenek változók, amelyek számos formátumban elérhetők platformok (web, iOS, Android), előfeldolgozók (Sass és LESS) és keretek (mint például a React) használatához. Egyes rendszerek a lerakatban lévő tokeneket kezelik az UI összetevőkódjától elkülönítve. Ennek eredményeként a könyvtáruk - más megvalósításokkal együtt - a token-től is csomagként függhet.
  • Bemutató alkalmazások / webhelyek környezetként, az oldalpéldákkal az összetevő könyvtár felhasználásával. A bemutató oktatóanyagokhoz és gyors prototípus készítéshez készült, többek között a tervezők által!
  • IOS, Android és Windows rendszerekhez használható, platformközi összetevők.

Design eszközök

A legtöbb csapat az egyszerű „mi kiadjuk a kódot” korlátozza a kiadás megértését. Szem előtt áll a számukra, hogy rájöjjenek, hogy olyan sok más eszközt jelentenek meg, amelyek idővel megváltoznak. Tartalmazzák:

  • Tervező eszközkészletek mint sablon fájlok és szimbólum könyvtárak, amelyeket a tervező szoftver kínál. Ma szinte mindig vázlatot készítünk. Holnap a Figma, az Invision Studio és más feltörekvő versenytársak?
  • Betűtípusok, ikonok és még az Origami képkészletei is, mivel a rendszer gyakran várható szerepet játszik az ilyen könyvtárak terjesztésében és verziózásában.
  • Egyéb tervezési források, mint például az ábra és a színminták ASE / CLR fájlok, mint ugródeszka a személyre szabott műalkotásokhoz. Ezek a gyűjtemények lassan, kevésbé formálisan és a közösség tagjai hozzájárulásával változnak, amelyek nem képezik részét a rendszer központi csapatának. Ugyanakkor az ügyfél szempontjából és a rendszer kommunikációjáról a rendszer része.

Dokumentációs oldal

A tervező rendszereknek otthonra van szükségük, olyan helyre, ahol mindenki tudja, hogy megtalálja az utat mindazhoz, amely a legfrissebb és legjobban lesz. Egy emlékezetes URL-ben található, és gyakran a küldetésének speciális felhasználói felületeivel épül.

  • A dokumentációs oldalak leírják a funkciókat (például egy gombot), az új felhasználókat, és olyan folyamatokat indítanak el, mint a segítségnyújtás vagy a hozzájárulás. A csapatok gyakrabban építnek fel webhelyeket statikus helygenerátor segítségével, vagy ritkábban tartalomkezelő rendszerrel.
  • A dokumentációs összetevők - kódpélda-pár, do-dont, hex-code, komponent-explorer - az UI összetevő-könyvtárától függenek, és általában csak a doc helyet szolgálják fel. Az ilyen összetevők verziója lehet a dokumentációs oldallal, vagy harmadik, külön-külön verziózott könyvtárként a doc és az UI komponensek között, amelyek között vannak.

Úticélok: hová megy?

Kód- és formatervezési eszközök elosztásakor elengedhetetlen, hogy a kódot olyan módokon kínálják, amelyeket az örökbefogadó mérnökök a legkönnyebben fogyasztanak. Ez azt jelenti, hogy egyes rendszereknek sokféle lehetőség közül választást kell kínálniuk, mások pedig egyetlen választásra támaszkodhatnak, mint szervezeti standard.

Kódhoz

  • LEGJOBB: olyan nyilvántartások, mint az npmjs (vagy egy belső megfelelő, mint például a Sonatype nexus), amelyek hozzáférést biztosítanak a kiadott kódcsomagokhoz és azok kezelését. A fejlesztők ezután olyan eszközöket használnak, mint a bower, npm, fonal, webpack és babel, hogy a kódot zökkenőmentesen integrálják és frissítsék környezetükben.
  • JOBB: A CDN-k tárolt eszközei a linkedett stílushoz és szkripthez való közvetlen hivatkozáshoz, valamint a lassabban változó betűtípusokhoz és ikonokhoz.
  • JUST OK: Raktárhoz való hozzáférés a Githubhoz, a Bitbuckethez vagy hasonlókhoz, hogy klónozzon, villát alakítson ki, vagy más módon fordítson össze, használjon és talán - esetleg - hozzájáruljon.
  • HA SZÜKSÉGES: Közvetlen kódletöltések, általában a ZIP oldalból összeállított vagy nem összeállított rendszereszközök a doc webhelyről, helyi felhasználásra és / vagy kézi integrálásra külön lerakatba.

A Bootstrap és az Material Design Lite olyan példák, amelyek két vagy több célállomásra vonatkoznak.

Tervező eszközkészletekhez

  • LEGJOBB: Új létrehozása szinkronizált, beágyazott útvonalként a tervező eszköz menüjében új példány létrehozásához sablonból.
  • BETTER: Verziója és terjesztése engedély alapú tervezési eszközkezelő szoftver, például Abstract vagy Lingo felhasználásával.
  • JÓ: Közvetlen eszközkészlet-letöltés a dokumentációs webhelyről, egyértelmű verzióval és a hozzá tartozó kezdődokumentummal a közelben.
  • JUST OK: Megosztott meghajtó, jól közzétett és esetleg egyszerűsített belső URL-en keresztül (például http: //system.uitoolkit).
  • NEM JÓ TÖRTÉNT: Egy alig szervezett wiki webhely egy negyedik szintű oldalára temették el, amelyet sok ember nem talál.

Következő → # 2. hanglejtés