Daga UI-kit zuwa tsarin ƙira

Kwarewar cinema ta kan layi Ivy

Lokacin da a farkon 2017 muka fara tunanin ƙirƙirar tsarin bayarwa na ƙira-zuwa-ladi, da yawa sun riga sun yi magana game da shi kuma wasu ma suna yin shi. Duk da haka, har ya zuwa yau ba a san kadan ba game da kwarewar ginin gine-ginen tsarin gine-gine, kuma babu wasu cikakkun bayanai da aka tabbatar da girke-girke da ke kwatanta fasaha da hanyoyi don irin wannan canji na tsarin aiwatar da zane a cikin samfurin da aka rigaya ya yi aiki. Kuma ta "bangarorin da ke cikin lambar" sau da yawa suna nufin abubuwa daban-daban.

Daga UI-kit zuwa tsarin ƙira
A halin yanzu, kamfanin ya ninka ma'aikatansa a kowace shekara - ya zama dole don ƙaddamar da sashin ƙira da haɓaka hanyoyin ƙirƙirar da canja wurin shimfidu don haɓakawa. Muna ninka duk wannan ta hanyar "zoo" na dandamali waɗanda ke buƙatar tallafi, kuma muna samun kamanni na pandemonium na Babila, wanda kawai ba zai iya "yi shi kullum" da samun kudin shiga ba. Ci gaban dandamali sau da yawa yana ci gaba a layi daya, kuma ana iya fitar da ayyuka iri ɗaya akan dandamali daban-daban tare da jinkirin watanni da yawa.

Daga UI-kit zuwa tsarin ƙira
Saitunan shimfidar wuri daban don kowane dandamali

A al'ada, mun fara da matsalolin da tsarin ƙira zai taimaka wajen warwarewa da kuma tsara buƙatun don ƙira. Baya ga ƙirƙirar haɗe-haɗen harshe na gani, haɓaka saurin shimfidawa da haɓakawa, da haɓaka ingancin samfurin gabaɗaya, yana da mahimmanci don haɗa ƙira gwargwadon yiwuwa. Wannan ya zama dole domin ci gaban ayyuka ya zama mai yiwuwa a kan duk dandamali na lokaci guda: Yanar gizo, iOS, Android, Smart TV, tvOS, Android TV, Windows 10, xBox One, PS4, Roku - ba tare da aiki akan kowannensu daban ba. Kuma mun yi shi!

Design → data

Lokacin da aka cimma mahimman yarjejeniyoyin tsakanin samfuran da sassan haɓakawa, mun zauna don zaɓar tarin fasaha kuma mu fitar da cikakkun bayanai game da duka tsari - daga shimfidawa zuwa saki. Don cikakken sarrafa kan aiwatar da canja wurin ƙira zuwa haɓakawa, mun bincika zaɓi na tantance sigogi kai tsaye daga fayilolin Sketch tare da shimfidu. Ya zama cewa gano guntun lambar da muke buƙata da fitar da sigogin da muke buƙata aiki ne mai rikitarwa da haɗari. Da fari dai, masu zanen kaya dole ne su yi taka tsantsan wajen sanya sunayen duk nau'ikan lambar tushe, na biyu, wannan yana aiki ne kawai don mafi sauƙin sassa, kuma na uku, dogaro da fasahar wani da tsarin tsarin tsarin ƙirar Sketch na ainihi yana yin illa ga makomar gaba ɗaya. aikin. Mun yanke shawarar yin watsi da sarrafa kansa a wannan yanki. Wannan shi ne yadda mutum na farko ya bayyana a cikin ƙungiyar tsarin ƙira, wanda shigarwar shi shine shimfidu masu ƙira, kuma abin da aka fitar shine bayanai da ke kwatanta duk ma'auni na abubuwan da aka tsara da kuma yin oda bisa tsarin ƙirar atomic.

Abin da ya rage kawai shine inda kuma yadda za a adana bayanan, yadda za a canza shi zuwa ci gaba da kuma yadda za a fassara shi a cikin ci gaba a kan dukkanin dandamali da muke tallafawa. Maraice ya daina zama maras kyau ... Sakamakon tarurruka na yau da kullum na ƙungiyar aiki wanda ya ƙunshi masu zanen kaya da jagorancin tawagar daga kowane dandamali shine yarjejeniya akan waɗannan.

