Avy amin'ny UI-kit ka hatramin'ny rafitra famolavolana

Ivy online cinema experience

Tamin'ny fiandohan'ny taona 2017 no nieritreritra voalohany ny hamorona rafitra fanaterana design-to-code manokana, efa maro no niresaka momba izany ary ny sasany aza nanao izany. Na izany aza, hatramin'izao dia tsy dia fantatra firy momba ny traikefa amin'ny fananganana rafitra famolavolana cross-platform, ary tsy nisy fomba fanamboarana mazava sy voaporofo mamaritra ny teknolojia sy ny fomba hanovana ny fizotran'ny fampiharana ny famolavolana ho vokatra efa miasa. Ary amin'ny hoe "singa ao amin'ny kaody" dia matetika izy ireo no midika zavatra tena samihafa.

Mandritra izany fotoana izany, ny orinasa dia nampitombo avo roa heny ny mpiasany isan-taona - ilaina ny manenika ny departemantan'ny famolavolana sy manatsara ny fizotran'ny famoronana sy ny famindrana drafitra ho an'ny fampandrosoana. Ampitomboinay izany rehetra izany amin'ny "zoo" amin'ny sehatra mila tohanana, ary mahazo ny endriky ny pandemonium Babyloniana, izay tsy afaka "manao izany" fotsiny ary miteraka fidiram-bola. Matetika no nifanindran-dalana ny fivoaran'ny sehatra, ary azo avoaka amin'ny sehatra samihafa miaraka amin'ny fahatarana mandritra ny volana maromaro ny fiasa mitovy.


Sehatra fandrindrana misaraka ho an'ny sehatra tsirairay

Tamin'ny fomba nentim-paharazana, nanomboka tamin'ny olana izahay izay hanampy amin'ny famahana sy hamolavola ny fepetra takiana amin'ny famolavolana azy ny rafitra famolavolana. Ho fanampin'ny famoronana fiteny hita mitambatra, fampitomboana ny hafainganam-pandehan'ny famolavolana sy ny fampandrosoana, ary ny fanatsarana ny kalitaon'ny vokatra amin'ny ankapobeny, dia zava-dehibe ny fampiraisana ny famolavolana araka izay tratra. Ilaina izany mba hahatonga ny fampivoarana ny fiasa ho azo atao amin'ny sehatra rehetra miaraka: Web, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - tsy miasa amin'ny tsirairay amin'izy ireo. Ary vitanay izany!

Design → data

Rehefa tonga ny fifanarahana fototra teo amin'ny sampan-draharahan'ny vokatra sy ny fampandrosoana, dia nipetraka izahay nisafidy antontam-teknolojia ary nanamboatra ny antsipirihan'ny dingana manontolo - manomboka amin'ny famolavolana ka hatramin'ny famoahana. Mba hanamafisana tanteraka ny fizotran'ny famindrana ny famolavolana mankany amin'ny fampandrosoana, dia nandinika ny safidy amin'ny fanaparitahana ireo singa singa mivantana avy amin'ny rakitra Sketch miaraka amin'ny layout izahay. Hita fa sarotra sy mampidi-doza ny fitadiavana ireo sombin-kaody ilainay sy ny fakana ireo masontsivana ilainay. Voalohany indrindra, ny mpamorona dia tsy maintsy mitandrina fatratra amin'ny fanononana ny sosona rehetra amin'ny kaody loharano, faharoa, ity dia miasa ho an'ny singa tsotra indrindra, ary fahatelo, ny fiankinan-doha amin'ny teknolojian'olon-kafa sy ny firafitry ny kaody amin'ny drafitra Sketch tany am-boalohany dia manimba ny hoavin'ny manontolo. tetikasa. Nanapa-kevitra ny handao ny automatique amin'ity sehatra ity izahay. Toy izany no nisehoan'ny olona voalohany tao amin'ny ekipan'ny rafitra famolavolana, izay ny fidirany dia ny fandrafetana drafitra, ary ny vokatra dia angon-drakitra mamaritra ny masontsivana rehetra amin'ireo singa ary voalamina ara-jeografika araka ny fomba famolavolana atomika.

