Kusukela ku-UI-kit kuya ohlelweni lokuklama

I-Ivy online cinema isipiliyoni

Lapho ekuqaleni kuka-2017 siqala ukucabanga ngokudala uhlelo lwethu lokulethwa kwe-design-to-code, abaningi base bevele bekhuluma ngakho futhi abanye babekwenza. Kodwa-ke, kuze kube namuhla kuncane okwaziwayo mayelana nesipiliyoni sokwakha izinhlelo zokuklama ze-cross-platform, futhi akuzange kube khona izindlela zokupheka ezicacile neziqinisekisiwe ezichaza ubuchwepheshe nezindlela zokuguqulwa okunjalo kwenqubo yokuqaliswa kokuklama kube umkhiqizo osuvele usebenza. Futhi ngokuthi "izingxenye zekhodi" ngokuvamile zisho izinto ezihluke kakhulu.

Ngaleso sikhathi, inkampani yaphinda kabili abasebenzi bayo unyaka nonyaka - kwakudingeka ukulinganisa umnyango wokuklama nokwandisa izinqubo zokudala nokudlulisa izakhiwo ukuze zithuthukiswe. Siphindaphinda konke lokhu "nge-zoo" yamapulatifomu adinga ukusekelwa, futhi sithola ukufana kwe-pandemonium yase-Babylonian, engakwazi "ukwenza ngokujwayelekile" futhi ingenise imali. Ukuthuthukiswa kwamapulatifomu ngokuvamile kwakuqhubeka ngokuhambisana, futhi ukusebenza okufanayo kwakungase kukhishwe kumapulatifomu ahlukene nge-lag yezinyanga ezimbalwa.


Amasethi esakhiwo ahlukene enkundla ngayinye

Ngokwesiko, saqala ngezinkinga isistimu yokuklama engasiza ukuzixazulula futhi yakhe izidingo zomklamo wayo. Ukwengeza ekudaleni ulimi olubumbene olubonakalayo, ukukhulisa isivinini sokwakheka nokuthuthuka, kanye nokwenza ngcono ikhwalithi yomkhiqizo uwonke, bekubalulekile ukuhlanganisa umklamo ngangokunokwenzeka. Lokhu kuyadingeka ukuze ukuthuthukiswa kokusebenza kwenzeke kuzo zonke izinkundla zethu ngesikhathi esisodwa: Iwebhu, i-iOS, i-Android, i-Smart TV, i-tvOS, i-Android TV, i-Windows 10, i-xBox One, i-PS4, i-Roku - ngaphandle kokusebenza kuzo zonke ngokwehlukana . Futhi sikwenzile!

Idizayini → idatha

Lapho kufinyelelwa izivumelwano eziyisisekelo phakathi kweminyango yomkhiqizo nokuthuthukiswa, sahlala phansi ukuze sikhethe isitaki sobuchwepheshe futhi sithole imininingwane yayo yonke inqubo - kusukela esakhiweni kuye ekukhululweni. Ukuze senze ngokuzenzakalelayo inqubo yokudlulisa umklamo ekuthuthukisweni, sihlole inketho yokudlulisa amapharamitha engxenye ngokuqondile kumafayela e-Sketch anezakhiwo. Kuvele ukuthi ukuthola izingcezu zekhodi esizidingayo kanye nokukhipha amapharamitha esiwadingayo kuwumsebenzi onzima futhi oyingozi. Okokuqala, abaklami kuzodingeka baqaphe kakhulu ekuqambeni zonke izendlalelo zekhodi yomthombo, okwesibili, lokhu kusebenza kuphela ezingxenyeni ezilula kakhulu, futhi okwesithathu, ukuncika kubuchwepheshe bomunye umuntu kanye nesakhiwo sekhodi yesakhiwo sokuqala se-Sketch kubeka engcupheni ikusasa lalo lonke. iphrojekthi. Sinqume ukukuyeka ukuzenzela kule ndawo. Wavela kanje umuntu wokuqala eqenjini lesistimu yokuklama, okufakwayo okuyizakhiwo zedizayini, futhi okukhiphayo kuyidatha echaza wonke amapharamitha wezingxenye futhi yahlelwa ngokohlelo ngokuya kwendlela yokuklama i-athomu.

