Kujundussüsteemide vabastamine

Ühendatud väljundite edastamine vastuvõtjatele aja jooksul

Nr 1 seeriast, mis vabastab disainisüsteemid:
Väljundid | Kadents | Versioonid | Purunemine | Sõltuvused | Protsess

Ettevõtted mõistavad disainisüsteemi väärtust, kui tooted kasutusele võtavad süsteemi, et luua ja edastada kogemusi, mida kliendid kasutavad. Selle väärtusahela osana vabastab süsteem aja jooksul funktsioonid. See annab süsteemi kliendi kätte: disainerid ja insenerid teevad oma tööd.

Tugevad süsteemi meeskonnad võtavad väljalaskeid tõsiselt. Nad ei näe, et nad vabastavad ainult ühe teegi koodi. Selle asemel tarnivad nad palju rohkem väljundeid: disainimärke, dokumentatsiooni, kujundusvarasid ja muid ressursse.

See seeria kirjeldab disainisüsteemide vabastamise paljusid tahke. Kõigepealt määratletakse süsteemi palju väljundeid ja nende edastamise koht. Järgnevad artiklid käsitlevad kadentsi, versioonide koostamise, muudatuste purunemise, sõltuvuste ja samm-sammulise lähenemise teemasid.

Need lood kajastavad seda, mida olen õppinud süsteemide vabastamiseks, mis töötavad selliste meeskondadega nagu Discovery Education, Morningstar, Target ja REI. Neid tõstab kolleegide ülevaade Salesforce'is, Adobe'is, Atlassianis, Shopify ja Financial Timesis. Täname, et jagasite oma aega ja praktikaid lahkelt!

Väljundid: mis on välja antud?

Projekteerimissüsteemide programmid vabastavad mitut tüüpi väljundeid, mitte ainult koodi. Selle tulemusel peaks süsteem diferentseerima ja edastama seda versioonitud väljundite valikut arendajatele, kujundajatele ja teistele klientidele.

Kood, tõe allikas

Enamik süsteeme pakub esitluskihi koodi ühest tõest pärit allikat järgmiselt:

  • UI komponentide raamatukogu HTML-märgistusena ja CSS-na. Sageli nimetatakse seda CSS-iks, selle paketi tarbimine sõltub CSS-i kasutamisest või kompileerimisest kui järjepidevat visuaalse stiili lähtejoont koos HTML-i lõikude taaskasutamisega.

ja / või…

  • UI komponentide teek Javascripti kujul: Paljud süsteemid mähivad HTML-i ja CSS-i JavaScriptiga, et rikastada loogikat, kapseldada stiili ning hõlbustada valitud raamistikus integreerimist ja hooldamist. Kui enamik raamatukogusid on suunatud kindlale raamistikule (React, Vue, Ember, Angular,…), viitavad tööstussignaalid kõikidele raamistikele veebikomponentide valmistamisele. Minu kuus viimast süsteemipüüdlust? Hiljem 2017: vanilli HTML, vanilli HTML. 2018. aasta algus: reageerige, Vue. Hiljem 2018: veebikomponendid, veebikomponendid.

Lisaks sellele võib eraldi välja anda ka muid silmapaistvaid väljundeid:

  • Kujundusmärgid visuaalse stiili loomiseks semantiliselt tähenduslike vara-väärtuse paaride kaudu. Märgid on muutujad, mis on saadaval paljudes vormingutes platvormide (veeb, iOS, Android), eeltöötlejate (Sass ja LESS) ja raamistike (nt React) kasutamiseks. Mõned süsteemid haldavad hoidlaid tokeneid UI-komponendi koodist eraldi. Seetõttu võib nende teek - koos teiste rakendustega - sõltuda ka tokenist kui pakendist.
  • Demorakendused / saidid keskkonnana, mille komponentide teeki kasutades on üles ehitatud lehenäited. Demo on mõeldud ka õppematerjalide ja kiire prototüüpide loomiseks, sealhulgas disainerite poolt!
  • IOS-i, Androidi ja Windowsi jaoks sobivad platvormidevahelised komponendid.

Kujundusvarad

