Minn UI-kit għal sistema tad-disinn

Esperjenza taċ-ċinema online Ivy

Meta fil-bidu tal-2017 l-ewwel ħsibna biex noħolqu s-sistema tagħna ta’ konsenja ta’ disinn għal kodiċi, ħafna kienu diġà qed jitkellmu dwarha u xi wħud saħansitra kienu qed jagħmluha. Madankollu, sal-lum ftit huwa magħruf dwar l-esperjenza tal-bini ta 'sistemi ta' disinn trans-pjattaforma, u ma kien hemm l-ebda riċetti ċari u ppruvati li jiddeskrivu teknoloġiji u metodi għal tali trasformazzjoni tal-proċess ta 'implimentazzjoni tad-disinn fi prodott li diġà jaħdem. U b'"komponenti fil-kodiċi" ħafna drabi jfissru affarijiet differenti ħafna.

Sadanittant, il-kumpanija rdoppjat l-istaff tagħha sena wara sena - kien meħtieġ li tiskala d-dipartiment tad-disinn u tottimizza l-proċessi tal-ħolqien u t-trasferiment ta 'tqassim għall-iżvilupp. Aħna nimmultiplikaw dan kollu biż-“żoo” ta 'pjattaformi li jeħtieġ li jiġu appoġġjati, u nġibu semblanza ta' pandemonju Babiloniż, li sempliċement mhux kapaċi "jagħmel dan b'mod normali" u jiġġenera dħul. L-iżvilupp tal-pjattaformi ħafna drabi mexa b'mod parallel, u l-istess funzjonalità setgħet tiġi rilaxxata fuq pjattaformi differenti b'dewmien ta 'diversi xhur.


Settijiet ta 'tqassim separati għal kull pjattaforma

Tradizzjonalment, bdejna bi problemi li sistema tad-disinn tgħin biex issolvi u fformulat rekwiżiti għad-disinn tagħha. Minbarra l-ħolqien ta 'lingwa viżwali unifikata, iż-żieda tal-veloċità tat-tqassim u l-iżvilupp, u t-titjib tal-kwalità tal-prodott b'mod ġenerali, kien vitali li d-disinn jiġi unifikat kemm jista' jkun. Dan huwa meħtieġ sabiex l-iżvilupp tal-funzjonalità jsir possibbli fuq il-pjattaformi kollha tagħna simultanjament: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - mingħajr ma taħdem fuq kull wieħed minnhom separatament . U għamilna!

Disinn → data

Meta ntlaħqu l-ftehimiet fundamentali bejn id-dipartimenti tal-prodott u tal-iżvilupp, aħna sibna biex nagħżlu munzell tat-teknoloġija u naħdmu d-dettalji tal-proċess kollu - mit-tqassim sal-rilaxx. Biex awtomat bis-sħiħ il-proċess tat-trasferiment tad-disinn għall-iżvilupp, esplorajna l-għażla ta 'parsing tal-parametri tal-komponenti direttament minn fajls Sketch b'taqsim. Irriżulta li s-sejba tal-biċċiet tal-kodiċi li kellna bżonn u l-estrazzjoni tal-parametri li kellna bżonn kienet impriża kumplessa u perikoluża. L-ewwelnett, id-disinjaturi se jkollhom joqogħdu attenti ħafna biex jissemmew is-saffi kollha tal-kodiċi tas-sors, it-tieni, dan jaħdem biss għall-komponenti l-aktar sempliċi, u t-tielet, id-dipendenza fuq it-teknoloġija u l-istruttura tal-kodiċi ta 'xi ħadd ieħor tat-tqassim oriġinali ta' Sketch tipperikola l-futur tal-intier kollu. proġett. Iddeċidejna li nabbandunaw l-awtomazzjoni f'dan il-qasam. Dan huwa kif l-ewwel persuna dehret fit-tim tas-sistema tad-disinn, li l-input tiegħu huwa taqsim tad-disinn, u l-output huwa data li tiddeskrivi l-parametri kollha tal-komponenti u ordnata ġerarkikament skont il-metodoloġija tad-disinn atomiku.

L-unika ħaġa li għad fadal kienet fejn u kif tinħażen id-dejta, kif tittrasferiha għall-iżvilupp u kif tinterpretaha fl-iżvilupp fuq il-pjattaformi kollha li nappoġġjaw. Is-serata ma baqgħetx languid... Ir-riżultat ta' laqgħat regolari tal-grupp ta' ħidma magħmul minn disinjaturi u team leaders minn kull pjattaforma kien il-ftehim dwar dan li ġej.

