Ukusuka kwi-UI-kit ukuya kwinkqubo yoyilo

Amava e-cinema ye-Ivy kwi-intanethi

Xa ekuqaleni kuka-2017 saqala ukucinga ngokudala inkqubo yethu yokuhanjiswa kwekhowudi, abaninzi babesele bethetha ngayo kwaye abanye babeyenza. Nangona kunjalo, ukuza kuthi ga namhlanje kuncinci okwaziwayo malunga namava okwakha iinkqubo zokuyila iiplatifomu ezinqamlezileyo, kwaye akuzange kubekho iiresiphi ezicacileyo nezingqiniweyo ezichaza iteknoloji kunye neendlela zokuguqulwa kwenkqubo yokuphunyezwa koyilo kwimveliso esele isebenza. Kwaye ngokuthi "amacandelo kwikhowudi" bahlala bethetha izinto ezahlukeneyo kakhulu.

Ngeli xesha, inkampani iphindaphindeka kabini abasebenzi bayo unyaka nonyaka - bekuyimfuneko ukukala isebe loyilo kunye nokwandisa iinkqubo zokudala kunye nokudluliselwa koyilo lophuhliso. Siphindaphinda konke oku nge "zoo" yamaqonga afuna ukuxhaswa, kwaye sifumana i-semblance of Babylonian pandemonium, engakwaziyo "ukuyenza ngokuqhelekileyo" kwaye ingenise ingeniso. Uphuhliso lwamaqonga lwaluhlala luqhubeka ngokuhambelanayo, kwaye ukusebenza okufanayo kunokukhutshwa kwiiplatifti ezahlukeneyo kunye ne-lag yeenyanga eziliqela.


Iseti zoyilo olwahlukileyo kwiqonga ngalinye

Ngokwemveli, saqala ngeengxaki ukuba inkqubo yoyilo iya kunceda ukusombulula kunye nokuqulunqa iimfuno zoyilo lwayo. Ukongeza ekudaleni ulwimi olubonakalayo olumanyeneyo, ukwandisa isantya soyilo kunye nophuhliso, kunye nokuphucula umgangatho wemveliso ngokubanzi, bekubalulekile ukudibanisa uyilo kangangoko kunokwenzeka. Oku kuyimfuneko ukuze uphuhliso lomsebenzi lunokwenzeka kuwo onke amaqonga ethu ngaxeshanye: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - ngaphandle kokusebenza kuzo zonke ngokwahlukileyo . Kwaye siyenzile!

Yila → idatha

Xa kwafikelelwa kwizivumelwano ezisisiseko phakathi kwemveliso nophuhliso lwamasebe, sahlala phantsi ukuze sikhethe isitaki sobuchwephesha kwaye sijonge iinkcukacha zenkqubo yonke - ukusuka kwisakhiwo ukuya kukhululo. Ukwenza ngokuzenzekelayo inkqubo yokudlulisa uyilo kuphuhliso, sihlolisise ukhetho lokwahlulahlula iiparamitha zecandelo ngokuthe ngqo kwiifayile zeSketch ezinezakhiwo. Kwavela ukuba ukufumana iinqununu zekhowudi esizifunayo kunye nokukhupha iiparamitha esizifunayo kwakuyinto enzima kwaye iyingozi. Okokuqala, abaqulunqi kuya kufuneka balumke kakhulu ekubizeni zonke iileya zekhowudi yomthombo, okwesibini, oku kusebenza kuphela kwezona zixhobo zilula, kwaye okwesithathu, ukuxhomekeka kwitekhnoloji yomnye umntu kunye nesakhiwo sekhowudi yoyilo lweSketch lwasekuqaleni lubeka emngciphekweni ikamva lalo lonke. iprojekthi. Sigqibe kwelokuba sikuyeke ukuzenzela kule ndawo. Yile ndlela umntu wokuqala avele ngayo kwiqela lenkqubo yoyilo, igalelo layo liyilo loyilo, kwaye isiphumo yidatha echaza zonke iiparamitha zamacandelo kwaye zicwangciswe ngokwe-hierarchically ngokwendlela yoyilo lweathom.

Into esele ukuyenza kukuba kuphi kwaye njani ukugcina idatha, indlela yokuyidlulisela kuphuhliso kunye nendlela yokuyitolika ekuphuhlisweni kuzo zonke iiplatifomu esizixhasayo. Ukuhlwa kwayeka ukuba ngu-languid ... Isiphumo seentlanganiso eziqhelekileyo zeqela elisebenzayo elibandakanya abaqulunqi kunye neqela elikhokelayo kwiqonga ngalinye lesivumelwano malunga noku kulandelayo.