Ny hany sisa azo atao dia ny toerana sy ny fomba fitehirizana ny angon-drakitra, ny fomba hamindrana izany amin'ny fampandrosoana ary ny fomba fandikana azy amin'ny fampandrosoana amin'ny sehatra rehetra tohananay. Nitsahatra ny hariva... Ny vokatry ny fivoriana ara-potoana nataon’ny vondrona miasa ahitana ny mpamorona sy ny mpitarika ny ekipa isaky ny lampihazo dia ny fifanarahana momba ny manaraka.

Ampifanarahintsika amin'ny tanana ho singa atomika ny sary: ​​endri-tsoratra, loko, mangarahara, indents, boribory, kisary, sary ary faharetan'ny sary mihetsika. Ary manangona avy amin'ity bokotra ity, fidirana, boaty, Widget karatra banky, sns. Manome anarana tsy semantika amin'ny fomban'ny ambaratonga rehetra, afa-tsy ny kisary, ohatra, ny anaran'ny tanàna, ny anaran'ny nymphs, Pokemon, fiara. marika... Tsy misy afa-tsy fepetra iray - ny lisitra dia tsy tokony ho lany alohan'ny , ny fomba fiafaran'ny - tsy maintsy mandeha ny fampisehoana! Tsy tokony ho variana amin'ny semantika ianao, mba tsy hampidiranao bokotra afovoany eo anelanelan'ny "kely" sy ny "medium", ohatra.

Fiteny hita maso

Navela hieritreritra ny fomba fitahirizana sy famindrana angon-drakitra amin'ny fomba mifanaraka amin'ny sehatra rehetra ny mpamorona, ary ny famolavolana dia tsy maintsy namolavola singa interface tsara izay mety ho tsara tarehy sy miasa tsara manerana ny andiana fitaovana tohana.

Teo aloha dia efa nahavita "fitsapana" ny ankamaroan'ny singa famolavolana amin'ny fampiharana iray ho an'ny Windows 10, izay sehatra vaovao ho antsika tamin'izany fotoana izany, izany hoe, nitaky ny famoahana sy ny fampandrosoana "hatramin'ny voalohany." Tamin'ny fanaovana sary dia afaka nanomana sy nanandrana ny ankamaroan'ny singa izahay ary nahatakatra hoe iza amin'izy ireo no tokony hampidirina ao amin'ny rafitra famolavolana Eevee ho avy. Raha tsy misy boaty fasika toy izany, ny traikefa toy izany dia tsy azo atao afa-tsy amin'ny alàlan'ny famerimberenana marobe amin'ny sehatra efa miasa, ary haharitra herintaona mahery izany.

Ny fampiasana ireo singa mitovy amin'ny sehatra samihafa dia mampihena be ny isan'ny layout sy ny angon-drakitra momba ny rafitra famolavolana, noho izany dia tsy maintsy namaha olana iray hafa ny famolavolana, izay tsy nofaritana teo aloha tamin'ny fampiharana ny famolavolana sy ny fampandrosoana ny vokatra - ahoana, ohatra, azo ampiasaina amin'ny fahitalavitra ve ny bokotra ho an'ny finday sy tablette? Ary inona no tokony hataontsika amin'ny haben'ny endritsoratra sy singa amin'ny sehatra samihafa toy izany?

Mazava ho azy fa nilaina ny nandrafetana grid modular cross-platform izay hametraka ny lahatsoratra sy ny haben'ny singa ilaintsika ho an'ny sehatra manokana tsirairay. Ho toy ny teboka fanombohana ny grid, dia nisafidy ny habeny sy ny isan'ny afisy sarimihetsika izay tiantsika ho hita eo amin'ny efijery manokana ary, mifototra amin'izany, dia namolavola fitsipika momba ny fananganana tsanganana grid, raha toa ka mitovy ny sakan'ny tsanganana iray. amin'ny sakan'ny afisy.

