Frá UI-kit til hönnunarkerfis

Ivi kvikmyndaupplifunin á netinu

Þegar við hugsuðum fyrst um að búa til okkar eigið hönnunar-til-kóða afhendingarkerfi snemma árs 2017, höfðu margir þegar talað um það, og sumir höfðu jafnvel innleitt það. Hins vegar er reynslan af því að smíða hönnunarkerfi sem ná yfir mismunandi kerfi enn að mestu óþekkt, og það eru enn engar skýrar og sannaðar uppskriftir sem lýsa tækni og aðferðum til að umbreyta hönnunarferlinu í virka vöru. Ennfremur vísar hugtakið „íhlutir í kóða“ oft til mjög ólíkra hluta.

Á sama tíma tvöfaldaði fyrirtækið starfsmannafjölda sinn ár eftir ár — það þurfti að stækka hönnunardeildina og hámarka ferla við að búa til og afhenda uppdráttartegundir til þróunaraðila. Margfaldaðu allt þetta með „dýragarðinum“ af kerfum sem þurfti að styðja, og niðurstaðan varð risavaxið klúður sem var einfaldlega ófært um að „gera hlutina rétt“ og afla tekna. Þróun kerfa fór oft fram samhliða, þar sem sama virkni var stundum gefin út á mismunandi kerfum með nokkurra mánaða töf.


Aðskilin sett af skipulagi fyrir hvern vettvang

Eins og venjulega byrjuðum við á þeim vandamálum sem hönnunarkerfi myndi hjálpa til við að leysa og mótuðum hönnunarkröfur. Auk þess að skapa sameinað sjónrænt tungumál, auka hraða uppdráttar og þróunar og bæta heildargæði vörunnar, var mikilvægt að sameina hönnunina eins mikið og mögulegt var. Þetta var nauðsynlegt til að gera virkniþróun mögulega á öllum kerfum okkar samtímis: Vefur, iOS, Android, snjallsjónvarp, tvOS, Android TV, Windows 10, Xbox One, PS4 og Roku — án þess að þurfa að vinna á hverjum kerfum fyrir sig. Og okkur tókst það!

Hönnun → Gögn

Þegar vöru- og þróunarteymin höfðu náð grundvallarsamkomulagi settumst við niður til að velja tæknilegan pakka og vinna úr smáatriðum alls ferlisins - frá uppdráttum til útgáfu. Til að gera hönnunarafhendingu til þróunar að fullu sjálfvirkan könnuðum við aðferð til að greina íhlutabreytur beint úr Sketch-skrám sem innihéldu uppdrætti. Það kom í ljós að það var flókið og hættulegt verkefni að finna nauðsynlega kóða og vinna úr þeim breytum. Í fyrsta lagi þyrftu hönnuðir að vera afar varkárir við að nefna öll frumlög; í öðru lagi virkaði það aðeins fyrir einföldustu íhlutina; og í þriðja lagi setti það framtíð alls verkefnisins í hættu að reiða sig á tækni frá þriðja aðila og kóðauppbyggingu upprunalegu Sketch-uppdráttarins. Við ákváðum að sleppa sjálfvirkni á þessu sviði. Þetta gaf hönnunarkerfisteyminu fyrsta einstaklinginn sinn, sem inntak er hönnunaruppdrættir og úttak er gögn sem lýsa öllum íhlutabreytum, stigveldis skipulögð samkvæmt lotufræðilegri hönnunaraðferðafræði.

Það eina sem eftir var að gera var að ákveða hvar og hvernig ætti að geyma gögnin, hvernig ætti að flytja þau í þróunarverkefni og hvernig ætti að túlka þau meðan á þróunarferlinu stendur á öllum þeim kerfum sem við styðjum. Kvöldið var ekki lengur rólegt... Reglulegir fundir vinnuhópsins, sem samanstóð af hönnuðum og teymisleiðtogum frá hverju kerfi, leiddu til samkomulags um eftirfarandi.