Okuwukuphela kwento esele yenziwe ukuthi igcinwe kuphi futhi kanjani idatha, indlela yokuyidlulisela ekuthuthukisweni kanye nendlela yokuyihumusha ekuthuthukisweni kuwo wonke amapulatifomu esiwasekelayo. Kusihlwa kwanqamuka ukuba lukhuni ... Umphumela wemihlangano evamile yeqembu elisebenzayo elihlanganisa abaklami nabahola beqembu abavela endaweni ngayinye kwakuyisivumelwano kulokhu okulandelayo.

Sihlaziya mathupha okubonakalayo kuma-elementi e-athomu: amafonti, imibala, obala, ama-indent, amarawundi, izithonjana, izithombe nobude besikhathi bokugqwayiza. Futhi siqoqa kusuka kulezi zinkinobho, okokufaka, amabhokisi okuhlola, amawijethi ekhadi lasebhange, njll. Sinikeza amagama angewona ama-semantic kuzitayela zanoma yimaphi amaleveli, ngaphandle kwezithonjana, isibonelo, amagama amadolobha, amagama ama-nymphs, i-Pokemon, imoto. brand... Kunesimo esisodwa kuphela - uhlu akufanele luphele ngaphambi , ukuthi izitayela ziphela kanjani - umbukiso kufanele uhambe! Akufanele uthathwe yi-semantics, ukuze ungangezeki inkinobho ephakathi phakathi "kokuncane" kanye "nokumaphakathi," isibonelo.

Ulimi olubonakalayo

Onjiniyela basala ukuthi bacabange ngendlela yokugcina nokudlulisa idatha ngendlela evumelana nawo wonke amapulatifomu, futhi ukuklama kwakudingeka kuklame izici zesixhumi esibonakalayo ezingabukeka zizinhle futhi zisebenze ngempumelelo kuwo wonke amadivaysi asekelwayo.

Ngaphambilini, besesivele sikwazile “ukuhlola” izinto eziningi zokuklama kuhlelo lokusebenza lwe-Windows 10, ngaleso sikhathi okwakuyinkundla entsha yethu, okungukuthi, yayidinga ukunikezwa nokuthuthukiswa “kusuka ekuqaleni.” Ngokuyidweba, sikwazile ukulungiselela nokuhlola iningi lezingxenye futhi siqonde ukuthi yiziphi zazo okufanele zifakwe ohlelweni lokuklama lwe-Eevee lwesikhathi esizayo. Ngaphandle kwebhokisi lesihlabathi elinjalo, isipiliyoni esinjalo singatholwa kuphela ngenani elikhulu lokuphindaphinda kumapulatifomu asevele esebenza, futhi lokhu kungathatha isikhathi esingaphezu konyaka.

Ukusebenzisa kabusha izingxenye ezifanayo kumapulatifomu ahlukene kunciphisa inani lezakhiwo kanye noxhaxha lwedatha yesistimu yokuklama ngokuphawulekayo, ngakho-ke umklamo kwakudingeka uxazulule inkinga eyodwa, ngaphambili eyayingachazwanga emikhubeni yokuklama nokuthuthukiswa komkhiqizo - kanjani, isibonelo, ingabe inkinobho yamafoni namathebulethi ingasetshenziswa kabusha kuma-TV? Futhi yini okufanele siyenze ngosayizi bamafonti nezakhi kumapulatifomu ahlukene kangaka?

Ngokusobala, bekudingeka ukuklama igridi ye-cross-platform modular ezosetha amasayizi ombhalo nama-elementi esiwadinga kungxenyekazi ngayinye ethile. Njengesiqalo segridi, sikhethe usayizi nenani lamaphosta e-movie esifuna ukuwabona esikrinini esithile futhi, ngokusekelwe kulokhu, sakha umthetho wokwakha amakholomu egridi, inqobo nje uma ububanzi bekholomu eyodwa bulingana. ebubanzini bephosta.

