Ho tloha ho UI-kit ho ea ho sistimi ea moralo

Phihlelo ea cinema ea inthaneteng ea Ivy

Ha qalong ea 2017 re qala ho nahana ka ho theha mokhoa oa rona oa ho fana ka li-design-to-code, ba bangata ba ne ba se ba ntse ba bua ka eona 'me ba bang ba ntse ba e etsa. Leha ho le joalo, ho fihlela kajeno ha ho tsejoe hakaalo ka phihlelo ea ho haha ​​​​litsamaiso tsa meralo ea li-cross-platform, 'me ha ho e-s'o be le litlolo tse hlakileng le tse tiisitsoeng tse hlalosang mahlale le mekhoa ea phetoho e joalo ea ts'ebetso ea ts'ebetso ea moralo ho sehlahisoa se seng se ntse se sebetsa. 'Me ka "likarolo tsa khoutu" hangata li bolela lintho tse fapaneng haholo.

Ho sa le joalo, k'hamphani e ile ea eketsa basebetsi ba eona habeli selemo le selemo - ho ne ho hlokahala ho lekanya lefapha la meralo le ho ntlafatsa lits'ebetso tsa ho theha le ho fetisa meralo bakeng sa nts'etsopele. Re atisa sena sohle ka "zoo" ea liforomo tse hlokang ho tšehetsoa, ​​​​'me re fumana setšoantšo sa palemonium ea Babylona, ​​e ke keng ea khona ho "etsa ka tloaelo" le ho kenya chelete. Nts'etsopele ea li-platform hangata e ne e tsoela pele ka mokhoa o ts'oanang, mme ts'ebetso e ts'oanang e ne e ka lokolloa liforomong tse fapaneng ka nako ea likhoeli tse 'maloa.


Karohano ea litlhophiso tsa sethala bakeng sa sethala ka seng

Ka tloaelo, re ile ra qala ka mathata ao tsamaiso ea moralo e neng e tla thusa ho rarolla le ho theha litlhoko tsa moralo oa eona. Ntle le ho theha puo e bonngoeng ea pono, ho eketsa lebelo la moralo le nts'etsopele, le ho ntlafatsa boleng ba sehlahisoa ka kakaretso, ho ne ho le bohlokoa ho kopanya moralo ka hohle kamoo ho ka khonehang. Sena sea hlokahala e le hore nts'etsopele ea ts'ebetso e khonehe ho li-platform tsohle tsa rona ka nako e le 'ngoe: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - ntle le ho sebetsa ho e' ngoe le e 'ngoe ea tsona ka thoko . Mme re e entse!

Moralo → data

Ha ho fihleloa litumellano tsa mantlha lipakeng tsa lefapha la lihlahisoa le nts'etsopele, re ile ra lula fatše ho khetha pokello ea theknoloji le ho fumana lintlha tsa ts'ebetso eohle - ho tloha ho moralo ho isa ho tokollo. Ho iketsetsa ka botlalo mokhoa oa ho fetisetsa moralo ho nts'etsopele, re ile ra hlahloba khetho ea ho arola likarolo tsa likarolo ka kotloloho ho tsoa ho lifaele tsa Sketch tse nang le meralo. Ho ile ha fumaneha hore ho fumana likaroloana tsa khoutu tseo re li hlokang le ho ntša litekanyo tseo re li hlokang e ne e le mosebetsi o boima le o kotsi. Taba ea pele, baqapi ba tla tlameha ho ba hlokolosi haholo ha ba reha likarolo tsohle tsa khoutu ea mohloli, ea bobeli, sena se sebetsa feela bakeng sa likarolo tse bonolo, 'me ea boraro, ho its'etleha ho thekenoloji ea motho e mong le sebopeho sa khoutu sa sebopeho sa Sketch sa mantlha se beha bokamoso ba lefatše lohle kotsing. morero. Re ile ra etsa qeto ea ho tlohela ho iketsetsa lintho sebakeng sena. Ena ke tsela eo motho oa pele a hlahileng ka eona sehlopheng sa tsamaiso ea meralo, eo tlhahiso ea eona e leng meralo ea meralo, 'me tlhahiso ke data e hlalosang likarolo tsohle tsa likarolo le ho hlophisoa ka maemo ho latela mokhoa oa moralo oa athomo.