Við sundurliðum sjónrænu þættina handvirkt í frumefni: leturgerðir, liti, gegnsæi, spássíur, námundanir, tákn, myndir og lengd hreyfimynda. Úr þessum atriðum setjum við saman hnappa, innsláttarreiti, gátreiti, bankakortaviðmót og svo framvegis. Við úthlutum ómerkningarlegum nöfnum á stíl á hvaða stigi sem er, nema tákn eins og borgarnöfn, nýmfunöfn, Pokémon-nöfn eða bílamerki. Það er aðeins eitt skilyrði: listinn ætti ekki að vera tæmdur áður en stílarnir klárast - sýningin verður að halda áfram! Látið þó ekki of mikið á merkingarfræðina berast, því þið þurfið ekki að bæta við miðjuhnappi á milli „lítils“ og „miðlungs“, til dæmis.

Myndrænt tungumál

Forritarar fengu það verkefni að finna út hvernig ætti að geyma og senda gögn svo þau væru samhæf öllum kerfum, en hönnunarteymið fékk það verkefni að búa til viðmótsþætti sem myndu líta jafn vel út og virka á skilvirkan hátt á öllum studdum tækjum.

Við höfðum áður prófað flesta hönnunarþætti í Windows 10 appi, sem á þeim tíma var nýr vettvangur fyrir okkur og krafðist hönnunar og þróunar frá grunni. Með því að hanna það gátum við undirbúið og prófað flesta íhlutina og skilið hverjir þeirra yrðu innifaldir í framtíðar Ivy hönnunarkerfinu. Án slíks sandkassa hefði sambærileg reynsla aðeins verið möguleg með fjölmörgum endurtekningum á núverandi kerfum, sem hefði tekið meira en ár.

Endurnotkun eins íhluta á mismunandi kerfum dregur verulega úr fjölda útlita og gagnasafni hönnunarkerfisins, þannig að hönnunarteymið þurfti að leysa annað vandamál sem áður hafði ekki verið kannað í vöruhönnun og þróunaraðferðum - til dæmis, hvernig á að endurnýta hnapp fyrir síma og spjaldtölvur á sjónvörpum? Og hvernig á að meðhöndla leturgerðir og stærðir þátta á svo ólíkum kerfum?

Við þurftum greinilega að hanna einingakerfi fyrir mismunandi kerfi sem skilgreindi nauðsynlegar stærðir texta og þátta fyrir hvert kerfi. Við völdum stærð og fjölda kvikmyndaplakata sem við vildum sýna á hverjum skjá sem upphafspunkt fyrir kerfið og út frá því mótuðum við reglu fyrir smíði dálka í kerfinu, að því gefnu að breidd eins dálks væri jöfn breidd plakatsins.

Nú þurfum við að staðla útlitið fyrir alla stóra skjái og passa þá inn í sameiginlegt grindarnet. Apple TV og Roku eru hönnuð fyrir 1920×1080, Android TV fyrir 960×540, og snjallsjónvörp, eftir framleiðanda, geta verið þau sömu eða 1280×720. Þegar appið er birt á Full HD skjám, er 960 margfaldað með 2, 1280 með 1,33, og 1920 birtist eins og það er.

Við sleppum leiðinlegum smáatriðum og komumst að þeirri niðurstöðu að allir skjáir, þar á meðal sjónvarpsskjáir, falla undir eina hönnun hvað varðar frumefni og stærðir þeirra, og allir sjónvarpsskjáir eru sértilfelli af sameiginlegu þverpallakerfi, sem samanstendur af fimm eða sex dálkum, eins og venjuleg spjaldtölva eða skrifborð. Ef þú hefur áhuga á smáatriðunum, vinsamlegast deildu þeim í athugasemdunum.

Sameinað notendaviðmót fyrir alla palla

Til að birta nýjan eiginleika þurfum við ekki að búa til útlit fyrir hvert kerfi, auk aðlögunarhæfra útgáfa fyrir hvert. Það er nóg að sýna eitt útlit og aðlögunarhæfni þess fyrir alla kerfi og tæki af hvaða breidd sem er: símar - 320-599, allt annað - 600-1280.

Gögn → þróun

