Indlela yokudala iKhadi lokuBumba leMpahla kwi-Adobe Experience Design CC

Ukubaluleka kwezinto ezibonakalayo ezivela kwiGoogle kwasekuqaleni kujoliswe kwi-platform ye-Android njengendlela yokubonisa ukuhambelana kokuyila kwiplatifomu.

01 ngo-06

Indlela yokudala iKhadi lokuBumba leMpahla kwi-Adobe Experience Design CC

Ngobubele bukaTom Green

Emva kokuba abaqulunqi baqala ukucubungula kwaye baqonde ukucinga emva kwayo, i-Design Design iyenye enye yezona zifilosofi ezibonakalayo ezibonakalayo kwi- web kunye ne-mobile design . Konke okufuneka ukwenze ukuze ubone oko sikufumanayo kukukwenza uphendlo lweMpahla kwiPinterest kwaye uza kubona amakhulu emizekelo kunye nokuvavanya kumacebo, amapilisi, nakwiiwebhusayithi.

Inqaku elithandekayo leMpahla yoKwakha yindlela yokucinga yeGoogle malunga nendlela zokusebenza kufuneka zivele ngayo kwaye zisebenze kumadivayisi eselula kodwa ezi ngcamango zisetyenziselwa nayiphi na isikrini naluphi na ubukhulu kunoma yiphina iqonga. Njengoko i-Google ichaza kwisiqendu sokuqala senkcazo, "Siziphonsele inselele ukuba sikhulume ulwimi olubonakalayo kubasebenzisi bethu abahlanganisela imigaqo yeklasi yokuyila kakuhle kunye nokutsha kunye nethuba lobuchwepheshe kunye nesayensi. Olu luyilo lwempahla. Lo mbhalo ngumqulu ophilayo oza kuhlaziywa njengoko siqhubeka nokuphuhlisa izifundo kunye nezinto ezithile zokwakha izinto. "

Izinto ezisetyenziswe ngazo, ngokwemigqaliselo ngokubanzi, liphepha kunye nephawu lokubaluleka kweMpahla yikhadi. Cinga ngekhadi yenkcazo ebusweni kwaye uhamba ngendlela efanelekileyo. Ikhadi yinto equlethe iifoto, iividiyo, izalathisi zombhalo kunye nokunye kodwa apho zihluke kwiinkalo ezininzi zokusebenzisana zijoliswe ukugxila kwisifundo esisodwa. Amakhadi ajikeleze iinqununu, ziqulethe izithunzi ezitshoyo ezibonisa ukuba zingaphezu komhlaba kwaye ukuba zonke zihamba ngelo lizwe zibizwa ngokuba "iqoqo".

Kule ndlela "Njani" siza kudala ikhadi ngokusekelwe kwi-spec. Esikhundleni sokudala ikhadi ngeendlela ezahlukeneyo zokucinga kunye nokudweba, siya kuza kuyo ukusuka kwicala elithile. Siza kusebenzisa izixhobo kwi-Design ye-Adobe Design Design okwangoku kwi-Macintosh kuphela yemboniso yangaphandle kwaye ikhululekile. Ungayilanda apha.

Masiqalise.

02 we-06

Ukudala i-Artboard ye-Prototype kwi-Adobe Experience Design CC

Sebenzisa ithuluzi le-artboard kunye neempendulo ze-artboard ukuze uqalise. Ngobubele bukaTom Green

Akukho ndlela ecacileyo yokudala isikrini se-Android kwi-Start Screen kwi-Experience Design CC (XD). Oko sasihlala sikwenza xa sivula i-XD, kukukhetha inketho ye-iPhone 6 kwaye, xa i-interface iqalisa, sikhetha ithuluzi le- Artboard phantsi kweBar Toolbar kwaye ukhethe i-Android Imfono kwizinto ezikhethiweyo kwiipaneli zePropati ukuya ngakwesokudla. Emva koko sitshintshela kwisixhobo sokhetho, nqakraza kanye kwigama le-iPhone webboard kwaye ususe i-artboard. Hayi kwakhona.