Ntho feela e setseng e ne e le hore na u ka boloka data hokae le joang, mokhoa oa ho e fetisetsa ho nts'etsopele le mokhoa oa ho e hlalosa ho nts'etsopele liforomong tsohle tseo re li tšehetsang. Mantsiboeeng a ile a khaotsa ho ba bobebe ... Phello ea liboka tse tloaelehileng tsa sehlopha sa basebetsi se nang le baqapi le lihlopha tsa lihlopha ho tloha sethaleng se seng le se seng e ne e le tumellano ho tse latelang.

Ka borona re arola pono ho likarolo tsa athomo: lifonti, mebala, pepeneneng, li-indents, li pota-potile, li-icon, litšoantšo le linako tsa lipopae. 'Me re bokella ho tsoa ho li-buttons tsena, li-input, li-checkboxes, li-widget tsa likarete tsa banka, joalo-joalo Re fana ka mabitso a seng a semantic ho mekhoa ea maemo leha e le afe, ntle le litšoantšo, mohlala, mabitso a metse, mabitso a nymphs, Pokemon, koloi. Brands ... Ho na le boemo bo le bong feela - lenane ha lea lokela ho khathala pele , hore na mekhoa e fela joang - pontšo e tlameha ho tsamaea! Ha ua lokela ho khelosoa ke semantics, e le hore u se ke ua kenya konopo e bohareng pakeng tsa "e nyenyane" le "bohareng," mohlala.

Puo e bonahalang

Bahlahisi ba ile ba tloheloa ho nahana ka mokhoa oa ho boloka le ho fetisetsa data ka tsela e lumellanang le liforomo tsohle, 'me moralo o ne o tlameha ho theha likarolo tsa sebopeho se ka shebahalang se le ntle le ho sebetsa ka katleho ho pholletsa le sehlopha sohle sa lisebelisoa tse tšehetsoeng.

Pejana, re ne re se re khonne ho "leka" boholo ba likarolo tsa moralo ts'ebelisong ea Windows 10, eo ka nako eo e neng e le sethala se secha bakeng sa rona, ke hore, e ne e hloka ho fana le nts'etsopele "ho tloha qalong." Ka ho e taka, re khonne ho lokisa le ho leka likarolo tse ngata le ho utloisisa hore na ke efe ea tsona e lokelang ho kenyelletsoa tsamaisong ea meralo ea Eevee e tlang. Ntle le lebokose le joalo la lehlabathe, phihlelo e joalo e ka fumanoa feela ka palo e kholo ea ho pheta-pheta liforomong tse seng li ntse li sebetsa, 'me sena se ne se tla nka nako e fetang selemo.

Ho sebelisa hape likarolo tse tšoanang ho li-platform tse fapaneng ho fokotsa palo ea meralo le lethathamo la lintlha tsa sistimi ea meralo haholo, kahoo moralo o ne o tlameha ho rarolla bothata bo bong hape, boo pele bo neng bo sa hlalosoa mekhoeng ea moralo oa sehlahisoa le nts'etsopele - joang, mohlala, na konopo ea lifono le matlapa a ka sebelisoa hape ho li-TV? Mme re lokela ho etsa eng ka boholo ba lifonti le likarolo tsa li-platform tse fapaneng joalo?

Ho hlakile hore ho ne ho hlokahala ho rala marang-rang a marang-rang a modular a neng a tla beha mongolo le boholo ba lintho tseo re li hlokang bakeng sa sethala ka seng. E le qaleho ea marang-rang, re khethile boholo le palo ea li-poster tsa lifilimi tseo re batlang ho li bona skrineng se itseng, 'me, ho itšetlehile ka sena, re thehile molao oa ho aha litšiea tsa grid, ha feela bophara ba kholomo e le' ngoe bo lekana. ho isa bophara ba setšoantšo.

