Dizaino sistemų išleidimas

Laikui bėgant pristatyti suderintus išvestis adapteriams

1 iš 6 serijos, išleidžiančios dizaino sistemas, 1:
Rezultatai | Kadencija | Versijos | Laužymas | Priklausomybės | Procesas

Kompanijos supranta projektavimo sistemos vertę, kai priimant produktus naudojama sistema, kuria ir perduodama patirtis, kuria naudojasi klientai. Kaip šios vertės grandinės dalis, bėgant laikui sistema išlaisvina savybes. Tai suteikia sistemą klientui - dizaineriams ir inžinieriams, atliekantiems savo darbą.

Stiprios sistemos komandos rimtai vertina išleidimus. Jie nemano, kad išleido tik komponentų bibliotekos kodą. Vietoj to, jie pateikia dar daugiau rezultatų: projektavimo žetonus, dokumentaciją, projektavimo išteklius ir kitus išteklius.

Ši serija apibūdina daugybę išleidžiamų dizaino sistemų aspektų. Pirmiausia apibrėžiama daugybė sistemos išėjimų ir kur jie pristatomi. Tolesniuose straipsniuose aptariamos kadencijos, versijų kūrimo, pakeitimų, priklausomybių ir laipsniško požiūrio temos.

Šios istorijos atspindi tai, ką išmokau paleisti sistemas dirbdamas su tokiomis komandomis kaip „Discovery Education“, „Morningstar“, „Target“ ir REI. Juos padidina „Salesforce“, „Adobe“, „Atlassian“, „Shopify“ ir „Financial Times“ kolegų įžvalgos. Ačiū, kad maloniai pasidalinote savo laiku ir praktika!

Išėjimai: kas išleista?

Projektavimo sistemų programos išleidžia ne tik kodą, bet ir daugelio rūšių išėjimus. Todėl sistema turėtų diferencijuoti ir perduoti šį versijų išvesties diapazoną kūrėjams, dizaineriams ir kitiems klientams.

Kodas, tiesos šaltinis

Daugelis sistemų siūlo vieną pateikimo lygmens kodo tiesos šaltinį:

  • UI komponentų biblioteka kaip HTML žymėjimas ir CSS. Šis paketas, dažnai vadinamas „CSS“, sunaudojamas naudojant arba sudarant CSS kaip nuoseklų vaizdinio stiliaus pagrindą kartu su pakartotiniais HTML fragmentų naudojimu.

ir (arba)…

  • UI komponentų biblioteka kaip „Java“ scenarijus: Daugelis sistemų aplanko HTML ir CSS su „JavaScript“, kad sustiprintų logiką, apimtų stilių ir palengvintų integraciją ir priežiūrą tiesiogiai pasirinktoje sistemoje. Nors dauguma bibliotekų yra nukreiptos į konkrečią struktūrą („React“, „Vue“, „Gintaro spalvos“, „Kampinis“ ir kt.), Pramonės signalai rodo perėjimą prie visų rėmų interneto komponentų kūrimo. Mano paskutinės šešios sistemos pastangos? Vėliau 2017 m .: vanilinis HTML, vanilinis HTML. 2018 m. Pradžia: reaguokite, Vue. Vėliau 2018 m .: Žiniatinklio komponentai, Žiniatinklio komponentai.

Be to, atskirai gali būti išleidžiami kiti svarbūs išėjimai:

  • Dizaino žetonai sukuria vizualinį stilių semantiškai reikšmingomis turto ir vertės poromis. Žetonai yra įvairių formatų kintamieji, skirti naudoti įvairiose platformose (žiniatinklyje, „iOS“, „Android“), pirminiuose procesoriuose („Sass“ ir „LESS“) ir rėmuose (pvz., „React“). Kai kurios sistemos valdo žetonus saugykloje atskirai nuo vartotojo sąsajos komponento kodo. Dėl to jų biblioteka kartu su kitomis diegimo galimybėmis taip pat gali priklausyti nuo tokeno kaip paketo.
  • Demonstracinės programos / svetainės kaip aplinka su puslapių pavyzdžiais, sukurtais naudojant komponentų biblioteką. Demonstracija taip pat skirta mokymo programoms ir greitam prototipų kūrimui, įskaitant dizainerių!
  • Kryžminės platformos komponentai, tinkantys „iOS“, „Android“ ir „Windows“.

Dizaino turtas

