Ukucaciswa kwe-Material Design kusuka ku-Google ekuqaleni kwakuhloswe kwesikhulumi se-Android njengendlela yokuphakamisa ukuhambisana kokuklama kwipulatifomu.
01 ka-06
Indlela Yakha Idizayini Yokwakha Izinto ku-Adobe Experience Design CC
Lapho abaklami beqala ukuyihlola futhi baqonde ukucabanga kwayo, I-Material Design iye yaba yilezi zifilosofi ezibonakalayo ezithinta kakhulu kwi- web kanye neselula . Konke okudingeka ukwenze ukuze ubone ukuthi yini esiyitholayo ukukwenza usesho lwe-Material Design ku-Pinterest futhi uzobona amakhulu wezibonelo nokuhlolwa kumadivayisi, amaphilisi, ngisho namawebhusayithi.
Isici esithakazelisayo se-Material Design yikucabanga kukaGoogle nxazonke ukuthi izinhlelo zokusebenza kufanele zivele kanjani futhi zisebenze kumadivayisi eselula kodwa imiqondo isetshenziswa kunoma yisiphi isikrini kunoma yisiphi isayizi kunoma iyiphi ipulatifomu. Njengoba i-Google isho esigabeni sokuqala senkomba, "Siziphikisana nathi ukwakha ulimi olubukwayo kubasebenzisi bethu oluhlanganisa imithetho ye-classic yokuklama okuhle kanye nemibono emisha kanye nethuba lobuchwepheshe nesayensi. Lokhu kuyizinto ezibonakalayo. Leli chungechunge eliphilayo elizohlaziywa njengoba siqhubeka nokuthuthukisa izinkambiso kanye nokucaciswa kokuklama impahla. "
Izinto ezikhulunywe ngazo, ngokwemibandela ejwayelekile, yiphepha futhi uphawu oluphawulekayo lwe-Material Design yikhadi. Cabanga ngekhadi lenkomba ebusweni futhi usendleleni efanele. Ikhadi liyisici esinezithombe, amavidiyo, izixhumanisi zombhalo nokunye kodwa lapho zihluke khona ezinkampanini eziningi ezisebenzayo zihloselwe ukugxila kwisifundo esisodwa. Amakhadi ahambile emagumbini, aqukethe izithunzi ezinzima ezibonisa ukuthi zingaphezu kwendawo futhi uma zisezindizeni ezifanayo zibizwa ngokuthi "iqoqo".
Kulo "Kanjani" sizokwenza ikhadi ngokusekelwe ku-spec. Esikhundleni sokudala leli khadi ngamathuluzi ahlukahlukene okudweba nokudweba, sizofika kuyo kusuka kwesinye isiqondiso. Sizosebenzisa amathuluzi ku-Adobe's Design Design okwamanje ku-preview ye-Macintosh kuphela yomphakathi futhi ikhululekile. Ungayilanda lapha.
Ake siqale.
02 ka 06
Ukudala i-Art Exhibition Artboard ku-Adobe Experience Design CC
Ayikho indlela ecacile yokudala isikrini se-Android kusukela ku-Start Screen ku-Experience Design CC (XD). Lokho esasijwayele ukukwenza uma sivula i-XD, ukukhetha inketho ye-iPhone 6 futhi, uma isikhombimsebenzisi sivula, sikhetha ithuluzi le- Artboard phansi kweThuluzi lamathuluzi bese ukhetha i-Android Mobile kusuka kokukhethwa kukho iphaneli ye-Properties ngakwesokudla. Khona-ke sishintshela kukho ithuluzi lokukhetha, chofoza kanye ngegama le-iPhone artboard bese ususa i-artboard. Angiphinde.
Kule nguqulo yamanje ye-XD, kukhona umcibisholo omncane eceleni kwe-iPhone 6 lapho, uma uchofoze, ivula imenyu ehlayo. Kusuka lapho ukhetha inguqulo ye-Android Mobile ne- Android Mobile artboard ekhethiwe evuleka ku-interface.
Ukuze siqiniseke ukuthi sinesikhala esikrinini esifanele sokuvulela ikhadi, sivame ukuwela ku-Sketch 3 bese sikopisha futhi unamathisele i-Status Bar, i-Nav Bar, ne-App ye-Bar kusukela kusifanekiso se-Material Design ku-artboard. Umdwebo 3.2 uqukethe isifanekiso se-Material Design ( Ifayela> I-New From Template> I-Design Design ) kanti enye enye ekhululekile kakhulu ivela ku-Kyle Ledbetter ongayithola lapha. Uma ungenayo I-Sketch, ungayibhala bese uyinamathisela ezitokisini ze-XD ezitholakala kufayela> Vula i-UI Kit> I-Google Material . Ungalanda futhi kusuka ku-Google ukuze isetshenziswe ku-Photoshop, Illustrator, After Effects kanye neSketch.
03 ka 06
Ukwengeza iKhadi lokuKwakha lezinto ezibonakalayo kwi-Artboard ye-Adobe XD CC
Esinye sezici eziwusizo kakhulu ze-XD ukufakwa kwezingxenye ze-UI ze-Apple iOS, i-Google Material, ne-Microsoft Windows. Ngezici eziningi, bangezela igama elithi "okusheshayo" kwigama elithi "Rapid Prototyping". Futhi benza umsebenzi womklami lula kulawo maphuzu ajwayelekile we-UI akudingeki ukuba avuselelwe njalo ku-Design Application njengo-Photoshop, Illustrator noma Sketch.
Isici se-UI esasidinga sasikhadi. Ukuze sifinyelele kuso sakhethile Ifayela> Vula i-UI Kit> I-Google Material futhi ithuluzi livuliwe njengedokhumenti entsha. Isici esasiyidingayo sitholakale esigabeni samakhadi.
Lokho esikuthandayo ngalokhu kuhambisana nalokho okushiwo yi-Material Design njengoba kufakwe kwi-specifications ze-Content Blocks kanye nokufometha kombhalo kanye nama-spacing specs ezibekwe ku-Typography spec.
Isitayela sekhadi esasiyifunayo sasiyisansi kwesokunxele. Siyifaka nje ngegundane lethu bese silikopisha ebhodini lokunamathisela. Ngeshwa, i-XD ayinayo isikhombimsebenzisi esibonakalayo semibhalo evulekile. Lokho esikwenzayo kushukumisela ifasitela evulekile idokhumenti kancane ukumbonisa lowo esisebenzisayo, ukhethe futhi unamathisele. Enye indlela yokushintsha masinyane emkhatsini wemibhalo evulekile ye-XD ukucindezela i-Command- ' .
04 ka 06
Ukuhlela kanjani i-Material Design Element ku-Adobe Experience Design CC
Uma ikhadi ku-XD livela ebhodini lokunamathisela ungatholi ukusebenza kahle. Into yokuqala okudingeka uyenze ukuhlanganisa i-card ngoba udinga ukufinyeleleka ezincane nasezicuceni eziqamba ikhadi. Ukuze wenze lokhu, khetha ikhadi bese ukhetha Into> Vumbela noma cindezela iShift-Command-G.
Ikhadi lakho manje lakhiwe ngezicucu ezintathu:
- Ibhokisi elimpunga elikhanyayo lesithombe.
- Ibhokisi eliphakathi kwempunga yombhalo
- Ibhokisi elingemuva lisetshenziswe njengemuva.
Isinyathelo sokuqala ukususa ibhokisi elincane elikhanyayo. Inhloso yalo kuphela ukusebenza njengendawo yokubeka isithombe esenza ukuthi, uma ukhetha, ukukhetha.
Ibhokisi elinombhalo empeleni liyimpunga emnyama nge-50% opacity. Leli bhokisi lingasetshenziswa njengemvelaphi yombhalo futhi ungashintsha umbala ne-opacity yebhokisi.
Nakuba kungabonakali ngokushesha, ibhokisi eliphuzi elikhanyayo lilandela i-Material Design spec ukuthi izingxenyana zalo eziphezulu zizungezwe ngamaphikseli angu-2. Gcina lokhu engqondweni uma ungeza isithombe. Kuzodinga futhi izingxenyana ezizungezile ezingangezwa kwisicelo sokucabanga noma ku-XD.
Uma sibona ukuthi lokhu kungukuphi isimo sokuphumula kwekhadi nakho kudinga isithunzi. I-spec icacisa ukuthi kukhona ukuphakama kokuphumula kwekhadi lamaphikseli angu-2. Ukwengeza lokhu, khetha ukuma kwesimo sangemuva bese ubeka amanani we-Y neB (Blur) kuya ku-2 kuphaneli yezakhiwo.
05 ka 06
Indlela yokwengeza isithombe seKhadi lokuKwakha lezinto ku-Adobe XD CC
Ukwazi ikhadi ngamaphikseli angu-344 ububanzi futhi indawo yesithombe ingama-pixels angama-150 aphezulu ( isigamu ukuphakama kwebhokisi elimnyama elikhanyayo ) Sasivule isithombe ku-Photoshop, siyifinyelela esayizi futhi siyilondoloza usebenzisa i-@ 2x inketho kwi-Photoshop's Export As dialog ibhokisi. Isithombe sithunyelwe ku-Adobe XD.
Sabe sesihudula ibhokisi eliphuzi elikhanyayo phezu kwesithombe ku-pasteboard kanye ne- Object ekhethiwe > Mask With Shape . Umphumela wawungumfanekiso oqoqa izingqimba ezizungezile zesimo. Sabe sesithuthela isithombe kusikhundla sayo sokugcina.
Ngesithombe esendaweni, sabe sesishintsha umbala wangemuva webhokisi elimnyama elimnyama, sishintshe umbhalo kanye nombala wombhalo wokuxhumanisa.
06 ka-06
Ukusebenzisa isici seGridi ye-CC ye-Adobe XD
Njengoba ikhadi liqedile manje kudingeka libeke kahle ngokusho kwe-Material Design spec. Lokhu kusho ukuthi kukhona amaphikseli angu-8 ngakwesokunene kwekhadi futhi ikhadi lidinga ukuba ngamaphikseli angu-8 ngaphansi kwebha yensiza. Ukuze wenze lokhu, chofoza kanye ngegama le-artboard futhi, kwi-Properties Panel, khetha iGrid. Igridi ivela phezu kwe-artboard.
Usayizi wegridi ozenzakalelayo ngamaphikseli angu-8 okwenzeka ukuba abe usayizi ofanayo wegridi we-Design Design.Uma udinga usayizi ohlukile, shintsha inani kuGrid endaweni. Uma ufuna ukushintsha umbala wegridi, chofoza inkinobho yombala bese ukhetha umbala ovela ku-Picker Umbala ophumela.
Njengoba igridi ibonakala, chofoza ekhadini bese uyithuthela endaweni yayo yokugcina.
Ukuqedela phezulu, sikhethe ikhadi, sicindezele inkinobho yokuphinda yeGrid futhi sishintshe ukuhlukanisa phakathi kwamakhadi kuya kumaphikseli angu-8.