Muna rarraba abubuwan gani da hannu zuwa abubuwan atomic: fonts, launuka, bayyananniyar bayyananni, indents, zagaye, gumaka, hotuna da tsawon lokaci don rayarwa. Kuma muna tattara daga wannan maɓallan, abubuwan shigarwa, akwatunan rajista, widget ɗin katin banki, da sauransu. Muna sanya sunayen da ba na ma'ana ba ga salon kowane matakan, sai dai gumaka, misali, sunayen birane, sunayen nymphs, Pokemon, mota brands ... Akwai kawai yanayin daya - jerin kada a gaji kafin , yadda salon ya ƙare - nuni dole ne ya tafi! Bai kamata a ɗauke ku da ilimin tauhidi ba, don kada ku ƙara maɓalli na tsakiya tsakanin "kananan" da "matsakaici," alal misali.

Harshen gani

An bar masu haɓakawa don yin tunanin yadda za a adana da canja wurin bayanai ta hanyar da ta dace da duk dandamali, kuma ƙira dole ne su tsara abubuwan da za su iya yin kyau da kuma aiki yadda ya kamata a cikin dukan rundunar na'urori masu tallafi.

A baya can, mun riga mun gudanar da “gwajin” yawancin abubuwan ƙira a cikin aikace-aikacen Windows 10, wanda a wancan lokacin ya kasance sabon dandamali a gare mu, wato, yana buƙatar ma'ana da haɓakawa "daga karce." Ta hanyar zana shi, mun sami damar shirya da gwada yawancin abubuwan da aka gyara kuma mu fahimci wanene ya kamata a haɗa su a cikin tsarin ƙirar Eevee na gaba. Idan ba tare da irin wannan akwatin yashi ba, irin wannan ƙwarewar za a iya samu ta hanyar adadi mai yawa a kan dandamali masu aiki da suka rigaya, kuma wannan zai ɗauki fiye da shekara guda.

Sake amfani da abubuwa iri ɗaya a kan dandamali daban-daban yana rage adadin shimfidar wuri da tsararrun bayanai na tsarin ƙira sosai, don haka ƙirar dole ne ta warware matsala ɗaya, a baya ba a bayyana shi ba a cikin ayyukan ƙirar samfuri da haɓakawa - ta yaya, alal misali, za a iya sake amfani da maɓallin wayoyi da allunan akan TV? Kuma menene ya kamata mu yi da girman fonts da abubuwan da ke kan irin waɗannan dandamali daban-daban?

Babu shakka, ya zama dole a ƙirƙira grid na zamani na giciye-dandamali wanda zai saita rubutu da girman abubuwan da muke buƙata don kowane takamaiman dandamali. A matsayin mafari ga grid, mun zaɓi girman da adadin fastocin fim ɗin da muke son gani akan wani allo kuma, bisa ga wannan, mun tsara ka'ida don gina ginshiƙan grid, muddin faɗin shafi ɗaya daidai yake. zuwa fadin fosta.

Daga UI-kit zuwa tsarin ƙira
Yanzu muna buƙatar kawo duk manyan fuska zuwa girman shimfidar wuri ɗaya kuma mu dace da su cikin grid gama gari. An tsara Apple TV da Roku a girman 1920x1080, Android TV - 960x540, Smart TVs, dangane da mai siyarwa, iri ɗaya ne, amma wani lokacin 1280x720. Lokacin da aka nuna app ɗin kuma an nuna shi akan Cikakken HD fuska, ana ninka 960 da 2, ana ninka 1280 da 1,33, kuma 1920 yana fitowa kamar yadda yake.

Tsallake m cikakkun bayanai, mun zo ga ƙarshe cewa a general duk fuska, ciki har da talabijin fuska, cikin sharuddan abubuwa da kuma girmansu, an rufe da daya zane layout, da kuma duk talabijin fuska ne na musamman hali na janar giciye-dandamali grid. kuma ya ƙunshi ginshiƙai biyar ko shida, kamar matsakaicin kwamfutar hannu ko tebur. Wanda ke sha'awar cikakkun bayanai, shiga cikin sharhi.

Daga UI-kit zuwa tsarin ƙira
UI guda ɗaya don duk dandamali

Yanzu, don zana sabon fasali, ba ma buƙatar zana shimfidu don kowane dandamali, da zaɓuɓɓukan daidaitawa ga kowane ɗayansu. Ya isa ya nuna shimfidar wuri ɗaya da daidaitawarsa ga duk dandamali da na'urori na kowane nisa: wayoyi - 320-599, komai - 600-1280.

Bayanai → ci gaba

