Gikan sa UI-kit hangtod sa sistema sa disenyo

Ivy online nga kasinatian sa sinehan

Sa pagsugod sa 2017 una namong gihunahuna ang paghimo sa among kaugalingong design-to-code delivery system, daghan na ang naghisgut niini ug ang uban nagbuhat pa niini. Bisan pa, hangtod karon gamay ra ang nahibal-an bahin sa kasinatian sa pagtukod sa mga sistema sa disenyo sa cross-platform, ug wala’y klaro ug napamatud-an nga mga resipe nga naghulagway sa mga teknolohiya ug pamaagi alang sa ingon nga pagbag-o sa proseso sa pagpatuman sa disenyo ngadto sa usa ka nagtrabaho na nga produkto. Ug pinaagi sa "mga sangkap sa kodigo" kini kanunay nga nagpasabut nga lahi kaayo nga mga butang.

Samtang, gidoble sa kompanya ang mga kawani niini matag tuig - kinahanglan nga sukdon ang departamento sa disenyo ug ma-optimize ang mga proseso sa paghimo ug pagbalhin sa mga layout alang sa pag-uswag. Gipadaghan namon kining tanan pinaagi sa "zoo" sa mga plataporma nga kinahanglan suportahan, ug nakakuha kami usa ka pagkasama sa Babylonian pandemonium, nga dili gyud mahimo nga "buhaton kini nga normal" ug makamugna kita. Ang pag-uswag sa mga plataporma kanunay nga nagpadayon nga managsama, ug ang parehas nga pagpaandar mahimong ipagawas sa lainlaing mga platform nga adunay lag sa daghang mga bulan.


Gilain ang mga set sa layout alang sa matag plataporma

Sa naandan, nagsugod kami sa mga problema nga ang usa ka sistema sa disenyo makatabang sa pagsulbad ug pagporma sa mga kinahanglanon alang sa disenyo niini. Dugang sa paghimo sa usa ka hiniusang biswal nga pinulongan, pagdugang sa katulin sa layout ug pag-uswag, ug pagpauswag sa kalidad sa produkto sa kinatibuk-an, importante nga mahiusa ang disenyo kutob sa mahimo. Gikinahanglan kini aron ang pag-uswag sa pag-andar mahimong posible sa tanan namon nga mga platform nga dungan: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - nga wala magtrabaho sa matag usa kanila nga gilain . Ug gibuhat namo kini!

Disenyo → datos

Sa dihang naabot na ang sukaranang mga kasabotan tali sa mga departamento sa produkto ug kalamboan, milingkod kami aron mopili ug teknolohiya nga stack ug magbuhat sa mga detalye sa tibuok proseso - gikan sa layout hangtod sa pagpagawas. Aron hingpit nga ma-automate ang proseso sa pagbalhin sa disenyo ngadto sa kalamboan, among gisuhid ang opsyon sa pag-parse sa mga parameter sa component direkta gikan sa Sketch files nga adunay mga layout. Nahibal-an nga ang pagpangita sa mga piraso sa code nga among gikinahanglan ug pagkuha sa mga parameter nga among gikinahanglan usa ka komplikado ug delikado nga buluhaton. Una, ang mga tigdesinyo kinahanglan nga mag-amping pag-ayo sa pagngalan sa tanan nga mga lut-od sa source code, ikaduha, kini molihok lamang alang sa pinakasimple nga mga sangkap, ug ikatulo, ang pagsalig sa teknolohiya sa uban ug istruktura sa code sa orihinal nga layout sa Sketch makadaot sa kaugmaon sa tibuuk. proyekto. Nakahukom kami nga biyaan ang automation sa kini nga lugar. Ingon niini kung giunsa ang unang tawo nga nagpakita sa team sa sistema sa disenyo, kansang input mao ang mga layout sa disenyo, ug ang output mao ang datos nga naghulagway sa tanan nga mga parameter sa mga sangkap ug hierarchically gimando sumala sa atomic design methodology.

