Da u kit UI à u sistema di cuncepimentu

Esperienza di cinema in linea Ivy

Quandu à l'iniziu di 2017 avemu prima pensatu à creà u nostru propiu sistema di cunsegna design-to-code, parechji parlavanu digià è certi anu ancu fà. Tuttavia, finu à questu ghjornu, pocu hè cunnisciutu di l'esperienza di custruisce sistemi di cuncepimentu multipiattaforma, è ùn ci sò micca stati ricetti chjaru è pruvati chì descrivenu tecnulugii è metudi per tali trasfurmazioni di u prucessu di implementazione di u disignu in un pruduttu digià travagliatu. È per "cumpunenti in u codice" spessu significanu cose assai diverse.

Intantu, a cumpagnia duppiò u so persunale annu dopu annu - era necessariu di scala u dipartimentu di cuncepimentu è ottimisà i prucessi di creazione è trasferimentu di layout per u sviluppu. Multiplichemu tuttu questu per u "zoo" di e plataforme chì deve esse supportatu, è avemu una apparenza di pandemoniu babiloniu, chì ùn hè simplicemente micca capaci di "fà normalmente" è generà ingressu. U sviluppu di e plataforme spessu prucede in parallelu, è a listessa funziunalità puderia esse liberata nantu à e diverse plataforme cù un lag di parechji mesi.


Set di layout separati per ogni piattaforma

Tradizionalmente, avemu principiatu cù prublemi chì un sistema di cuncepimentu aiutava à risolve è formulate esigenze per u so disignu. In più di creà una lingua visuale unificata, aumentendu a rapidità di layout è di sviluppu, è migliurà a qualità di u pruduttu in generale, era vitale unificà u disignu quant'è pussibule. Questu hè necessariu per chì u sviluppu di e funziunalità diventa pussibule in tutte e nostre piattaforme simultaneamente: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - senza travaglià in ognuna di elli separatamente. È avemu fattu!

Design → dati

Quandu l'accordi fundamentali trà i dipartimenti di u produttu è di u sviluppu sò stati ghjunti, avemu pusatu per selezziunà una pila di tecnulugia è travaglià i dettagli di tuttu u prucessu - da u layout à a liberazione. Per automatizà cumplettamente u prucessu di trasferimentu di u disignu à u sviluppu, avemu esploratu l'opzione di analizà i paràmetri di cumpunenti direttamente da i schedari Sketch cù layout. Hè risultatu chì truvà i pezzi di codice chì avemu bisognu è estrae i paràmetri chì avemu bisognu era una impresa cumplessa è periculosa. Prima, i diseggiani duveranu esse assai attenti à u nome di tutti i strati di u codice fonte, in segundu, questu funziona solu per i cumpunenti più simplici, è in terzu, a dipendenza da a tecnulugia di l'altru è a struttura di codice di u layout originale di Sketch mette in periculu u futuru di tuttu. prughjettu. Avemu decisu di abbandunà l'automatizazione in questa zona. Hè cusì chì a prima persona apparsu in a squadra di u sistema di cuncepimentu, chì l'ingaghjamentu hè schemi di disignu, è l'output hè dati chì descrizanu tutti i paràmetri di i cumpunenti è hierarchicamente urdinati secondu a metodulugia di u disignu atomicu.

L'unicu chì restava da fà era induve è cumu per almacenà e dati, cumu si trasfiriu à u sviluppu è cumu l'interpreta in u sviluppu nantu à tutte e plataforme chì sustenemu. A sera hà cessatu di esse languid... U risultatu di riunioni regulare di u gruppu di travagliu custituitu da i diseggiani è i capi di squadra da ogni piattaforma era l'accordu nantu à i seguenti.