Aħna naqsmu manwalment il-viżiv f'elementi atomiċi: fonts, kuluri, trasparenza, inċiżi, roundings, ikoni, stampi u tul ta 'żmien għall-animazzjonijiet. U aħna niġbru minn dan buttuni, inputs, checkboxes, widgets tal-karti tal-bank, eċċ Aħna jassenjaw ismijiet mhux semantiċi għall-istili ta 'kwalunkwe livell, ħlief għal ikoni, per eżempju, ismijiet ta' bliet, ismijiet ta 'nymphs, Pokémon, karozza marki... Hemm kundizzjoni waħda biss - il-lista m'għandhiex tiġi eżawrita qabel , kif jispiċċaw l-istili - juru trid tmur! M'għandekx tieħu ħsieb is-semantika, sabiex ma jkollokx għalfejn iżżid buttuna tan-nofs bejn "żgħir" u "medju", pereżempju.

Lingwaj viżwali

L-iżviluppaturi tħallew jaħsbu dwar kif jaħżnu u jittrasferixxu d-dejta b'mod li jixraq lill-pjattaformi kollha, u d-disinn kellu jiddisinja elementi ta 'interface li jistgħu jidhru tajbin u jaħdmu b'mod effettiv fil-flotta kollha ta' apparati appoġġjati.

Preċedentement, konna diġà rnexxielna "nittestjaw" ħafna mill-elementi tad-disinn f'applikazzjoni għal Windows 10, li dak iż-żmien kienet pjattaforma ġdida għalina, jiġifieri, kienet teħtieġ rendering u żvilupp "mill-bidu." Billi tpinġih, stajna nippreparaw u nittestjaw il-biċċa l-kbira tal-komponenti u nifhmu liema minnhom suppost kellhom jiġu inklużi fis-sistema tad-disinn Eevee futura. Mingħajr sandbox bħal din, esperjenza bħal din tista' tinkiseb biss permezz ta' numru kbir ta' iterazzjonijiet fuq pjattaformi li diġà jaħdmu, u dan jieħu aktar minn sena.

L-użu mill-ġdid tal-istess komponenti fuq pjattaformi differenti jnaqqas in-numru ta 'taqsim u l-firxa ta' dejta tas-sistema tad-disinn b'mod sinifikanti, għalhekk id-disinn kellu jsolvi problema oħra, li qabel ma kinitx deskritta fil-prattiki tad-disinn u l-iżvilupp tal-prodott - kif, pereżempju, buttuna għal telefowns u tablets tista' terġa' tintuża fuq it-televiżjonijiet? U x'għandna nagħmlu bid-daqsijiet tal-fonts u l-elementi fuq pjattaformi differenti bħal dawn?

Ovvjament, kien meħtieġ li tiddisinja grid modulari bejn pjattaformi li tistabbilixxi t-test u d-daqsijiet tal-elementi li kellna bżonn għal kull pjattaforma speċifika. Bħala punt tat-tluq għall-grilja, għażilna d-daqs u n-numru ta’ posters tal-films li rridu naraw fuq skrin partikolari u, abbażi ta’ dan, ifformulajna regola għall-kostruzzjoni ta’ kolonni tal-grilja, sakemm il-wisa’ ta’ kolonna waħda tkun ugwali. sal-wisa’ tal-poster.

Issa rridu nġibu l-iskrins kbar kollha għall-istess daqs ta 'tqassim u noqogħduhom fi gradilja komuni. Apple TV u Roku huma ddisinjati f'daqs ta '1920x1080, Android TV - 960x540, Smart TVs, skond il-bejjiegħ, huma l-istess, iżda xi drabi 1280x720. Meta l-app hija mogħtija u murija fuq skrins Full HD, 960 huwa mmultiplikat bi 2, 1280 huwa mmultiplikat b'1,33, u 1920 huwa output kif inhu.

Naqbeż id-dettalji boring, wasalna għall-konklużjoni li b'mod ġenerali l-iskrins kollha, inklużi l-iskrins tat-televiżjoni, f'termini ta 'elementi u d-daqsijiet tagħhom, huma koperti minn tqassim ta' disinn wieħed, u l-iskrins tat-televiżjoni kollha huma każ speċjali tal-grilja ġenerali cross-platform, u jikkonsistu f'ħames jew sitt kolonni, bħal tablet jew desktop medja. Min hu interessat fid-dettalji, mur fil-kummenti.

UI unika għall-pjattaformi kollha

Issa, biex tfassal karatteristika ġdida, m'għandniex bżonn niġbdu taqsim għal kull pjattaforma, flimkien ma 'għażliet ta' adattabilità għal kull wieħed minnhom. Huwa biżżejjed li turi tqassim wieħed u l-adattabilità tiegħu għall-pjattaformi u l-apparati kollha ta 'kwalunkwe wisa': telefowns - 320-599, kull ħaġa oħra - 600-1280.

Data → żvilupp