Sicazulula ngokwalo imbonakalo ibe yiziqalelo zeathom: iifonti, imibala, ukungafihli, i-indents, iirawundi, ii-ayikhoni, imifanekiso kunye nobude bexesha loopopayi. Kwaye siqokelela kulo maqhosha, amagalelo, iibhokisi zokukhangela, iiwijethi zekhadi lebhanki, njalo njalo. brand... Kukho imeko enye kuphela - uluhlu akufanele luphelelwe ngaphambili , indlela izitayela eziphela ngayo - umboniso kufuneka uhambe! Akufanele uthathwe nge-semantics, ukuze ungafaki iqhosha eliphakathi phakathi "kwencinci" kunye "nephakathi," umzekelo.

Ulwimi olubonakalayo

Abaphuhlisi bashiywe ukuba bacinge malunga nendlela yokugcina nokudlulisa idatha ngendlela ehambelana nazo zonke iiplatifomu, kwaye ukuyila kwakufuneka kuyilwe izinto ezijongana nazo ezinokubonakala zilungile kwaye zisebenze ngokufanelekileyo kuwo wonke umkhumbi wezixhobo ezixhaswayo.

Ngaphambili, besisele sikwazile "ukuvavanya" uninzi lwezinto zoyilo kwisicelo seWindows 10, ngelo xesha yayiliqonga elitsha lethu, oko kukuthi, lalifuna unikezelo kunye nophuhliso "ukusuka ekuqaleni." Ngokuyizoba, sakwazi ukulungiselela nokuvavanya uninzi lwamacandelo kwaye siqonde ukuba yeyiphi na into ebekufanele ukuba ifakwe kwinkqubo yoyilo ye-Eevee yexesha elizayo. Ngaphandle kwebhokisi yesanti enjalo, amava anjalo anokufunyanwa kuphela ngenani elikhulu lokuphindaphinda kumaqonga asele esebenza, kwaye oku kuya kuthatha ngaphezu konyaka.

Ukusebenzisa kwakhona amacandelo afanayo kumaqonga ahlukeneyo kunciphisa inani loyilo kunye noluhlu lwedatha yenkqubo yoyilo ngokuphawulekayo, ngoko ke ukuyila kwafuneka kusonjululwe enye ingxaki, eyayingachazwanga ngaphambili kwimisebenzi yoyilo kunye nophuhliso lwemveliso - njani, umzekelo, ingaba iqhosha leefowuni kunye neetafile lingaphinda lisetyenziswe kwiiTV? Kwaye kufuneka senze ntoni ngobungakanani beefonti kunye nezinto ezikumaqonga ahlukeneyo?

Ngokucacileyo, bekuyimfuneko ukuyila igridi yeemodyuli ezinqamlezileyo eziza kuseka okubhaliweyo kunye nobukhulu bento esiyifunayo kwiqonga ngalinye. Njengesiqalo segridi, sikhethe ubungakanani kunye nenani leepowusta zemuvi esifuna ukuzibona kwiscreen esithile kwaye, ngokusekwe koku, senze umgaqo wokwakha iikholamu zegridi, ngaphandle kokuba ububanzi bekholamu enye bulingana. ukuya kububanzi bepowusta.

Ngoku kufuneka sizise zonke izikrini ezinkulu kubungakanani obufanayo boyilo kwaye sizifake kwigridi eqhelekileyo. I-Apple TV kunye neRoku zenzelwe ubukhulu be-1920x1080, i-Android TV - 960x540, i-Smart TV, kuxhomekeke kumthengisi, ziyafana, kodwa ngamanye amaxesha i-1280x720. Xa i-app inikezelwa kwaye iboniswe kwi-Full HD izikrini, i-960 iphindwe nge-2, i-1280 iphindwe nge-1,33, kwaye i-1920 iphuma njengoko injalo.

Ukutsiba iinkcukacha ezikruqulayo, safikelela kwisigqibo sokuba ngokubanzi zonke izikrini, kubandakanywa izikrini zikamabonwakude, ngokwemigaqo yeempawu kunye nobukhulu bazo, zigutyungelwe luyilo olunye loyilo, kwaye zonke izikrini zikamabonwakude zingumzekelo okhethekileyo wegridi yeqonga elinqamlezileyo, kwaye iqulathe iikholamu ezintlanu okanye ezintandathu, njenge-avareji yethebhulethi okanye idesktop. Ngubani onomdla kwiinkcukacha, hamba kumazwana.

I-UI enye kuwo onke amaqonga

Ngoku, ukuzoba into entsha, akufuneki sizobe uyilo lweqonga ngalinye, kunye neenketho zokuziqhelanisa nazo nganye yazo. Kwanele ukubonisa isakhiwo esisodwa kunye nokulungelelaniswa kwayo kuzo zonke iiplatifomu kunye nezixhobo zaluphi na ububanzi: iifowuni - 320-599, yonke enye into - 600-1280.

Idatha → uphuhliso

