Vum UI-Kit zum Designsystem

Ivy Online Kino Erfahrung

Wéi mir am Ufank vum 2017 fir d'éischt dru geduecht hunn eisen eegenen Design-to-Code-Liwwersystem ze kreéieren, hu vill scho geschwat an e puer hunn et souguer gemaach. Wéi och ëmmer, bis haut ass wéineg iwwer d'Erfahrung vum Bau vu Cross-Plattform Design Systemer bekannt, an et goufe keng kloer a bewisen Rezepter déi Technologien a Methoden beschreiwen fir sou eng Transformatioun vum Prozess vun der Designimplementatioun an e scho funktionnéierende Produkt. A mat "Komponenten am Code" mengen se dacks ganz aner Saachen.

Mëttlerweil huet d'Firma säi Personal Joer no Joer verduebelt - et war néideg fir den Designdepartement ze skaléieren an d'Prozesser vun der Schafung an der Iwwerdroung vun Layouten fir Entwécklung ze optimiséieren. Mir multiplizéieren dat alles mam "Zoo" vu Plattformen déi ënnerstëtzen musse ginn, a mir kréien e Bäitrag vu babylonesche Pandemonium, wat einfach net fäeg ass "normal ze maachen" an Akommes ze generéieren. D'Entwécklung vu Plattformen ass dacks parallel viru gaangen, an déiselwecht Funktionalitéit konnt op verschiddene Plattformen mat enger Lag vun e puer Méint verëffentlecht ginn.


Separat Layoutsets fir all Plattform

Traditionell hu mir mat Probleemer ugefaang datt en Designsystem hëllefe géif léisen an Ufuerderunge fir säin Design formuléieren. Zousätzlech fir eng vereenegt visuell Sprooch ze kreéieren, d'Vitesse vum Layout an d'Entwécklung ze erhéijen an d'Qualitéit vum Produkt allgemeng ze verbesseren, war et vital fir den Design sou vill wéi méiglech ze vereenegen. Dëst ass néideg fir datt d'Entwécklung vun der Funktionalitéit op all eise Plattformen gläichzäiteg méiglech ass: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - ouni op jiddereng vun hinnen separat ze schaffen. A mir hunn et gemaach!

Design → Daten

Wann d'fundamental Ofkommes tëscht de Produkt- an Entwécklungsdepartementer erreecht goufen, hu mir eis gesat fir en Technologiestack ze wielen an d'Detailer vum ganze Prozess auszeschaffen - vum Layout bis zur Verëffentlechung. Fir de Prozess vum Transfert vum Design an d'Entwécklung voll ze automatiséieren, hu mir d'Optioun entdeckt fir Komponentparameter direkt vu Sketch Dateien mat Layouten ze analyséieren. Et huet sech erausgestallt datt d'Stécker vum Code ze fannen déi mir gebraucht hunn an d'Parameteren extrahéieren déi mir gebraucht hunn eng komplex a geféierlech Entreprise war. Éischtens, Designer mussen extrem virsiichteg sinn all Schichten vum Quellcode ze benennen, zweetens funktionnéiert dëst nëmme fir déi einfachste Komponenten, an drëttens, Ofhängegkeet vun enger anerer Technologie a Code Struktur vum Original Sketch Layout a Gefor d'Zukunft vum ganzen Projet. Mir hu beschloss d'Automatisatioun an dësem Beräich opzeginn. Dëst ass wéi déi éischt Persoun am Design System Team opgetaucht ass, deem säin Input Design Layouten ass, an den Output ass Daten déi all d'Parameter vun de Komponenten beschreiwen an hierarchesch no der Atomdesignmethodologie bestallt sinn.

Dat eenzegt wat nach ze maachen ass, war wou a wéi d'Donnéeën gespäichert ginn, wéi se se op d'Entwécklung transferéiert ginn a wéi se se an der Entwécklung op all de Plattformen interpretéieren déi mir ënnerstëtzen. Den Owend ass net méi lëschteg ... D'Resultat vu regelméissege Versammlungen vum Aarbechtsgrupp, deen aus Designer an Teamleit vun all Plattform besteet, war den Accord iwwert déi folgend.