Hona joale re hloka ho tlisa li-skrini tsohle tse kholo ka boholo bo lekanang ba sebopeho le ho li kenya ka har'a marang-rang a tloaelehileng. Apple TV le Roku li entsoe ka boholo ba 1920x1080, Android TV - 960x540, Smart TVs, ho itšetlehile ka morekisi, li tšoana, empa ka linako tse ling 1280x720. Ha sesebelisoa se etsoa le ho bonts'oa ho li-skrini tsa Full HD, 960 e atisoa ke 2, 1280 e atisoa ke 1,33, 'me 1920 e hlahisoa joalo ka ha e le.

Ho tlola lintlha tse tenang, re fihletse qeto ea hore ka kakaretso li-skrini tsohle, ho kenyeletsoa le li-skrini tsa thelevishene, ho latela likarolo le boholo ba tsona, li koaheloa ke moralo o le mong oa moralo, 'me li-skrini tsohle tsa thelevishene ke taba e ikhethileng ea gridi e akaretsang ea sethala, 'me e na le likholomo tse hlano kapa tse tšeletseng, joalo ka letlapa kapa desktop. Ke mang ea thahasellang lintlha, kena ho litlhaloso.

UI e le 'ngoe bakeng sa li-platform tsohle

Hona joale, ho taka tšobotsi e ncha, ha ho hlokahale hore re rale meralo ea sethala ka seng, hammoho le likhetho tsa ho ikamahanya le maemo bakeng sa e 'ngoe le e 'ngoe ea tsona. Ho lekane ho bonts'a sebopeho se le seng le ho ikamahanya le maemo bakeng sa liforomo tsohle le lisebelisoa tsa bophara leha e le bofe: lifono - 320-599, ntho e 'ngoe le e' ngoe - 600-1280.

Lintlha → nts'etsopele

Ehlile, ka hohle kamoo re ka ratang ho fihlela moralo o kopaneng ka botlalo, sethala ka seng se na le likarolo tsa sona tse ikhethang. Leha tepo le Smart TV li sebelisa stack ea ReactJS + TypeScript, sesebelisoa sa Smart TV se sebetsa ho bareki ba WebKit le Presto, kahoo ha se khone ho arolelana litaele le tepo. 'Me mangolo-tsoibila a lengolo-tsoibila a qobelloa ho sebetsa ka sebopeho sa tabular. Ka nako e ts'oanang, ha ho le e 'ngoe ea li-platform tseo e seng tsa html tse sebelisang kapa tse rerang ho sebelisa React Native kapa leha e le efe ea li-analogues tsa eona, li tšaba ho senyeha ha ts'ebetso, kaha re na le mekhoa e mengata ea tloaelo, likoleke tse nang le lintlha tse rarahaneng tsa ntlafatso, litšoantšo le livideo. Ka hona, leano le tloaelehileng la ho fana ka mekhoa ea CSS e seng e entsoe kapa likarolo tsa React ha lea lokela ho rona. Ka hona, re nkile qeto ea ho fetisetsa data ka sebopeho sa JSON, ho hlalosa boleng ka mokhoa o hlakileng oa phatlalatso.

Kahoo thepa rounding: 8 Windows 10 app e fetolela ho CornerRadius="8", tepo - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Thepa offsetTop: 12 moreki ea tšoanang oa webo maemong a fapaneng a ka toloka joalo ka top, margin-top, padding-top kapa transform

Phatlalatso ea tlhaloso e boetse e bolela hore haeba sethala ka botekgeniki se ke ke sa sebelisa thepa kapa boleng ba sona, se ka se hlokomoloha. Mabapi le mantsoe, re entse mofuta oa puo ea Esperanto: tse ling li nkiloe ho Android, tse ling ho SVG, tse ling ho CSS.