Manje sidinga ukuletha zonke izikrini ezinkulu kusayizi ofanayo wesakhiwo futhi sizifake kugridi evamile. I-Apple TV ne-Roku yakhelwe ngosayizi ongu-1920x1080, i-Android TV - 960x540, ama-Smart TV, kuye ngomthengisi, ayafana, kodwa kwesinye isikhathi 1280x720. Uma uhlelo lokusebenza lunikezwa futhi luboniswa kuzikrini ze-Full HD, i-960 iphindaphindwa ngo-2, i-1280 iphindwe ngo-1,33, futhi i-1920 iphuma njengoba injalo.

Seqa imininingwane eyisicefe, safinyelela esiphethweni sokuthi ngokuvamile zonke izikrini, okuhlanganisa izikrini zethelevishini, ngokwezakhi nobukhulu bazo, zimbozwe isakhiwo esisodwa sokuklama, futhi zonke izikrini zethelevishini ziyisimo esikhethekile segridi ye-cross-platform evamile, futhi iqukethe amakholomu amahlanu noma ayisithupha, njengethebhulethi noma ideskithophu evamile. Ubani onentshisekelo ngemininingwane, ngena kumazwana.

I-UI eyodwa yazo zonke izinkundla

Manje, ukudweba isici esisha, asikho isidingo sokudweba izakhiwo zenkundla ngayinye, kanye nezinketho zokuzivumelanisa nezimo zayo ngayinye yazo. Kwanele ukukhombisa ukwakheka okukodwa nokuvumelana nezimo kuwo wonke amapulatifomu namadivayisi wanoma ibuphi ububanzi: amafoni - 320-599, konke okunye - 600-1280.

Idatha → ukuthuthukiswa

Yebo, njengoba singathanda ukuzuza umklamo obumbene ngokuphelele, inkundla ngayinye inezici zayo ezihlukile. Ngisho noma kokubili iwebhu ne-Smart TV zisebenzisa isitaki se-ReactJS + TypeScript, uhlelo lokusebenza lwe-Smart TV lusebenza kumaklayenti e-WebKit ne-Presto ayigugu ngakho alikwazi ukwabelana ngezitayela newebhu. Futhi izincwadi zezindaba ze-imeyili ziphoqeleka ngokuphelele ukuthi zisebenze ngesakhiwo sethebula. Ngesikhathi esifanayo, azikho izinkundla ezingezona ze-html ezisebenzisa noma ezihlela ukusebenzisa i-React Native noma ezinye izifaniso zayo, zesaba ukucekelwa phansi kokusebenza, njengoba sinezakhiwo eziningi ngokwezifiso, amaqoqo anomqondo wokubuyekeza oyinkimbinkimbi, izithombe namavidiyo. Ngakho-ke, isikimu esivamile sokuletha izitayela ze-CSS esenziwe ngomumo noma izingxenye ze-React asifanele thina. Ngakho-ke, sinqume ukudlulisa idatha ngefomethi ye-JSON, echaza amanani ngefomu lesimemezelo esingaqondakali.

Ngakho impahla rounding: 8 Windows 10 uhlelo lokusebenza luguqulelwa ku CornerRadius="8", iwebhu - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Impahla offsetTop: 12 iklayenti lewebhu elifanayo ezimeni ezahlukene lingahumusha ngokuthi top, margin-top, padding-top noma transform

Ukumenyezelwa kwencazelo kuphinde kusho ukuthi uma inkundla ingakwazi ukusebenzisa isakhiwo noma inani laso, ingayiziba. Ngokwamagama, senze uhlobo lolimi lwesi-Esperanto: ezinye zithathwe ku-Android, ezinye ku-SVG, ezinye ku-CSS.