Ewe, kangangoko singathanda ukufezekisa uyilo olumanyeneyo ngokupheleleyo, iqonga ngalinye lineempawu zalo ezizodwa. Nangona zombini iwebhu kunye neSmart TV zisebenzisa iReactJS + TypeScript stack, iSmart TV app isebenza kubathengi beWebKit kunye nePresto kwaye ke ayinako ukwabelana ngezitayile newebhu. Kwaye iileta zeendaba ze-imeyile zinyanzeliswa ngokupheleleyo ukuba zisebenze nge-tabular layout. Kwangaxeshanye, akukho nalinye iqonga le-non-html elisebenzisa okanye liceba ukusebenzisa i-React Native okanye nayiphi na i-analogues yayo, isoyika ukuthotywa kokusebenza, kuba sineendlela ezininzi zokubeka isiko, uqokelelo olunengqiqo yohlaziyo oluntsonkothileyo, imifanekiso kunye neevidiyo. Ke ngoko, iskimu esiqhelekileyo sokuhambisa izitayile ze-CSS esele zenziwe okanye izinto zeReact azisifanelanga. Ke ngoko, sigqibe kwelokuba sidlulise idatha ngefomathi ye-JSON, sichaza amaxabiso kwifomu yokubhengeza.

Ngoko ipropati rounding: 8 Windows 10 app iguqulela kwi CornerRadius="8", iwebhu - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Ipropati offsetTop: 12 umxhasi wewebhu ofanayo kwiimeko ezahlukeneyo unokutolika njenge top, margin-top, padding-top okanye transform

Ukuchazwa kwenkcazo kwakhona kuthetha ukuba ukuba iqonga lobugcisa alikwazi ukusebenzisa ipropati okanye ixabiso layo, lingayihoyi. Ngokwesigama, senze uhlobo lolwimi lwe-Esperanto: ezinye zithathwe kwi-Android, ezinye kwi-SVG, ezinye kwi-CSS.

Ukuba kwiqonga elithile kufuneka ubonise izinto ngokwahlukileyo, siphumeze ukukwazi ukudlulisa ukuveliswa kwedatha ehambelanayo ngendlela yefayile ye-JSON eyahlukileyo. Ngokomzekelo, imeko "ekugxilwe kuyo" kwi-Smart TV ichaza utshintsho kwindawo yesicatshulwa phantsi kwepowusta, oku kuthetha ukuba le qonga le nxalenye kwixabiso lepropati "ye-indent" iya kuba ne-8 i-indentation points ifunekayo. Nangona le nto inzima iziseko zenkqubo yoyilo, inika idigri eyongezelelweyo yenkululeko, isinika ithuba lokulawula "ukungafani" okubonakalayo kwamaqonga ngokwethu, kwaye singabi yimbangi kwi-architecture esiyidalile.

Iifotogram

I-Iconography kwimveliso yedijithali isoloko iyinto eninzi kwaye ingeyiyo eyona projekthi ilula, ihlala ifuna umyili owahlukileyo. Kuhlala kukho iiglyphs ezininzi, nganye kuzo inobungakanani kunye nemibala emininzi, kwaye amaqonga ahlala ewafuna kwiifomathi ezahlukeneyo. Ngokubanzi, kwakungekho sizathu sokungafaki konke oku kwinkqubo yoyilo.

Iiglyphs zilayishwe kwifomathi yeVector yeSVG, kwaye amaxabiso ombala atshintshwa ngokuzenzekelayo ngezinto eziguquguqukayo. Izicelo zabathengi zingazifumana zilungele ukusetyenziswa - kuyo nayiphi na ifomathi kunye nombala.

Jonga kwangaphambili

Ngaphezulu kwedatha ye-JSON, sibhale isixhobo sokujonga kuqala amacandelo - isicelo se-JS esidlula idatha ye-JSON kwi-fly ngokusebenzisa i-markup yayo kunye ne-generator generator, kwaye ibonisa ukuhluka okuhlukeneyo kwecandelo ngalinye kwisiphequluli. Ngokusisiseko, i-preview ifana kanye nomxhasi ofanayo nosetyenziso lweqonga kwaye isebenza ngedatha efanayo.

Eyona ndlela ilula yokuqonda indlela icandelo elithile elisebenza ngayo kukunxibelelana nalo. Ngoko ke, asizange sisebenzise izixhobo ezifana ne-Storybook, kodwa senze i-preview edibeneyo - ungachukumisa, ukhomba, ucofe ... ukuyiphumeza.

Amaxwebhu

Ngokusekelwe kwidatha enikezelwe kwiiplatifomu ngendlela ye-JSON, amaxwebhu amacandelo enziwa ngokuzenzekelayo. Uluhlu lweepropathi kunye neentlobo ezinokwenzeka zamaxabiso kuzo zonke zichazwe. Emva kokuveliswa ngokuzenzekelayo, ulwazi lunokucaciswa ngesandla kwaye inkcazo yombhalo inokongezwa. Umboniso kunye namaxwebhu abhekiselele komnye nomnye kwinqanaba lecandelo ngalinye, kwaye lonke ulwazi olubandakanyiweyo kumaxwebhu luyafumaneka kubaphuhlisi ngendlela yeefayile ze-JSON ezongezelelweyo.