Analizemu manualmente a visuale in elementi atomici: fonti, culori, trasparenza, indentazioni, arrotondamenti, icone, stampe è durazioni per l'animazioni. E cullemu da questi buttoni, inputs, checkboxes, widgets di carte bancarie, etc. Assignemu nomi non-semantici à i stili di qualsiasi di i livelli, eccettu per l'icone, per esempiu, nomi di cità, nomi di ninfe, Pokémon, car marche... Ci hè una sola cundizione - a lista ùn deve esse esaurita prima, cumu finiscinu i stili - mostra deve andà! Ùn deve micca esse purtatu cù a semantica, perchè ùn avete micca bisognu di aghjunghje un buttone mediu trà "picculu" è "mediu", per esempiu.

Lingua visuale

I sviluppatori sò stati lasciati à pensà à cumu almacenà è trasferisce e dati in un modu adattatu à tutte e piattaforme, è u disignu avia da cuncepisce elementi di l'interfaccia chì puderanu vede bè è travaglià in modu efficace in tutta a flotta di i dispositi supportati.

Nanzu, avemu digià riesciutu à "testà" a maiò parte di l'elementi di cuncepimentu in una applicazione per Windows 10, chì à quellu tempu era una nova piattaforma per noi, vale à dì, hà bisognu di rendering è sviluppu "da zero". Disegnulu, pudemu preparà è pruvà a maiò parte di i cumpunenti è capisce quale di elli duverebbe esse inclusu in u futuru sistema di design Eevee. Senza un tali sandbox, una tale sperienza puderia esse ottenuta solu per mezu di un gran numaru di iterazioni nantu à e plataformi chì travaglianu, è questu duverà più di un annu.

A riutilizazione di i stessi cumpunenti nantu à e diverse piattaforme riduce significativamente u nùmeru di layout è l'array di dati di u sistema di cuncepimentu, cusì u disignu avia da risolve un prublema più, prima micca descrittu in e pratiche di cuncepimentu è sviluppu di u produttu - cumu, per esempiu, un buttone per i telefoni è e tablette pò esse riutilizatu in i TV? E chì duvemu fà cù e dimensioni di fonti è elementi in tali plataformi diffirenti?

Ovviamente, era necessariu di disignà una griglia modulare multiplataforma chì stabilisce e dimensioni di testu è elementi chì avemu bisognu per ogni piattaforma specifica. Cum'è un puntu di partenza per a griglia, avemu sceltu a dimensione è u numeru di poster di filmi chì vulemu vede nantu à una schermu particulari è, basatu annantu à questu, avemu formulatu una regula per a custruzzione di culonni di griglia, sempre chì a larghezza di una colonna hè uguale. à a larghezza di u poster.

Avà avemu bisognu di portà tutti i grandi schermi à a listessa dimensione di layout è mette in una griglia cumuna. Apple TV è Roku sò cuncepiti in una dimensione di 1920x1080, Android TV - 960x540, Smart TV, secondu u venditore, sò listessi, ma à volte 1280x720. Quandu l'app hè resa è visualizata nantu à i schermi Full HD, 960 hè multiplicatu per 2, 1280 hè multiplicatu per 1,33, è 1920 hè uscita cum'è hè.

Saltendu i dettagli noiosi, simu ghjunti à a cunclusione chì, in generale, tutti i schermi, cumpresi i schermi di televisione, in termini di elementi è di e so dimensioni, sò cuparti da un layout di designu, è tutti i schermi di televisione sò un casu speciale di a griglia generale multiplataforma, è sò custituiti da cinque o sei colonne, cum'è una tableta media o un desktop. Quale hè interessatu à i dettagli, andate in i cumenti.

UI unica per tutte e piattaforme

Avà, per disegnà una nova funzione, ùn avemu micca bisognu di disegnà layout per ogni piattaforma, più opzioni di adattabilità per ognunu. Hè abbastanza per vede un layout è a so adattabilità per tutte e plataforme è i dispositi di ogni larghezza: telefoni - 320-599, tuttu u restu - 600-1280.

Dati → sviluppu