Ankehitriny dia mila mitondra ny efijery lehibe rehetra amin'ny haben'ny layout mitovy isika ary mampifanaraka azy ireo amin'ny grid iraisana. Apple TV sy Roku dia natao amin'ny haben'ny 1920x1080, Android TV - 960x540, Smart TV, miankina amin'ny mpivarotra, dia mitovy, fa indraindray 1280x720. Rehefa adika sy aseho amin'ny efijery Full HD ny fampiharana, dia ampitomboina amin'ny 960 ny 2, ampitomboina amin'ny 1280 ny 1,33, ary ampitomboina amin'ny 1920 ny XNUMX.

Ny fanitsakitsahana ny antsipiriany mankaleo, dia tonga tamin'ny fanatsoahan-kevitra izahay fa amin'ny ankapobeny ny efijery rehetra, anisan'izany ny efijery fahitalavitra, amin'ny lafiny singa sy ny haben'izy ireo, dia voarakotry ny famolavolana drafitra iray, ary ny fahitalavitra rehetra dia tranga manokana amin'ny tambajotra cross-platform ankapobeny, ary misy tsanganana dimy na enina, toy ny takelaka salantsalany na birao. Izay liana amin'ny antsipiriany dia mandehana ao amin'ny fanehoan-kevitra.

UI tokana ho an'ny sehatra rehetra

Amin'izao fotoana izao, mba hanao sary endri-javatra vaovao, dia tsy mila manao lamina ho an'ny sehatra tsirairay, miampy ny adaptability safidy ho an'ny tsirairay amin'izy ireo. Ampy ny mampiseho drafitra iray sy ny fampifanarahana amin'ny sehatra sy fitaovana rehetra amin'ny sakany rehetra: telefaona - 320-599, ny zavatra hafa rehetra - 600-1280.

Data → fampandrosoana

Mazava ho azy, araka izay tiantsika hahatongavana endrika miray tanteraka, ny sehatra tsirairay dia manana ny mampiavaka azy manokana. Na dia samy mampiasa ny ReactJS + TypeScript aza ny tranonkala sy ny Smart TV, ny fampiharana Smart TV dia mandeha amin'ny mpanjifa WebKit sy Presto lova ary noho izany dia tsy afaka mizara fomba amin'ny Internet. Ary ny mailaka mailaka dia voatery miasa tanteraka amin'ny fandrindrana tabilao. Mandritra izany fotoana izany, tsy misy amin'ireo sehatra tsy html mampiasa na mikasa ny hampiasa ny React Native na ny iray amin'ireo analogues azy, matahotra ny fahasimban'ny fampandehanana, satria be loatra ny fandrafetana, fanangonana miaraka amin'ny lojika fanavaozana sarotra, sary ary horonan-tsary. Noho izany, tsy mety aminay ny tetika mahazatra amin'ny fandefasana style CSS efa vita na singa React. Noho izany, nanapa-kevitra ny handefa angon-drakitra amin'ny endrika JSON izahay, mamaritra ny soatoavina amin'ny endrika fanambarana abstract.

Ka fananana rounding: 8 Windows 10 app dia niova ho CornerRadius="8", tranonkala - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
NY FANANANA offsetTop: 12 ny mpanjifa web iray ihany amin'ny tranga samihafa dia afaka adika hoe top, margin-top, padding-top na transform

Ny fanambaran'ny famaritana dia midika ihany koa fa raha tsy afaka mampiasa fananana na sandany ny sehatra ara-teknika, dia mety tsy hiraharaha izany izy. Eo amin'ny resaka voambolana dia nanao karazana fiteny esperanto izahay: ny sasany nalaina tamin'ny Android, ny sasany tamin'ny SVG, ny sasany tamin'ny CSS.

