Kubva kuUI-kit kuenda kudhizaini system

Ivy online cinema chiitiko

Apo pakutanga kwe2017 takatanga kufunga nezvekugadzira yedu dhizaini-ku-kodeti yekutumira sisitimu, vazhinji vanga vachitotaura nezvazvo uye vamwe vaitozviita. Nekudaro, kusvika nhasi zvishoma zvinozivikanwa nezve ruzivo rwekuvaka muchinjika-chikuva dhizaini masisitimu, uye pakange pasina akajeka uye akapupurirwa mabikirwo anotsanangura matekinoroji uye nzira dzekushandura kwakadaro kwemaitiro ekugadzirisa dhizaini kuita chigadzirwa chave kushanda. Uye ne "zvikamu mukodhi" ivo vanowanzoreva zvinhu zvakasiyana kwazvo.

Zvichakadaro, kambani yakawedzera kaviri vashandi vayo gore negore - zvaive zvakafanira kuyera dhipatimendi rekugadzira uye kugadzirisa maitiro ekugadzira uye kuendesa marongero ebudiriro. Isu tinowanza izvi zvese ne "zoo" yemapuratifomu anoda kutsigirwa, uye tinowana semblance yeBabylonian pandemonium, iyo isingakwanise "kuzviita zvakajairika" uye kuunza mari. Kuvandudzwa kwemapuratifomu kwaiwanzo enderera pamwe chete, uye kushanda kwakafanana kwaigona kuburitswa pamapuratifomu akasiyana ane lag yemwedzi yakati wandei.


Akaparadzana marongero epuratifomu yega yega

Sechinyakare, takatanga nematambudziko ayo dhizaini system yaizobatsira kugadzirisa uye kugadzira zvinodiwa pakugadzirwa kwayo. Pamusoro pekugadzira mutauro wakabatana wekuona, kuwedzera kukurumidza kwekurongeka nekusimudzira, uye nekuvandudza kunaka kwechigadzirwa zvachose, zvaive zvakakosha kubatanidza dhizaini zvakanyanya sezvinobvira. Izvi zvinodikanwa kuitira kuti kusimudzira kwekushanda kugone kuitika pamapuratifomu edu ese panguva imwe chete: Webhu, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - pasina kushanda pane imwe neimwe yadzo zvakasiyana . Uye takazviita!

Dhizaini → data

Pakasvika zvibvumirano zvakakosha pakati pechigadzirwa nemadhipatimendi ebudiriro, takagara pasi kuti tisarudze tekinoroji uye nekuongorora zvese zvehurongwa hwese - kubva pakurongeka kusvika pakuburitswa. Kuti tiite otomatiki maitiro ekufambisa dhizaini kubudiriro, isu takaongorora sarudzo yekusiyanisa zvikamu zvezvikamu zvakananga kubva kuSketch mafaera ane marongero. Zvakazoitika kuti kutsvaga zvidimbu zvekodhi zvataida uye kubvisa maparamendi ataida raive basa rakaoma uye rine njodzi. Chekutanga, vagadziri vanozofanira kungwarira zvakanyanya pakudoma ese akaturikidzana eiyo sosi kodhi, chechipiri, izvi zvinongoshanda kune zvakareruka zvikamu, uye chechitatu, kutsamira kune mumwe munhu tekinoroji uye kodhi dhizaini yeiyo yekutanga Sketch marongero zvinokanganisa ramangwana reiyo yese. project. Takasarudza kusiya otomatiki munzvimbo ino. Aya ndiwo maratidziro akaita munhu wekutanga muchikwata chedhizaini yedhizaini, iyo inopinza ndeye dhizaini marongero, uye chinobuda idata rinotsanangura ese maparamendi ezvikamu uye akarongedzerwa zvine hungwaru zvinoenderana neatomu dhizaini nzira.

Chinhu chega chasara kuita kwaive kupi uye sei kuchengetedza iyo data, nzira yekuiendesa kubudiriro uye sei kududzira mukusimudzira pamapuratifomu ese atinotsigira. Manheru akarega kuva akaora ... Chigumisiro chemisangano yenguva dzose yeboka rekushanda rinosanganisira vagadziri uye boka rinotungamirira kubva pachikuva chimwe nechimwe chaiva chibvumirano pane zvinotevera.