Di sicuru, quantu ci vuleria à ottene un disignu cumplettamente unificatu, ogni piattaforma hà e so caratteristiche uniche. Ancu s'è u web è Smart TV usanu a pila ReactJS + TypeScript, l'app Smart TV funziona nantu à i clienti legacy WebKit è Presto è per quessa ùn pò micca sparte stili cù u web. È i newsletters per email sò cumplitamenti furzati à travaglià cù un layout tabulare. À u listessu tempu, nimu di e plataforme non-html usanu o prughjettanu di utilizà React Native o qualsiasi di i so analoghi, temendu a degradazione di u rendiment, postu chì avemu troppu dispusitivi persunalizati, cullezzione cù logica cumplessa di aghjurnamentu, imagine è video. Dunque, u schema cumuni di furnisce stili CSS pronti o cumpunenti React ùn hè micca adattatu per noi. Dunque, avemu decisu di trasmette dati in formatu JSON, descrivendu i valori in una forma dichjarazione astratta.

Cusì pruprietà rounding: 8 L'app Windows 10 si converte in CornerRadius="8", web - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Pruprietà offsetTop: 12 u listessu cliente web in diversi casi pò interpretà cum'è top, margin-top, padding-top o transform

A dichjarazione di a descrizzione implica ancu chì se a piattaforma tecnicamente ùn pò micca aduprà una pruprietà o u so valore, pò ignurà. In termini di terminologia, avemu fattu una spezia di lingua esperantista : certi sò stati pigliati da Android, certi da SVG, certi da CSS.

Se in una piattaforma particulari avete bisognu di vede elementi in modu diversu, avemu implementatu a capacità di trasfiriri a generazione di dati currispundenti in a forma di un schedariu JSON separatu. Per esempiu, u statu "in focus" per Smart TV detta un cambiamentu in a pusizione di u testu sottu u poster, chì significa chì per questa piattaforma sta cumpunente in u valore di a pruprietà "indent" cuntene i punti di indentazione 8 chì hà bisognu. Ancu s'ellu hè complicatu l'infrastruttura di u sistema di cuncepimentu, dà un gradu supplementu di libertà, lascendu l'uppurtunità di gestisce a "dissimilarità" visuale di e plataformi noi stessi, è ùn esse micca ostaggiu di l'architettura chì avemu creatu.

Pittogrammi

L'iconografia in un pruduttu digitale hè sempre un voluminoso è micca u sottuprogettu più simplice, spessu bisognu di un designer separatu. Ci sò sempre assai glifi, ognunu di elli hà parechje dimensioni è culori, è i plataformi sò generalmente bisognu in diversi formati. In generale, ùn ci era micca mutivu per ùn mette tuttu questu in u sistema di designu.

I glifi sò caricati in formatu vettoriale SVG, è i valori di culore sò automaticamente rimpiazzati cù variabili. L'applicazioni di u cliente ponu ricevenu pronte per l'usu - in ogni formatu è culore.

Anteprima

In cima à i dati JSON, avemu scrittu un strumentu per a visualizazione di cumpunenti - una applicazione JS chì passa i dati JSON in u volu à traversu i so generatori di marcatura è di stile, è mostra diverse variazioni di ogni cumpunente in u navigatore. Essenzialmente, l'anteprima hè esattamente u stessu cliente cum'è l'applicazioni di a piattaforma è travaglia cù i stessi dati.

U modu più faciule per capisce cumu funziona un cumpunente particulari hè interagisce cun ellu. Dunque, ùn avemu micca usatu strumenti cum'è Storybook, ma hà fattu una vista previa interattiva - pudete toccu, puntà, cliccà ... Quandu aghjunghje un novu cumpunente à u sistema di cuncepimentu, appare in a vista previa per chì e plataforme anu qualcosa per fucalizza quandu l'implementa.

Documentazione

