Ang Material Design specification gikan sa Google orihinal nga nagtumong sa Android nga plataporma ingon nga usa ka paagi sa pagsugyot sa pagkamakanunayon sa disenyo sa plataporma.
01 sa 06
Unsaon sa Paghimo og Material Design Card sa Adobe Experience Design CC
Sa diha nga ang mga tigdesinyo nagsugod sa pag-agni niini ug pagsabut sa panghunahuna sa luyo niini, ang Materyal nga Disenyo hilum nga nahimong usa sa labing maimpluwensyang mga pilosopiya nga makita sa web ug mobile nga disenyo . Ang tanan nga imong gikinahanglan nga buhaton aron makita kung unsa ang atong makuha mao ang paghimo sa pagpangita sa Material Design sa Pinterest ug imong makita ang gatusan ka mga pananglitan ug mga eksperimento sa mga himan, mga tablet, ug bisan mga website.
Ang maanindot nga aspeto sa Materyal nga Disenyo mao kini ang paghunahuna sa Google kon sa unsang paagi ang mga apps kinahanglan nga magpakita ug magtrabaho sa mga mobile device apan ang mga konsepto gipadapat sa bisan unsang screen sa bisan unsang gidak-on sa bisan unsang plataporma. Sama sa gisulti sa Google diha sa pangbukas nga parapo sa espesipiko, "Gihagit namo ang among mga kaugalingon sa paghimo og usa ka biswal nga pinulongan alang sa among mga tiggamit nga nag-synthesizes sa klasiko nga mga baruganan sa maayo nga desinyo uban sa kabag-ohan ug posibilidad sa teknolohiya ug siyensya. Kini ang materyal nga desinyo. Kini nga spec mao ang usa ka buhi nga dokumento nga ma-update samtang kita magpadayon sa pagpalambo sa mga prinsipyo ug mga detalye sa materyal nga disenyo. "
Ang materyal nga gihisgutan, sa kinatibuk-an nga mga termino, mao ang papel ug usa ka timaan sa Material Design ang kard. Hunahunaa ang usa ka index card sa usa ka nawong ug ikaw anaa sa husto nga dalan. Ang usa ka kard usa ka elemento nga adunay mga litrato, mga video, mga link sa teksto ug uban pa apan kung diin kini lahi sa kadaghanan sa mga interactive nga mga disenyo mao kini ang gipunting sa usa ka hilisgutan. Ang mga kard adunay mga lingin nga mga kanto, nga adunay mga landong nga nagpakita nga kini labaw sa usa ka nawong ug kon kini tanan anaa sa pareho nga eroplano sila gitawag nga usa ka "koleksyon".
Niini nga "Unsaon" kita magabuhat ug usa ka kard nga gibase sa spec. Imbis maghimo sa kard nga adunay nagkalain-laing mga imaging ug drawing nga mga himan, moadto kami gikan sa laing direksyon. Atong gamiton ang mga himan sa Adobe's Disenyo sa Disenyo nga kasamtangan sa Macintosh-lamang nga preview sa publiko ug libre. Mahimo nimo kini i-download dinhi.
Magsugod na ta.
02 sa 06
Paghimo sa Prototype Artboard sa Adobe Experience Design CC
Walay dayag nga paagi sa paghimo sa Android screen gikan sa Start Screen sa Experience Design CC (XD). Ang among gibuhat kanhi sa dihang gibuksan namo ang XD, mao ang pagpili sa iPhone 6 nga kapilian ug, sa dihang magbukas ang interface, among pilion ang Artboard nga himan sa ubos sa Toolbar ug pilia ang Android Mobile gikan sa mga pinili sa Properties panel ngadto sa tuo. Dayon atong ibalhin ngadto sa tool sa pagpili, i-click ang usa ka higayon sa ngalan sa iPhone artboard ug papason ang arte. Dili na.
Sa kasamtangan nga bersyon sa XD, adunay usa ka gamay nga pana sa kilid sa iPhone 6 nga, kung mag-click, magbukas sa usa ka drop-down menu. Gikan gikan didto imong pilion ang Android Mobile nga bersyon ug ang Android Mobile artboard nga pinili nga gibuksan sa interface.
Aron sa pagsiguro nga kita adunay hustong screen space nga bukas alang sa kard, kasagaran kita mopadulong sa Sketch 3 ug kopyahon ug i-paste ang Status Bar, Nav Bar, ug App bar gikan sa Material Design Template ngadto sa artboard. Ang Sketch 3.2 adunay usa ka template sa Material Design ( File> New From Template> Material Design ) ug laing maayo nga libre nga gikan sa Kyle Ledbetter nga mahimo nimo makuha dinhi. Kon wala ka Sketch, mahimo nimo kopyahon ug i-paste kini gikan sa mga sticker sa XD nga makita sa File> Open UI Kit> Google Material . Mahimo usab nimo i-download kini gikan sa Google aron magamit sa Photoshop, Illustrator, After Effects ug Sketch.
03 of 06
Pagdugang og usa ka Material Design Card sa usa ka Adobe XD CC Artboard
Usa sa labing mapuslanon nga bahin sa XD mao ang paglakip sa UI Kit alang sa Apple iOS, Google Material, ug Microsoft Windows. Sa daghang mga bahin, kini nagdugang sa pulong nga "Rapid" sa termino nga "Rapid Prototyping". Gihimo usab nila ang trabaho sa tigdisenyo sa mas sayon nga paagi sa komon nga mga elemento sa UI nga dili kinahanglan nga kanunay nga ibalik sa usa ka Application Application (Design), Illustrator o Sketch.
Ang elemento sa UI nga atong gikinahanglan usa ka kard. Aron makuha kini gipili namo ang File> Open UI Kit> Google Material ug ang kit giablihan isip bag-ong dokumento. Ang elemento nga among gikinahanglan makita sa mga kategoriya sa Mga Card.
Ang atong gihigugma bahin niini mao ang pagsunod sa mga detalye sa Materyal nga Disenyo nga gilatid sa mga detalye sa Content Blocks ingon man sa text formatting ug spacing specs nga gibutang sa Typography spec.
Ang estilo sa kard nga gusto namo mao ang usa sa wala nga bahin. Gikuha lang namo kini sa among mouse ug gikopya kini sa clipboard. Ikasubo, ang XD wala maglangkob sa tabbed interface alang sa bukas nga mga dokumento. Ang among ginahimo mao ang pagbalhin sa bukas nga bukas nga dokumento sa usa ka gamay aron ipadayag ang usa nga atong ginabuhat, pilia kini ug i-paste. Ang laing paagi sa dali nga pagbalhin tali sa bukas nga mga dokumento sa XD mao ang pagpugos sa Command- ' .
04 sa 06
Unsaon Pag-usab ang usa ka Material Design Element sa Adobe Experience Design CC
Sa diha nga ang kard sa XD moabut gikan sa clipboard dili kini magsugod sa pagtrabaho niini. Ang unang butang nga kinahanglan nimong buhaton mao ang Ungroup sa card tungod kay kinahanglan nimo ang access sa mga bit ug mga piraso nga naglangkob sa kard. Sa pagbuhat niini, pilia ang kard ug pilia ang Object> Ungroup o butanga ang Shift-Command-G.
Ang imong card karon gilangkuban sa tulo ka piraso:
- Kahayag nga gray nga kahon alang sa imahe.
- Medium gray nga kahon alang sa teksto
- Ang likod nga kahon nga gigamit ingon nga background.
Ang unang lakang mao ang pagtangtang sa kahayag nga abuhon nga kahon. Ang bugtong katuyoan niini mao ang paglihok ingon nga usa ka placeholder alang sa imahe nga naghimo niini, kon imong pilion, opsyonal.
Ang kahon nga anaa sa teksto sa pagkatinuod usa ka mangitngit nga gray nga adunay 50% opacity. Kini nga kahon mahimong gamiton ingon nga ang background sa teksto ug mahimo nimong usbon ang kolor ug ang opacity sa kahon.
Bisan dili kini makita dayon, ang kahayag nga kahon nga abuhon nagsunod sa paninguha sa Materyal nga Disenyo nga ang mga tumoy sa ibabaw niini gilibutan sa 2 ka pixel. Hinumdumi kini kon ikaw nagdugang og usa ka hulagway. Kinahanglan usab kini ang mga rounded corners nga mahimong idugang sa imaging application o sa XD.
Ang pagtan-aw kung giunsa kini ang pahulay nga kahimtang sa kard kini usab nagkinahanglan og anino. Ang spec nagpatin-aw nga adunay usa ka pahulay nga pagtubo sa card nga 2 ka pixel. Aron idugang kini, pilia ang hulma nga hulmahan sa background ug i-set ang Y ug B (Blur) nga mga bili ngadto sa 2 sa mga properties panel.
05 of 06
Unsaon Pagdugang og usa ka Imahen sa Material Design Card sa Adobe XD CC
Ang pag-ila sa kard nga 344 ka pixel ang gilapdon ug ang hulagway nga lugar nga 150 ka pixel ang gitas-on ( katunga sa gitas-on sa kahayag nga kahon nga gray ) Gibuksan namo ang larawan sa Photoshop, gitanom kini sa gidak-on ug gitipigan kini gamit ang @ 2x nga opsyon sa Photoshop's Export As dialog kahon. Ang imahen giimpor sa Adobe XD.
Dayon among giguyod ang kahayag nga abuhong kahon sa ibabaw sa imahe sa pasteboard ug gipili ang Object> Mask With Shape . Ang resulta mao ang hulagway nga namunit sa mga lingin nga bahin sa porma. Dayon gibalhin namo ang imahe ngadto sa katapusang posisyon niini.
Uban sa imahen nga nahimutang, gibag-o namo ang kolor sa background sa Medium gray nga kahon, giusab ang teksto ug ang kolor sa teksto nga may kalabutan.
06 of 06
Paggamit sa Feature sa Adobe XD CC Grid
Uban sa kard nga makompleto kini karon gikinahanglan nga ibutang sa tukmang paagi sumala sa spec Design Material. Kini nagpasabot nga adunay 8 ka pixel sa bisan asa nga kilid sa kard ug ang kard kinahanglan nga 8 ka pixel sa ubos sa app bar. Aron mahimo kini, i-click ang usa ka higayon sa ngalan sa arte ug, sa Properties Panel, pilia ang Grid. Ang grid makita sa ibabaw sa artboard.
Ang default grid nga gidak-on mao ang 8 ka pixel nga mahitabo nga pareho nga sukod sa grid alang sa Material Design.If kinahanglan nimo ang usa ka lain-laing gidak-on, usba ang bili sa Grid area. Kon gusto nimong usbon ang kolor sa grid, i-klik ang color chip ug pagpili og usa ka kolor gikan sa resulta nga Color Picker.
Sa makita ang grid, i-klik ang card ug ibalhin kini sa katapusang posisyon.
Aron mahuman, gipili namo ang kard, gikuha ang Repeat Grid button ug giusab ang gilay-on sa mga kard sa 8 ka pixel.