Isu pachedu tinoparura zvinoonekwa kuita maatomu zvinhu: mafonti, mavara, pachena, indents, kutenderera, mifananidzo, mapikicha uye nguva dzemaanimation. Uye isu tinounganidza kubva kune aya mabhatani, mapeji, mabhokisi, majeti emakadhi ebhangi, nezvimwe. Isu tinopa mazita asiri e-semantic kune masitaera echero nhanho, kunze kwezvidhori, semuenzaniso, mazita emaguta, mazita enymphs, Pokemon, mota. mabhureki... Pane chimiro chimwe chete - rondedzero haifanirwe kupera pamberi, maitiro anopera sei - show inofanira kuenda! Iwe haufanirwe kutakurwa nesemantics, kuti usazofanira kuwedzera bhatani repakati pakati pe "diki" uye "pakati," semuenzaniso.

Mutauro unoonekwa

Vagadziri vakasiiwa kuti vafunge nezvekuchengeta uye kuendesa data nenzira yaienderana nemapuratifomu ese, uye dhizaini yaifanira kugadzira zvinhu zvinotaridzika zvakanaka uye zvinoshanda zvinobudirira muboka rese remidziyo inotsigirwa.

Pakutanga, isu takanga tatokwanisa "kuyedza" mazhinji ezvigadzirwa mukushandisa Windows 10, iyo panguva iyoyo yaive chikuva chitsva kwatiri, ndiko kuti, chaida kupa uye kusimudzira "kubva pakutanga." Nekuidhirowa, takakwanisa kugadzirira uye kuyedza akawanda ezvikamu uye kunzwisisa kuti ndeipi yaifanirwa kuverengerwa mune ramangwana reEevee dhizaini system. Pasina bhokisi rejecha rakadaro, ruzivo rwakadaro runogona kuwanikwa chete kuburikidza nenhamba huru yekudzokorora pamapuratifomu atove ari kushanda, uye izvi zvingatora inopfuura gore.

Kushandisa zvakare zvikamu zvakafanana pamapuratifomu akasiyana kunoderedza huwandu hwemagadzirirwo uye dhata redhizaini yedhizaini zvakanyanya, saka dhizaini yaifanira kugadzirisa rimwe dambudziko, raimbove risingatsanangurirwe mumaitiro ekugadzirwa kwechigadzirwa nekusimudzira - sei, semuenzaniso, bhatani remafoni nemapiritsi ringashandiswazve paTV here? Uye chii chatinofanira kuita nehukuru hwemafonti uye zvinhu pamapuratifomu akasiyana kudaro?

Zviripachena, zvaive zvakafanira kugadzira muchinjika-chikuva modular gidhi iyo yaizoseta zvinyorwa uye hukuru hwezvinhu zvataida papuratifomu yega yega. Sekutanga kwegridi, takasarudza saizi uye nhamba yemapikicha emufirimu atinoda kuona pane imwe skrini uye, zvichibva pane izvi, isu takagadzira mutemo wekugadzira gidhi makoramu, chero hupamhi hwekoramu imwe hwakaenzana. kusvika paupamhi hweposita.

Iye zvino isu tinofanirwa kuunza ese mahombe masikirini kune yakafanana dhizaini saizi uye nekuaisa mune yakajairika grid. Apple TV neRoku dzakagadzirwa muhukuru hwe1920x1080, Android TV - 960x540, Smart TVs, zvichienderana nemutengesi, akafanana, asi dzimwe nguva 1280x720. Kana iyo app ikapihwa uye ichiratidzwa paFull HD skrini, 960 inowedzerwa ne2, 1280 inowedzerwa ne1,33, uye 1920 inobuda sezvairi.

Tichisvetuka zvinhu zvinofinha, takasvika pamhedziso yekuti kazhinji zviratidziro zvese, kusanganisira zviratidziro zveterevhizheni, maererano nezvinhu uye saizi yazvo, zvakafukidzwa neimwe dhizaini dhizaini, uye ese terevhizheni skrini inyaya yakakosha yeiyo general cross-platform grid, uye ine makoramu mashanu kana matanhatu, senge avhareji piritsi kana desktop. Ndiani anofarira ruzivo, enda mumashoko.

Imwe UI yemapuratifomu ese

Zvino, kudhirowa chimiro chitsva, isu hatifanire kudhirowa marongero epuratifomu yega yega, pamwe nekuchinjika sarudzo kune yega yega. Zvakakwana kuratidza imwe marongerwo uye kuchinjika kwayo kune ese mapuratifomu nemidziyo yehupamhi hupi: mafoni - 320-599, zvimwe zvese - 600-1280.

Data → kuvandudzwa