Dauguma komandų supranta, ką jie išleidžia, iki paprasto „mes išleidžiame kodą“. Jiems akivaizdu, kad jie supranta, jog jie paskelbia tiek daug kitų įrankių, kurie laikui bėgant keičiasi. Jie įtraukia:

  • Projektavimo įrankių rinkiniai kaip šablonų failai ir simbolių bibliotekos, siūlomos projektavimo programinėje įrangoje. Šiandien beveik visada eskizas. Rytoj „Figma“, „Invision Studio“ ir kiti besiformuojantys konkurentai?
  • Šriftai, piktogramos ir net „Origami“ vaizdų rinkiniai dėl dažnai tikėtino sistemos vaidmens platinant ir verčiant tokias bibliotekas.
  • Kiti dizaino šaltiniai, tokie kaip iliustracijos ir spalvų pavyzdžiai, ASE / CLR failai, kaip tramplinas į pasirinktą meno kūrinį. Šios kolekcijos keičiasi lėtai, mažiau formaliai ir dėl bendruomenės narių indėlio, kuris nėra sistemos pagrindinės komandos dalis. Tačiau kliento požiūriu ir sistemos komunikacija yra sistemos dalis.

Dokumentacijos svetainė

Dizaino sistemoms reikalingi namai, vieta, kurią visi žino, kad gali rasti kelią į viską, kas turės naujausią ir geriausią. Patalpintas įsimenamoje URL, dažnai sukurtas su UI komponentais, skirtais jo misijai.

  • Dokumentacijos svetainės apibūdina funkcijas (pvz., Mygtuką), naujų vartotojų įtraukimą ir suaktyvina tokius procesus, kaip pagalbos gavimas ar prisidėjimas. Komandos svetaines stato dažniau naudodamos statinį svetainių generatorių arba rečiau naudodamos turinio valdymo sistemą.
  • Dokumentacijos komponentai - kodų pavyzdžių pora, do-dont, hex-code, komponentų tyrinėtojas - priklauso nuo vartotojo sąsajos komponentų bibliotekos ir dažniausiai aptarnauja tik doc svetainę. Tokie komponentai gali būti versuojami kartu su dokumentacijos svetaine arba kaip trečioji, atskirai versijuojama biblioteka, atsižvelgiant į dokumentus ir vartotojo sąsajos komponentus, tarp kurių jie yra.

Paskirties vietos: kur ji eina?

Platinant kodą ir dizaino išteklius, labai svarbu pasiūlyti kodą, kurį lengviausiai naudoja jūsų įdarbinantys inžinieriai. Tai reiškia, kad kai kurios sistemos turi pasiūlyti daugybę variantų, o kitos gali pasikliauti vienu pasirinkimu kaip organizacijos standartu.

Kodui

  • GERIAUSI: registrai, tokie kaip npmjs (arba vidinis atitikmuo, pavyzdžiui, „Sonatype“ ryšys), teikiantys prieigą prie išleistų kodų paketų ir jų valdymą. Tada kūrėjai naudoja tokius įrankius, kaip „bower“, „npm“, siūlai, „webpack“ ir „babel“, kad sklandžiai integruotų ir atnaujintų šį kodą savo aplinkoje.
  • GERESNIS: CDN saugomas turtas, skirtas tiesioginėms nuorodoms į versijos stilių ir scenarijų, taip pat šriftai ir piktogramos, kurie keičiasi lėčiau.
  • TEISINGAI Gerai: saugyklos prieiga prie „Github“, „Bitbucket“ ar pan.
  • JEI REIKIA: Tiesioginis kodo atsisiuntimas, paprastai sudarytas arba nesukurtas sistemos turtas „ZIP faile“ iš „doc“ svetainės, skirtas vietiniam naudojimui ir (arba) rankiniam integravimui į atskirą saugyklą.

„Bootstrap“ ir „Material Design Lite“ yra pavyzdžiai, skirti naudoti daugiau nei 2 vietose.

Dizaino įrankių rinkiniams

  • GERIAUSIAS: sukurkite naują kaip sinchronizuotą, įterptą kelią projektavimo įrankio meniu, kad iš šablono sukurtumėte naują egzempliorių.
  • GERIAU: Versija ir platinama naudojant leidimais pagrįstą projektavimo turto valdymo programinę įrangą, tokią kaip „Abstract“ ar „Lingo“.
  • GERAS: Tiesioginis įrankių rinkinio atsisiuntimas iš dokumentacijos svetainės, nurodžius aiškią versiją ir su ja susiejant „Getting Started doc“.
  • JUST OK: Bendras diskas per gerai viešintą ir galbūt supaprastintą vidinį URL (pvz., Http: //system.uitoolkit).
  • NĖRA GERAI: Palaidotas keliuose ketvirto lygio puslapiuose vos organizuotoje wiki svetainėje, kurios daugelis žmonių neranda.

Kitas → # 2. Kadencija