Od UI-kita do sustava dizajna

Ivy iskustvo online kina

Kada smo početkom 2017. godine prvi put razmišljali o stvaranju vlastitog sustava isporuke od dizajna do koda, mnogi su već pričali o tome, a neki su to i činili. Međutim, do danas se malo zna o iskustvima izgradnje višeplatformskih sustava dizajna, a nisu postojali jasni i provjereni recepti koji opisuju tehnologije i metode za takvu transformaciju procesa implementacije dizajna u proizvod koji već radi. A pod "komponentama u kodu" često misle na vrlo različite stvari.

U međuvremenu, tvrtka je iz godine u godinu udvostručila svoje osoblje - bilo je potrebno povećati odjel dizajna i optimizirati procese stvaranja i prijenosa izgleda za razvoj. Sve to pomnožimo sa “zoološkim vrtom” platformi koje treba podržati i dobijemo privid babilonskog pandemonija, koji jednostavno nije u stanju “normalno raditi” i stvarati prihode. Razvoj platformi često je tekao paralelno, te je ista funkcionalnost mogla biti puštena na različite platforme s odmakom od nekoliko mjeseci.


Odvojeni setovi izgleda za svaku platformu

Tradicionalno, počeli smo s problemima koje bi projektni sustav pomogao riješiti i formulirali zahtjeve za njegov dizajn. Osim stvaranja jedinstvenog vizualnog jezika, povećanja brzine izgleda i razvoja te poboljšanja kvalitete proizvoda u cjelini, bilo je od ključne važnosti unificirati dizajn što je više moguće. Ovo je neophodno kako bi razvoj funkcionalnosti postao moguć na svim našim platformama istovremeno: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - bez rada na svakoj od njih posebno. I uspjeli smo!

Dizajn → podaci

Kada su postignuti temeljni dogovori između odjela za proizvode i razvoj, sjeli smo da odaberemo tehnološki skup i razradimo detalje cijelog procesa - od izgleda do izdanja. Kako bismo u potpunosti automatizirali proces prijenosa dizajna u razvoj, istražili smo opciju raščlanjivanja parametara komponente izravno iz Sketch datoteka s izgledima. Ispostavilo se da je pronalaženje dijelova koda koji su nam potrebni i izdvajanje potrebnih parametara složen i opasan pothvat. Prvo, dizajneri će morati biti izuzetno oprezni u imenovanju svih slojeva izvornog koda, drugo, ovo funkcionira samo za najjednostavnije komponente, i treće, ovisnost o tuđoj tehnologiji i strukturi koda originalnog Sketch izgleda ugrožava budućnost cijelog projekt. Odlučili smo napustiti automatizaciju u ovom području. Tako se pojavila prva osoba u timu projektantskog sustava čiji su input dizajn layout-i, a izlaz podaci koji opisuju sve parametre komponenti i hijerarhijski poredani prema metodologiji atomic design-a.

Ostalo je samo gdje i kako pohraniti podatke, kako ih prenijeti u razvoj i kako ih interpretirati u razvoju na svim platformama koje podržavamo. Večer je prestala biti troma... Rezultat redovitih sastanaka radne skupine koju su činili dizajneri i voditelji timova sa svake platforme bio je dogovor o sljedećem.

Ručno analiziramo vizualu na atomske elemente: fontove, boje, prozirnost, uvlake, zaokruživanja, ikone, slike i trajanja animacija. I iz toga prikupljamo gumbe, unose, potvrdne okvire, widgete za bankovne kartice itd. Dodjeljujemo nesemantička imena stilovima bilo koje razine, osim ikonama, na primjer, imena gradova, imena nimfi, Pokemona, automobila brandovi... Postoji samo jedan uvjet - popis ne smije biti iscrpljen prije nego što stilovi završe - show must go! Ne treba se zanositi semantikom, tako da ne morate dodati srednji gumb između "mali" i "srednji", na primjer.

Vizualni jezik

Programeri su morali razmišljati o tome kako pohraniti i prenijeti podatke na način koji odgovara svim platformama, a dizajn je morao dizajnirati elemente sučelja koji mogu izgledati dobro i učinkovito raditi na cijeloj floti podržanih uređaja.

Prethodno smo već uspjeli “testirati” većinu elemenata dizajna u aplikaciji za Windows 10, koji je u to vrijeme za nas bio nova platforma, odnosno zahtijevao je renderiranje i razvoj “od nule”. Njegovim crtanjem uspjeli smo pripremiti i testirati većinu komponenti i razumjeti koje bi od njih trebale biti uključene u budući sustav dizajna Eevee. Bez takvog sandboxa takvo bi se iskustvo moglo dobiti samo velikim brojem iteracija na platformama koje već rade, a to bi trajalo više od godinu dana.