Naturalment, daqskemm nixtiequ niksbu disinn kompletament unifikat, kull pjattaforma għandha l-karatteristiċi uniċi tagħha stess. Anki jekk kemm il-web kif ukoll Smart TV jużaw il-munzell ReactJS + TypeScript, l-app Smart TV taħdem fuq klijenti WebKit u Presto tal-wirt u għalhekk ma tistax taqsam stili mal-web. U newsletters bl-email huma kompletament sfurzati jaħdmu b'tqassim tabulari. Fl-istess ħin, l-ebda waħda mill-pjattaformi mhux html ma tuża jew tippjana li tuża React Native jew xi wieħed mill-analogi tagħha, billi tibża' degradazzjoni tal-prestazzjoni, peress li għandna wisq layouts tad-dwana, kollezzjonijiet b'loġika ta 'aġġornament kumplessa, stampi u vidjows. Għalhekk, l-iskema komuni ta 'twassil ta' stili CSS lesti jew komponenti React mhix adattata għalina. Għalhekk, iddeċidejna li nittrasmettu dejta fil-format JSON, li tiddeskrivi l-valuri f'forma dikjarattiva astratta.

Allura proprjetà rounding: 8 Windows 10 app tikkonverti għal CornerRadius="8", web - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Proprjetà offsetTop: 12 l-istess klijent tal-web f'każijiet differenti jista 'jinterpreta bħala top, margin-top, padding-top jew transform

Id-dikjarazzjoni tad-deskrizzjoni timplika wkoll li jekk il-pjattaforma teknikament ma tistax tuża proprjetà jew il-valur tagħha, tista 'tinjoraha. F'termini ta' terminoloġija, għamilna tip ta' lingwa Esperanto: xi wħud ittieħdu minn Android, xi wħud minn SVG, uħud minn CSS.

Jekk fuq pjattaforma partikolari għandek bżonn turi elementi b'mod differenti, implimentajna l-abbiltà li tittrasferixxi l-ġenerazzjoni tad-dejta korrispondenti fil-forma ta 'fajl JSON separat. Pereżempju, l-istat "fil-fokus" għal Smart TV jiddetta bidla fil-pożizzjoni tat-test taħt il-poster, li jfisser għal din il-pjattaforma dan il-komponent fil-valur tal-proprjetà "inċiż" se jkun fih it-8 punti ta 'indentazzjoni li jeħtieġ. Għalkemm dan jikkomplika l-infrastruttura tas-sistema tad-disinn, jagħti grad addizzjonali ta 'libertà, u jħallina bl-opportunità li namministraw id-"dissimilarità" viżwali tal-pjattaformi aħna stess, u ma nkunux ostaġġi tal-arkitettura li ħloqna.

Pittogrammi

L-ikonografija fi prodott diġitali hija dejjem voluminuż u mhux l-aktar sottoproġett sempliċi, li ħafna drabi teħtieġ disinjatur separat. Dejjem hemm ħafna glifi, kull wieħed minnhom għandu diversi daqsijiet u kuluri, u l-pjattaformi ġeneralment jeħtieġuhom f'formati differenti. B'mod ġenerali, ma kien hemm l-ebda raġuni biex dan kollu ma jitqiegħedx fis-sistema tad-disinn.

Il-glifi huma mgħobbija f'format vettur SVG, u l-valuri tal-kulur huma awtomatikament sostitwiti b'varjabbli. L-applikazzjonijiet tal-klijenti jistgħu jirċievuhom lesti biex jintużaw - fi kwalunkwe format u kulur.

Preview

Minbarra d-dejta JSON, ktibna għodda għall-previewing tal-komponenti - applikazzjoni JS li tgħaddi d-dejta JSON fuq il-fly permezz tal-markup u l-ġeneraturi tal-istil tagħha, u turi varjazzjonijiet varji ta 'kull komponent fil-browser. Essenzjalment, il-preview hija eżattament l-istess klijent bħall-applikazzjonijiet tal-pjattaforma u taħdem bl-istess data.

L-eħfef mod biex tifhem kif jaħdem komponent partikolari huwa billi jinteraġixxi miegħu. Għalhekk, aħna ma użajnax għodod bħal Storybook, iżda għamilna preview interattiva - tista 'tmiss, tipponta, tikklikkja... Meta żżid komponent ġdid fis-sistema tad-disinn, jidher fil-preview sabiex il-pjattaformi jkollhom xi ħaġa li jiffokaw fuq meta timplimentaha.

Dokumentazzjoni

Ibbażat fuq id-dejta fornuta lill-pjattaformi fil-forma ta 'JSON, id-dokumentazzjoni għall-komponenti hija ġġenerata awtomatikament. Lista ta 'proprjetajiet u tipi possibbli ta' valuri f'kull wieħed minnhom huma deskritti. Wara l-ġenerazzjoni awtomatika, l-informazzjoni tista 'tiġi ċċarata manwalment u tista' tiżdied deskrizzjoni tat-test. Il-preview u d-dokumentazzjoni huma cross-referenced lil xulxin fil-livell ta 'kull komponent, u l-informazzjoni kollha inkluża fid-dokumentazzjoni hija disponibbli għall-iżviluppaturi fil-forma ta' fajls JSON addizzjonali.

