Mmene Mungapangire Khadi Lokonza Mapulogalamu mu Adobe Experience Design CC

Mafotokozedwe a Zinthu Zochokera ku Google anali pachiyambi pa Android platform monga njira yosonyezera kugwirizana kwa mapangidwe pa nsanja.

01 ya 06

Mmene Mungapangire Khadi Lokonza Mapulogalamu mu Adobe Experience Design CC

Mwachilolezo cha Tom Green

Pamene opanga anayamba kupanga phokoso ndi kumvetsa malingaliro awo kumbuyo, Zolemba Zapamwamba zakhala mwakachetechete kukhala ma filosofi owonetsa kwambiri pa webusaiti ndi mafoni . Zonse zomwe muyenera kuchita kuti muwone zomwe tikupeza ndikuchita zofufuza zakuthupi pa Pinterest ndipo mudzawona zitsanzo zambiri ndi zowonongeka pa zipangizo, mapiritsi, komanso ngakhale webusaiti.

Chochititsa chidwi cha Kukonzekera Zapangidwe ndizo Google kuganizira momwe mapulogalamu amaonekera ndikugwiritsira ntchito mafoni koma malingaliro akugwiritsidwa ntchito pazenera lililonse la kukula pa nsanja iliyonse. Monga momwe Google ikufotokozera mu ndime yoyamba ya mawu, "Tinadzikaniza kuti tipeze chinenero chowonekera kwa ogwiritsa ntchito omwe amapanga mfundo zapamwamba zojambula bwino ndi zatsopano komanso mwayi wa sayansi ndi sayansi. Izi ndizinthu zakuthupi. Ndondomekoyi ndi chidziwitso chomwe chidzapangidwanso pamene tikupitiriza kukonza zolemba ndi zolemba zapamwamba. "

Zomwe nkhaniyo inanenedwa, mwazinthu zenizeni, ndi pepala komanso chizindikiro cha Zinthu Zapangidwe ndi khadi. Ganizirani za khadi lachindunji pamwamba ndipo muli m'njira yoyenera. Khadi ndi chinthu chokhala ndi zithunzi, mavidiyo, mauthenga olemberana ndi zina zotero koma pomwe amasiyana ndi mapangidwe ambiri omwe amagwiritsidwa ntchito amayenera kuyang'ana pa phunziro limodzi. Makhadi akhala akuzungulira, ali ndi mithunzi yofooka yomwe imasonyeza kuti ili pamwambapa ndipo ngati onse ali pa ndege yomweyo iwo amatchulidwa kuti "kusonkhanitsa".

Mu "Momwe Mungachitire" ife tidzakhazikitsa khadi molingana ndi zomwe timachita. M'malo molemba khadi ndi zida zosiyanasiyana zojambula ndi kujambula, tibwera kuno kuchokera kumbali ina. Tidzakagwiritsa ntchito zida zomwe Adobe Adakonza Zomwe Zomwe Zomwe Zilipo Padziko Lonse zomwe zilipo pa Macintosh zokhazokha komanso zili mfulu. Mukhoza kuchijambula apa.

Tiyeni tiyambe.

02 a 06

Kupanga Zojambula Zojambula mu Adobe Experience Design CC

Gwiritsani ntchito chida cha artboard ndi template ya artboard kuti muyambe. Mwachilolezo cha Tom Green

Palibe njira yowonekera yopangira sewero la Android kuchokera ku Start Screen mu Experience Design CC (XD). Zomwe tinkakonda kuchita tikatsegula XD, ndi kusankha kusankha iPhone 6 ndipo, pamene mawonekedwe atsegulidwa, timasankha chida cha Artboard pansi pa Toolbar ndikusankha Android Mobile kuchokera kusankhidwa pazithunzi Zamanja kupita kumanja. Kenaka ife timasintha ku chida chosankhira, dinani kamodzi pa dzina la iPhone artboard ndi kuchotsa digiti. Basi.