Mir parséieren d'Visual manuell an atomar Elementer: Schrëften, Faarwen, Transparenz, Abriecher, Ronnen, Ikonen, Biller an Dauer fir Animatiounen. A mir sammelen aus dëser Knäppercher, Input, Checkboxen, Bankkaart Widgets, etc.. Mir ginn net-semantesch Nimm un de Stiler vun all Niveau, ausser Symboler, zum Beispill, Nimm vun Stied, Nimm vun Nymphen, Pokémon, Auto Marken ... Et gëtt nëmmen eng Bedingung - d'Lëscht sollt net virdru ausgetruede sinn, wéi d'Stiler ophalen - Show muss goen! Dir sollt net mat Semantik duerchgefouert ginn, sou datt Dir zum Beispill net e Mëttelknäppchen tëscht "kleng" a "mëttel" musst addéieren.

Visuell Sprooch

D'Entwéckler ware verlooss fir ze denken wéi d'Donnéeën ze späicheren an iwwerdroen op eng Manéier déi all Plattformen passt, an den Design huet Interfaceelementer ze designen déi gutt ausgesinn an effektiv iwwer d'ganz Flott vun ënnerstëtzten Apparater funktionnéieren.

Virdrun hu mir et scho fäerdeg bruecht déi meescht vun den Designelementer an enger Applikatioun fir Windows 10 ze "testen", wat zu där Zäit eng nei Plattform fir eis war, dat heescht, et erfuerdert Rendering an Entwécklung "vun Null." Andeems mir et zeechnen, konnte mir déi meescht Komponenten preparéieren an testen a verstoen wéi eng vun hinnen an den zukünftege Eevee Design System abegraff sinn. Ouni esou eng Sandkëscht kéint esou Erfarung nëmmen duerch eng grouss Unzuel vun Iteratiounen op scho schaffende Plattformen kritt ginn, an dat géif méi wéi ee Joer daueren.

D'Wiederbenotzen vun de selwechte Komponenten op verschiddene Plattformen reduzéiert d'Zuel vun de Layouten an d'Gamme vun Daten vum Designsystem wesentlech, sou datt den Design nach e Problem léise muss, virdru net an de Praktiken vum Produktdesign an Entwécklung beschriwwen - wéi z.B. kann e Knäppchen fir Telefonen a Pëllen op Fernseher benotzt ginn? A wat solle mir mat de Schrëftgréissten an Elementer op esou verschiddene Plattformen maachen?

Natierlech war et néideg e Cross-Plattform modulärt Gitter ze designen, deen den Text an d'Elementgréissten setzen, déi mir fir all spezifesch Plattform gebraucht hunn. Als Ausgangspunkt fir d'Raster hu mir d'Gréisst an d'Zuel vun de Filmplakater gewielt, déi mir op engem bestëmmte Bildschierm wëllen gesinn, a baséierend op deem hu mir eng Regel formuléiert fir d'Gittersäulen ze konstruéieren, virausgesat datt d'Breet vun enger Kolonn gläich ass op d'Breet vun der Affiche.

Elo musse mir all grouss Schiirme op déiselwecht Layoutgréisst bréngen an se an e gemeinsamt Gitter passen. Apple TV a Roku sinn an enger Gréisst vun 1920x1080 entworf, Android TV - 960x540, Smart TVs, ofhängeg vum Verkeefer, sinn déiselwecht, awer heiansdo 1280x720. Wann d'App rendert an op Full HD Schiirme ugewise gëtt, gëtt 960 mat 2 multiplizéiert, 1280 gëtt multiplizéiert mat 1,33, an 1920 gëtt ausgaang wéi ass.

Langweileg Detailer iwwersprangen, si mir zu der Conclusioun komm datt am Allgemengen all Schiirme, dorënner Fernsehbildschirmer, wat Elementer an hir Gréissten ugeet, vun engem Design Layout ofgedeckt sinn, an all Fernsehbildschirmer sinn e spezielle Fall vum allgemenge Cross-Plattform Gitter, a besteet aus fënnef oder sechs Sailen, wéi eng duerchschnëttlech Tablet oder Desktop. Wien un Detailer interesséiert ass, gitt an d'Kommentaren.

Eenzel UI fir all Plattformen

Elo, fir eng nei Feature ze zéien, brauche mir keng Layouten fir all Plattform ze zéien, plus Adaptabilitéitsoptioune fir jiddereng vun hinnen. Et ass genuch fir e Layout a seng Adaptabilitéit fir all Plattformen an Apparater vun all Breet ze weisen: Telefonen - 320-599, alles anescht - 600-1280.

Daten → Entwécklung