Ang nahabilin nga buhaton mao kung asa ug kung giunsa pagtipig ang datos, kung giunsa kini pagbalhin sa pag-uswag ug kung giunsa kini paghubad sa pag-uswag sa tanan nga mga platform nga among gisuportahan. Ang kagabhion mihunong sa pagkalanguid... Ang resulta sa regular nga mga miting sa working group nga gilangkuban sa mga tigdesinyo ug team lead gikan sa matag plataporma mao ang kasabutan sa mosunod.

Among gi-parse sa mano-mano ang biswal ngadto sa atomic nga mga elemento: mga font, kolor, transparency, indents, roundings, mga icon, mga hulagway ug mga gidugayon alang sa mga animation. Ug among gikolekta gikan niini nga mga buton, input, checkbox, bank card widgets, ug uban pa. Nag-assign kami og mga non-semantic nga mga ngalan sa mga estilo sa bisan unsang lebel, gawas sa mga icon, pananglitan, mga ngalan sa mga siyudad, mga ngalan sa mga nymph, Pokemon, sakyanan brands... Adunay usa ra ka kondisyon - ang lista kinahanglan dili mahurot sa wala pa , kung giunsa ang pagtapos sa mga istilo - kinahanglan nga moadto! Dili ka kinahanglan nga madala sa mga semantiko, aron dili ka magdugang usa ka tunga nga butones tali sa "gamay" ug "medium," pananglitan.

Biswal nga pinulongan

Gibiyaan ang mga developers sa paghunahuna kon unsaon pagtipig ug pagbalhin sa datos sa paagi nga haum sa tanang plataporma, ug ang disenyo kinahanglang magdesinyo sa mga elemento sa interface nga maayo tan-awon ug epektibong motrabaho sa tibuok panon sa mga gisuportahan nga mga himan.

Kaniadto, nakahimo na kami sa "pagsulay" sa kadaghanan sa mga elemento sa disenyo sa usa ka aplikasyon alang sa Windows 10, nga niadtong panahona usa ka bag-ong plataporma alang kanamo, nga mao, gikinahanglan ang paghubad ug pag-uswag "gikan sa wala." Pinaagi sa pagdrowing niini, nakahimo kami sa pag-andam ug pagsulay sa kadaghanan sa mga sangkap ug nahibal-an kung kinsa kanila ang kinahanglan nga ilakip sa umaabot nga sistema sa disenyo sa Eevee. Kung wala ang ingon nga sandbox, ang ingon nga kasinatian makuha lamang pinaagi sa daghang gidaghanon sa mga pag-uli sa nagtrabaho na nga mga platform, ug kini molungtad labaw pa sa usa ka tuig.

Ang paggamit pag-usab sa parehas nga mga sangkap sa lainlaing mga plataporma makapakunhod sa gidaghanon sa mga layout ug sa han-ay sa datos sa sistema sa disenyo sa kamahinungdanon, mao nga ang disenyo kinahanglan nga masulbad ang usa pa ka problema, nga kaniadto wala gihulagway sa mga gawi sa disenyo ug pagpalambo sa produkto - unsaon, pananglitan, ang buton para sa mga telepono ug tablet magamit pag-usab sa mga TV? Ug unsa ang angay natong buhaton sa mga gidak-on sa mga font ug mga elemento sa maong lain-laing mga plataporma?

Dayag nga gikinahanglan ang pagdesinyo sa usa ka cross-platform modular grid nga magtakda sa teksto ug mga gidak-on sa elemento nga atong gikinahanglan alang sa matag piho nga plataporma. Isip usa ka punto sa pagsugod sa grid, gipili namo ang gidak-on ug gidaghanon sa mga poster sa pelikula nga gusto namong makita sa usa ka partikular nga screen ug, base niini, naghimo kami og usa ka lagda alang sa pagtukod sa mga kolum sa grid, basta ang gilapdon sa usa ka kolum managsama. sa gilapdon sa poster.