Haeba sethaleng se itseng u hloka ho bonts'a likarolo ka tsela e fapaneng, re kentse ts'ebetsong bokhoni ba ho fetisetsa tlhahiso ea data e tsamaellanang ka mokhoa oa faele ea JSON e arohaneng. Ka mohlala, boemo ba "infocus" bakeng sa Smart TV bo laela phetoho ea boemo ba mongolo tlas'a poso, e bolelang bakeng sa sethaleng sena karolo ena ea boleng ba thepa ea "indent" e tla ba le lintlha tse 8 tsa indentation tseo e li hlokang. Leha sena se thatafatsa meaho ea sistimi ea meralo, se fana ka tekanyo e eketsehileng ea tokoloho, e re siea re e-na le monyetla oa ho laola pono ea "ho se tšoane" ha sethala ka borona, mme re se ke ra ts'oaroa ke meralo eo re e thehileng.

Litšoantšo tsa litšoantšo

Iconography sehlahisoa sa dijithale e lula e le voluminous eseng morero o bonolo, hangata o hlokang moqapi o ikhethileng. Kamehla ho na le li-glyphs tse ngata, e 'ngoe le e' ngoe ea tsona e na le boholo le mebala e mengata, 'me hangata liforomo li li hloka ka mekhoa e fapaneng. Ka kakaretso, ho ne ho se na lebaka la ho se kenye tsena tsohle tsamaisong ea moralo.

Li-Glyphs li kentsoe ka sebopeho sa vector sa SVG, 'me boleng ba mebala bo nkeloa sebaka ke mefuta e fapaneng. Lisebelisoa tsa bareki li ka li amohela li se li loketse ho sebelisoa - ka sebopeho le mebala efe kapa efe.

Sheba esale pele

Holim'a data ea JSON, re ngotse sesebelisoa sa ho lekola likarolo - sesebelisoa sa JS se fetisang data ea JSON ka fofa ka lijenereithara tsa eona le lijenereithara tsa setaele, mme se bonts'a mefuta e fapaneng ea karolo ka 'ngoe ho sebatli. Ha e le hantle, ponelopele e tšoana hantle le moreki ea tšoanang le lits'ebetso tsa sethala mme e sebetsa ka data e tšoanang.

Mokhoa o bonolo oa ho utloisisa hore na karolo e itseng e sebetsa joang ke ka ho sebelisana le eona. Ka hona, ha rea ​​ka ra sebelisa lisebelisoa tse kang pale ea pale, empa re entse ponelopele e kopanetsoeng - o ka ama, oa supa, oa tobetsa ... Ha o kenya karolo e ncha ho sistimi ea moralo, e hlaha ponelopeleng e le hore sethala se be le ho hong ho tsepamisa maikutlo ho sona. ho e kenya tshebetsong.

Litokomane

Ho ipapisitsoe le data e fanoeng liforomong ka mokhoa oa JSON, litokomane tsa likarolo li hlahisoa ka bo eona. Lethathamo la thepa le mefuta e ka bang teng ea boleng ho e 'ngoe le e' ngoe ea tsona e hlalositsoe. Kamora ho iketsetsa, tlhahisoleseling e ka hlakisoa ka letsoho mme tlhaloso ea mongolo e ka eketsoa. Ponahalo le litokomane li fetisetsoa ho tse ling boemong ba karolo e 'ngoe le e' ngoe, 'me boitsebiso bohle bo kenyelelitsoeng litokomaneng bo fumaneha ho bahlahisi ka mokhoa oa lifaele tsa JSON tse eketsehileng.

Deprecator

Ntho e 'ngoe e hlokahalang e ne e le bokhoni ba ho fetola le ho ntlafatsa likarolo tse teng ka nako. Sistimi ea meralo e ithutile ho bolella bahlahisi hore na ke thepa efe kapa likarolo tsohle tse ke keng tsa sebelisoa le ho li tlosa hang ha li se li sa sebelisoe lipolaneteng tsohle. Ho ntse ho e-na le mosebetsi o mongata oa "manual" ts'ebetsong ena, empa ha re eme.

