Vipengele vya Uundaji wa Nyenzo kutoka kwa Google vilikuwa na lengo la jukwaa la Android kama njia ya kupendekeza uwiano wa kubuni kwenye jukwaa.
01 ya 06
Jinsi ya Kujenga Kadi ya Kubuni ya Nyenzo katika CC ya Adobe Design Design
Mara wabunifu walipokuwa wakianza kupiga kura na kuelewa mawazo nyuma yake, Design Design ina kimya kimya kuwa moja ya falsafa ya kupendeza zaidi ya visual katika mtandao na kubuni simu . Wote unahitaji kufanya ili kuona kile tunachokipata ni kufanya Utafutaji wa Nyenzo kwenye Pinterest na utaona mamia ya mifano na majaribio kwenye vifaa, vidonge, na hata tovuti.
Kipengele kinachovutia cha Kubuni Nyenzo ni mawazo ya Google karibu na jinsi programu zinapaswa kuonekana na kufanya kazi kwenye vifaa vya simu lakini dhana zinatumiwa kwenye skrini yoyote ya ukubwa wowote kwenye jukwaa lolote. Kama Google inasema katika aya ya ufunguzi ya specifikationer, "Tulijitahidi kujenga lugha inayoonekana kwa watumiaji wetu ambayo hufanya kanuni za classic za kubuni nzuri na innovation na uwezekano wa teknolojia na sayansi. Hii ni kubuni nyenzo. Programu hii ni waraka wa maisha ambayo itasasishwa tunapoendelea kuendeleza vipimo na maalum ya kubuni vifaa. "
Nyenzo zilizotajwa, kwa maneno ya jumla, ni karatasi na alama ya Kubuni ya Nyenzo ni kadi. Fikiria kadi ya index juu ya uso na wewe uko kwenye njia sahihi. Kadi ni kipengee kilicho na picha, video, viungo vya maandishi na kadhalika lakini ambako hutofautiana na miundo zaidi ya maingiliano ni maana ya kuzingatia somo moja. Kadi zimezunguka pembe, zina vikwazo vyenye kukataa ambavyo vinaonyesha kuwa ni juu ya uso na kama wote ni ndege moja wanaitwa "mkusanyiko".
Katika hii "Jinsi ya" tutakuja kuunda kadi kulingana na spec. Badala ya kuunda kadi na vifaa vya picha na kuchora mbalimbali, tutakuja kutoka kwenye mwelekeo tofauti. Tutatumia zana katika Ufafanuzi wa Uzoefu wa Adobe ambao kwa sasa umeonekana kwa hakika ya Macintosh na ni bure. Unaweza kuipakua hapa.
Tuanze.
02 ya 06
Kujenga Sanaa ya Mfano katika Adobe Design Design CC
Hakuna njia dhahiri ya kuunda skrini ya Android kutoka kwa Mwanzo wa Kichwa katika Uzoefu wa CC Design (XD). Nini tulipokuwa tukifungua XD, ni kuchagua chaguo la iPhone 6 na, wakati interface inafungua, tunachagua chombo cha Sanaa chini ya Barabara na uchague Android Mkono kutoka kwa chaguo kwenye Jopo la Mali kwa upande wa kulia. Kisha sisi hubadilisha kwenye chombo cha uteuzi, bofya mara moja kwenye jina la artboard la iPhone na uondoe artboard. Hakuna zaidi.
Katika toleo la sasa la XD, kuna mshale mdogo kando ya iPhone 6 ambayo, wakati umebofya, kufungua orodha ya kushuka. Kutoka huko unachagua toleo la Simu ya Mkono ya Android na sanaa ya Android Mkono iliyochaguliwa inafungua kwenye interface.
Kuhakikisha kuwa tuna nafasi ya skrini iliyo wazi kufungua kadi, kwa kawaida tunakwenda kwenye Mchoro wa 3 na nakala na kushikilia Hali ya Bar, Nav Bar, na Programu kutoka kwenye Kigezo cha Nyenzo za Uwezo kwenye skrini ya sanaa. Mchoro 3.2 una template ya Design Material ( Picha> Mpya Kutoka Kigezo> Uundo wa Nyenzo ) na mwingine mwingine mzuri kabisa kutoka Kyle Ledbetter ambayo unaweza kupata hapa. Ikiwa huna Mchoro, unaweza kukipakua na kuziweka kwenye vifungo vya XD vilivyo kwenye Faili> Ufunguzi wa UI Ufunguo> Nyenzo za Google . Unaweza pia kupakua kutoka Google kwa ajili ya matumizi katika Pichahop, Illustrator, After Effects na Mchoro.
03 ya 06
Kuongeza Kadi ya Kubuni ya Nyenzo kwenye Sanaa ya Adobe XD CC
Moja ya vipengele muhimu zaidi vya XD ni kuingizwa kwa Kits UI kwa Apple iOS, Google Material, na Microsoft Windows. Kwa namna nyingi, wao huongeza neno "Rapid" kwa neno "Rapid Prototyping". Pia wao kufanya kazi designer rahisi katika mambo ya kawaida UI vipengele haipaswi kuwa mara kwa mara recreated katika Design Design kama vile Photoshop, Illustrator au Mchoro.
Kipengele cha UI tunachohitaji ni kadi. Ili kupata hiyo tulichagua Faili> Fungua Uki Kit> Vifaa vya Google na kit kilichofunguliwa kama waraka mpya. Kipengele tulichohitaji kilipatikana katika jamii ya Kadi.
Tunachopenda juu ya haya ni wanaambatana na specifikationer ya Nyenzo ya Nyenzo kama ilivyowekwa katika vipimo vya Blocks Content pamoja na maandishi ya maandishi na vipengee vya nafasi zilizowekwa katika spec typography.
Mtindo wa kadi tunavyotaka ulikuwa chini ya kushoto. Sisi tu marquee kwa mouse yetu na kunakili kwa clipboard. Kwa bahati mbaya, XD haina interface ya tabbed kwa nyaraka zilizo wazi. Nacho tunachofanya ni kuhamisha dirisha la hati iliyo wazi hadi kidogo ili kufunua moja tunayofanya kazi, chagua na ushirike. Njia nyingine ya kubadili haraka kati ya hati za wazi za XD ni kushinikiza Amri- ' .
04 ya 06
Jinsi ya Hariri kipengee cha Makala ya Vifaa katika Adobe Design Design CC
Wakati kadi katika XD inakuja kutoka kwenye clipboard usifurahi kuanza kufanya kazi nayo. Jambo la kwanza unahitaji kufanya ni Kuunganisha kadi kwa sababu unahitaji upatikanaji wa vipande na vipande vilivyotengeneza kadi. Ili kufanya hivyo, chagua kadi na uchague Kitu> Unganisha au bonyeza Shift-Amri-G.
Kadi yako sasa inajumuisha vipande vitatu:
- Mwanga mweusi wa sanduku kwa picha.
- Gundi la kijivu cha kati kwa maandiko
- Sanduku la nyuma linatumiwa kama historia.
Hatua ya kwanza ni kufuta sanduku la rangi kijivu. Lengo lake la pekee ni kutenda kama nafasi ya picha ambayo inafanya, ikiwa unachagua, hiari.
Sanduku na maandishi ni kweli kijivu giza na opacity 50%. Sanduku hili linaweza kutumika kama background ya maandishi na unaweza kubadilisha rangi na opacity ya sanduku.
Ingawa sio dhahiri mara moja, sanduku la kijivu lenye mwanga hufuata suala la Nyenzo za Kubuni kwa kuwa pembe zake za juu zimepigwa na saizi 2. Weka hii katika akili ikiwa unaongeza picha. Pia itahitaji pembe za mviringo ambazo zinaweza kuongezwa kwenye programu ya picha au katika XD.
Kuona jinsi hii ndiyo hali ya kupumzika ya kadi pia inahitaji kivuli. The spec inaonyesha wazi kuna upumziko upumziko wa kadi ya pixels 2. Ili kuongeza hii, chagua sura nyeusi ya asili na kuweka vipimo vya Y na B (Blur) kwa 2 kwenye jopo la mali.
05 ya 06
Jinsi ya kuongeza picha kwenye Kadi ya Kubuni ya Nyenzo katika Adobe XD CC
Kujua kadi ni saizi 344 pana na eneo la picha ni saizi 150 juu ( nusu urefu wa sanduku la kijivu nyeupe ) Tulifungua picha kwenye Photoshop, tukaikuta kwa ukubwa na kuihifadhi kwa kutumia chaguo @ 2x katika Picha ya Nje ya Nje ya Mazungumzo sanduku. Picha hiyo iliingizwa kwenye Adobe XD.
Kisha tukavuta sanduku la rangi ya kijivu juu ya picha kwenye sanduku la paste na Kitu kilichochaguliwa > Mask Na Shape . Matokeo yalikuwa ni picha iliyochukua pembe za mviringo za sura. Kisha tukahamisha picha hiyo kwa nafasi yake ya mwisho.
Kwa picha iliyopo, kisha tukabadilisha rangi ya nyuma ya sanduku la kijivu cha kati, kubadilishwa maandiko na rangi ya maandishi ya kiungo.
06 ya 06
Kutumia Kipengele cha Gridi ya Adobe XD CC
Na kadi imekamilisha sasa inahitajika kuwekwa vizuri kulingana na vipengee vya Design Design. Hii ina maana kuna saizi 8 upande wa kila kadi na kadi inahitaji kuwa saizi 8 chini ya bar ya programu. Ili kufanya hivyo, bofya mara moja kwenye jina la sanaa na, katika Jopo la Mali, chagua Gridi. Gridi ya taifa inaonekana juu ya sanaa.
Ukubwa wa gridi ya default ni saizi 8 ambazo hutokea kuwa ukubwa sawa wa gridi ya Nyenzo ya Nyenzo. Ikiwa unahitaji ukubwa tofauti, ubadili thamani katika eneo la Gridi. Ikiwa unataka kubadilisha rangi ya gridi ya taifa, bofya rangi ya rangi na uchague rangi kutoka kwa Mchezaji wa Rangi.
Pamoja na gridi inayoonekana, bonyeza kwenye kadi na uiongoze kwenye nafasi yake ya mwisho.
Ili kumaliza, tulichagua kadi, ilibofya kifungo cha Gridi ya Kurudia na kubadilisha nafasi kati ya kadi hadi saizi 8 pia.