I-Deprecator

Enye imfuneko yayikukukwazi ukubuyisela kunye nokuhlaziya amacandelo akhoyo ngokuhamba kwexesha. Inkqubo yoyilo ifunde ukuxelela abaphuhlisi ukuba zeziphi iipropati okanye amacandelo onke angenakusetyenziswa kwaye awasuse ngokukhawuleza xa engasasetyenziswa kuwo onke amaqonga. Usemninzi umsebenzi “wezandla” kule nkqubo, kodwa asimi ngxi.

Uphuhliso lwabathengi

Ngokungathandabuzekiyo, inqanaba elinzima kakhulu kukutolikwa kwedatha yenkqubo yoyilo kwikhowudi yazo zonke iiplatifomu esizixhasayo. Ukuba, umzekelo, iigridi zemodyuli kwiwebhu aziyonto intsha, ke abaphuhlisi bezicelo zemveli zeselfowuni ze-iOS kunye ne-Android basebenze nzima ngaphambi kokuba bacinge ukuba bangaphila njani nayo.

Ukucwangcisa izikrini zesicelo se-iOS, sisebenzisa iindlela ezimbini ezisisiseko ezibonelelwa yi-iviUIKit: uyilo lwasimahla lwezinto kunye noyilo lwengqokelela yezinto. Sisebenzisa i-VIPER, kwaye yonke intsebenziswano kunye ne-iviUIKit igxininiswe kwi-View, kwaye ininzi intsebenziswano ne-Apple UIKit igxininiswe kwi-iviUIKit. Ubukhulu kunye nokuhlelwa kwezinto zichazwe ngokwemigaqo kunye nezakhiwo ze-syntactic ezisebenza ngaphezulu kwemiqobo ye-iOS ye-SDK yendalo, ezenza ukuba zisebenze ngakumbi. Oku kuye kwabenza lula ubomi bethu xa sisebenza ne-UICollectionView. Sibhale izisongelo ezininzi zesiko loyilo, kubandakanya nezintsonkothileyo. Kwakukho ubuncinci bekhowudi yomxhasi kwaye yaba yinkcazo.

Ukuvelisa izitayile kwiprojekthi ye-Android, sisebenzisa iGradle, siguqula idatha yenkqubo yoyilo ibe zizitayile kwifomathi yeXML. Kwangaxeshanye, sineejeneretha ezininzi zamanqanaba ahlukeneyo:

• Isisiseko. Idata yezinto zakudala zomgangatho ophezulu weejenereyitha zicazululiwe.
• Ubutyebi. Khuphela imifanekiso, ii-ayikhoni, kunye neminye imizobo.
• Icandelo. Zibhalwe kwicandelo ngalinye, elichaza ukuba zeziphi iimpawu kunye nendlela yokuguqulela kwiindlela.

Ukukhutshwa kwesicelo

Emva kokuba abaqulunqi bezoba icandelo elitsha okanye baphinde bahlengahlengise esele likho, olu tshintsho londliwa kwinkqubo yoyilo. Abaphuhlisi beqonga ngalinye balungisa kakuhle ukuveliswa kwekhowudi yabo ukuxhasa utshintsho. Emva koko, inokusetyenziswa ekuphunyezweni kokusebenza okutsha apho eli candelo lifuneka. Ngaloo ndlela, ukusebenzisana nenkqubo yoyilo akwenzeki ngexesha langempela, kodwa kuphela ngexesha lokudibanisa ukukhutshwa okutsha. Le ndlela ikwavumela ulawulo olungcono kwinkqubo yokudluliselwa kwedatha kwaye iqinisekisa ukusebenza kwekhowudi kwiiprojekthi zophuhliso lwabaxhasi.

Iziphumo

Sele ingunyaka ukusukela oko inkqubo yoyilo yaba yinxalenye yeziseko zophuhliso ezixhasa uphuhliso lwe-cinema ye-intanethi ye-Ivy, kwaye sele sinokufikelela kwizigqibo ezithile:

• Le yiprojekthi enkulu nentsonkothileyo efuna izixhobo ezizinikezele rhoqo.
• Oku kusivumele ukuba senze olwethu ulwimi olubonwayo olwahlukileyo oludibana neenjongo zenkonzo yevidiyo ye-intanethi.
• Asisenawo amaqonga abambekayo ngokubonakalayo nangokusebenzayo.

Umboniso wenkqubo yoyilo lwe-Ivy - design.ivi.ru

umthombo: www.habr.com