Uma endaweni ethile udinga ukubonisa ama-elementi ngendlela ehlukile, sisebenzise ikhono lokudlulisa ukukhiqizwa kwedatha okuhambisanayo ngendlela yefayela elihlukile le-JSON. Isibonelo, isimo "sokugxilwa kuso" se-Smart TV sibeka ushintsho endaweni yombhalo ngaphansi kwephosta, okusho ukuthi kule nkundla le ngxenye enanini lendawo "ye-indent" izoqukatha amaphuzu ayi-8 ewadingayo. Nakuba lokhu kwenza ingqalasizinda yohlelo lokuklama ibe nzima, kunikeza izinga elengeziwe lenkululeko, kusishiya nethuba lokuphatha “ukungafani” okubonakalayo kwamapulatifomu ngokwethu, futhi singabambeleli ekwakhiweni kwethu esikudalile.

Ama-pictograms

I-Iconography emkhiqizweni wedijithali ihlale iwumsebenzi omkhulu hhayi nje iphrojekthi encane, ngokuvamile edinga umklami ohlukile. Kuhlale kunama-glyphs amaningi, ngalinye linosayizi nemibala eminingana, futhi amapulatifomu ngokuvamile awadinga ngamafomethi ahlukene. Ngokuvamile, sasingekho isizathu sokungafaki konke lokhu ohlelweni lokuklama.

Ama-Glyphs alayishwa ngefomethi ye-SVG vector, futhi amanani ombala athathelwa indawo ngokuzenzakalelayo okuguquguqukayo. Izinhlelo zokusebenza zeklayenti zingazithola sezilungele ukusetshenziswa - kunoma iyiphi ifomethi nombala.

Buka kuqala

Ngaphezulu kwedatha ye-JSON, sibhale ithuluzi lokubuka kuqala izingxenye - uhlelo lokusebenza lwe-JS oludlulisa idatha ye-JSON ngokuhamba kwesikhathi ngokusebenzisa imakhaphu kanye namajeneretha esitayela, futhi libonisa ukuhlukahluka okuhlukahlukene kwengxenye ngayinye kusiphequluli. Empeleni, ukuhlola kuqala kuyiklayenti elifanayo ncamashi nezinhlelo zokusebenza zenkundla futhi kusebenza nedatha efanayo.

Indlela elula yokuqonda ukuthi ingxenye ethile isebenza kanjani ukuxhumana nayo. Ngakho-ke, asizange sisebenzise amathuluzi afana ne-Storybook, kodwa senze ukuhlola kuqala okusebenzisanayo - ungathinta, ukhombe, uchofoze... Uma wengeza ingxenye entsha ohlelweni lokuklama, ivela ekuhloleni kuqala ukuze izinkundla zibe nokuthile okumele zigxile kukho lapho ukuwenza.

Imibhalo

Ngokusekelwe kudatha enikezwa ezinkundleni ngesimo se-JSON, imibhalo yezingxenye ikhiqizwa ngokuzenzakalelayo. Uhlu lwezakhiwo kanye nezinhlobo zamanani ezingaba khona kuzo zonke zazo zichazwe. Ngemva kokukhiqiza okuzenzakalelayo, ulwazi lungacaciswa mathupha futhi incazelo yombhalo ingengezwa. Ukuhlola kuqala namadokhumenti kukhonjwe ngokushayisanayo ezingeni lengxenye ngayinye, futhi lonke ulwazi olufakwe kumadokhumenti luyatholakala konjiniyela ngendlela yamafayela e-JSON engeziwe.

I-Deprecator

Esinye isidingo kwaba ikhono lokushintsha nokuvuselela izingxenye ezikhona ngokuhamba kwesikhathi. Uhlelo lokuklama lufunde ukutshela abathuthukisi ukuthi yiziphi izakhiwo noma zonke izingxenye ezingeke zisetshenziswe futhi zizisuse ngokushesha lapho zingasasetshenziswa kuwo wonke amapulatifomu. Kusenomsebenzi omningi “wezandla” kulolu hlelo, kodwa asimile.