M'mawonekedwe a XD, pali mzere wawung'ono pambali pa iPhone 6 yomwe, pamene ikasindikizidwa, yatsegula menyu yotsitsa. Kuchokera pamenepo mumasankha Android Mobile version ndi Android Mobile artboard yomwe yasankhidwa ikuwonekera mu mawonekedwe.

Kuti titsimikize kuti tili ndi malo osatsegula otsegulira khadi, nthawi zambiri timadutsa ku Sketch 3 ndikulemba ndi kusunga Bwalo la Bar, Nav Bar, ndi App yachitsulo kuchokera ku Zojambula Zojambulajambula. Chophimba 3.2 chili ndi chojambula Chamaonekedwe ( File> New From Template> Material Design ) ndipo wina wabwino kwambiri ndi wochokera kwa Kyle Ledbetter omwe mungapeze pano. Ngati mulibe Chophimba, mukhoza kuzilemba ndi kuziyika pazitsulo za XD zomwe ziri mu Faili> Open UI Kit> Zinthu za Google . Mukhoza kuwatsanso kuchokera Google kuti agwiritsidwe ntchito ku Photoshop, Illustrator, After Effects ndi Sketch.

03 a 06

Kuwonjezera Khadi Lokonza Mapulogalamu ku Adobe XD CC Artboard

Makiti a UI ndi othandiza kwambiri chifukwa amatsata ndondomeko ya Zolemba Zapangidwe.Chuma cha Tom Green

Chimodzi mwa zinthu zothandiza kwambiri za XD ndi kulowetsedwa kwa UI Kits kwa Apple iOS, Google Material, ndi Microsoft Windows. M'zinthu zambiri, amawonjezera mawu akuti "Rapid" ku "Rapid Prototyping". Komanso amapanga ntchito yopanga zosavuta pazinthu zofanana za UI siziyenera kubwerezedwa nthawi zonse mu Design Application monga Photoshop, Illustrator kapena Sakani.

Chizindikiro cha UI chomwe tinkafunikira chinali khadi. Kuti tifike kutero tinasankha Fayilo> Open UI Kit> Zinthu Zamagulu a Google ndipo chidutswacho chinatsegulidwa ngati chikalata chatsopano. Chofunikira chomwe tinkachipeza chinkapezeka m'gulu la makadi.

Zimene timakonda zokhudzana ndi izi ndizomwe zimagwirizana ndi zofotokozera zakuthupi monga momwe zilili muzolemba za Content Blocks komanso malemba ndi zolemba zomwe zimalembedwa mu Typography spec.

Tsamba la khadi limene tinkafuna linali limodzi pansi kumanzere. Timangosindikiza ndi mbewa yathu ndikuyikopera ku bolodipidi. Mwamwayi, XD ilibe mawonekedwe apadera a zikalata zotseguka. Chomwe timachita ndikutsegula mawindo awonekera pang'onopang'ono kuti awone zomwe tikugwirazo, sankhani ndi kuziyika. Njira ina yosinthira mwatsatanetsatane pakati pa ma CD XD ndikutsegula Command- ' .

04 ya 06

Mmene Mungasinthire Element Material Design mu Adobe Experience Design CC

Chinthu chilichonse cha UI chinaphatikizidwa ku polojekiti ya XD yakhazikitsidwa. Onetsetsani kuti mugwirizanitse chinthucho musanayambe kusintha. Mwachilolezo cha Tom Green

Kakhadi mu XD atabwera kuchokera ku bolodi la zojambulajambula musati muyambe kuyambanso kugwira ntchito nayo. Chinthu choyamba chimene muyenera kuchita ndi Kugwirizanitsa khadi chifukwa mukufunikira kupeza pang'ono ndi zidutswa zolemba khadi. Kuti muchite izi, sankhani khadi ndipo sankhani Cholinga> Guluzani kapena kusindikiza Shift-Command-G.