Ehe, sekuwanda kwatinoda kuwana dhizaini yakabatana, imwe neimwe puratifomu ine yayo yakasarudzika maficha. Kunyangwe zvese zviri zviviri webhu neSmart TV vachishandisa iyo ReactJS + TypeScript stack, iyo Smart TV app inoshanda pane legacy WebKit uye Presto vatengi saka haigone kugovera zvitaera newebhu. Uye tsamba dzeemail dzinomanikidzwa kushanda netabular dhizaini. Panguva imwecheteyo, hapana imwe yeasiri-html mapuratifomu anoshandisa kana kuronga kushandisa React Native kana chero analogues ayo, achitya kuderedzwa kwekuita, sezvo isu tine yakawandisa tsika marongero, muunganidzwa ane yakaoma kugadzirisa logic, mifananidzo nemavhidhiyo. Naizvozvo, iyo yakajairwa chirongwa chekuendesa yakagadzirira-yakagadzirwa CSS masitayipi kana React zvikamu hazvina kukodzera isu. Naizvozvo, isu takasarudza kuendesa data muJSON fomati, tichitsanangura kukosha mune abstract declarative form.

Saka pfuma rounding: 8 Windows 10 app inoshandura kuita CornerRadius="8", dandemutande - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Property offsetTop: 12 mutengi mumwe chete wewebhu muzviitiko zvakasiyana anogona kududzira se top, margin-top, padding-top kana transform

Declarativeness of the tsananguro zvakare inoreva kuti kana iyo puratifomu isingakwanisi kushandisa chivakwa kana kukosha kwayo, inogona kuifuratira. Panyaya yematemu, takagadzira mhando yemutauro weEsperanto: mamwe akatorwa kubva kuAndroid, mamwe kubva kuSVG, mamwe kubva kuCSS.

Kana pane imwe puratifomu iwe uchifanira kuratidza zvinhu zvakasiyana, isu takaita kugona kuendesa inoenderana data chizvarwa muchimiro cheyakasiyana JSON faira. Semuenzaniso, iyo "in focus" state yeSmart TV inoraira shanduko yenzvimbo yezvinyorwa pasi pe poster, izvo zvinoreva kuti papuratifomu iyi chikamu muukoshi hwe "indent" pfuma ichange iine 8 indentation point yainoda. Kunyangwe izvi zvichiomesa zvivakwa zvegadziriro yedhizaini, zvinopa imwe dhigirii yerusununguko, zvichitisiya isu nemukana wekutarisa inooneka "kusiyana" kwemapuratifomu isu pachedu, uye kusave nhapwa kune iyo dhizaini yatakagadzira.

Pictograms

Iconography muchigadzirwa chedhijitari inogara iri voluminous uye kwete iyo yakapusa subproject, inowanzoda yakaparadzana mugadziri. Kune nguva dzose maglyphs akawanda, imwe neimwe ine hukuru hwakati uye mavara, uye mapuratifomu anowanzoda iwo mumhando dzakasiyana. Kazhinji, pakanga pasina chikonzero chekusaisa zvese izvi muhurongwa hwekugadzira.

Glyphs akaremerwa muSVG vector fomati, uye mavara emavara anotsiviwa otomatiki nezvinosiyana. Mashandisirwo emutengi anogona kuvagamuchira akagadzirira kushandisa - mune chero fomati uye ruvara.

Preview

Pamusoro peiyo data yeJSON, takanyora chishandiso chekutarisa zvinhu - chishandiso cheJS chinopfuudza data yeJSON panhunzi kuburikidza nemakapu uye majenareta emaitiro, uye inoratidza mutsauko wakasiyana wechikamu chimwe nechimwe mubrowser. Chaizvoizvo, preview ndiyo chaiyo mutengi seplatform application uye inoshanda neiyo data data.

Nzira iri nyore yekunzwisisa kuti chimwe chikamu chinoshanda sei nekudyidzana nacho. Naizvozvo, isu hatina kushandisa maturusi akaita seBhuku reNhau, asi takaita ratidziro inopindirana - unogona kubata, kunongedzera, kudzvanya... Kana uchiwedzera chikamu chitsva kuhurongwa hwekugadzira, chinobuda mukutarisa kuitira kuti mapuratifomu ave nechimwe chinhu chekutarisa kana kurishandisa.

Zvinyorwa

