ʻO ka mea iʻikeʻia i ka papahanaʻikepili mai Google mai i hoʻomaka muaʻia i ka pūnaewele Android ma keʻano he ala e hōʻike ai i ke kūlike o ka hoʻolālā ma luna o ke kahua.
01 o 06
Pehea e hana ai i kahi kiʻi kālaiʻike kiʻi ma Adobe Experience Design CC
I ka manawa e hoʻomaka ai nā mea hoʻolālā e hana i ka hana a hoʻomaopopo i ka noʻonoʻo ma hope o ia mea, ua lilo ka Design Design a lilo i kekahi o nā hoʻonaʻauaoʻike nui loa i ka pūnaewele a me ka hoʻolālā pūnaewele . ʻO nā mea a pau e pono aiʻoe eʻike i nā mea e loaʻa ana iā mākou,ʻo ia ke hana i kahi huli ma kaʻike wikiō a Pinterest eʻikeʻoe i nā haneli a me nā hoʻokolohua i nā lakohana, nā papa, a me nā pūnaewele.
ʻO ka hiʻohiʻona hoihoi o Material Design,ʻo ia nō ka noʻonoʻo o Google e pili ana i ka holoʻana o nā polokalamu a me ka hanaʻana i nā'ōpona pūnaewele akā ua hoʻohanaʻia nā manaʻo i kekahi kiʻi o ka nui ma kekahi papahana. E like me Google ma ka helu mua o ka weheweheʻana, "Ua hoʻokū'ē mākou iā mākou iho e hana i ka'ōleloʻike no nā mea hoʻohana mākou e hōʻano hou i nā kumu kūikawā o ka hoʻolālā maikaʻi me ka hana hou a me ka hiki o kaʻenehana a me kaʻepekema. ʻO kēia ka hana hoʻolālā. ʻO kēia kikowaena he pepa ola e hōʻano houʻia i ka hoʻomauʻana i ka hoʻomohala i nā papahana a me nā kiko'ī o ka hoʻolālā kiʻi. "
ʻO ka mea i kamaʻilioʻia, ma keʻano maʻamau, he pepa a he mea nui o Material Design ke kāleka. E noʻonoʻo i ka papa kuhikuhi ma ka papa a aiaʻoe ma ke ala pololei. ʻO kahi kāleka kahiʻona i loaʻa nā kiʻi, nā wikiō, nā loulou kikokikona a pēlā wale nō akā kahi iʻokoʻa ai lākou mai nā loina maʻamau loa e hoʻohuliʻia i kahi mea hoʻokahi. Ua piha nā kaʻa i nā kihi, kahi mau anuanu e hōʻike ana aia lākou ma luna o kaʻilikai a inā lākou a pau ma ka moku hoʻokahi, e hoʻounaʻia lākou he "hōʻiliʻili".
Ma kēia "How To" e hana ana mākou i kahi kāleka e pili ana i ka'ōkuhi. Ma mua o ka hanaʻana i ke kāleka me nā kiʻi likeʻole a me nā mea unuhi, e hele mai ana mākou ma kaʻaoʻao'ē aʻe. E hoʻohana mākou i nā mea hana ma Adobe's Experience Design i kēia wā ma kahi nānā Macintosh-ʻike āpau āpau a ua kaʻawale. Hiki iāʻoe ke kiʻi iā ia maʻaneʻi.
E hoʻomaka kākou.
02 o 06
Ke hoʻokumuʻana i ka Papalina Hōʻikeʻike ma Adobe Experience Design CC
ʻAʻohe ala mākaukau e hana i kahi pākuhi Android mai ka Start Screen i Experience Design CC (XD). ʻO nā mea a mākou i hana ai i ka wā e wehe mākou i ka XD,ʻo ia ke koho i ka koho iPhone 6 a, a hoʻomakaʻia ke interface, koho mākou i ka mea hana Artboard ma lalo o ka Toolbar a koho iā Android Mobile mai nā koho ma ka papahana Properties i ka'ākau. A laila e hoʻololi i ka mea koho, e kaomi hoʻokahi i ka inoa o ka papahana iPhone a holoi i ka artboard. ʻaʻole kahi mea hou aku.
I ka mana o XD i kēia manawa, aia kahi kiʻi liʻiliʻi ma kaʻaoʻao o ka iPhone 6, i ka wā i pākaʻiʻia, weheʻia kahi menu iho-iho. Mai laila maiʻoe e koho ai i ka Android Mobile version a me ka Android Mobile artboard i kohoʻia e wehe i ke kelepona.
No ka hoʻomaopopoʻana i ka weheʻia o ka māka pono e wehe i ke kāleka, e hele mākou i ka Sketch 3 a kope a pasi i kahi Bar Statute, Bar Nav, a me ka App Bar mai ka Template Design Design i loko o ka artboard. Aia i ka Skekelua 3.2 kahi hōʻailona hana kiʻi ( File> New From Template> Material Design ) aʻo kekahi mea maikaʻi loa loa mai Kyle Ledbetter e hiki iāʻoe ke loaʻa maʻaneʻi. Ināʻaʻole kāu palapala, hiki iāʻoe ke kāpili a pasi iā lākou mai nā mea kikowaena XD i loaʻa ma ka File> Open UI Kit> Google Material . Hiki iāʻoe ke hoʻoiho iā lākou mai Google no ka hoʻohanaʻana i Photoshop, Illustrator, Ma hope o nā Hua a me ka Moʻomanaʻo.
03 o 06
Hoʻoukaʻia i kahi kāpili kiʻi kiʻi kiʻi i kahi Adobe XD CC Artboard
ʻO kekahi o nā māhele maikaʻi loa o XD ka komoʻana o nā UI Kits no Apple iOS, Google Material, a me Microsoft Windows. I nā manawa he nui, hōʻano hou lākou i ka hua'ōlelo "Rapid" i ka hua'ōlelo "Rapid Prototyping". Aʻoi aku ka maʻalahi o kaʻoihana a ka mea hoʻolālā i nā mea likeʻole o ka UI iʻole e hoʻomau houʻia i loko o ka hoʻolālā kiʻi like Photoshop, Illustrator a Māka.
ʻO ka pono UI i makemakeʻia he kāleka. No ka hikiʻana iā ia ua koho mākou i ka File> Open UI Kit> Google Material a ua weheʻia ka pahu puka he palapala hou. ʻO ka mea i makemakeʻia eʻikeʻia ma ka kāleka Cards.
ʻO kā mākou mea aloha e pili ana i kēia mau mea, e pili ana lākou i ka'ōlelo kuhikuhi Design Design e like me nā mea i ho'ākākaʻia ma nā pahuhopu Content Blocks a me ka hōʻano a me nā mea kikowaena i hōʻikeʻia i loko o ka Typography spec.
ʻO ka kāleka kā mākou i makemake aiʻo ia ka mea i lalo ma kaʻaoʻao hema. Hoʻopili wale mākou i kā mākouʻiole a kāpiliʻia i ka papalepa. ʻO ka mea pōʻino,ʻaʻole i loko o ka XD kahiʻokoʻa i kohoʻia no nā palapala open. ʻO ka hana a mākou e hoʻoneʻe i ka puka palapala hōmama i lalo i kekahi wahi e hōʻike ai i ka mea a mākou e hana nei, koho a papelu. ʻO kekahiʻano o ka hoʻololi pinepineʻana ma waena o nā pepa XD hōʻali kaomiʻana iā Command- ' .
04 o 06
Pehea e hoʻololi ai i kahi mea hana hoʻohālike i Adobe Experience Design CC
Ke hele mai ke kāleka ma XD mai ka papaleipuni mai hoʻoikaika e hoʻomaka me ka hana. ʻO ka mea mua āu e hana ai ,ʻo ia ke Ungroup ka kāleka no ka mea hiki iāʻoe ke komo i ka'āpana a me nā'āpana o ka hakuʻana i ka kāleka. No ka hanaʻana i kēia, koho i ka kāleka a koho i ka Object> Ungroup aiʻole kaomiʻo Shift-Command-G.
Ua hakuʻia kāu kāleka iʻekolu mau'āpana:
- ʻO ka pahu hina'ākau no ka kiʻi.
- ʻO ka pahu hina hina no ka kikokikona
- ʻO ka pahu hope i hoʻohanaʻia ma ke kua.
ʻO ka hana mua,ʻo ka holoiʻana i ka pahu hina'ālohilohi. ʻO kāna kumu wale nō e hana i kahi mea mālama no ka kiʻi e hana ai, inā kohoʻoe, koho.
ʻO ka pahu me ka kikokikona, heʻeleʻeleʻeleʻele a 50% opacity. Hiki ke hoʻohanaʻia kēia pahu e like me keʻano moʻolelo a hiki iāʻoe ke hoʻololi i ke kala a me ka opacity o ka pahu.
ʻOiaiʻaʻole iʻike kokeʻia, ua kau ka pahu'āmaʻomaʻa ma luna o ka Material Design spec i ka'ōpuni o kona mau kihi i 2 pika. E noʻonoʻo i kēia i ka hoʻopiliʻana i kahi kiʻi. Pono nō hoʻi ia i nā kihi i hoʻohuiʻia i hiki ke hoʻouluʻia i kahi noi kiʻi a iʻole ma XD.
Eʻike ana i keʻano o ka nohoʻana o ke kāleka i kēia manawa, pono ia i ke aka. Ke hoʻomaopopo nei ke kiko'ī i kahi kiʻekiʻe o ke kāleka o 2 pika. No ka hoʻohuiʻana i kēia, koho i keʻano o kaʻeleʻeleʻeleʻele a hoʻonoho i nā kumu Y a B (Blur) i ka 2 ma ka papa inoa.
05 o 06
Pehea e hoʻouka ai i kahi kiʻi i ka papa kiʻi kiʻi ma Adobe XD CC
ʻO kaʻikeʻana i ke kime he 344 pika piila a he 150 mau pika ka nui ( hapa hapalua o ka pahu hina hina ) Ua wehe mākou i ke kiʻi ma Photoshop, kālai i ka nui a mālama iā ia me ka koho @ 2x ma ka Photoshop o Export As dialog pahu. Ua kiʻiʻia kēia kiʻi i Adobe XD.
A laila ua kiʻi mākou i ka pahuʻeleʻele uila ma luna o ka kiʻi ma luna o ka papalina a ua kohoʻiaʻo > Object Masque> Shape . ʻO ka hopena,ʻo ia ke kiʻi e hāpai ana i nā kihi o keʻano. Ua hoʻoneʻe mākou i ke kiʻi i kona hope.
Me ke kiʻi i kahi, ua hoʻololi mākou i ke kala o ka Medium box box, hoʻololi i ka kikokikona a me ke kala o ka leka uila.
06 o 06
E hoʻohana ana i ka huaʻaniani Grid XD CC
Me ka kāleka piha i kēia manawa e pono pono e hoʻonoho ponoʻia e like me ka hōʻikeʻana i nā kikowaena. Eia keʻano he 8 mau pika ma kēlāʻaoʻao a ma kēiaʻaoʻao o ka kāleka a he 8 mau pika ma lalo o ka pahu polokalamu. No ka hanaʻana i kēia, pākuhi pākahi ma ka inoa artboard a, i ka Papa Hana, koho i ka Mākālā. Aia ke kikowahi ma luna o ka artboard.
ʻO ka nui o ka māmala paʻakikī he 8 mau pika e like me ka nui o ka māmalala like no Material Design.If e ponoʻoe i kahiʻano'ē aʻe, e hoʻololi i ka waiwai ma ka Māhele Grid. Inā makemakeʻoe e hoʻololi i ke kala o ka mākāla, e kaomi i ke kāʻei lapu a koho i kahi leka mai ka mea e loaʻa ai i ka Uke Ula.
Me ka mākaʻikea eʻikeʻia, e kaomi i ka kāleka a hoʻoneʻe iā ia i kona kūlana hope loa.
No ka pauʻana, koho mākou i ke kāleka, kaomiʻana i ke pihi Hoʻohālike Kūkākūkā a hoʻololi i ka mākia ma waena o nā kālepa i nā pika 8.