Auðvitað, þótt við vildum ná fram fullkomlega sameinaðri hönnun, þá hefur hver vettvangur sína einstöku eiginleika. Þó að bæði vef- og snjallsjónvarpspallar noti ReactJS + TypeScript stafla, keyrir snjallsjónvarpsappið á eldri WebKit og Presto viðskiptavinum og getur því ekki deilt stílum með vefnum. Og fréttabréf í tölvupósti eru neydd til að nota töflubundið útlit. Enginn af þeim kerfum sem ekki nota HTML notar eða hyggst nota React Native eða neinn annan valkost, af ótta við skerðingu á afköstum vegna mikils fjölda sérsniðinna útlita, safna með flókinni uppfærslurökfræði, mynda og myndbanda. Þess vegna hentar algeng aðferðin að afhenda tilbúna CSS stíla eða React íhluti ekki okkur. Þess vegna ákváðum við að senda gögn á JSON sniði og lýsa gildunum á óhlutbundinn, yfirlýsingarlegan hátt.

Þannig að eignin rounding: 8 Windows 10 forrit breytist í CornerRadius="8", vefur — border-radius: 8px, Android — android:radius="8dp", iOS — self.layer.cornerRadius = 8.0.
Eign offsetTop: 12 Sami vefþjónn getur túlkað það í mismunandi tilfellum sem top, margin-top, padding-top eða transform

Yfirlýsingar þýða einnig að ef kerfið getur tæknilega ekki notað eiginleika eða gildi hans, þá getur það hunsað hann. Hvað varðar hugtök höfum við búið til eins konar esperantó: sum atriði eru tekin úr Android, önnur úr SVG og önnur úr CSS.

Ef tiltekinn vettvangur krefst þess að þættir séu birtir á annan hátt, höfum við innleitt möguleikann á að flytja samsvarandi gagnaöflun sem sérstaka JSON skrá. Til dæmis ræður „fókus“-staðan fyrir snjallsjónvörp breytingu á staðsetningu textans undir veggspjaldinu. Fyrir þennan vettvang mun „inndráttar“-eiginleikagildið í þessum íhlut innihalda nauðsynlega 8 inndráttarpunkta. Þó að þetta flæki innviði hönnunarkerfisins, veitir það aukið frelsi, sem gerir okkur kleift að stjórna sjónrænum „ólíkindum“ kerfanna sjálf, frekar en að vera haldin í gíslingu af þeirri arkitektúr sem við höfum búið til.

Myndtákn

Táknmyndagerð í stafrænni vöru er alltaf stórt og flókið undirverkefni sem oft krefst sérstaks hönnuðar. Það eru alltaf fjölmargir táknmyndir, hver með mörgum stærðum og litum, og kerfi krefjast þeirra yfirleitt í mismunandi sniðum. Í stuttu máli var engin ástæða til að samþætta ekki allt þetta í hönnunarkerfið.

Glýfur eru hlaðnir inn í SVG vektorsniði og litagildi eru sjálfkrafa skipt út fyrir breytur. Forrit fyrir notendur geta fengið þau tilbúin til notkunar — í hvaða sniði og lit sem er.

forskoðun

Auk JSON-gagnanna skrifuðum við forskoðunartól fyrir íhluti — JS-forrit sem keyrir JSON-gögn samstundis í gegnum merkingar- og stílframleiðendur sína og birtir ýmsar útgáfur af hverjum íhlut í vafranum. Í meginatriðum er forskoðunin sami biðlarinn og forritin á kerfinu og vinnur með sömu gögnum.

Auðveldasta leiðin til að skilja hvernig íhlutur virkar er að hafa samskipti við hann. Þess vegna notuðum við ekki verkfæri eins og Storybook, heldur bjuggum til gagnvirka forskoðun — þú getur snert, bent og smellt. Þegar nýr íhlutur er bætt við hönnunarkerfið birtist hann í forskoðuninni og gefur kerfum viðmiðunarpunkt fyrir útfærslu hans.

Skjöl

