Kamoo U ka Etsang Khadi ea Boitsebiso Boitsebiso ka Adobe Experience Design CC

Tlhaloso ea Boitsebiso bo Boitsebiso bo tsoang ho Google e ne e reretsoe ho sethaleng sa Android e le tsela ea ho fana ka maikutlo a hore na moqapi o tsitsitseng joang sethaleng.

01 ea 06

Kamoo U ka Etsang Khadi ea Boitsebiso Boitsebiso ka Adobe Experience Design CC

Ka tlhompho ea Tom Green

Hang ha liqapi li qalile ho li pata le ho utloisisa monahano o ka morao, Matla a Boitsebiso a khutsitse e le e 'ngoe ea lifilosofi tse nang le tšusumetso e kholo ka ho fetisisa websaeteng le mohahong oa mohala . Lintho tsohle tseo u lokelang ho li etsa ho bona seo re se fumanang ke ho etsa tlhahiso ea Lintho tsa Matlalo ho Pinterest mme u tla bona makholo a mehlala le liteko lits'ebetsong, matlapeng, esita le liwebsaete.

Karolo e thahasellisang ea Boqapi ba Boitsebiso ke ho nahana ka Google ho pota-pota hore na li-apple li lokela ho hlaha joang le ho sebetsa lisebelisoa tsa selefouno empa likhopolo li ntse li sebelisoa ho skrine leha e le efe ea boholo leha e le efe sethaleng. Joalokaha Google e bolela serapeng se qalang sa boitsebiso, "Re ile ra ikitlaetsa ho etsa puo e bonahalang bakeng sa basebelisi ba rona e ikenyetsang melao ea khale ea moqapi o motle le mocha le monyetla oa thekenoloji le saense. Ena ke moralo oa lintho tse bonahalang. Taba ena ke tokomane ea bophelo e tla ntlafatsoa ha re ntse re tsoela pele ho ntshetsa pele lintlha le lihlahisoa tse itseng tsa thepa. "

Litaba tseo ho buuoang ka tsona ka mantsoe a mangata, ke pampiri le letšoao la Boqapi ba Boitsebiso ke karete. Nahana ka karete ea likarolo holim'a metsi 'me u le tseleng e nepahetseng. K'haete ke ntho e nang le lifoto, livideo, li-link tsa li-text, joalo-joalo empa moo li fapaneng le mekhoa e mengata e sebelisanang le tsona li reretsoe ho tsepamisa mohopolo sehloohong se le seng. Lik'hase li na le likarolo tse fokolang, li na le likhahla tse fokolang tse bontšang hore li ka holim'a metsi 'me kaofela li le sefofane se le seng seo ba se bitsang "pokello".

Ho sena "Joang ho" re tla etsa karete e thehiloeng ho khethollo. Ho e-na le ho etsa karete ena ka litšoantšo tse fapa-fapaneng tsa litšoantšo le ho betla, re tla ho eona ho tloha ka tsela e fapaneng. Re tlil'o sebelisa lisebelisoa Tlhahisoleseding ea Boiphihlelo ba Adobe eo hona joale e bonts'ang pele ho phatlalatso ea Macintosh 'me e lokolohile. U ka e kopitsa mona.

A re qaleng.

02 ea 06

Ho theha Artboard ea lipapali ho Adobe Experience Design CC

Sebelisa sesebelisoa sa artboard le template ea artboard ho qala. Ka tlhompho ea Tom Green

Ha ho na tsela e hlakileng ea ho bopa skrine ea Android ho tloha ho Start Screen ka Experience Design CC (XD). Seo re neng re tloaetse ho se etsa ha re bula XD, ke ho khetha khetho ea iPhone 6, 'me ha sebopeho se bula, re khetha sesebelisoa sa Artboard ka tlase ho Toolbar ebe u khetha Android Mobile ho khetholla ka lehlakoreng la Properties ho ea ho le letona. Ebe joale re fetela ho sesebelisoa sa kgetho, tobetsa hang ka lebitso la iPhoneboardboard mme u tlose artboard. Ha e sa le eo.