Karon kinahanglan namon nga dad-on ang tanan nga dagkong mga screen sa parehas nga gidak-on sa layout ug ipahiangay kini sa usa ka sagad nga grid. Ang Apple TV ug Roku gidisenyo sa gidak-on nga 1920x1080, Android TV - 960x540, Ang mga Smart TV, depende sa vendor, managsama, apan usahay 1280x720. Sa diha nga ang app gihubad ug gipakita sa Full HD screens, 960 gipadaghan sa 2, 1280 gipadaghan sa 1,33, ug ang 1920 mao ang output.

Ang paglaktaw sa makalaay nga mga detalye, nakaabot kami sa konklusyon nga sa kinatibuk-an ang tanan nga mga screen, lakip ang mga screen sa telebisyon, sa mga termino sa mga elemento ug sa ilang mga gidak-on, gitabonan sa usa ka layout sa disenyo, ug ang tanan nga mga screen sa telebisyon usa ka espesyal nga kaso sa kinatibuk-ang cross-platform grid, ug naglangkob sa lima o unom ka mga kolum, sama sa kasagaran nga tablet o desktop. Kinsa ang interesado sa mga detalye, adto sa mga komento.

Usa ka UI alang sa tanan nga mga platform

Karon, aron magdrowing og bag-ong feature, dili na namo kinahanglan nga magdrowing og mga layout alang sa matag plataporma, lakip ang mga opsyon sa adaptability alang sa matag usa niini. Igo na nga ipakita ang usa ka layout ug ang pagkamapasibo niini alang sa tanan nga mga platform ug mga aparato sa bisan unsang gilapdon: mga telepono - 320-599, tanan pa - 600-1280.

Data → pagpalambo

Siyempre, kutob sa gusto namon nga makab-ot ang usa ka hingpit nga hiniusa nga laraw, ang matag plataporma adunay kaugalingon nga talagsaon nga mga bahin. Bisan kung ang web ug Smart TV naggamit sa ReactJS + TypeScript stack, ang Smart TV app nagdagan sa mga kabilin nga WebKit ug Presto nga kliyente ug busa dili makapaambit sa mga istilo sa web. Ug ang mga newsletter sa email hingpit nga napugos sa pagtrabaho sa tabular layout. Sa samang higayon, walay bisan usa sa non-html nga mga plataporma ang naggamit o nagplano sa paggamit sa React Native o sa bisan unsang mga analogue niini, nga nahadlok sa pagkadaut sa performance, tungod kay daghan kaayo kami nga mga custom layout, mga koleksyon nga adunay komplikadong update logic, mga hulagway ug mga video. Busa, ang sagad nga laraw sa paghatud sa andam nga mga istilo sa CSS o React nga mga sangkap dili angay alang kanamo. Busa, nakahukom kami nga ipadala ang datos sa JSON format, nga naghulagway sa mga bili sa usa ka abstract nga deklaratibo nga porma.

Kaya nga property rounding: 8 Windows 10 app nakabig sa CornerRadius="8", web - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Property offsetTop: 12 ang parehas nga kliyente sa web sa lainlaing mga kaso mahimong mahubad ingon top, margin-top, padding-top o transform

Ang deklarasyon sa paghulagway nagpasabot usab nga kung ang plataporma sa teknikal dili makagamit sa usa ka kabtangan o sa bili niini, mahimo kining ibaliwala. Sa termino sa terminolohiya, naghimo kami og usa ka matang sa Esperanto nga pinulongan: ang uban gikuha gikan sa Android, ang uban gikan sa SVG, ang uban gikan sa CSS.