Tabbas, gwargwadon yadda muke son cimma cikakkiyar ƙira, kowane dandamali yana da nasa fasali na musamman. Duk da cewa duka gidan yanar gizo da Smart TV suna amfani da tarin ReactJS + TypeScript, Smart TV app yana gudana akan abokan cinikin WebKit da Presto na gado don haka ba za su iya raba salo tare da gidan yanar gizo ba. Kuma wasiƙun imel an tilasta su gaba ɗaya suyi aiki tare da shimfidar tebur. A lokaci guda, babu ɗayan dandamalin da ba na html ba da ke amfani da ko shirin yin amfani da React Native ko kowane kwatankwacinsa, yana jin tsoron ɓarnawar aiki, tunda muna da shimfidu na al'ada da yawa, tarin tarin dabaru masu rikitarwa, hotuna da bidiyo. Don haka, tsarin gama gari na isar da shirye-shiryen CSS ko abubuwan da aka gyara bai dace da mu ba. Saboda haka, mun yanke shawarar watsa bayanai a cikin tsarin JSON, tare da kwatanta dabi'u a cikin wani nau'i na bayyanawa.

Don haka dukiya rounding: 8 Windows 10 app yana canzawa zuwa CornerRadius="8", yanar gizo - border-radius: 8px, Android - android:radius="8dp", iOS - self.layer.cornerRadius = 8.0.
Dukiya offsetTop: 12 abokin ciniki na gidan yanar gizo iri ɗaya a lokuta daban-daban na iya fassara kamar top, margin-top, padding-top ko transform

Bayyana bayanin kuma yana nuna cewa idan dandamali a fasaha ba zai iya amfani da kadara ko kimarta ba, zai iya yin watsi da shi. Ta fuskar kalmomi, mun yi wani irin yaren Esperanto: an ɗauko wasu daga Android, wasu daga SVG, wasu daga CSS.

Idan a kan wani dandali na musamman kana buƙatar nuna abubuwa daban-daban, mun aiwatar da ikon canja wurin tsararrun bayanai masu dacewa a cikin nau'i na fayil na JSON daban. Alal misali, yanayin "a mayar da hankali" don Smart TV yana nuna canji a cikin matsayi na rubutu a ƙarƙashin poster, wanda ke nufin wannan dandalin wannan bangaren a cikin darajar dukiyar "indent" zai ƙunshi maki 8 na ciki da yake bukata. Ko da yake wannan yana rikitar da kayan aikin tsarin zane, yana ba da ƙarin digiri na 'yanci, yana barin mu da damar da za mu iya sarrafa "rashin daidaituwa" na gani na dandamali da kanmu, kuma kada muyi garkuwa da gine-ginen da muka halitta.

Daga UI-kit zuwa tsarin ƙira

Hotunan hotuna

Iconography a cikin dijital samfur ko da yaushe mai girma ne kuma ba mafi sauƙaƙan aikin ba, sau da yawa yana buƙatar keɓantaccen mai ƙira. Akwai ko da yaushe da yawa glyphs, kowanne daga cikinsu yana da yawa masu girma dabam da launuka, da kuma dandamali yawanci bukatar su a daban-daban Formats. Gabaɗaya, babu wani dalilin da zai hana sanya duk wannan a cikin tsarin ƙira.

Daga UI-kit zuwa tsarin ƙira
Ana ɗora glyphs a cikin tsarin vector na SVG, kuma ana canza ƙimar launi ta atomatik tare da masu canji. Aikace-aikacen abokin ciniki na iya karɓar su a shirye don amfani - a kowane tsari da launi.

Редпросмотр

A saman bayanan JSON, mun rubuta kayan aiki don samfoti abubuwan da aka gyara - aikace-aikacen JS wanda ke wuce bayanan JSON akan tashi ta hanyar alamomi da janareta na salo, kuma yana nuna bambancin kowane bangare a cikin burauzar. Ainihin, samfoti daidai abokin ciniki ɗaya ne da aikace-aikacen dandamali kuma yana aiki tare da bayanai iri ɗaya.

Hanya mafi sauƙi don fahimtar yadda wani sashi ke aiki shine ta hanyar mu'amala da shi. Saboda haka, ba mu yi amfani da kayan aiki kamar Littafin Labari ba, amma mun yi samfoti mai ma'amala - za ku iya taɓawa, nuna, danna ... Lokacin ƙara sabon sashi zuwa tsarin ƙira, yana bayyana a cikin samfoti don dandamali ya sami abin da za a mai da hankali kan lokacin aiwatar da shi.

Rubutun