Ukuthuthukiswa kweklayenti

Ngokungangabazeki, isigaba esiyinkimbinkimbi kakhulu kwakuwukuchazwa kwedatha yesistimu yokuklama kukhodi yazo zonke izinkundla esizisekelayo. Uma, ngokwesibonelo, amagridi e-modular kuwebhu engeyona into entsha, khona-ke abathuthukisi bezinhlelo zokusebenza zeselula ze-iOS ne-Android basebenze kanzima ngaphambi kokuthi bathole ukuthi bangaphila kanjani nakho.

Ukuze sihlele izikrini zohlelo lokusebenza lwe-iOS, sisebenzisa izindlela ezimbili eziyisisekelo ezinikezwe i-iviUIKit: ukwakheka kwamahhala kwezinto kanye nokwakheka kwamaqoqo wezinto. Sisebenzisa i-VIPER, futhi konke ukusebenzisana ne-iviUIKit kugxile kokuthi Buka, futhi ukuxhumana okuningi ne-Apple UIKit kugxile ku-iviUIKit. Osayizi nokuhlelwa kwezinto kucaciswa ngokuya ngamakholomu nezakhiwo ze-syntactic ezisebenza ngaphezulu kwezingqinamba zomdabu ze-iOS SDK, okuzenza zisebenziseke kakhulu. Lokhu kwenza impilo yethu yaba lula ikakhulukazi lapho sisebenza ne-UICollectionView. Sibhale izisonga zangokwezifiso ezimbalwa zezakhiwo, kufaka phakathi eziyinkimbinkimbi impela. Kube khona ubuncane bekhodi yeklayenti futhi yaba isimemezelo.

Ukuze sikhiqize izitayela kuphrojekthi ye-Android, sisebenzisa i-Gradle, siguqule idatha yesistimu yokuklama ibe izitayela ngefomethi ye-XML. Ngesikhathi esifanayo, sinamajeneretha amaningana wamazinga ahlukahlukene:

• Okuyisisekelo. Idatha yama-primititive amajeneretha ezinga eliphezulu iyacutshungulwa.
• Insiza. Landa izithombe, izithonjana, neminye imidwebo.
• Isakhi. Zibhalelwe ingxenye ngayinye, echaza ukuthi yiziphi izakhiwo nokuthi zingahumusha kanjani izitayela.

Ukukhishwa kohlelo lokusebenza

Ngemuva kokuthi abaklami bedwebe ingxenye entsha noma bahlele kabusha ekhona, lezi zinguquko zifakwa ohlelweni lokuklama. Onjiniyela benkundla ngayinye balungisa kahle ukukhiqizwa kwekhodi yabo ukuze basekele izinguquko. Ngemuva kwalokhu, ingasetshenziswa ekusetshenzisweni kokusebenza okusha lapho le ngxenye idingeka khona. Ngakho-ke, ukusebenzisana nesistimu yokuklama akwenzeki ngesikhathi sangempela, kodwa kuphela ngesikhathi sokuhlanganisa ukukhishwa okusha. Le ndlela iphinde ivumele ukulawula kangcono inqubo yokudluliswa kwedatha futhi iqinisekise ukusebenza kwekhodi kumaphrojekthi okuthuthukisa amaklayenti.

Imiphumela

Sekuphele unyaka uhlelo lokuklama lube yingxenye yengqalasizinda esekela ukuthuthukiswa kwe-Ivy cinema eku-inthanethi, futhi sesingafinyelela iziphetho ezithile:

• Lena iphrojekthi enkulu futhi eyinkimbinkimbi edinga izinsiza ezizinikele njalo.
• Lokhu kusivumele ukuthi sidale olwethu ulimi olubonakalayo oluhlukile oluhlangabezana nezinjongo zesevisi yamavidiyo aku-inthanethi.
• Asisenazo izinkundla ezibukekayo nezisebenzayo.

Ukubuka kuqala kwezingxenye zesistimu ye-Ivy design - design.ivi.ru

Source: www.habr.com