Kung sa usa ka partikular nga plataporma kinahanglan nimo nga ipakita ang mga elemento nga lahi, gipatuman namon ang abilidad sa pagbalhin sa katugbang nga henerasyon sa datos sa porma sa usa ka lahi nga JSON file. Pananglitan, ang "in focus" nga estado alang sa Smart TV nagdiktar sa usa ka pagbag-o sa posisyon sa teksto sa ilawom sa poster, nga nagpasabut nga alang niini nga plataporma kini nga sangkap sa kantidad sa "indent" nga kabtangan maglangkob sa 8 nga mga punto sa indentasyon nga kinahanglan niini. Bisan kung gikomplikado niini ang imprastraktura sa sistema sa pagdesinyo, naghatag kini usa ka dugang nga lebel sa kagawasan, nga nagbilin kanamo sa oportunidad sa pagdumala sa biswal nga "pagkalainlain" sa mga platform sa among kaugalingon, ug dili mahimong hostage sa arkitektura nga among gibuhat.

Pictograms

Iconography sa usa ka digital nga produkto mao ang kanunay nga usa ka voluminous ug dili ang pinakasimple nga subproject, kasagaran nagkinahanglan og usa ka bulag nga tigdesinyo. Adunay kanunay nga daghang mga glyph, ang matag usa niini adunay daghang mga gidak-on ug kolor, ug ang mga platform kasagarang kinahanglan kini sa lainlaing mga format. Sa kinatibuk-an, walay rason nga dili ibutang kining tanan sa sistema sa disenyo.

Ang mga glyph gikarga sa SVG vector format, ug ang mga kantidad sa kolor awtomatiko nga gipulihan sa mga variable. Ang mga aplikasyon sa kliyente makadawat niini nga andam gamiton - sa bisan unsang pormat ug kolor.

Preview

Sa ibabaw sa data sa JSON, misulat kami og himan alang sa pag-preview sa mga component - usa ka JS application nga nagpasa sa data sa JSON sa langaw pinaagi sa markup ug style generators niini, ug nagpakita sa lain-laing mga variation sa matag component sa browser. Sa tinuud, ang preview parehas nga kliyente sa mga aplikasyon sa platform ug nagtrabaho sa parehas nga datos.

Ang labing kadali nga paagi aron masabtan kung giunsa ang paglihok sa usa ka partikular nga sangkap mao ang pagpakig-uban niini. Busa, wala kami mogamit sa mga himan sama sa Storybook, apan naghimo sa usa ka interactive nga preview - mahimo nimong hikap, itudlo, i-klik... Kung magdugang ug bag-ong sangkap sa sistema sa disenyo, makita kini sa preview aron ang mga plataporma adunay butang nga ipunting kung kanus-a. pagpatuman niini.

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

Pinasukad sa datos nga gihatag sa mga plataporma sa porma sa JSON, ang dokumentasyon alang sa mga sangkap awtomatiko nga nahimo. Ang usa ka lista sa mga kabtangan ug posible nga mga tipo sa mga kantidad sa matag usa kanila gihulagway. Pagkahuman sa auto-generation, ang impormasyon mahimong maklaro sa mano-mano ug ang usa ka deskripsyon sa teksto mahimong idugang. Ang preview ug dokumentasyon gi-cross-reference sa usag usa sa lebel sa matag component, ug ang tanang impormasyon nga gilakip sa dokumentasyon anaa sa mga developers sa porma sa dugang nga JSON files.

Deprecator

Ang laing kinahanglanon mao ang abilidad sa pag-ilis ug pag-update sa kasamtangan nga mga sangkap sa paglabay sa panahon. Ang sistema sa disenyo nakakat-on sa pagsulti sa mga nag-develop kung unsang mga kabtangan o bisan ang tibuuk nga mga sangkap dili magamit ug tangtangon kini sa diha nga dili na kini magamit sa tanan nga mga platform. Adunay daghan pa nga "manual" nga pagtrabaho niini nga proseso, apan wala kami nagbarog.

Pag-uswag sa kliyente