Dangane da bayanan da aka kawo wa dandamali a cikin hanyar JSON, takaddun abubuwan abubuwan da aka haɗa ana yin su ta atomatik. An bayyana jerin kaddarorin da yuwuwar nau'ikan dabi'u a cikin kowannensu. Bayan ƙirƙira ta atomatik, ana iya fayyace bayanin da hannu kuma ana iya ƙara bayanin rubutu. Abubuwan samfoti da takaddun da ake dangantawa da juna a matakin kowane bangare, kuma duk bayanan da aka haɗa a cikin takaddun suna samuwa ga masu haɓakawa ta hanyar ƙarin fayilolin JSON.

Deprecator

Wata larura kuma ita ce ikon maye gurbin da sabunta abubuwan da ke akwai akan lokaci. Tsarin ƙira ya koyi gaya wa masu haɓaka waɗanne kaddarorin ko ma duka abubuwan da ba za a iya amfani da su ba kuma cire su da zarar an daina amfani da su akan duk dandamali. Har yanzu akwai aiki da yawa na “manual” a cikin wannan tsari, amma ba mu tsaya cik ba.

Ci gaban abokin ciniki

Babu shakka, matakin da ya fi rikitarwa shine fassarar bayanan tsarin ƙira a cikin lambar duk dandamali da muke tallafawa. Idan, alal misali, grid na zamani akan gidan yanar gizo ba sabon abu bane, to masu haɓaka aikace-aikacen wayar hannu na asali na iOS da Android sun yi aiki tuƙuru kafin su gano yadda za su rayu da shi.

Don tsara hotunan allo na aikace-aikacen iOS, muna amfani da hanyoyin asali guda biyu waɗanda iviUIKit ke bayarwa: shimfidar abubuwa kyauta da tsarar tarin abubuwa. Muna amfani da VIPER, kuma duk hulɗa tare da iviUIKit an mayar da hankali ne a cikin View, kuma yawancin hulɗa tare da Apple UIKit an mayar da hankali a cikin iviUIKit. An ƙayyadadden girma da tsari na abubuwa dangane da ginshiƙai da tsarin daidaitawa waɗanda ke aiki a saman ƙaƙƙarfan ƙaƙƙarfan IOS SDK na asali, yana sa su zama masu amfani. Wannan musamman ya sauƙaƙa rayuwar mu yayin aiki tare da UICollectionView. Mun rubuta nade-nade da yawa na al'ada don shimfidu, gami da masu rikitarwa. Akwai ƙaramin lambar abokin ciniki kuma ya zama sanarwa.

Don samar da salo a cikin aikin Android, muna amfani da Gradle, muna juya bayanan tsarin ƙira zuwa salo a cikin tsarin XML. A lokaci guda, muna da janareta da yawa na matakai daban-daban:

  • Na asali. An ƙirƙira bayanan abubuwan farko don manyan janareta.
  • Albarkatu. Zazzage hotuna, gumaka, da sauran zane-zane.
  • Bangaren. An rubuta su ga kowane bangare, wanda ke bayyana abin da kaddarorin da yadda za a fassara su cikin salo.

Sakin aikace-aikacen

Bayan masu zanen kaya sun zana wani sabon sashi ko sake tsara wani da ke akwai, ana ciyar da waɗannan canje-canje a cikin tsarin ƙira. Masu haɓaka kowane dandamali suna daidaita tsarar lambar su don tallafawa canje-canje. Bayan haka, ana iya amfani da shi wajen aiwatar da sabbin ayyuka inda ake buƙatar wannan ɓangaren. Don haka, hulɗa tare da tsarin ƙira ba ya faruwa a ainihin lokacin, amma kawai a lokacin haɗuwa da sababbin sakewa. Wannan hanyar kuma tana ba da damar ingantaccen iko akan tsarin canja wurin bayanai kuma yana tabbatar da ayyukan lambobi a cikin ayyukan haɓaka abokin ciniki.

Sakamakon

Shekara guda kenan tun lokacin da tsarin ƙira ya zama wani ɓangare na ababen more rayuwa da ke tallafawa ci gaban fim ɗin Ivy na kan layi, kuma mun riga mun yanke shawara:

  • Wannan babban aiki ne mai sarkakiya da ke buƙatar kayan aiki akai-akai.
  • Wannan ya ba mu damar ƙirƙirar yaren gani na giciye na musamman wanda ya dace da manufofin sabis ɗin bidiyo na kan layi.
  • Ba mu da sauran dandamali na gani da aiki.

Duban abubuwan tsarin ƙirar Ivy - zane.ivi.ru

source: www.habr.com

Add a comment