Nts'etsopele ea bareki

Ntle ho pelaelo, sethaleng se rarahaneng ka ho fetisisa e ne e le tlhaloso ea lintlha tsa tsamaiso ea moralo ka khoutu ea liforomo tsohle tseo re li tšehetsang. Haeba, ka mohlala, li-grids tsa modular ho web ha se ntho e ncha, joale bahlahisi ba lisebelisoa tsa selefouno tsa iOS le Android ba ile ba sebetsa ka thata pele ba tseba ho phela le eona.

Ho hlophisa li-skrini tsa ts'ebeliso ea iOS, re sebelisa mekhoa e 'meli ea mantlha e fanoeng ke iviUIKit: sebopeho sa mahala sa likarolo le moralo oa pokello ea likarolo. Re sebelisa VIPER, 'me tšebelisano eohle le iviUIKit e tsepamisitsoe ho View, 'me tšebelisano e ngata le Apple UIKit e tsepamisitsoe ho iviUIKit. Boholo le tlhophiso ea likarolo li hlalositsoe ho ea ka litšiea le libopeho tsa syntactic tse sebetsang ka holim'a lithibelo tsa iOS SDK, tse etsang hore li sebetse haholoanyane. Sena se nolofalitse bophelo ba rona haholo ha re sebetsa le UICollectionView. Re ngotse li-wrappers tse 'maloa bakeng sa meralo, ho kenyelletsa le tse rarahaneng haholo. Ho ne ho e-na le bonyane ba khoutu ea bareki 'me ea fetoha declarative.

Ho hlahisa mefuta ho projeke ea Android, re sebelisa Gradle, ho fetola data ea sistimi ea meralo ho litaele ka sebopeho sa XML. Ka nako e ts'oanang, re na le lijenereithara tse 'maloa tsa maemo a fapaneng:

• Tsa motheo. Lintlha tsa lijenereithara tsa boemo bo holimo li arotsoe.
• Mohlodi. Khoasolla linepe, litšoantšo le litšoantšo tse ling.
• Karolo. Li ngotsoe bakeng sa karolo ka 'ngoe, e hlalosang hore na ke thepa efe le mokhoa oa ho e fetolela ka mekhoa.

Litokollo tsa kopo

Ka mor'a hore baqapi ba thale karolo e ncha kapa ba ntlafatse e seng e ntse e le teng, liphetoho tsena li kenngoa tsamaisong ea moralo. Baetsi ba sethala se seng le se seng ba hlophisa hantle tlhahiso ea khoutu ea bona ho tšehetsa liphetoho. Kamora moo, e ka sebelisoa ts'ebetsong ea ts'ebetso e ncha moo karolo ena e hlokahalang. Ka hona, ho sebelisana le tsamaiso ea moralo ha ho etsahale ka nako ea sebele, empa feela nakong ea ho bokella litokollo tse ncha. Mokhoa ona o boetse o lumella taolo e ntlafetseng holim'a ts'ebetso ea phetisetso ea data le ho netefatsa ts'ebetso ea khoutu mererong ea ntlafatso ea bareki.

Liphello

E se e le selemo ho tloha ha moralo oa moralo o fetoha karolo ea meaho e ts'ehetsang nts'etsopele ea cinema ea inthaneteng ea Ivy, 'me re se re ka fihlela liqeto tse ling:

• Ena ke morero o moholo le o rarahaneng o hlokang lisebelisoa tse inehetseng kamehla.
• Sena se re lumelletse ho iketsetsa puo ea rona e ikhethang e khahlano le sepheo sa ts'ebeletso ea livideo ea inthaneteng.
• Ha re sa na li-platform tsa pono le tse sebetsang hantle.

Ponahalo ea likarolo tsa sistimi ea moralo oa Ivy - design.ivi.ru

Source: www.habr.com