Ang pagtutukoy ng Materyal na Disenyo mula sa Google ay orihinal na naglalayong sa platform ng Android bilang isang paraan upang magmungkahi ng pagkakapare-pareho ng disenyo sa platform.
01 ng 06
Paano Gumawa ng isang Material Design Card sa Adobe Karanasan Design CC
Sa sandaling sinimulan ng mga designer na poking ito at nauunawaan ang pag-iisip sa likod nito, ang Materyal na Disenyo ay tahimik na naging isa sa mga pinaka-maimpluwensyang visual na pilosopiya sa web at mobile na disenyo . Ang kailangan mo lang gawin upang makita kung ano ang nakukuha namin ay ang gawin ang isang paghahanap sa Material Design sa Pinterest at makakakita ka ng daan-daang mga halimbawa at eksperimento sa mga device, tablet, at kahit website.
Ang kaakit-akit na aspeto ng Materyal na Disenyo ay ang pag-iisip ng Google sa paligid kung paano dapat lumitaw ang mga apps at magtrabaho sa mga mobile device ngunit ang mga konsepto ay inilapat sa anumang screen ng anumang laki sa anumang platform. Tulad ng sinabi ng Google sa pambungad na talata ng pagtutukoy, "Hinahamon namin ang aming sarili na lumikha ng isang visual na wika para sa aming mga gumagamit na nagsasangkot ng mga klasikong mga prinsipyo ng mahusay na disenyo sa pagbabago at posibilidad ng teknolohiya at agham. Ito ay materyal na disenyo. Ang pagsasapalaran na ito ay isang nabubuhay na dokumento na maa-update habang nagpapatuloy kami na bumuo ng mga itinuturo at mga pagtutukoy ng materyal na disenyo. "
Ang materyal na pinag-uusapan, sa mga pangkalahatang tuntunin, ay papel at isang tatak ng tatak ng Material Design ang card. Mag-isip ng index card sa isang ibabaw at ikaw ay nasa tamang landas. Ang isang card ay isang elemento na naglalaman ng mga larawan, video, mga link ng teksto at iba pa ngunit kung saan naiiba ang mga ito mula sa pinaka-interactive na disenyo ay nilayon silang mag-focus sa isang solong paksa. Ang mga card ay may mga bilugan na sulok, naglalaman ng mga malabo na anino na nagpapahiwatig na sila ay nasa itaas ng isang ibabaw at kung ang mga ito ay nasa parehong eroplano na tinutukoy sila bilang isang "koleksyon".
Sa ganitong "Paano Upang" kami ay gumawa ng isang card batay sa pagsasapalaran. Sa halip na gumawa ng card na may iba't ibang mga imaging at mga tool sa pagguhit, darating kami dito mula sa ibang direksyon. Gagamitin namin ang mga tool sa Adobe's Design na Karanasan na kasalukuyang nasa isang pampublikong preview ng Macintosh at libre. Maaari mong i-download ito dito.
Magsimula na tayo.
02 ng 06
Paglikha ng Prototype Artboard sa Adobe Experience Design CC
Walang malinaw na paraan upang lumikha ng isang Android screen mula sa Start Screen sa Karanasan sa Disenyo CC (XD). Ang aming dating ginagawa kapag binuksan namin ang XD, ay upang piliin ang opsyon na iPhone 6 at, kapag nagbukas ang interface, piliin namin ang tool Artboard sa ilalim ng Toolbar at piliin ang Android Mobile mula sa mga pinili sa Properties panel sa kanan. Pagkatapos ay lumipat kami sa tool ng pagpili, i-click nang isang beses sa pangalan ng iPhone artboard at tanggalin ang artboard. Wala na.
Sa kasalukuyang bersyon ng XD, mayroong isang maliit na arrow sa tabi ng iPhone 6 na, kapag nag-click, bubukas ang isang drop-down na menu. Mula doon pipiliin mo ang bersyon ng Android Mobile at ang piniling Android artboard na napili sa interface.
Upang matiyak na mayroon kaming tamang espasyo ng screen na bukas para sa card, kadalasan namang namumuno kami sa Sketch 3 at kopyahin at i-paste ang Status Bar, Nav Bar, at App bar mula sa Template ng Material Design papunta sa artboard. Ang Sketch 3.2 ay naglalaman ng template ng Material Design ( File> Bagong Mula Template> Material Design ) at isa pang talagang magandang libreng ay mula kay Kyle Ledbetter na maaari mong makuha dito. Kung wala kang Sketch, maaari mong kopyahin at i-paste ang mga ito mula sa mga sticker ng XD na natagpuan sa File> Buksan ang UI Kit> Google Material . Maaari mo ring i-download ang mga ito mula sa Google para magamit sa Photoshop, Illustrator, After Effects at Sketch.
03 ng 06
Pagdaragdag ng isang Material Design Card sa isang Adobe XD CC Artboard
Ang isa sa mga pinaka-kapaki-pakinabang na tampok ng XD ay ang pagsasama ng mga Kit ng UI para sa Apple iOS, Google Material, at Microsoft Windows. Sa maraming aspeto, idinagdag nila ang salitang "Rapid" sa terminong "Rapid Prototyping." Gayundin ginagawa nila ang trabaho ng taga-disenyo nang mas madali sa karaniwang mga elemento ng UI na hindi kailangang patuloy na muling likhain sa isang Application sa Disenyo tulad ng Photoshop, Illustrator o Sketch.
Ang elemento ng UI na kailangan namin ay isang card. Upang makapunta dito napili namin ang File> Buksan ang UI Kit> Google Material at binuksan ang kit bilang isang bagong dokumento. Ang sangkap na kailangan namin ay natagpuan sa kategoryang Mga Card.
Ano ang iniibig natin tungkol sa mga ito ay sinunod nila ang pagtutukoy ng Materyal na Disenyo tulad ng inilatag sa mga pamantayan ng Nilalaman ng Blocks pati na rin ang pag-format ng teksto at mga espasyo ng espasyo na inilatag sa palatandaan ng palalimbagan.
Ang estilo ng card na gusto namin ay ang isa sa kaliwang ibaba. Lamang namin marquee ito sa aming mouse at kinopya ito sa clipboard. Sa kasamaang palad, ang XD ay hindi naglalaman ng isang naka-tab na interface para sa mga bukas na dokumento. Ang ginagawa namin ay inililipat ang bukas na dokumento ng dokumento pababa nang kaunti upang ipakita ang isa na aming ginagawa, piliin ito at i-paste. Ang isa pang paraan ng mabilis na paglipat sa pagitan ng mga bukas na dokumento ng XD ay ang pindutin ang Command- ' .
04 ng 06
Paano Mag-edit ng isang Material Design Element sa Adobe Experience Design CC
Kapag ang card sa XD ay dumating mula sa clipboard ay hindi nagsimulang simulan ang pakikipagtulungan sa mga ito. Ang unang bagay na kailangan mong gawin ay ang Ungroup ang card dahil kailangan mo ng access sa bit at piraso ng pagbubuo ng card. Upang gawin ito, piliin ang card at piliin ang Object> Ungroup o pindutin ang Shift-Command-G.
Ang iyong card ay binubuo ngayon ng tatlong piraso:
- Banayad na kulay abong kahon para sa larawan.
- Medium gray na kahon para sa teksto
- Ang kahon sa likod na ginamit bilang background.
Ang unang hakbang ay tanggalin ang kahon ng kulay abong kahon. Ang tanging layunin nito ay upang kumilos bilang isang placeholder para sa imahe na ginagawang ito, kung pinili mo, opsyonal.
Ang kahon na may teksto ay talagang isang madilim na kulay-abo na may 50% opacity. Maaaring gamitin ang kahon na ito bilang background ng teksto at maaari mong baguhin ang kulay at ang opacity ng kahon.
Kahit na hindi ito agad na maliwanag, ang kahon ng kulay abu-abo ay sinusunod ang pagsasalamin ng Materyal na Disenyo sa na ang mga itaas na sulok nito ay bilugan ng 2 pixel. Tandaan ito kung nagdaragdag ka ng isang imahe. Kakailanganin din nito ang mga bilugan na sulok na maaaring idagdag sa isang application ng imaging o sa XD.
Nakikita bilang kung paano ito ay ang resting estado ng card na ito ay nangangailangan din ng isang anino. Ang spec ang ginagawang malinaw na mayroong isang resting elevation ng card ng 2 pixels. Upang idagdag ito, piliin ang itim na hugis ng background at itakda ang mga halaga ng Y at B (Blur) sa 2 sa panel ng properties.
05 ng 06
Paano Magdaragdag ng isang Imahe sa Material Design Card sa Adobe XD CC
Ang pagkilala sa card ay 344 pixel ang lapad at ang imahe na lugar ay 150 pixel mataas ( kalahati ang taas ng kahon ng kulay-abo na kahon ) Binuksan namin ang imahe sa Photoshop, i-crop ito sa laki at na-save ito gamit ang @ 2x na opsyon sa Export As dialog kahon. Ang imahe ay na-import sa Adobe XD.
Pagkatapos ay hinila namin ang kahon na kulay-abo sa ibabaw ng larawan sa karton at piniling Object> Mask na May Hugis . Ang resulta ay ang larawan na pinupunan ang mga bilugan na sulok ng hugis. Pagkatapos namin inilipat ang imahe sa huling posisyon nito.
Gamit ang imahe sa lugar, binago namin ang kulay ng background ng Medium gray na kahon, binago ang teksto at ang kulay ng teksto ng link.
06 ng 06
Gamit ang tampok na Tampok ng Adobe XD CC Grid
Sa pamamagitan ng card kumpleto na ito ngayon ay kailangang maayos na inilagay ayon sa spec ng Pagsasapalaran sa Material. Nangangahulugan ito na may 8 pixel sa magkabilang panig ng card at ang card ay kailangang 8 pixel sa ibaba ng app bar. Upang gawin ito, i-click nang isang beses sa pangalan ng artboard at, sa Properties Panel, piliin ang Grid. Lumilitaw ang grid sa ibabaw ng artboard.
Ang default na laki ng grid ay 8 pixels na mangyayari sa parehong laki ng grid para sa Material Design. Kung kailangan mo ng ibang laki, baguhin ang halaga sa Grid area. Kung nais mong baguhin ang kulay ng grid, i-click ang kulay ng chip at pumili ng isang kulay mula sa nagresultang Kulay Picker.
Sa grid na nakikita, mag-click sa card at ilipat ito sa kanyang huling posisyon.
Upang tapusin, pinili namin ang card, na-click ang pindutan ng Ulitin Grid at binago ang spacing sa pagitan ng mga card sa 8 pixel pati na rin.