Raha amin'ny sehatra iray manokana dia mila mampiseho singa amin'ny fomba hafa ianao, dia nampiharina ny fahafahana mamindra ny famokarana data mifanaraka amin'izany amin'ny endrika rakitra JSON misaraka. Ohatra, ny fanjakana "mifantoka" ho an'ny Smart TV dia mandidy ny fiovan'ny toeran'ny lahatsoratra eo ambanin'ny afisy, izay midika fa ho an'ity sehatra ity ity singa amin'ny sandan'ny fananana "indent" ity dia ahitana ireo teboka 8 ilainy. Na dia manasarotra ny fotodrafitrasa amin'ny rafitra famolavolana aza izany, dia manome fahalalahana fanampiny izany, manome antsika fahafahana hitantana ny “tsy fitoviana” hita maso amin'ny sehatra, fa tsy ho takalon'aina amin'ny maritrano noforoninay.

Pictograms

Iconography amin'ny vokatra nomerika dia be dia be foana fa tsy subproject tsotra indrindra, matetika mila mpamorona manokana. Misy foana ny glyphs, ny tsirairay amin'izy ireo dia manana habe sy loko maromaro, ary ny sehatra matetika mila azy amin'ny endrika samihafa. Amin'ny ankapobeny, tsy nisy antony tsy nametrahana izany rehetra izany tao amin'ny rafitra famolavolana.

Ny glyphs dia fenoina amin'ny endrika SVG vector, ary ny sanda loko dia soloina ho azy amin'ny variables. Ny fampiharana mpanjifa dia afaka mandray azy ireo vonona hampiasaina - amin'ny endrika sy loko rehetra.

TOPI-MASO

Eo an-tampon'ny angona JSON, dia nanoratra fitaovana hijerena ireo singa izahay - fampiharana JS izay mandefa ny angona JSON amin'ny sidina amin'ny alàlan'ny mpamorona marika sy ny fomba, ary mampiseho fiovaovana isan-karazany amin'ny singa tsirairay ao amin'ny navigateur. Amin'ny ankapobeny, ny preview dia mpanjifa mitovy amin'ny fampiharana amin'ny sehatra ary miasa miaraka amin'ny angona mitovy.

Ny fomba mora indrindra ahafantarana ny fomba fiasan'ny singa iray manokana dia ny fifaneraserana aminy. Noho izany, tsy nampiasa fitaovana toy ny Storybook izahay, fa nanao jery todika ifanakalozan-kevitra - azonao atao ny mikitika, manondro, manindry... Rehefa manampy singa vaovao amin'ny rafitra famolavolana, dia miseho ao amin'ny preview izany mba hisian'ny sehatra hifantohana rehefa fampiharana azy.

tahirin-kevitra

Miorina amin'ny angon-drakitra omena amin'ny sehatra amin'ny endrika JSON, ny antontan-taratasy momba ny singa dia avoaka ho azy. Ny lisitry ny fananana sy ny mety karazana soatoavina ao amin'ny tsirairay amin'izy ireo dia nofaritana. Aorian'ny famokarana mandeha ho azy dia azo hazavaina amin'ny tanana ny fampahalalana ary azo ampiana famaritana lahatsoratra. Ny fijery sy ny antontan-taratasy dia mifandray amin'ny tsirairay amin'ny haavon'ny singa tsirairay, ary ny fampahalalana rehetra tafiditra ao amin'ny antontan-taratasy dia azon'ny mpamorona amin'ny endrika rakitra JSON fanampiny.

Mpanaratsy

Ny nilaina iray hafa dia ny fahafahana manolo sy manavao ireo singa efa misy rehefa mandeha ny fotoana. Ny rafitra famolavolana dia nianatra nilaza tamin'ny mpamorona izay fananana na singa iray manontolo aza tsy azo ampiasaina ary manala azy ireo raha vao tsy ampiasaina amin'ny sehatra rehetra intsony. Mbola betsaka ny asa "manual" amin'ity dingana ity, saingy tsy mijanona isika.

