Nzira Yokugadzira Nayo Kadhi Yakagadzirwa Sei muAdobe Experience Design CC

Izvo Zvinyorwa Zvokugadzirwa kweGoogle kubva pakutanga zvakagadzirirwa pa Android platform senzira yekuratidza kusagadzikana kwekugadzirwa papuratifomu.

01 of 06

Nzira Yokugadzira Nayo Kadhi Yakagadzirwa Sei muAdobe Experience Design CC

Kutendeseka kwaTom Green

Pane imwe nguva vavakadzi vakatanga kutarisa uye vachiziva mafungiro ari shure kwavo, Zvigadzirwa zveMifananidzo zvakanyarara zvikava chimwe chezvinhu zvakanyanyisa kuona mafirosofi muwebhu uye mafoni . Zvose zvaunoda kuita kuti tione zvatiri kuwana ndezvekuita Zvinhu Zvitsva zvitsvakurudzo paPinterest uye iwe uchaona mazana ezvienzaniso uye kuedza pane zvigadzirwa, mapiritsi, uye kunyange mawebsite.

Chinhu chinonakidza cheMashoko Akarongwa ndeye mafungiro eGoogle pane maitiro ekufanirwa kwezvirongwa nekushanda pamafoni eshure asi mazano ari kushandiswa kune chero skrini yemhando ipi zvayo pane imwe nzvimbo. Sezvinotaurwa neGoogle mundima yokutanga yemashoko okuti, "Takazvipikisa kuti tive nemutauro unooneka wevashandisi vedu vanogadzira mitemo yekutanga yezvakanaka nekugadzirisa uye zvingangodaro zvekambanikiti nesayenzi. Izvo zvinhu zvakasikwa. Iyi spec inyaya yekurarama iyo ichavandudzwa sezvo isu tichienderera mberi kukudziridza zvinyorwa uye zvakananga zvekugadzirwa kwezvinhu. "

Mashoko acho akataurwa pamusoro, mumashoko akazara, ndeye pepa uye chiratidzo cheMagadziro Akakosha ikadhi. Funga nezvekadhi rekutsvaga pamusoro uye iwe uri munzira yakarurama. Kadhi iri chinhu chine mapikicha, mavhidhiyo, zvinyorwa zvemashoko nezvimwe zvakadaro asi apo zvakasiyana kubva kune dzakawanda zvakagadziriswa zvirongwa ndezvokuti zvinotarisirwa kutarisa pane imwe nyaya. Makadhi akange akapoteredza makona, ane makuva asina simba anoratidza kuti ari kumusoro kwepamusoro uye kana ose ari parwende imwechete iyo inonzi "kuunganidza".

Mune iyi "Sei Kuti" tava kuzogadzira kadhi yakatarwa nemuenzaniso. Panzvimbo pokuumba kadhi nemhando dzakasiyana-siyana dzekufungidzira uye zvokugadzira zvishandiso, tichauya kune imwe nzvimbo yakasiyana. Tichashandisa zvishandiso muAdobe's Experience Design iyo iri mu Macintosh-chete inotarisa vanhu uye yakasununguka. Iwe unogona kuikanda iko pano.

Ngatitangei.

02 of 06

Kuumba Ikudzivirira kweAboardboard muAdobe Experience Design CC

Shandisai artboard tool uye artboard template kuti utange. Kutendeseka kwaTom Green

Ikoko hakuna nzira yakajeka yokugadzira chinyorwa cheAroid kubva paItaly Screen mu Experience Design CC (XD). Zvatakamboita patinenge tazarura XD , ndosarudza iPhone 6 sarudzo uye, kana iyo inotanga kuzarura, tinosarudza chigadzirwa cheArtboard pasi peTarabha uye sarudza Android Mobile kubva kusarudzo paPaneji yePirini kusvika kurudyi. Zvadaro tinoshandura kune imwe sarudzo yekusarudza, kanda kamwe pane zita reAriboardboard uye bvisai artboard. Hapachina.