Deprecator

Neċessità oħra kienet il-kapaċità li jiġu sostitwiti u aġġornati komponenti eżistenti maż-żmien. Is-sistema tad-disinn tgħallmet tgħid lill-iżviluppaturi liema proprjetajiet jew saħansitra komponenti sħaħ ma jistgħux jintużaw u tneħħihom hekk kif ma jibqgħux jintużaw fuq il-pjattaformi kollha. Għad hemm ħafna xogħol "manwali" f'dan il-proċess, iżda m'aħniex wieqfa.

Żvilupp tal-klijenti

Bla dubju, l-aktar stadju kumpless kien l-interpretazzjoni tad-dejta tas-sistema tad-disinn fil-kodiċi tal-pjattaformi kollha li nappoġġjaw. Jekk, pereżempju, grids modulari fuq il-web mhumiex xi ħaġa ġdida, allura l-iżviluppaturi ta 'applikazzjonijiet mobbli indiġeni għal iOS u Android ħadmu ħafna qabel ma dehret kif jgħixu magħha.

Biex tqassam l-iskrins tal-applikazzjoni tal-iOS, nużaw żewġ mekkaniżmi bażiċi pprovduti minn iviUIKit: tqassim b'xejn ta 'elementi u tqassim ta' kollezzjonijiet ta 'elementi. Aħna nużaw VIPER, u l-interazzjoni kollha ma 'iviUIKit hija kkonċentrata f'View, u l-biċċa l-kbira tal-interazzjoni ma' Apple UIKit hija kkonċentrata f'iviUIKit. Id-daqsijiet u l-arranġament tal-elementi huma speċifikati f'termini ta 'kolonni u strutturi sintattiċi li jaħdmu fuq ir-restrizzjonijiet indiġeni tal-iOS SDK, u jagħmluhom aktar prattiċi. Dan issimplifika ħajjitna speċjalment meta naħdmu ma 'UICollectionView. Aħna ktibna diversi tgeżwir tad-dwana għat-tqassim, inklużi dawk pjuttost kumplessi. Kien hemm minimu ta 'kodiċi tal-klijent u sar dikjarattiv.

Biex niġġenera stili fil-proġett Android, nużaw Gradle, u nbiddlu d-dejta tas-sistema tad-disinn fi stili f'format XML. Fl-istess ħin, għandna diversi ġeneraturi ta 'diversi livelli:

• Bażiku. Id-data ta 'primittivi għal ġeneraturi ta' livell ogħla hija parsed.
• Riżorsa. Niżżel stampi, ikoni, u grafika oħra.
• Komponent. Huma miktuba għal kull komponent, li jiddeskrivi liema proprjetajiet u kif jittraduċuhom fi stili.

Rilaxxi ta' applikazzjoni

Wara li d-disinjaturi jkunu fasslu komponent ġdid jew iddisinjaw mill-ġdid wieħed eżistenti, dawn il-bidliet jiddaħħlu fis-sistema tad-disinn. L-iżviluppaturi ta 'kull pjattaforma qed jirfinaw il-ġenerazzjoni tal-kodiċi tagħhom biex jappoġġjaw il-bidliet. Wara dan, jista 'jintuża fl-implimentazzjoni ta' funzjonalità ġdida fejn dan il-komponent huwa meħtieġ. Għalhekk, l-interazzjoni mas-sistema tad-disinn ma sseħħx f'ħin reali, iżda biss fil-ħin tal-assemblaġġ ta 'rilaxxi ġodda. Dan l-approċċ jippermetti wkoll kontroll aħjar fuq il-proċess tat-trasferiment tad-dejta u jiżgura l-funzjonalità tal-kodiċi fi proġetti ta 'żvilupp tal-klijenti.

Riżultati ta '

Ilha sena minn meta s-sistema tad-disinn saret parti mill-infrastruttura li tappoġġja l-iżvilupp taċ-ċinema online Ivy, u diġà nistgħu niġbdu xi konklużjonijiet:

• Dan huwa proġett kbir u kumpless li jeħtieġ riżorsi dedikati kostanti.
• Dan ippermettilna noħolqu l-lingwaġġ viżwali uniku tagħna fuq il-pjattaformi li jilħaq l-għanijiet tas-servizz tal-vidjow onlajn.
• M'għadx għandna pjattaformi li għadhom lura viżwalment u funzjonalment.

Preview tal-komponenti tas-sistema tad-disinn Ivy - design.ivi.ru

Sors: www.habr.com