Kubva pane data rinopihwa kumapuratifomu muchimiro cheJSON, zvinyorwa zvezvikamu zvinogadzirwa zvoga. Rondedzero yezvivakwa uye mhando dzemhando dzemhando mune imwe neimwe yadzo dzinotsanangurwa. Mushure mekugadzira-auto, ruzivo runogona kujekeswa nemaoko uye tsananguro yemavara inogona kuwedzerwa. Kutarisisa uye zvinyorwa zvakachinjika kune mumwe nemumwe pamwero wechikamu chimwe nechimwe, uye ruzivo rwese rwunosanganisirwa mune zvinyorwa runowanikwa kune vanogadzira muchimiro chekuwedzera mafaera eJSON.

Deprecator

Chimwe chaidiwa kwaive kugona kutsiva uye kugadzirisa zvinhu zviripo nekufamba kwenguva. Iyo dhizaini sisitimu yakadzidza kuudza vanogadzira kuti zvivakwa zvipi kana kunyange zvikamu zvese hazvigone kushandiswa uye kuzvibvisa nekukurumidza kana zvisisashandiswe pamapuratifomu ese. Pachine basa rakawanda re "manual" mukuita uku, asi isu hatina kumira.

Client development

Pasina mubvunzo, danho rakanyanya kuoma raive kududzirwa kwedhizaini yedhizaini mukodhi yemapuratifomu ese atinotsigira. Kana, semuenzaniso, modular grids pawebhu hachisi chinhu chitsva, saka vanogadzira zvemuno nharembozha yeIOS neAroid vakashanda nesimba vasati vafunga kuti vangararama sei nazvo.

Kuronga iOS application skrini, isu tinoshandisa maviri ekutanga masisitimu anopihwa ne iviUIKit: yemahara dhizaini yezvinhu uye marongero ezviunganidzwa zvezvinhu. Isu tinoshandisa VIPER, uye kudyidzana kwese ne iviUIKit kwakanangidzirwa muKuona, uye kudyidzana kwakawanda neApple UIKit kunonangana muiviUIKit. Saizi uye kurongeka kwezvinhu zvinotsanangurwa maererano nemakoramu uye syntactic zvimiro zvinoshanda pamusoro peiyo iOS SDK zvipingaidzo, zvichiita kuti zvive zvakanyanya kushanda. Izvi zvakanyanya kurerutsa hupenyu hwedu pakushanda neUICollectionView. Isu takanyora akati wandei echinyakare wrappers kune marongero, kusanganisira akaomesesa. Paive nehuwandu hwekodhi yemutengi uye yakava declarative.

Kugadzira masitaera muchirongwa cheAroid, tinoshandisa Gradle, tichishandura data redhizaini kuita zvitaera muXML fomati. Panguva imwecheteyo, tine majenareta akati wandei ematanho akasiyana:

• Basic. Iyo data yemaprimitives epamusoro majenareta akapatsanurwa.
• Resource. Dhawunirodha mifananidzo, zvidhori, uye mamwe magirafu.
• Chikamu. Izvo zvakanyorwa kune chimwe nechimwe chikamu, icho chinotsanangura izvo zvivakwa uye mashandurirwo azvo kuita masitayera.

Kuburitswa kweapplication

Mushure mekunge vagadziri vadhirowa chikamu chitsva kana kugadzirisa zvakare chiripo, shanduko idzi dzinopihwa muhurongwa hwekugadzira. Vagadziri vepuratifomu yega yega vari kugadzirisa chizvarwa chekodhi yavo kutsigira shanduko. Mushure meizvi, inogona kushandiswa mukuita kwekushanda kutsva uko chikamu ichi chinodiwa. Nokudaro, kupindirana nehurongwa hwekugadzira hakuitike munguva chaiyo, asi chete panguva yekuunganidza zvitsva zvitsva. Iyi nzira inobvumirawo kutonga kuri nani pamusoro pemaitiro ekufambisa data uye inovimbisa kushanda kwekodhi mumapurojekiti ekusimudzira vatengi.

Migumisiro

Rave gore kubva dhizaini yakava chikamu chezvivakwa zvinotsigira kuvandudzwa kweIvy online cinema, uye isu tinogona kutotora mhedziso:

• Iri ibasa rakakura uye rakaomarara rinoda zviwanikwa zvakatsaurirwa nguva dzose.
• Izvi zvakatibvumira kuti tigadzire mutauro wedu wakasiyana-siyana wekuona unoenderana nezvinangwa zvepamhepo vhidhiyo sevhisi.
• Hatisisina mapuratifomu ekuona uye anoshanda akanonoka.

Kutarisisa kweIvy dhizaini system zvikamu - design.ivi.ru

Source: www.habr.com