Ispuštanje dizajnerskih sustava

Davanje međusobno povezanih izlaza usvajačima s vremenom

Br. 1 od 6 iz serije Oslobađanje dizajnerskih sustava:
Izlazi | Kadenca | Verzije | Razbijanje | Ovisnosti | Postupak

Tvrtke shvaćaju vrijednost dizajnerskog sustava prilikom usvajanja proizvoda koji koriste sustav za pravljenje i isporuku iskustava koja koriste njihovi kupci. Kao dio tog lanca vrijednosti, sustav s vremenom pušta značajke. To sustav stavlja u ruke svog kupca: dizajnera i inženjera koji rade svoj posao.

Timovi jakog sustava shvaćaju izdanja ozbiljno. Ne vide sebe kako oslobađaju samo komponentni kôd biblioteke. Umjesto toga, oni isporučuju mnogo više rezultata: dizajnerske tokene, dokumentaciju, materijal dizajna i druge resurse.

Ova serija opisuje mnoge aspekte oslobađanja dizajnerskih sustava. Sve započinje definiranjem mnogih rezultata sustava i gdje se oni isporučuju. Daljnji članci pokrivaju teme kadence, verzije, rušenja promjena, ovisnosti i postupnog pristupa.

Ove priče odražavaju ono što sam naučio puštajući sustave radeći s timovima poput Discovery Education, Morningstar, Target i REI. Oni su povišeni iz uvida kolega iz Salesforcea, Adobea, Atlassiana, Shopifyja i Financial Timesa. Hvala što ljubazno dijelite svoje vrijeme i prakse!

Izlazi: Što je objavljeno?

Programi dizajnerskih sustava ispuštaju mnoge vrste izlaza, a ne samo kod. Kao rezultat, sustav bi trebao razlikovati i priopćiti programerima, dizajnerima i drugim kupcima ovaj raspon verzijskih rezultata.

Kod, izvor istine

Većina sustava nudi jedan izvor istinitosti koda sloja prezentacije kao:

  • Biblioteka korisničkih sučelja kao HTML označavanje i CSS. Potrošnja ovog paketa često se naziva "CSS" zasnovana je na korištenju ili sastavljanju CSS-a kao konzistentne osnovne vizualne postavke zajedno s ponovnom upotrebom HTML isječaka.

i / ili ...

  • Biblioteka korisničkih sučelja kao Javascript: Mnogi sustavi omotavaju HTML i CSS sa JavaScriptom kako bi učvrstili logiku, inkapsulirali stil i olakšali integraciju i održavanje izravnije u okviru izbora. Dok većina knjižnica cilja određeni okvir (React, Vue, Ember, Angular, ...), industrijski signali sugeriraju pomak u izradi web komponenti za sve okvire. Moja posljednja šest sustavnih napora? Kasnija 2017.: HTML vanilije, HTML vanilije. Početkom 2018. godine: React, Vue. Kasnije 2018. godine: web komponente, web komponente.

Pored toga, drugi istaknuti ishodi mogu se objaviti odvojeno:

  • Tokeni za dizajn koji uspostavljaju vizualni stil putem semantički značajnih parova svojstava i vrijednosti. Tokeni su varijable dostupne u mnogim formatima za upotrebu na platformama (web, iOS, Android), predprocesorima (Sass i LESS) i okvirima (poput React). Neki sustavi upravljaju tokenima u spremištu odvojeno od koda komponente UI. Kao rezultat, njihova knjižnica - zajedno s drugim implementacijama - može ovisiti i o tokenu kao paketu.
  • Demo aplikacije / web lokacije kao okruženje s primjerima stranica izgrađenim korištenjem biblioteke komponenata. Demonstracija je također za udžbenike i brzo prototipiranje, uključujući dizajnere!
  • Komponente na različitim platformama prikladne za iOS, Android i Windows.

Projektna imovina