Sa walay duhaduha, ang labing komplikado nga yugto mao ang paghubad sa datos sa sistema sa disenyo sa code sa tanan nga mga plataporma nga among gisuportahan. Kung, pananglitan, ang mga modular grids sa web dili bag-o, nan ang mga nag-develop sa lumad nga mga aplikasyon sa mobile alang sa iOS ug Android nagtrabaho pag-ayo sa wala pa nila nahibal-an kung giunsa kini mabuhi.

Sa pag-layout sa mga screen sa aplikasyon sa iOS, naggamit kami og duha ka batakang mekanismo nga gihatag sa iviUIKit: libre nga layout sa mga elemento ug layout sa mga koleksyon sa mga elemento. Gigamit namon ang VIPER, ug ang tanan nga interaksyon sa iviUIKit gikonsentrar sa View, ug kadaghanan sa interaksyon sa Apple UIKit gikonsentrar sa iviUIKit. Ang mga gidak-on ug kahikayan sa mga elemento gipiho sa mga termino sa mga kolum ug syntactic nga mga istruktura nga nagtrabaho sa ibabaw sa lumad nga iOS SDK nga mga pagpugong, nga naghimo kanila nga mas praktikal. Kini labi nga gipasimple ang among kinabuhi kung nagtrabaho kauban ang UICollectionView. Nagsulat kami og daghang mga custom wrapper alang sa mga layout, lakip ang mga medyo komplikado. Adunay usa ka minimum nga code sa kliyente ug nahimo kini nga deklaratibo.

Aron makamugna og mga estilo sa proyekto sa Android, gigamit namo ang Gradle, nga gihimong mga estilo ang datos sa sistema sa disenyo sa XML nga format. Sa parehas nga oras, kami adunay daghang mga generator sa lainlaing lebel:

• Sukaranan. Ang datos sa mga primitibo alang sa mas taas nga lebel nga mga generator gi-parse.
• Kapanguhaan. Pag-download sa mga litrato, icon, ug uban pang mga graphic.
• Component. Gisulat kini alang sa matag sangkap, nga naghulagway kung unsang mga kabtangan ug kung giunsa kini paghubad sa mga istilo.

Mga pagpagawas sa aplikasyon

Human makadibuho ang mga tigdesinyo og bag-ong component o magdesinyo pag-usab sa kasamtangan, kini nga mga pagbag-o gipakaon ngadto sa sistema sa disenyo. Ang mga nag-develop sa matag plataporma nag-ayo sa ilang henerasyon sa code aron suportahan ang mga pagbag-o. Pagkahuman niini, magamit kini sa pagpatuman sa bag-ong pagpaandar kung diin kinahanglan kini nga sangkap. Busa, ang interaksyon sa sistema sa disenyo dili mahitabo sa tinuod nga panahon, apan sa panahon lamang sa pag-assemble sa mga bag-ong pagpagawas. Kini nga pamaagi nagtugot usab alang sa mas maayo nga pagkontrol sa proseso sa pagbalhin sa datos ug pagsiguro sa paggana sa code sa mga proyekto sa pagpalambo sa kliyente.

Mga resulta

Usa ka tuig na ang milabay sukad ang sistema sa disenyo nahimong bahin sa imprastraktura nga nagsuporta sa pag-uswag sa Ivy online nga sinehan, ug makahimo na kita og pipila ka mga konklusyon:

• Kini usa ka dako ug komplikado nga proyekto nga nanginahanglan kanunay nga gipahinungod nga mga kapanguhaan.
• Kini nagtugot kanamo sa paghimo sa among kaugalingon nga talagsaon nga cross-platform visual nga pinulongan nga nagtagbo sa mga katuyoan sa online nga serbisyo sa video.
• Wala na kami makita ug magamit nga mga lagging nga plataporma.

Pagtan-aw sa mga sangkap sa sistema sa disenyo sa Ivy - design.ivi.ru

Source: www.habr.com