Mune shanduro yezvino ye XD, pane mutsara muduku pedyo ne iPhone 6 iyo, kana ikaswededzwa, inovhura menyu inodonha. Kubva ipapo unosarudza Android Mobile version uye Android Mobile artbhodhi yakasarudzwa inotanga muhutano.

Kuita kuti tive nechokwadi chokuti tine nzvimbo yakakodzera yekuvharidzirwa yekadhi, tinowanzoenda kuSketch 3 uye tinyore uye tibatanidze Status Bar, Nav Bar, uye App yeApp kubva pane Material Material Template kuenda mu artboard. Sketch 3.2 ine Material Design template ( File> New From Template> Material Design ) uye imwe yakasununguka chaizvo inobva kuna Kyle Ledbetter yaunogona kuwana pano. Kana iwe usina Sketch, unogona kuzvinyora nekudzichengetedza kubva pane zvidhori zve XD zviri muFile> Open UI Kit> Google Material . Unogonawo kuakanda kubva kuGoogle kuti ishandiswe mu Photoshop, Illustrator, After Effects uye Sketch.

03 of 06

Kuwedzera Nyaya Yakagadzirwa Nemaoko kune Adobe XD CC Artboard

Iko kitsinyo yeUI inobatsira chaizvo pakuti inofanana neBhuku reMagadzirirwo Ezvakanyorwa.Kutambura kwaTom Green

Chimwe chezvinhu zvinonyanya kukosha zveHD ndezvekubatanidzwa kweUI Kits kweApple iOS, Google Material, uye Microsoft Windows. Muzvinhu zvakawanda, vanowedzera shoko rokuti "Rapid" kune izwi rokuti "Rapid Prototyping." Uyewo vanoita basa ravakagadziri nyore muzvinhu izvi zveUI zvakajairika hazvifanirwi kugara dzichigadziriswa muChina Chikumbiro chakadai seChotohop, Illustrator kana Sketch.

Chinhu cheUI chatinoda chaiva kadhi. Kuti tisvike kwariri takasarudza Firi> Open UI Kit> Nyaya dzeGoogle uye chikafu chakavhurwa semagwaro matsva. Icho chinhu chatakada chakanga chiri muCards category.

Zvatinoda pamusoro peizvi ndezvazvinonamatira kuBhuku reMashoko rakarongwa sezvinoratidzwa muBlog Blocks specs pamwe chete nekugadzirisa zvinyorwa uye zvinyorwa zvishoma zvakanyorwa muTypography spec.

Kadhi yemaitiro yatakada ndiyo yaiva muzasi kuruboshwe. Isu tinongotarisa nemapurisa edu uye takaikopa ku clipboard. Zvinosuruvarisa kuti, XD haina dhiabhorosi inoshandiswa yemagwaro akazaruka. Izvo zvatinoita ndezvokutora firiji redhiropu rakazaruka zvishoma kuti ratidze iyo yatinoshanda nayo, sarudzai uye nyora. Imwe nzira yekukurumidzira kushandura pakati pezvinyorwa zvakazaruka zveDVD ndeyekufambisa Command- ' .

04 of 06

Nzira Yekugadzirisa Zvinhu Zvakagadzirwa Element muAdobe Experience Design CC

Nhengo imwe neimwe yeUI yakawedzerwa kune project XD yakabatanidzwa. Iva nechokwadi chekugadzirisa chinhu icho chisati chagadziriswa. Kutendeseka kwaTom Green

Apo kadhi iri mu XD inosvika kubva pa clipboard usafara kutanga kushanda nayo. Chinhu chokutanga chaunofanira kuita ndechekubatanidza kadhi nokuti unoda kupinda kune zvishoma uye zvidimbu zvakanyora kadhi. Kuti uite izvi, sarudza kadhi uye sarudza Object> Unganp kana shandisa Shift-Command-G.

Kadhi yako iko zvino yakagadzirwa nezvidimbu zvitatu:

Nhanho yekutanga ndeyekudzikisa grey gray box. Chinangwa charo chete ndechokuita senzvimbo yekuchengetedza chifananidzo chinoita kuti, kana ukasarudza, chisarudzo.

Bhokisi iri rine zvinyorwa zvaro chaizvo rakasviba rine 50% opacity. Bhokisi iri rinogona kushandiswa semutsetse uye iwe unogona kuchinja mararamiro uye kushandiswa kwebhokisi.

Kunyangwe zvisingaratidzike pachena, chiedza chakachena bhokisi rinotevera Zvinhu Zvakagadzirwa zvinowanikwa mumakona ayo ari kumusoro zvakapoteredzwa 2 pixels. Chengeta ichi mupfungwa kana uri kuwedzera mufananidzo. Ichinodikanwawo makona akapoteredza anogona kuwedzerwa kumushandi wekufungidzira kana mu XD.

Kuona sekuti iyi ndiyo yekuzorora kwekadhi inodawo mumvuri. Izvo zvinoita kuti zvive pachena kune kukwirira kwokuzorora kadhi re 2 pixels. Kuti uwedzere izvi, sarudza mutsvuku mamiriro ezvinhu uye uise Y neB (Blur) maitiro kusvika 2 muimba yepaneti.

05 of 06

Nzira Yokuwedzera Nayo Mifananidzo kuChinhu Chakasika Card muAdobe XD CC

Imwe nzira yekushanda nemifananidzo ndeyokushandisa munhu anogadzirisa nzvimbo kuti asvike mufananidzo wakabuda. Kutendeseka kwaTom Green

Kuziva kadhi ndeye 344 pixels yakakura uye nzvimbo yezvifananidzo ine 150 pixels yakakwirira ( hafu yekumusoro kwe grey gray box ) Takavhura mufananidzo mu Photoshop, takaikurira kuhukuru uye taichengetedza tichishandisa @ 2x sarudzo mu Photoshop's Export As dialog bhokisi. Mufananidzo wacho waiswa kune Adobe XD.

Takazokwevedza chiedza chebhokisi bhokisi pamusoro pechifananidzo pane pasteboard uye yakasarudzwa Chinangwa> Mask With Shape . Chigumisiro chacho chaiva chifananidzo chaitora makona akapoteredza chimiro. Takazoendesa chifananidzo kune chinzvimbo chekupedzisira.

Tine mufananidzo uri panzvimbo, isu takabva tashandura ruvara rwemukati wejeri rebhokisi bhokisi, takashandura rugwaro uye ruvara rwekubatanidza mashoko.

06 of 06

Kushandisa Grid Chikwata cheAdobe XD CC

Shandisa Grid chimwe chinhu cheAdobe Experience Design CC kuitira kunyatsogadzwa kwezvinhu. Kutendeseka kwaTom Green

Nekadhi yacho yakazadzisa iko zvino inoda kuiswa zvakakodzera maererano neChinyorwa Chakanyora. Izvi zvinoreva kuti pane 8 pixels kune rumwe rutivi rwekadhi uye kadhi inoda kuva 8 pixels pasi pebhari yepurogiramu. Kuti uite izvi, chengeta kamwechete pane zita rekipiyo uye, muIndaneti Panel, sarudza Grid. Iri grid rinowanikwa pamusoro peiyoboardboard.

Iko kusina grid mashizha ma8 pixels anoitika kuva akaenzana girasi rekugadzira Zvinhu Zvakagadzirirwa.Kana uchida uswa hwakasiyana, shandura kukosha muGrid nzvimbo. Kana iwe uchida kuchinja ruvara rwegridhi, chengetedza chivara chip uye usarudze ruvara kubva paChite Picker yakaguma.

Ne grid iri kuonekwa, chengetera pa kadhi uende nayo munzvimbo yayo yekupedzisira.

Kuti tapedze, takasarudza kadhi, takanyora rePatati Grid uye tikashandura kuparadzaniswa pakati pemakadhi ku 8 pixels pamwe chete.