Khadi yanu tsopano ili ndi zidutswa zitatu:

Njira yoyamba ndiyo kuchotsa mdima wofiira. Cholinga chake chokha ndicho kukhala ngati malo ogwiritsira ntchito chithunzi chomwe chimapangitsa, ngati mutasankha, mungasankhe.

Bokosi liri ndi malemba kwenikweni ndi imvi yakuda ndi 50% opacity. Bokosili lingagwiritsidwe ntchito ngati malemba ndipo mutha kusintha mtundu ndi mawonekedwe a bokosi.

Ngakhale sichikuwoneka bwino, bokosi loyera limatsatila zinthu zakuthambo zomwe zili pamwamba pake zili ndi ma pixel 2. Ikani izi mu malingaliro ngati mukuwonjezera chithunzi. Icho chifunikanso makona oyandikana omwe angathe kuwonjezeredwa ku zojambula zojambula kapena XD.

Kuwona momwe izi zilili mthunzi wa khadi imakhalanso ndi mthunzi. Zowonjezera zimatsimikizira kuti pali kupuma kwa khadi la ma pixelisi awiri. Kuti muwonjezere izi, sankhani mawonekedwe a chida chakuda ndikuyika chiyero cha Y ndi B (Blur) ku 2 mmalo mwake.

05 ya 06

Mmene Mungapangire Chithunzi ku Khadi Lokonza Mapulogalamu mu Adobe XD CC

Njira imodzi yogwiritsira ntchito zithunzi ndi kugwiritsa ntchito malo ogwiritsira ntchito kuti asungunule chithunzi cholowetsedwa. Mwachilolezo cha Tom Green

Kudziwa khadi ndi mapaxisi 344 ndipo malo a zithunzi ndi 150 pixels okwera ( theka lakuya kwa bokosi lakuda ) Tidatsegula chithunzichi mu Photoshop, tinachikulitsa ku kukula ndikuchigwiritsa ntchito mwachitsulo @ 2x ku Photoshop's Export As dialog bokosi. Chithunzicho chinatumizidwa ku Adobe XD.

Kenako tinakokera bokosi lofiira pamwamba pa chithunzi pa pastibodi ndi Chosankhidwa > Mask With Shape . Chotsatira chinali chithunzi chokweza makona ozungulirawo. Kenako tinasuntha fanolo kumalo ake otsiriza.

Ndi chithunzicho pamalopo, kenako tinasintha mtundu wachikulire wa bokosi lakuda, kusintha mau ndi mtundu wa mauthenga.

06 ya 06

Kugwiritsa ntchito Grid CC Adobe XD CC

Gwiritsani ntchito Grid mbali ya Adobe Experience Design CC pofuna kukhazikitsa bwino zinthu. Mwachilolezo cha Tom Green

Ndili ndi khadi lizitsirize tsopano liyenera kukhazikitsidwa bwino molingana ndi Zolemba za Material Design. Izi zikutanthauza kuti pali ma pixel 8 kumbali zonse za khadi ndipo khadi likuyenera kukhala ma pixel 8 pansi pa bar. Kuti muchite izi, dinani kamodzi pa dzina la arborboard ndipo, mu Properties Panel, sankhani Grid. Grid akuwonekera pa artboard.

Galasi yosasinthika kukula ndi ma pixel 8 omwe amaoneka ngati kukula kwa gridi ya Zojambula Zojambula. Ngati mukufuna kukula kosiyana, sintha mtengo mu Galasi. Ngati mukufuna kusintha mtundu wa galasi, dinani mtundu wa chipangizo ndikusankha mtundu kuchokera kwa Wosankha Mbalame.

Pogwiritsa ntchito galasi, dinani pa khadi ndikusunthira kumalo ake otsiriza.

Kuti titsirize, tinasankha khadi, tadodometsanso makina obwereza Galasi ndikusintha kusiyana pakati pa makadi ndi pixel 8.