Kwinguqulelo yangoku ye-XD, kukho umcibisholo omncinci ngaphandle kwe-iPhone 6 leyo, xa ucofa, uvula imenyu ehlayo. Ukusuka apho ukhetha i-Android Mobile version kunye ne- Android Mobileboardboard ekhethiweyo evuliwe kwi-interface.

Ukuqinisekisa ukuba sinekrini efanelekileyo evulekileyo yekhadi, sisoloko siwela kwiSketch 3 kwaye sikopisha kwaye unamathisele iBar Status, i-Bar Bar kunye ne-App bar kwi-Template Design Material kwi-artboard. Umdwebo 3.2 uqukethe isifanekiso seMpawu ( Iifayile> ezitsha ezisuka kwisifanekiso> Imveliso yoBucala ) kunye nomnye okhululekileyo uvela kuKyle Ledbetter ongayifumana apha. Ukuba awunayo I-Sketch, unokuyikopisha uze uyihlanganise kwiimpawu ze-XD ezifumaneka kwiFayile> Vula i-UI Kit> I-Google Material . Unokuzikhuphela kwiGoogle ukuze usebenzise kwi-Photoshop, i-Illustrator, i-After Effects kunye neSketch.

03 we-06

Ukongeza iKhadi lokuBumba leMpahla kwi-Adobe XD CC Artboard

Iikiti ze-UI zixhamla kakhulu kuba zihambelana neenkcukacha zoBume beMpawu. Ukuxhaswa kukaTom Green

Enye yezinto ezibalulekileyo kakhulu ze-XD kukubandakanywa kwee-UI Kits kwi-Apple iOS, i-Google Material kunye ne-Microsoft Windows. Kwimiba emininzi, bongeza igama elithi "Ukukhawuleza" kwigama elithi "Rapid Prototyping." Kwakhona benza ukuba umsebenzi womqambi lula kwizinto eziqhelekileyo ze-UI akufuneki ziphinde ziphindwe rhoqo kwiSicelo soPhuhliso njenge-Photoshop, Illustrator okanye Umdwebo.

I-element ye-UI esiyimfuneko yayiyikhadi. Ukuze sifumane kuyo sakhetha iFayile> Vula i-UI Kit> I-Google Material kunye nekethi evuliwe njengoluxwebhu olutsha. Isici esiyifunayo sifumaneke kwiikhedi zeCards.

Oko sikuthandayo malunga nalezi zinto zihambelana nokucaciswa kweMpawu zoBume njengoko kuboniswe kwiibhloko ze-Content Blocks kunye nokufomathiweyo kwimiyalezo kunye neenkcazo zokumisa ezibekwe kwi-Typography spec.

Isitayela samakhadi esasiyifunayo sasiye ngasezantsi kwesobunxele. Siyifaka nje nge mouse kwaye siyikopishe kwibhodi yokunamathisela. Ngelishwa, i-XD ayinayo ikhonkco yokubhaliweyo yamaphepha avulekileyo. Into esenzayo ishukumisa ifowuni evulekile phantsi kweyona nto esiyisebenzayo, ukhethe kwaye unamathele. Enye indlela yokutshintsha ngokukhawuleza phakathi kwamaxwebhu e-XD avulekileyo kukucwangcisa uMyalelo- ' .

04 we-06

Indlela yokuHlalisa i-Material Design Design e-Adobe Experience Design CC

Iprojekthi nganye ye-UI yongezwa kwiprojekthi ye-XD iqela. Qinisekisa ukuba ungenelela into phambi kokuhlela. Ngobubele bukaTom Green

Xa ikhadi kwi-XD livela kwibhodi yokunamathisela akuyi kuqala ukusebenza kunye nayo. Into yokuqala okufuneka uyenze kukuba udibanise ikhadi ngenxa yokuba ufuna ukufikelela kwi-bit kunye neziqwenga ezenza ikhadi. Ukwenza oku, khetha ikarita uze ukhethe Into> Vlanganisa okanye cinezela iShift-Command-G.

Ikhadi lakho ngoku linamalungu amathathu:

Isinyathelo sokuqala kukucima ibhokisi eliluhlaza. Injongo yalo kuphela kukusebenza njengomgcini-ndawo kumfanekiso owenza ukuba, ukuba ukhetha, ukhetho.

Ibhokisi elineembalo ngokusemgangathweni emnyama imnyama ye-50%. Le bhokisi inokusetyenziswa njengemvelaphi yesicatshulwa kwaye unokutshintsha umbala kunye ne-box opacity.

Nangona kungabonakali ngokukhawuleza, ibhokisi ebomvu elandelayo ilandela i-Material Design Design ekuthi iikona zayo eziphezulu zijikelezwe ngamaphikseli angama-2. Gcina oku engqondweni xa ungeze umfanekiso. Kuya kufuna kwakhona iikona ezijikelezayo ezingenakongezwa kwisicelo sokucinga okanye kwi-XD.

Ukubona njengokuba le yindlela yokuphumla kwekhadi nayo idinga isithunzi. I-spec ecacisa ukuba kukho ukuphumla kwekhadi ye-pixels e-2. Ukongeza oku, khetha uhlobo lwendawo yangasemva kwaye usethe ixabiso le-Y neB (Blur) kwi-2 kwiphaneli yepropati.

05 ka 06

Indlela yokongeza umfanekiso kwiKhadi lokuCwangcisa izinto kwi-Adobe XD CC

Enye indlela yokusebenzisana nemifanekiso kukusebenzisa umgcini-ndawo ukuba afihle imifanekiso engaphandle. Ngobubele bukaTom Green

Ukwazi ikhadi ngamanqaku angama-pixels angama-344 kwaye indawo yomfanekiso i-pixels engama-150 ephakamileyo ( isiqingatha ukuphakama kwebhokisi ebomvu elikhanyayo ) Sayivula umfanekiso kwi-Photoshop, sinqumla kwisayizi kwaye siyilondoloza usebenzisa i-@ 2x inketho kwi-Photoshop Export As dialog ibhokisi. Umfanekiso ungeniswe kwi-Adobe XD.

Emva koko sidonsa ibhokisi elimnyama phezu komfanekiso kwi-pastibho kunye nezinto ezikhethiweyo > Mask With Shape . Umphumo wawunomfanekiso wokuthabatha iingqungquthela ezijikeleziweyo zobume. Emva koko sahambisa umfanekiso kwisithuba sayo sokugqibela.

Ngomfanekiso endaweni, satshintsha umbala wesiqendu webhokisi elimnyama, satshintsha umbhalo kunye nombala wekhonkco.

06 we-06

Ukusebenzisa i-Adobe XD CC Grid Feature

Sebenzisa isici seGridi ye-Adobe Experience Design CC ukubeka ngokucacileyo izinto. Ngobubele bukaTom Green

Xa ikhadi lizalisekile ngoku kufuneka lifakwe ngokufanelekileyo ngokubhekiselele kwi-Design Design spec. Oku kuthetha ukuba kukho iipikseli eziyi-8 kwicala ngalinye kwikhadi kwaye ikhadi kufuneka li-pixel eziyi-8 ngaphantsi kwebar ye-app. Ukwenza oku, nqakraza kanye ngegama le-artboard kwaye, kwi-Properties Panel, khetha iGrid. Igridi ibonakala ngaphezu kwe-artboard.

Ubungakanani begridi engagqibekanga ngamaphikseli angama-8 ayenzeka ukuba afane nobukhulu begridi yeMpahla yoCwangciso. Ukuba udinga ubungakanani obuhlukileyo, tshintsha ixabiso kwiGrid. Ukuba ufuna ukutshintsha umbala wegridi, nqakraza umbala webala uze ukhethe umbala ukusuka kwi-Picker yoMphumo.

Ngegridi ebonakalayo, nqakraza ekhadini uze uyisuse kwindawo yayo yokugqibela.

Ukugqiba, sikhethe ikhadi, cofa iqhosha lokuphindaphinda kweGridi kwaye utshintshe ukusa phakathi kwamakhadi ukuya kuma-pixels ayi-8.