Većina timova ograničava razumijevanje onoga što objavljuju na jednostavan „puštamo kôd.“ Otvoriće im se oči da shvate da objavljuju toliko mnogo drugih alata koji se vremenom mijenjaju. Oni uključuju:

  • Dizajnerski priručnici kao datoteke predložaka i biblioteke simbola ponuđeni u softveru za dizajn. Danas, gotovo uvijek Sketch. Sutra, Figma, Invision Studio i ostali natjecatelji u nastajanju?
  • Fontovi, ikone, pa čak i Origamijeve slike postavljaju zbog često očekivane uloge sustava u distribuciji i verziji takvih biblioteka.
  • Ostali dizajnerski resursi poput ilustracija i boja ASE / CLR datoteka u boji kao odskočna daska za izradu umjetničkih djela. Te se zbirke mijenjaju polako, manje formalno i putem priloga članova zajednice koji nisu dio temeljnog tima sustava. Pa ipak, iz perspektive kupca i komunikacije sustava, to je dio sustava.

Web mjesto za dokumentaciju

Sustavi dizajna trebaju dom, mjesto za koje svi znaju da mogu pronaći put do svega što će imati najnovije i najbolje. Smješten na memorivan URL, često je sastavljen od komponenti korisničkog sučelja koje su specifične za njegovu misiju.

  • Dokumentacijska web mjesta opisuju značajke (poput gumba), ukrcavanje novih korisnika i pokreću procese poput dobivanja pomoći ili doprinosa. Timovi češće grade web lokacije koristeći statički generator web mjesta ili rjeđe sa sustavom za upravljanje sadržajem.
  • Komponente dokumentacije - kôd-primjer-par, do-dont, heks-kôd, explorer komponenata - ovise o biblioteci komponenata korisničkog sučelja i obično poslužuju samo doc mjesto. Takve se komponente mogu pretvoriti s dokumentacijskim mjestom ili kao treća knjižnica s zasebnom verzijom u odnosu na doc i komponente korisničkog sučelja između kojih se nalaze.

Odredišta: Gdje to ide?

Pri distribuciji koda i dizajnerskih sredstava ključno je ponuditi kôd na način koji najlakše konzumiraju inženjeri usvajanja. To znači da neki sustavi moraju ponuditi izbor u mnogim mogućnostima, dok se drugi mogu osloniti na jedan izbor kao organizacijski standard.

Za kod

  • NAJBOLJE: Registri poput npmjs (ili unutarnjeg paketa poput Nenatusa Sonatipa) koji pružaju pristup izdatim kodnim paketima i upravljanje njima. Tada programeri koriste alate kao što su bower, npm, pređa, webpack i babel kako bi integrirali i nadogradili taj kod u svoje okruženje.
  • BOLJE: Gostovani sadržaji na CDN-ovima za izravne veze na verzijalni stil i skriptu kao i fontove i ikone koji se mijenjaju sporije.
  • JUST OK: Pristup spremištu za Github, Bitbucket ili slično kako bi se klonirao, forkirao ili na drugi način sastavio, upotrijebio i možda - na kraju - doprinijeti.
  • AKO JE POTREBNO: Izravni preuzimanja kodova, obično "ZIP datoteka" sastavljenih ili nekompiliranih sistemskih sredstava s doc web mjesta za lokalnu upotrebu i / ili ručnu integraciju u zasebno spremište.

Bootstrap i Material Design Lite primjeri su ispuštanja na 2+ odredišta.

Za dizajnerske alate

  • NAJBOLJE: Kreirajte Novo kao sinkronizirani, ugrađeni put u izborniku alata za dizajn kako biste stvorili novu instancu iz predloška.
  • BOLJE: Razrađeno i distribuirano pomoću softvera za upravljanje imovinom temeljenim na dozvolama kao što su Sažetak ili Lingo.
  • DOBRO: Izravni download alata s web stranice dokumentacije, s jasnom verzijom i pridruženim dokumentima Uvod u rad.
  • JUST OK: Zajednički pogon, putem dobro objavljenog i eventualno pojednostavljenog internog URL-a (kao što je http: //system.uitoolkit).
  • NIJE DOBRO KAO: Sahranjeni na nekoj stranici četvrtog nivoa na jedva organiziranom wiki mjestu mnogi ljudi ne mogu pronaći.

Sljedeće → # 2. Kadenca