Ponovno korištenje istih komponenti na različitim platformama značajno smanjuje broj izgleda i niz podataka sustava dizajna, tako da je dizajn morao riješiti još jedan problem, koji prije nije bio opisan u praksi dizajna i razvoja proizvoda - kako, na primjer, može li se gumb za telefone i tablete ponovno koristiti na televizorima? I što bismo trebali učiniti s veličinama fontova i elemenata na tako različitim platformama?

Očito je bilo potrebno dizajnirati međuplatformsku modularnu mrežu koja bi postavila veličinu teksta i elemenata koji su nam potrebni za svaku pojedinu platformu. Kao polazište za rešetku odabrali smo veličinu i broj filmskih plakata koje želimo vidjeti na pojedinom platnu te smo na temelju toga formulirali pravilo za konstrukciju stupaca rešetke, pod uvjetom da je širina jednog stupca jednaka na širinu plakata.

Sada moramo dovesti sve velike zaslone u istu veličinu izgleda i uklopiti ih u zajedničku mrežu. Apple TV i Roku dizajnirani su u veličini od 1920x1080, Android TV - 960x540, Smart TV-i, ovisno o dobavljaču, isti su, ali ponekad 1280x720. Kada se aplikacija renderira i prikazuje na Full HD zaslonima, 960 se množi s 2, 1280 se množi s 1,33, a 1920 se ispisuje kako jest.

Preskačući dosadne detalje, došli smo do zaključka da su općenito svi zasloni, uključujući i televizijske ekrane, u pogledu elemenata i njihovih veličina, obuhvaćeni jednim dizajnom, a svi televizijski ekrani poseban su slučaj opće platformske mreže, i sastoji se od pet ili šest stupaca, poput prosječnog tableta ili stolnog računala. Koga zanimaju detalji neka se javi u komentare.

Jedno korisničko sučelje za sve platforme

Sada, da bismo nacrtali novu značajku, ne moramo crtati izglede za svaku platformu, plus opcije prilagodljivosti za svaku od njih. Dovoljno je prikazati jedan izgled i njegovu prilagodljivost za sve platforme i uređaje bilo koje širine: telefoni - 320-599, sve ostalo - 600-1280.

Podaci → razvoj

Naravno, koliko god željeli postići potpuno jedinstven dizajn, svaka platforma ima svoje jedinstvene značajke. Iako i web i Smart TV koriste skup ReactJS + TypeScript, aplikacija Smart TV radi na naslijeđenim WebKit i Presto klijentima i stoga ne može dijeliti stilove s webom. A bilteni e-pošte potpuno su prisiljeni raditi s tabličnim izgledom. U isto vrijeme, niti jedna platforma koja nije html ne koristi niti planira koristiti React Native ili bilo koji od njegovih analoga, bojeći se degradacije performansi, budući da imamo previše prilagođenih izgleda, kolekcija sa složenom logikom ažuriranja, slika i videa. Stoga nam uobičajena shema isporuke gotovih CSS stilova ili React komponenti nije prikladna. Stoga smo odlučili prenijeti podatke u JSON formatu, opisujući vrijednosti u apstraktnom deklarativnom obliku.

Dakle vlasništvo rounding: 8 Aplikacija Windows 10 pretvara se u CornerRadius="8", mreža - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Vlasništvo offsetTop: 12 isti web klijent u različitim slučajevima može protumačiti kao top, margin-top, padding-top ili transform

Deklarativnost opisa također podrazumijeva da ako platforma tehnički ne može koristiti svojstvo ili njegovu vrijednost, može ga zanemariti. Što se tiče terminologije, napravili smo svojevrsni esperanto jezik: nešto je preuzeto iz Androida, nešto iz SVG-a, nešto iz CSS-a.

Ako na određenoj platformi trebate drugačije prikazati elemente, implementirali smo mogućnost prijenosa odgovarajuće generacije podataka u obliku zasebne JSON datoteke. Na primjer, stanje "u fokusu" za Smart TV diktira promjenu položaja teksta ispod postera, što znači da će za ovu platformu ova komponenta u vrijednosti svojstva "uvlaka" sadržavati 8 točaka uvlačenja koja su joj potrebna. Iako ovo komplicira infrastrukturu sustava dizajna, daje dodatni stupanj slobode, ostavljajući nam mogućnost da sami upravljamo vizualnom "različitošću" platformi, a ne da budemo taoci arhitekture koju smo stvorili.

Piktogrami

Ikonografija u digitalnom proizvodu uvijek je voluminozan i nije najjednostavniji potprojekt, često zahtijeva posebnog dizajnera. Glifova uvijek ima puno, svaki od njih ima nekoliko veličina i boja, a platforme ih obično trebaju u različitim formatima. Općenito, nije bilo razloga da se sve to ne stavi u sustav dizajna.

