Sprostitev sistemov za oblikovanje

Sčasoma zagotavljajo medsebojno povezane izhode posvojiteljem

# 1 od 6 v seriji Sprostitev sistemov za oblikovanje:
Rezultati | Kadenca | Različice | Razbijanje | Odvisnosti | Proces

Podjetja se zavedajo vrednosti sistema oblikovanja, ko izdelke sprejemajo za izdelavo in pošiljanje izkušenj, ki jih uporabljajo njihove stranke. Kot del te vrednostne verige sistem sčasoma sprosti funkcije. To daje sistem v roke kupca: oblikovalcev in inženirjev, ki opravljajo svoje delo.

Močne sistemske ekipe resno jemljejo javnost. Ne vidijo se, da sproščajo samo kodo knjižnice komponent. Namesto tega dajejo veliko več rezultatov: oblikovalske žetone, dokumentacijo, oblikovalska sredstva in druge vire.

Ta serija opisuje številne vidike sproščanja sistemov oblikovanja. Začne se z določitvijo številnih izhodov sistema in kje so ti podani. Naslednji članki zajemajo teme kadence, različice, ločitve sprememb, odvisnosti in pristop po korakih.

Te zgodbe odražajo tisto, kar sem se naučil, da sproščam sisteme v sodelovanju s skupinami, kot so Discovery Education, Morningstar, Target in REI. Zvišajo jih vpogledi kolegov iz Salesforce, Adobe, Atlassian, Shopify in Financial Times. Hvala, ker prijazno delite svoj čas in prakse!

Rezultati: Kaj je objavljeno?

Programi oblikovalskih sistemov sproščajo številne vrste izhodov, ne le kodnih. Kot rezultat, bi moral sistem razlikovati in sporočiti to paleto različnih rezultatov razvijalcem, oblikovalcem in drugim strankam.

Kodeks, vir resnice

Večina sistemov ponuja en vir resničnosti kode predstavitvene plasti kot:

  • Knjižnica komponent uporabniškega vmesnika kot oznaka HTML in CSS. Poraba tega paketa se pogosto imenuje "CSS" in temelji na uporabi ali sestavljanju CSS-ja kot dosledne vizualne sloge skupaj z ponovno uporabo odlomkov HTML.

in / ali…

  • Knjižnica komponent uporabniškega vmesnika kot Javascript: Mnogi sistemi zavijajo HTML in CSS z JavaScriptom, da utrdijo logiko, zaklenejo slog in olajšajo integracijo in vzdrževanje bolj neposredno v okviru izbire. Medtem ko večina knjižnic cilja določen okvir (React, Vue, Ember, Angular,…), industrijski signali predlagajo premik k izdelavi spletnih komponent za vse okvire. Zadnjih šest prizadevanj sistema? Kasneje 2017: HTML vanilije, HTML vanilije. Zgodnje leto 2018: React, Vue. Kasneje 2018: Spletne komponente, spletne komponente.

Poleg tega se drugi ločeni rezultati lahko sprostijo ločeno:

  • Oblikujte žetone, ki vzpostavljajo vizualni slog s pomensko pomenljivimi pari lastnosti in vrednosti. Žetoni so spremenljivke, ki so na voljo v številnih oblikah za uporabo na platformah (splet, iOS, Android), predprocesorjih (Sass in LESS) in okvirih (kot React). Nekateri sistemi upravljajo žetone v skladišču, ločeno od kode komponente UI. Kot rezultat, je njihova knjižnica - skupaj z drugimi izvedbami - lahko odvisna tudi od žetona kot paketa.
  • Demo aplikacije / spletna mesta kot okolje s primeri strani, zgrajenih s pomočjo knjižnice komponent. Predstavitvena različica je tudi za vaje in hitro izdelavo prototipov, tudi s strani oblikovalcev!
  • Komponente za več platform, primerne za iOS, Android in Windows.

Oblikovalska sredstva