Enamik meeskondi piirdub arusaamisega sellest, mida nad vabastavad, lihtsa sõnaga „me vabastame koodi”. Neil on silm peal mõista, et nad avaldavad nii palju muid tööriistu, mis aja jooksul muutuvad. Nad sisaldavad:

  • Kujundamise tööriistakomplektid mallifailidena ja kujundustarkvaras pakutavad sümboliteegid. Täna, peaaegu alati eskiis. Homme Figma, Invisioonistuudio ja muud tärkavad konkurendid?
  • Fondid, ikoonid ja isegi Origami pildikomplektid tulenevad süsteemi sageli eeldatavast rollist selliste teekide levitamisel ja versioonistamisel.
  • Muud disainiressursid, näiteks illustratsioonid ja värvilised värvirikkad ASE / CLR-failid, hüppelauaks spetsiaalsete kunstiteoste jaoks. Need kogud muutuvad aeglaselt, vähem formaalselt ja kogukonna liikmete panuse kaudu, mis ei kuulu süsteemi tuumikmeeskonda. Kuid kliendi vaatenurgast ja süsteemi kommunikatsioonist on see osa süsteemist.

Dokumentatsiooni sait

Kujundussüsteemid vajavad kodu, kohta, millest kõik teavad, et nad leiavad tee kõige juurde, mis on uusim ja parim. Meeldejääva URL-i jaoks on see sageli ehitatud kasutajaülesande jaoks mõeldud kasutajaliidese komponentidega.

  • Dokumentatsioonisaidid kirjeldavad funktsioone (nt nuppu), uute kasutajate integreerimist ja käivitavad selliseid protsesse nagu abi saamine või panustamine. Meeskonnad ehitavad saite sagedamini staatilise saidigeneraatori abil või harvemini sisuhaldussüsteemi abil.
  • Dokumentatsiooni komponendid - koodinäide-paar, do-dont, hex-code, komponent-explorer - sõltuvad kasutajaliidese komponentide teegist ja teenindavad tavaliselt ainult doc-saiti. Selliseid komponente võib dokumenteeritud saidi versioonina versioonina või kolmanda eraldi versioonina teekina dokumentide ja kasutajaliidese komponentide suhtes, mille vahel nad asuvad.

Sihtkohad: kuhu see läheb?

Koodi ja kujundusvara levitamisel on ülioluline pakkuda seda koodi viisil, mida teie adopteerivad insenerid kõige hõlpsamini tarbivad. See tähendab, et mõned süsteemid peavad pakkuma valikuvõimalusi paljudest võimalustest, teised võivad aga tugineda ühele valikule kui organisatsiooni standardile.

Koodi jaoks

  • PARIM: registrid nagu npmjs (või sisemine vaste nagu Sonatype'i nexus), mis pakuvad juurdepääsu ja hallatud koodipakettide haldamist. Seejärel kasutavad arendajad selliseid vahendeid nagu bower, npm, lõng, veebipakk ja babel, et seda keskkonda sujuvalt oma keskkonda integreerida ja uuendada.
  • PAREM: CDN-ide hostitud varad versioonitud stiili ja skripti otselinkide jaoks, samuti fontide ja ikoonide jaoks, mis muutuvad aeglasemalt.
  • JUST OK: Hoidla juurdepääs Githubile, Bitbucketile vms kloonimiseks, kahvliks seadmiseks või muul viisil kompileerimiseks, kasutamiseks ja võib-olla - lõpuks - panustamiseks.
  • KUI VAJALIK: Otsesed koodide allalaadimised, tavaliselt kompileeritud või kompileerimata süsteemi varade ZIP-failide allalaadimine doc-saidilt kohalikuks kasutamiseks ja / või käsitsi integreerimiseks eraldi hoidlasse.

Bootstrap ja Material Design Lite on näited, mis vabastavad 2+ sihtkohta.

Kujundamise tööriistakomplektide jaoks

  • PARIM: loo uus kujundusriistamenüü sünkroonitud manustatud rajana, et mallist uus eksemplar luua.
  • PAREM: versioonitud ja levitatud lubadel põhineva varahaldustarkvara abil, nagu näiteks Abstract või Lingo.
  • HEA: otsene tööriistakomplekti allalaadimine dokumenteerimissaidilt, kus on selge versioon näidatud ja sellega seotud Alustamise dokument lähedal.
  • JUST OK: jagatud draiv hästi avaldatud ja võimalusel lihtsustatud sisemise URL-i kaudu (näiteks http: //system.uitoolkit).
  • MITTE HÄSTI: Maetud mõnele neljanda taseme lehele vaevalt korrastatud wiki-saidile, mida paljud inimesed ei leia.

Järgmine → # 2. Kadents