Glifi se učitavaju u SVG vektorskom formatu, a vrijednosti boja se automatski zamjenjuju varijablama. Klijentske aplikacije mogu ih dobiti spremne za korištenje - u bilo kojem formatu i boji.

Predprosmotr

Povrh JSON podataka, napisali smo alat za pregled komponenti - JS aplikaciju koja prosljeđuje JSON podatke u hodu kroz svoje oznake i generatore stilova te prikazuje različite varijacije svake komponente u pregledniku. U biti, preview je potpuno isti klijent kao aplikacije platforme i radi s istim podacima.

Najlakši način da shvatite kako određena komponenta radi je interakcijom s njom. Stoga nismo koristili alate poput Storybooka, već smo napravili interaktivni pregled - možete dodirivati, pokazivati, klikati... Prilikom dodavanja nove komponente u sustav dizajna, ona se pojavljuje u pregledu kako bi se platforme imale na što fokusirati kada provodeći ga.

Документация

Na temelju podataka dostavljenih platformama u obliku JSON-a automatski se generira dokumentacija za komponente. Opisan je popis svojstava i mogući tipovi vrijednosti u svakom od njih. Nakon automatskog generiranja, informacije se mogu razjasniti ručno i dodati tekstualni opis. Pregled i dokumentacija međusobno se upućuju na razini svake komponente, a sve informacije uključene u dokumentaciju dostupne su programerima u obliku dodatnih JSON datoteka.

Deprecator

Druga potreba bila je mogućnost zamjene i ažuriranja postojećih komponenti tijekom vremena. Sustav dizajna naučio je reći programerima koja se svojstva ili čak cijele komponente ne mogu koristiti i ukloniti ih čim se više ne koriste na svim platformama. U ovom procesu ima još puno “ručnog” rada, ali ne stojimo na mjestu.

Razvoj klijenta

Bez sumnje, najsloženija faza bila je interpretacija podataka sustava dizajna u kodu svih platformi koje podržavamo. Ako, primjerice, modularni gridovi na webu nisu nešto novo, onda su programeri nativnih mobilnih aplikacija za iOS i Android naporno radili prije nego što su shvatili kako živjeti s tim.

Za raspored zaslona iOS aplikacija koristimo dva osnovna mehanizma koje nudi iviUIKit: besplatni raspored elemenata i raspored kolekcija elemenata. Koristimo VIPER, a sva interakcija s iviUIKitom koncentrirana je u Viewu, a većina interakcija s Apple UIKitom koncentrirana je u iviUIKitu. Veličine i raspored elemenata navedeni su u smislu stupaca i sintaktičkih struktura koje rade povrh izvornih ograničenja iOS SDK-a, što ih čini praktičnijim. Ovo nam je posebno pojednostavilo život pri radu s UICollectionView. Napisali smo nekoliko prilagođenih omotača za izglede, uključujući one prilično složene. Postojao je minimum koda klijenta i postao je deklarativan.

Za generiranje stilova u Android projektu koristimo Gradle, pretvarajući podatke sustava dizajna u stilove u XML formatu. U isto vrijeme imamo nekoliko generatora različitih razina:

• Osnovni, temeljni. Podaci primitiva za generatore više razine se analiziraju.
• Resurs. Preuzmite slike, ikone i druge grafike.
• komponenta. Oni su napisani za svaku komponentu, koja opisuje koja svojstva i kako ih prevesti u stilove.

Izdanja aplikacije

Nakon što su dizajneri nacrtali novu komponentu ili redizajnirali postojeću, te se promjene unose u sustav dizajna. Programeri svake platforme fino podešavaju svoje generiranje koda kako bi podržali promjene. Nakon toga se može koristiti u implementaciji novih funkcionalnosti gdje je ova komponenta potrebna. Dakle, interakcija sa sustavom dizajna ne događa se u stvarnom vremenu, već samo u vrijeme sastavljanja novih izdanja. Ovaj pristup također omogućuje bolju kontrolu nad procesom prijenosa podataka i osigurava funkcionalnost koda u razvojnim projektima klijenata.

Rezultati

Prošlo je godinu dana otkako je sustav dizajna postao dio infrastrukture koja podržava razvoj online kina Ivy i već možemo izvući neke zaključke:

• Ovo je velik i složen projekt koji zahtijeva stalne posvećene resurse.
• To nam je omogućilo stvaranje vlastitog jedinstvenog vizualnog jezika za više platformi koji ispunjava ciljeve online video usluge.
• Više nemamo vizualno i funkcionalno zaostalih platformi.

Pregled komponenti Ivy dizajn sustava - design.ivi.ru

Izvor: www.habr.com