Večina timov omejuje razumevanje tega, kar izdajajo, na preprost "izpustimo kodo". Odprlo se jim bo videnje, da objavijo toliko drugih orodij, ki se sčasoma spreminjajo. Vključujejo:

  • Oblikovalski kompleti orodij kot datoteke s predlogi in knjižnice simbolov, ki so na voljo v programski opremi za oblikovanje. Danes skoraj vedno Sketch. Jutri, Figma, Invision Studio in drugi novi tekmovalci?
  • Pisave, ikone in celo Origamijeve slike postavljajo zaradi pogosto pričakovane vloge sistema pri distribuciji in različici takšnih knjižnic.
  • Drugi viri oblikovanja, kot so ilustracija in barvne datoteke ASE / CLR, so odskočna deska za naročilo umetniških del. Te zbirke se spreminjajo počasi, manj formalno in s prispevki članov skupnosti, ki niso del osrednje ekipe sistema. Vendar je z vidika stranke in komunikacije sistema to del sistema.

Stran za dokumentacijo

Oblikovalski sistemi potrebujejo dom, kraj, za katerega vsi vedo, da lahko najdejo pot do vsega, kar bo imelo najnovejše in najboljše. Nameščen na zapomljivem URL-ju je pogosto sestavljen s komponentami uporabniškega vmesnika, ki so značilne za njegovo poslanstvo.

  • Dokumentacijska mesta opisujejo funkcije (kot je gumb), vkrcavanje novih uporabnikov in sprožijo procese, kot je pomoč ali prispevek. Skupine pogosteje gradijo spletna mesta s pomočjo generatorja statičnih spletnih mest ali manj pogosto s sistemom za upravljanje vsebin.
  • Dokumentacijske komponente - koda-primer-par, do-dont, heks-koda, raziskovalec komponent - so odvisne od knjižnice komponent uporabniškega vmesnika in ponavadi služijo samo doc mestu. Takšne komponente so lahko razstavljene na mestu dokumentacije ali kot tretja, knjižnica z različnimi različicami glede na doc in komponente uporabniškega vmesnika, med katerimi so počivane.

Destinacije: Kam gre?

Pri distribuciji kode in oblikovalskih sredstev je ključnega pomena, da kodo ponudite na načine, ki jih najlažje porabijo vaši inženirji. To pomeni, da morajo nekateri sistemi ponujati izbiro med številnimi možnostmi, medtem ko se drugi lahko zanašajo na eno samo izbiro kot organizacijski standard.

Za Kodeks

  • NAJBOLJŠE: Registri, kot so npmjs (ali notranji kolega, kot je Nenatus Sonatipa), ki omogočajo dostop in upravljanje sproščenih paketov kod. Razvijalci nato uporabljajo orodja, kot so bower, npm, preja, webpack in babel, da to kodo gladko integrirajo v svoje okolje.
  • BOLJE: Gostovana sredstva na CDN-jih za neposredne povezave do različnega sloga in skripta ter pisave in ikone, ki se spreminjajo počasneje.
  • JUST OK: Dostop do skladišča do Github-a, Bitbucket-a ali podobnega za kloniranje, vilice ali kako drugače sestavljanje, uporabo in morda - sčasoma - prispeva.
  • ČE JE POTREBNO: Prenosi neposrednih kod, ponavadi "ZIP datoteko" sestavljenih ali nedepiliranih sistemskih sredstev s spletnega mesta doc za lokalno uporabo in / ali ročno vključevanje v ločeno skladišče.

Bootstrap in Material Design Lite sta primera na 2+ destinacijah.

Za orodje za oblikovanje

  • NAJBOLJŠE: ustvarite Novo kot sinhronizirano, vdelano pot v meniju orodja za oblikovanje, da ustvarite nov primerek iz predloge.
  • BOLJI: Različen in razširjen z uporabo programske opreme za upravljanje premoženja na osnovi dovoljenja, kot sta Abstract ali Lingo.
  • DOBRO: Neposreden prenos orodij z dokumentacijske strani, z jasno različico, ki je navedena in z njo povezan dokument Dokumenti v bližini.
  • JUST OK: Skupni pogon prek dobro objavljenega in poenostavljenega notranjega URL-ja (na primer http: //system.uitoolkit).
  • NI DOBRO OB ENEM: Veliko ljudi ga ne morejo najti na neki strani četrtega nivoja na komaj organiziranem spletnem mestu wikija.

Naslednji → # 2. Kadenca