Fampandrosoana ny mpanjifa

Tsy isalasalana fa ny dingana sarotra indrindra dia ny fandikana ny angon-drakitra rafitra famolavolana amin'ny kaody amin'ny sehatra rehetra tohananay. Raha toa ka tsy zava-baovao, ohatra, ny grids modular amin'ny Internet, dia niasa mafy ireo mpamorona ny fampiharana finday ho an'ny iOS sy Android talohan'ny nahafantarany ny fomba hiainana azy.

Mba hametrahana ny efijery fampiharana iOS dia mampiasa mekanika fototra roa nomen'ny iviUIKit izahay: fandrafetana singa maimaim-poana sy fandrafetana fanangonana singa. Mampiasa VIPER izahay, ary ny fifandraisana rehetra amin'ny iviUIKit dia mifantoka amin'ny View, ary ny ankamaroan'ny fifandraisana amin'ny Apple UIKit dia mifantoka amin'ny iviUIKit. Ny habe sy ny firafitry ny singa dia voafaritra amin'ny resaka tsanganana sy rafitra syntactic izay miasa eo an-tampon'ny teritery iOS SDK teratany, mahatonga azy ireo ho azo ampiharina kokoa. Nanamora indrindra ny fiainanay izany rehefa niasa tamin'ny UICollectionView. Nanoratra fonosam-panamboarana maromaro izahay ho an'ny fandrafetana, anisan'izany ireo tena sarotra. Nisy kaody farany ambany indrindra ho an'ny mpanjifa ary lasa fanambarana izany.

Mba hamoronana fomba ao amin'ny tetikasa Android dia mampiasa Gradle izahay, mamadika ny angona rafitra famolavolana ho endrika amin'ny endrika XML. Amin'izany fotoana izany, manana mpamokatra maromaro amin'ny ambaratonga samihafa izahay:

• Basic. Ny angon-drakitra momba ny primitives ho an'ny mpamokatra avo lenta dia voasivana.
• loharano. Misintona sary, kisary, ary sary hafa.
• singa fototra. Izy ireo dia nosoratana ho an'ny singa tsirairay, izay mamaritra ny fananana sy ny fomba handikana azy ireo ho fomba.

Famoahana fampiharana

Rehefa avy nanamboatra singa vaovao na nanamboatra singa efa misy ny mpamorona, dia ampidirina ao amin'ny rafitra famolavolana ireo fanovana ireo. Ny mpamorona ny sehatra tsirairay dia manatsara ny famoronana kaody mba hanohanana ny fanovana. Aorian'izany dia azo ampiasaina amin'ny fampiharana ny fiasa vaovao izay ilana ity singa ity. Noho izany, ny fifandraisana amin'ny rafitra famolavolana dia tsy mitranga amin'ny fotoana tena izy, fa amin'ny fotoana fanangonana famoahana vaovao. Ity fomba fiasa ity koa dia mamela ny fanaraha-maso tsara kokoa ny fizotran'ny famindrana angon-drakitra ary miantoka ny fiasan'ny code amin'ny tetikasa fampandrosoana mpanjifa.

vokatra

Herintaona lasa izay no lasa anisan'ny fotodrafitrasa manohana ny fampivoarana ny sinema an-tserasera Ivy ny rafitra famolavolana, ary efa afaka manatsoaka hevitra isika:

• Tetikasa lehibe sy saro-takarina izany izay mitaky loharanon-karena voatokana tsy tapaka.
• Izany dia namela anay hamorona fiteny hita maso miampita sehatra miavaka izay mahafeno ny tanjon'ny serivisy video an-tserasera.
• Tsy manana sehatra tsy hita maso sy miasa intsony izahay.

Preview of Ivy design system component - design.ivi.ru

Source: www.habr.com