Basatu nantu à i dati furniti à e plataforme in forma di JSON, a documentazione per i cumpunenti hè generata automaticamente. Una lista di pruprietà è pussibuli tipi di valori in ognuna di elli sò descritte. Dopu l'autogenerazione, l'infurmazioni ponu esse clarificate manualmente è una descrizzione di testu pò esse aghjuntu. L'anteprima è a documentazione sò incruciate l'una à l'altru à u livellu di ogni cumpunente, è tutte l'infurmazioni incluse in a documentazione sò dispunibuli per i sviluppatori in forma di schedari JSON supplementari.

Deprecator

Un'altra necessità era a capacità di rimpiazzà è aghjurnà i cumpunenti esistenti cù u tempu. U sistema di cuncepimentu hà amparatu à dì à i sviluppatori quali proprietà o ancu cumpunenti interi ùn ponu micca esse aduprati è sguassate appena ùn sò più usati in tutte e plataforme. Ci hè ancu assai di travagliu "manuale" in questu prucessu, ma ùn simu micca fermu.

Sviluppu di u cliente

Indubbiamente, u stadiu più cumplessu era l'interpretazione di e dati di u sistema di designu in u codice di tutte e plataforme chì supportemu. Se, per esempiu, e griglie modulari in u web ùn sò micca qualcosa di novu, allora i sviluppatori di l'applicazioni mobili native per iOS è Android anu travagliatu duru prima di capiscenu cumu per vive cun ellu.

Per mette in schernu di l'applicazione iOS, usemu dui meccanismi basi furniti da iviUIKit: layout liberu di elementi è layout di cullezzione di elementi. Usemu VIPER, è tutta l'interazzione cù iviUIKit hè cuncentrata in View, è a maiò parte di l'interazzione cù Apple UIKit hè cuncentrata in iviUIKit. E dimensioni è l'arrangiamentu di l'elementi sò specificati in termini di culonni è strutture sintattiche chì travaglianu nantu à e restrizioni native iOS SDK, facenu più pratichi. Questu hà simplificatu soprattuttu a nostra vita quandu u travagliu cù UICollectionView. Avemu scrittu parechji wrappers persunalizati per layout, cumpresi quelli abbastanza cumplessi. Ci era un minimu di codice cliente è diventa dichjarazione.

Per generà stili in u prughjettu Android, usemu Gradle, trasfurmendu i dati di u sistema di cuncepimentu in stili in formatu XML. À u listessu tempu, avemu parechji generatori di diversi livelli:

• Basic. I dati di primitivi per generatori di livellu più altu sò analizati.
• Risorsa. Scaricate ritratti, icone è altri grafici.
• Cumpunente. Sò scritti per ogni cumpunente, chì descrive quale proprietà è cumu si traduce in stili.

L'applicazione libera

Dopu chì i diseggiani anu disegnatu un novu cumpunente o riprogettatu un esistenti, sti cambiamenti sò alimentati in u sistema di disignu. I sviluppatori di ogni piattaforma sò fine-tuning a so generazione di codice per sustene i cambiamenti. Dopu questu, pò esse usatu in l'implementazione di novi funziunalità induve questu cumpunente hè necessariu. Cusì, l'interazzione cù u sistema di cuncepimentu ùn hè micca in tempu reale, ma solu à u mumentu di l'assemblea di novi versioni. Stu approcciu permette ancu un megliu cuntrollu di u prucessu di trasferimentu di dati è assicura a funziunalità di u codice in i prughjetti di sviluppu di u cliente.

Risultati

Hè passatu un annu da chì u sistema di cuncepimentu hè diventatu parte di l'infrastruttura chì sustene u sviluppu di u cinema online Ivy, è pudemu digià piglià alcune cunclusioni:

• Questu hè un prughjettu grande è cumplessu chì richiede risorse custanti dedicate.
• Questu ci hà permessu di creà a nostra propria lingua visuale multipiattaforma unica chì risponde à l'ugettivi di u serviziu di video in linea.
• Ùn avemu più piattaforme ritardate visualmente è funziunali.

Anteprima di i cumpunenti di u sistema di design Ivy - design.ivi.ru

Source: www.habr.com