Die Materiaalontwerp-spesifikasie van Google was oorspronklik gemik op die Android-platform as 'n manier om konsekwentheid van ontwerp op die platform voor te stel.
01 van 06
Hoe om 'n Materiaal-ontwerpkaart in Adobe Experience Design CC te skep
Sodra ontwerpers dit begin betree en die denke agter dit verstaan, het Materiaalontwerp stil geword een van die mees invloedryke visuele filosofieë in web- en mobiele ontwerp . Al wat u moet doen om te sien wat ons doen, is om 'n Materiaalontwerp-soektog op Pinterest te doen en u sal honderde voorbeelde en eksperimente op toestelle, tablette en selfs webwerwe sien.
Die fassinerende aspek van Materiaalontwerp is dat Google dink hoe programme op mobiele toestelle verskyn en werk, maar die konsepte word toegepas op enige skerm van enige grootte op enige platform. Soos Google in die eerste paragraaf van die spesifikasie stel, het ons ons uitgedaag om 'n visuele taal vir ons gebruikers te skep wat die klassieke beginsels van goeie ontwerp sintetiseer met die innovasie en moontlikheid van tegnologie en wetenskap. Dit is materiaalontwerp. Hierdie spesifikasie is 'n lewende dokument wat opgedateer sal word, aangesien ons die beginsels en besonderhede van materiaalontwerp verder ontwikkel. "
Die materiaal het gepraat oor in baie algemene terme papier en 'n kenmerk van Materiaalontwerp is die kaart. Dink aan 'n indekskaart op 'n oppervlak en jy is op die regte pad. 'N Kaart is 'n element wat foto's, video's, teksskakels ensovoorts bevat, maar waar hulle verskil van die meeste interaktiewe ontwerpe, is hulle bedoel om op een vak te fokus. Kaarte het ronde hoeke, bevat swak skadu's wat aandui dat hulle bo die oppervlak is en as hulle almal op dieselfde vlak is, word hulle na verwys as 'n "versameling".
In hierdie "Hoe om" gaan ons 'n kaart skep wat gebaseer is op die spesifikasie. Eerder as om die kaart te skep met 'n verskeidenheid beeld- en tekengereedskap, gaan ons van 'n ander rigting afkom. Ons gaan die gereedskap in Adobe se Experience Design gebruik, wat tans in 'n Macintosh-enigste openbare voorskou is en gratis is. U kan dit hier aflaai.
Laat ons begin.
02 van 06
Die skep van die Prototype Artboard in Adobe Experience Design CC
Daar is geen duidelike manier om 'n Android-skerm van die Start-skerm in Experience Design CC (XD) te skep nie. Wat ons gedoen het toe ons XD oopmaak, is om die iPhone 6 opsie te kies. Wanneer die koppelvlak oopmaak, kies ons die Artboard-instrument onderaan die nutsbalk en kies Android Mobile uit die keuses op die Eienskappe-paneel regs. Dan gaan ons oor na die keuringsinstrument, kliek een keer op die naam van die iPhone-artbord en verwyder die artboard. Niks meer nie.
In die huidige weergawe van XD is daar 'n klein pyltjie langs die iPhone 6 wat, wanneer dit geklik word, 'n aftreklys oopmaak. Daarvandaan kies jy die Android Mobile-weergawe en die Android Mobile- kunstbord wat gekies is, maak oop in die koppelvlak.
Om te verseker dat ons die korrekte skermspasie oopmaak vir die kaart, gaan ons gewoonlik oor na Skets 3 en kopieer en plak 'n Statusbalk, Navbalk en Appbalk uit die Materiaalontwerpmalletjie in die artboard. Skets 3.2 bevat 'n Materiaalontwerp sjabloon ( File> New From Template> Materiaalontwerp ) en nog 'n baie goeie gratis een is van Kyle Ledbetter wat u hier kan kry. As jy nie Skets het nie, kan jy dit kopieer en plak vanaf die XD-plakkers wat in Lêer> Oop-UI-kit> Google Materiaal gevind word . U kan dit ook van Google aflaai vir gebruik in Photoshop, Illustrator, After Effects and Sketch.
03 van 06
'N Materiaalontwerpskaart by 'n Adobe XD CC Artboard voeg
Een van die nuttigste kenmerke van XD is die insluiting van UI Kits vir Apple iOS, Google Materiaal en Microsoft Windows. In baie opsigte voeg hulle die woord "Rapid" by die term "Rapid Prototyping". Hulle maak ook die ontwerper se werk makliker, aangesien gewone UI-elemente nie voortdurend herskep moet word in 'n Ontwerp-aansoek soos Photoshop, Illustrator of skets.
Die UI-element wat ons benodig, was 'n kaart. Om dit te bereik, kies ons File> Open UI Kit> Google Materiaal en die pakket is geopen as 'n nuwe dokument. Die element wat ons benodig, is in die Kaarte-kategorie gevind.
Waarvan ons hiervan hou is dat hulle voldoen aan die Materiaalontwerp-spesifikasie soos uiteengesit in die Spesifikasiesblokke-spesifikasies sowel as die teksformatering en spasiëringspesifikasies wat in die Typografie-spesifikasie uiteengesit is.
Die kaartstyl wat ons wou hê, was die een in die linkerkant. Ons markeer dit net met ons muis en kopieer dit na die knipbord. Ongelukkig bevat XD geen koppelvlak vir oop dokumente nie. Wat ons doen, skuif die oop dokumentvenster effens om die een aan te dui waaraan ons werk, kies dit en plak. 'N Ander manier om vinnig tussen oop XD-dokumente te skakel, is om Command-' te druk .
04 van 06
Hoe om 'n Materiaalontwerp Element in Adobe Experience Design BK te wysig
Wanneer die kaart in XD uit die knipbord kom, begin dit nie met meer werk nie. Die eerste ding wat u moet doen is om die kaart te hergroepeer omdat u toegang nodig het tot die stukkies en stukke wat die kaart saamstel. Om dit te doen, kies die kaart en kies Object> Ontspan of druk Shift-Command-G.
Jou kaart is nou saamgestel uit drie stukke:
- Liggrys boks vir die beeld.
- Medium grys boks vir die teks
- Die terugkas wat as agtergrond gebruik word.
Die eerste stap is om die liggrys boks uit te vee. Die enigste doel daarvan is om as 'n plekhouer op te tree vir die beeld wat dit maak, as jy kies, opsioneel.
Die boks met die teks is eintlik 'n donkergrys met 50% deursigtigheid. Hierdie boks kan as die teks agtergrond gebruik word en jy kan die kleur en die deursigtigheid van die boks verander.
Alhoewel dit nie onmiddellik sigbaar is nie, volg die liggrys boks die Materiaalontwerp-spesifikasie aangesien sy boonste hoeke met 2 pixels afgerond word. Hou dit in gedagte as jy 'n prentjie byvoeg. Dit sal ook die afgeronde hoeke benodig wat by 'n afbeeldingsaansoek of in XD gevoeg kan word.
Aangesien dit die rustende toestand van die kaart is, benodig dit ook 'n skaduwee. Die spesifikasie maak dit duidelik daar is 'n rustende verheffing van die kaart van 2 pixels. Om dit toe te voeg, kies die swart agtergrondvorm en stel die waardes Y en B (Blur) in op 2 in die eienskappepaneel.
05 van 06
Hoe om 'n prentjie by die Materiaalontwerkkaart in Adobe XD CC by te voeg
Om die kaart te ken, is 344 pixels breed en die prentarea is 150 pixels hoog (die helfte van die liggrys boks ). Ons het die prent in Photoshop oopgemaak, dit na die grootte geknip en dit gestoor met die @ 2x-opsie in Photoshop se uitvoer as dialoog boks. Die prent is ingevoer in Adobe XD.
Ons het dan die liggrys boks oor die beeld op die plakkaat gesleep en geselekteerde Object> Mask With Shape . Die gevolg was die beeld wat die afgeronde hoeke van die vorm optel. Ons het toe die beeld na sy finale posisie verskuif.
Met die prentjie in plek het ons die agtergrondkleur van die Medium grys boks verander, die teks en die kleur van die skakel teks verander.
06 van 06
Gebruik die Adobe XD CC Grid-funksie
Met die kaart voltooi moet dit nou behoorlik geplaas word volgens die Materiaalontwerp-spesifikasie. Dit beteken dat daar 8 pixels aan weerskante van die kaart is en die kaart moet 8 pixels onder die programbalk wees. Om dit te doen, klik een keer op die artboard naam en in die Eienskappe paneel, kies Grid. Die rooster verskyn bo die bord.
Die standaard rooster grootte is 8 pixels wat dieselfde rooster grootte vir Materiaalontwerp is. As jy 'n ander grootte benodig, verander die waarde in die Grid-area. As jy die kleur van die rooster wil verander, klik die kleurskyfie en kies 'n kleur uit die kleurkolom wat daaruit ontstaan.
Met die rooster sigbaar, klik op die kaart en beweeg dit in sy finale posisie.
Om klaar te maak, het ons die kaart gekies, op die knoppie Herhaal rooster gekliek en die spasiëring tussen die kaarte ook na 8 pixels verander.