Nthong ea hona joale ea XD, ho na le motsu o monyenyane ka thōko ho iPhone 6 eo, ha o tobetse, e bula menu e theoha. Ho tloha moo u khetha Android Mobile version le Androidboard artboard e khethiloeng e bula sebopeho.

Ho etsa bonnete ba hore re na le sebaka se loketseng sa skrine bakeng sa karete, hangata re fetela ho Sketch 3 mme re kopitsa le ho pata boemo ba Status Bar, Nav Bar, le App ho tloha ka Letlotlo la Matla a Matla ho eaboardboard. Sketch 3.2 e na le sebopeho sa Matla a Boitsebiso ( File> New ho tloha Template> Boitsebiso Boitsebiso ) 'me e' ngoe e ntle haholo e tsoa ho Kyle Ledbetter eo u ka e fumanang mona. Haeba o se na Sketch, o ka o kopitsa le ho o phutha matsohong a XD a fumanoang Files> Open UI Kit> Litaba tsa Google . U ka boela ua ba bolokela ho tsoa Google ho sebelisoa Photoshop, Illustrator, After Effects le Sketch.

03 ea 06

Ho eketsa Letoto la Boitsebiso ba Matla ho Adobe XD CC Artboard

Li-kits tsa UI li molemo ka ho fetisisa ka hore li lumellane le sebopeho sa Boitsebiso ba Boitsebiso.Tlhaloso ea Tom Green

E 'ngoe ea likarolo tse sebetsang ka ho fetisisa tsa XD ke ho kenyelletsa li-UI Kits bakeng sa Apple iOS, Google Material, le Microsoft Windows. Ka mekhoa e mengata, ba eketsa lentsoe "Rapid" ho lentsoe "Rapid Prototyping". Hape ba etsa hore mosebetsi oa moqapi a be bonolo habonolo likarolo tseo tsa UI tse tloaelehileng ha ho hlokahale hore li tsosolosoe kamehla Ketsong ea Moqapi e kang Photoshop, Illustrator kapa Sketch.

Sehlopha sa UI seo re se hlokang e ne e le karete. E le hore re fihle ho eona, re khethile File> Open UI Kit> Litaba tsa Google 'me kakaretso e buloa e le tokomane e ncha. The element eo re e hlokang e fumanoe karolong ea likarete.

Seo re se ratang ka tsena ke tsona tse khomarelang boitsebiso ba Boitsebiso bo Boitsebiso joalokaha bo boletsoe maqakabetsing a Content Blocks hammoho le litlhaloso tsa litemana le melaetsa e fapaneng e hlahang ka Typography spec.

Mokhoa oa karete oo re neng re o batla e ne e le o ka tlaase ho le letšehali. Re e qaqisa ka mouse ebe re e kopitsa ho lebokose la lipapali. Ka bomalimabe, XD ha e na sebopeho sa tabbed bakeng sa litokomane tse bulehileng. Seo re se etsang ke ho sutumetsa fensetere ea lenaneo le bulehileng ho senola eo re sebetsang ho eona, e e khethe le ho pata. Tsela e 'ngoe ea ho potlakela ho fetola lipakane tse bulehileng tsa XD ke ho hatella Command-' .

04 ea 06

Kamoo U ka Hlahisang Element Material Element ka Adobe Experience Design CC

Ntho e 'ngoe le e' ngoe ea UI e kenyelletsoeng morero oa XD e arotsoe. Etsa bonnete ba hore u ka kopanya ntho pele u hlophisa. Ka tlhompho ea Tom Green

Ha karete ea XD e fihla ka lebokose la li-clipboard u se ke ua qala ho sebetsa le eona ka merri. Ntho ea pele eo u lokelang ho e etsa ke ho kopanya karete kahobane u hloka ho fihlella hanyane le likotoana ho qapa karete. Ho etsa sena, khetha karete 'me u khethe Ntho> Kopanya kapa u hatelle Shift-Command-G.

Khadi ea hau e se e entsoe ka likotoana tse tharo:

Mohato oa pele ke ho tlosa leseli le bofubelu lebokoseng. Sepheo sa sona feela ke ho ba moemeli oa setšoantšo se etsang hore, haeba u khetha, u ikhethele.

Lebokose le nang le lengolo le hlile le letšoele le lefifi le nang le 50% opacity. Lebokose lena le ka sebelisoa e le semelo sa moelelo 'me u ka fetola' mala le opacity ea lebokose.

Le hoja e sa hlahe hang-hang, leseli le bofubelu lebokoseng le latela Mokhoa oa Boitsebiso bo bontšang hore lihlooho tsa eona tse ka holimo li pota-potiloe ke pixelisi tse 2. Boloka sena kelellong haeba o phaella setšoantšo. E tla boela e hloke likhutšoanyane tse ka kenyelletsoang ketsong ea litšoantšo kapa ka XD.

Ha u bona kamoo boemo bona bo leng kateng ka karete e boetse e hloka moriti. Mohala o hlakisa hore ho na le phalliso ea phomolo ea karete ea 2 pixels. Ho eketsa sena, khetha sebopeho se setso se setho mme u behe litekanyetso tsa Y le B (Blur) ho 2 ka marang-rang a marang-rang.

05 ea 06

Kamoo u ka kenyang setšoantšo sa Card Card Design ka Adobe XD CC

Tsela e 'ngoe ea ho sebetsana le litšoantšo ke ho sebelisa mohlokomeli ho pata setšoantšo se tsoang naheng. Ka tlhompho ea Tom Green

Ho tseba karete ke bophara ba 344 pixels 'me sebaka sa setšoantšo se boholo ba pixelse tse 150 ( halofo ea bophahamo bo botala bo botle ) Re ile ra bula setšoantšo ho Photoshop, ra se kopanya ho ea ka boholo' me ra bo boloka ka kopo @ @ 2x ho lebokose la Export As Photoshop's Export As dialog. lebokose. Setšoantšo se ne se kenngoa ka Adobe XD.

Re ntan'o hulela lebokose le bofubelu bo khanyang holim'a setšoantšo ho sethaleng le ntho e khethiloeng > Mask With Shape . Phello e ne e le setšoantšo se ntseng se bokella likhutšoanyane tsa sebopeho. Re ntan'o fetisetsa setšoantšo ho ea boemong ba sona ba ho qetela.

Ka setšoantšo se le seng, joale re fetola mobala oa mobala oa lebokose le bohareng ba bohlooho, re fetola temana le 'mala oa sekahare.

06 ea 06

Ho sebelisa sebopeho sa Grid ea Adobe XD CC

Sebelisa karolo ea Grid ea Adobe Experience Design CC bakeng sa ho behoa ha maemo hantle. Ka tlhompho ea Tom Green

Ka karete e e phethetse hona joale e hloka ho behoa ka mokhoa o nepahetseng ho ea ka Tlhaloso ea Matla. Sena se bolela hore ho na le li-pixelse tse 8 ka lehlakoreng le leng la karete mme karete e hloka ho ba pixelse tse 8 ka tlase horeng ea app. E le ho etsa sena, tobetsa hanngoe lebitsong la artboard mme, ho Panel ea Matlo, khetha Grid. Gale e shebahala ka holim'a artboard.

Boemo ba motlakase bo sa lekanyetsoang ke pixelse tse 8 tse etsahalang e le boholo ba marang-rang bakeng sa Boqapi ba Boitsebiso. Haeba u hloka boholo bo fapaneng, fetola bohlokoa ho Gall sebakeng seo. Haeba o batla ho fetola 'mala oa keriti, tobetsa mobala oa' mala 'me u khethe' mala ho Moqapi oa Mobala o hlahisitsoeng.

Ha grid e bonahala, tobetsa karete 'me u e ise sebakeng sa eona sa ho qetela.

Ho qeta, re ile ra khetha karete eo, ra tobetsa konopo ea Sebopeho sa Grid mme ra fetola sebaka se pakeng tsa likarete le li-pixelse tse 8.