Natierlech, sou vill wéi mir wëllen e komplett vereenegt Design erreechen, huet all Plattform seng eege eenzegaarteg Features. Och wann souwuel de Web wéi och de Smart TV de ReactJS + TypeScript Stack benotzen, leeft d'Smart TV App op legacy WebKit a Presto Clienten an kann dofir net Stiler mam Web deelen. An E-Mail Newslettere si komplett gezwongen mat Tabular Layout ze schaffen. Zur selwechter Zäit benotzt oder plangt keng vun den Net-html Plattformen React Native oder iergendeng vun hiren Analoga ze benotzen, aus Angscht vun der Leeschtungsverschlechterung, well mir ze vill personaliséiert Layouten hunn, Kollektiounen mat komplexer Updatelogik, Biller a Videoen. Dofir ass de gemeinsame Schema fir fäerdeg CSS Stiler oder React Komponenten ze liwweren net fir eis gëeegent. Dofir hu mir beschloss Daten am JSON Format ze vermëttelen, d'Wäerter an enger abstrakter deklarativer Form ze beschreiwen.

Also Immobilie rounding: 8 Windows 10 App konvertéiert op CornerRadius="8", web- border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Immobilie offsetTop: 12 déi selwecht Web Client a verschiddene Fäll kann interpretéieren als top, margin-top, padding-top oder transform

Deklarativitéit vun der Beschreiwung implizéiert och datt wann d'Plattform technesch net eng Immobilie oder säi Wäert benotze kann, se ignoréiere kann. Wat d'Terminologie ugeet, hu mir eng Aart Esperanto-Sprooch gemaach: e puer goufe vun Android geholl, e puer aus SVG, e puer vun CSS.

Wann Dir op enger bestëmmter Plattform Elementer anescht muss weisen, hu mir d'Fäegkeet implementéiert fir déi entspriechend Dategeneratioun a Form vun enger separater JSON Datei ze transferéieren. Zum Beispill diktéiert de Staat "am Fokus" fir Smart TV eng Ännerung vun der Positioun vum Text ënner dem Affiche, wat fir dës Plattform bedeit datt dës Komponent am Wäert vun der "Indent" Eegeschafte déi 8 Indentatiounspunkte enthält déi se brauch. Och wann dëst d'Infrastruktur vum Designsystem komplizéiert, gëtt et en zousätzleche Grad vu Fräiheet, a léisst eis d'Méiglechkeet fir d'visuell "Ongläichheet" vun de Plattformen selwer ze verwalten, an net Geisel vun der Architektur ze sinn déi mir erstallt hunn.

Piktogrammer

Ikonographie an engem digitale Produkt ass ëmmer e voluminösen an net deen einfachsten Ënnerprojet, deen dacks e separaten Designer erfuerdert. Et ginn ëmmer vill Glyphen, jidderee vun hinnen huet verschidde Gréissten a Faarwen, a Plattformen brauchen se normalerweis a verschiddene Formater. Am allgemengen war et kee Grond, all dëst net an den Designsystem ze setzen.

Glyphs ginn am SVG Vektorformat gelueden, a Faarfwäerter ginn automatesch mat Variablen ersat. Client Uwendungen kënnen se prett fir ze benotzen kréien - an all Format a Faarf.

Virschau

Op der Spëtzt vun den JSON Daten hu mir en Tool geschriwwen fir Komponenten ze previewen - eng JS Applikatioun déi JSON Daten op der Flucht duerch seng Markup a Stil Generatoren passéiert, a verschidde Variatiounen vun all Komponent am Browser weist. Wesentlech ass d'Virschau genau dee selwechte Client wéi Plattformapplikatiounen a funktionnéiert mat deeneselwechten Donnéeën.

Deen einfachste Wee fir ze verstoen wéi e bestëmmte Komponent funktionnéiert ass andeems Dir mat him interagéiert. Dofir hu mir keng Tools wéi Storybook benotzt, awer eng interaktiv Virschau gemaach - Dir kënnt beréieren, weisen, klickt ... Wann Dir en neie Bestanddeel un den Designsystem bäidréit, erschéngt se an der Virschau, sou datt Plattformen eppes hunn ze fokusséieren wann et ëmsetzen.

Dokumentatioun