Byggt á gögnum sem send eru til kerfisins í JSON-sniði er íhlutaskjölun sjálfkrafa búin til. Listi yfir eiginleika og möguleg gildistegund fyrir hvern eiginleika er lýst. Eftir sjálfvirka myndun er hægt að fínstilla upplýsingarnar handvirkt og bæta við textalýsingu. Forskoðun og skjölun eru víxlvísuð á íhlutastigi og allar skjölunarupplýsingar eru aðgengilegar forriturum sem viðbótar JSON-skrár.

Úreltari

Önnur nauðsyn var hæfni til að skipta út og uppfæra núverandi íhluti með tímanum. Hönnunarkerfið hefur lært að upplýsa forritara um hvaða eiginleika eða jafnvel heila íhluti ætti ekki að nota og fjarlægja þá um leið og þeir eru ekki lengur notaðir á öllum kerfum. Þetta ferli krefst enn mikillar handvirkrar vinnu, en við erum að ná árangri.

Þróun á viðskiptavinahlið

Flóknasta skrefið var án efa að túlka hönnunarkerfisgögnin í kóða allra þeirra kerfa sem við styðjum. Þótt mátkerfi á vefnum séu ekkert nýtt af nálinni, áttu forritarar með innbyggð iOS og Android snjallsímaforrit erfitt með að átta sig á hvernig ætti að vinna með þau.

Til að setja upp skjái iOS forrita notum við tvær grunnaðferðir sem iviUIKit býður upp á: ókeypis elementauppsetning og elementasafnsuppsetning. Við notum VIPER og öll samskipti við iviUIKit eru einbeitt í View, en flest samskipti við Apple UIKit eru einbeitt í iviUIKit. Stærðir og staðsetningar elementa eru skilgreindar með dálkum og setningafræðiuppbyggingum sem virka ofan á innfæddum iOS SDK takmörkunum, sem gerir þær hagnýtari. Þetta hefur sérstaklega einfaldað vinnu okkar með UICollectionView. Við skrifuðum nokkrar sérsniðnar útlitsumbúðir, þar á meðal nokkrar frekar flóknar. Kóðinn á biðlarasíðunni er nú lágmarks og lýsandi.

Til að búa til stíla í Android verkefninu okkar notum við Gradle, sem breytir hönnunarkerfisgögnum í XML stíla. Við höfum nokkra rafala á mismunandi stigum:

• BasicGreinar frumstæð gögn fyrir hærra stigs rafala.
• AuðlindSækja myndir, tákn og aðra grafík.
• ÍhlutirÞau eru skrifuð fyrir hvern íhlut og lýsa hvaða eiginleika og hvernig á að þýða þá í stíl.

Útgáfur forrita

Eftir að hönnuðir búa til nýjan íhlut eða endurhanna núverandi íhlut eru þessar breytingar færðar inn í hönnunarkerfið. Forritarar á hverjum vettvangi betrumbæta kóðagerð sína til að styðja þessar breytingar. Kóðann er síðan hægt að nota til að útfæra nýja virkni þar sem þörf er á þessum íhlut. Þess vegna á sér samspil við hönnunarkerfið ekki stað í rauntíma, heldur aðeins við smíði nýrra útgáfa. Þessi aðferð gerir einnig kleift að hafa betri stjórn á gagnaflutningsferlinu og tryggir virkni kóðans í þróunarverkefnum viðskiptavina.

Niðurstöður

Það er næstum ár síðan hönnunarkerfið varð hluti af innviðunum sem styðja við þróun Ivi netkvikmyndahússins og nokkrar ályktanir má þegar draga af því:

• Þetta er stórt og flókið verkefni sem krefst stöðugs sérstaks fjármagns.
• Þetta gerði okkur kleift að búa til okkar eigið einstaka sjónræna tungumál sem hentar mörgum kerfum og uppfyllir þarfir myndbandsþjónustu á netinu.
• Við höfum ekki lengur palla sem eru sjónrænt og virknilega eftirbátar.

Forskoðun á íhlutum Ivy hönnunarkerfisins - hönnun.ivi.ru

Heimild: www.habr.com