Baséierend op den Daten, déi op d'Plattformen a Form vu JSON geliwwert ginn, gëtt d'Dokumentatioun fir d'Komponente automatesch generéiert. Eng Lëscht vun Eegeschaften a méiglech Aarte vu Wäerter an jiddereng vun hinnen ginn beschriwwen. No der Auto-Generatioun kann d'Informatioun manuell gekläert ginn an eng Textbeschreiwung bäigefüügt ginn. D'Virschau an d'Dokumentatioun gi matenee gekräizt um Niveau vun all Komponent, an all Informatioun abegraff an der Dokumentatioun ass verfügbar fir Entwéckler a Form vun zousätzleche JSON Dateien.

Deprecateur

Eng aner Noutwennegkeet war d'Fäegkeet fir existent Komponenten mat der Zäit ze ersetzen an ze aktualiséieren. Den Designsystem huet geléiert Entwéckler ze soen wéi eng Eegeschaften oder souguer ganz Komponenten net kënne benotzt ginn an se ewechhuelen soubal se net méi op all Plattformen benotzt ginn. Et gëtt nach vill "manuell" Aarbecht an dësem Prozess, awer mir sinn net stoe bleiwen.

Client Entwécklung

Sécherlech, déi komplex Etapp war d'Interpretatioun vun Design System Daten am Code vun all Plattformen mir ënnerstëtzen. Wann zum Beispill modulare Gitter um Internet net eppes Neies sinn, dann hunn d'Entwéckler vun gebiertege mobilen Uwendungen fir iOS an Android haart geschafft ier se erausfonnt hunn wéi se domat liewen.

Fir iOS Applikatioun Schiirme ze Layout, mir benotzen zwee Basis Mechanismen vun iviUIKit ugebueden: fräi Layout vun Elementer an Layout vun Kollektiounen vun Elementer. Mir benotzen VIPER, an all Interaktioun mat iviUIKit ass an View konzentréiert, an déi meescht Interaktioun mat Apple UIKit ass konzentréiert op iviUIKit. D'Gréissten an d'Arrangement vun Elementer ginn a punkto Spalten a syntaktesch Strukturen spezifizéiert, déi uewen op den gebiertege iOS SDK Contrainten funktionnéieren, wat se méi praktesch mécht. Dëst huet eist Liewen besonnesch vereinfacht wann Dir mat UICollectionView schafft. Mir hunn e puer personaliséiert Wrapper fir Layouten geschriwwen, och ganz komplex. Et war e Minimum vu Client Code an et gouf deklarativ.

Fir Stiler am Android Projet ze generéieren, benotze mir Gradle, déi Designsystemdaten an Stiler am XML-Format verwandelen. Zur selwechter Zäit hu mir verschidde Generatoren vu verschiddene Niveauen:

• Basis. D'Date vu Primitiv fir Generatoren op méi héijen Niveau ginn parséiert.
• Ressource. Luet Biller, Ikonen an aner Grafiken erof.
• Komponent. Si gi fir all Komponent geschriwwen, wat beschreift wéi eng Eegeschaften a wéi een se a Stiler iwwersetzt.

Applikatioun Verëffentlechungen

Nodeems d'Designer eng nei Komponent gezeechent hunn oder eng existent nei designt hunn, ginn dës Ännerungen an den Designsystem gefüttert. D'Entwéckler vun all Plattform fein-tuning hir Code Generatioun fir d'Ännerungen z'ënnerstëtzen. Duerno kann et an der Ëmsetzung vun neier Funktionalitéit benotzt ginn, wou dës Komponente gebraucht gëtt. Also ass d'Interaktioun mam Designsystem net an Echtzäit geschitt, awer nëmmen zur Zäit vun der Montage vun neie Verëffentlechungen. Dës Approche erlaabt och eng besser Kontroll iwwer den Datenübertragungsprozess a garantéiert Code Funktionalitéit a Cliententwécklungsprojeten.

Resultater

Et ass e Joer zënter datt den Designsystem Deel vun der Infrastruktur gouf fir d'Entwécklung vum Ivy Online Kino z'ënnerstëtzen, a mir kënnen schonn e puer Conclusiounen zéien:

• Dëst ass e groussen a komplexe Projet dee konstant engagéiert Ressourcen erfuerdert.
• Dëst huet eis erlaabt eis eege eenzegaarteg Cross-Plattform visuell Sprooch ze kreéieren déi d'Ziler vum Online Video Service entsprécht.
• Mir hunn net méi visuell a funktionell lagging Plattformen.

Virschau vun Ivy Design System Komponenten - design.ivi.ru

Source: will.com