De spesifikaasje fan materiaal fan Google waard oarspronklik rjochte op it Android-platfoarm as in manier om konsistinsje fan ûntwerp op it platfoarm te foegjen.
01 of 06
Hoe meitsje in materiaal ûntwerpkaart yn Adobe Experience Design CC
Ien ûntwerpers begon te pokken troch it en begryp it tinken dêrfan, materiaal hat rêstich ien fan 'e meast ynfloedrike fisuele filosofyen yn' e web en mobile ûntwerp . Alles wat jo nedich hawwe om te sjen wat wy binne, is in Material Designseksje op Pinterest te dwaan en jo sille hûnderten eksimplaren en eksperiminten sjen op apparaten, tablets en sels websites.
De fassinearjende aspekt fan Material Design is it Google is te tinken hoe't apps ferskine moatte en wurkje op mobil apparaten, mar de begripen wurde tapast op elke skerm fan elke grutte op elke platfoarm. As Google stiet yn 'e iepenbiere paragraaf fan' e spesifisearring: "Wy hawwe ús útdaagd om in fisuele taal te meitsjen foar ús brûkers dy't de klassike prinsipes fan goede ûntwerpsynstân meitsje mei de ynnovaasje en mooglikheid fan technology en wittenskip. Dit is materiaal ûntwerp. Dizze spec is in libbensdokumint dat aktualisearje sil as wy trochgeane it ûntwikkeljen fan 'e betsjuttingen en spesifiken fan materiaal ûntwerp. "
It materiaal sprekt oer, yn hiel algemiene betsjuttingen is papier en in hallmark fan Material Design is de kaart. Tink oan in yndekskaart op in oerflak en jo binne op it goeie track. In kaart is in elemint mei foto 's, fideo' s, tekstferbindings en sa, mar wêr't se ferskille fan de measte ynteraktive ûntwerpen, wurde se bedoeld om op ien inkeld tema te fokusjen. Kaartsjes hawwe rûnte omkamen, lytse skaden befetsje dy't oanjouwe dat se boppe in oerflak binne en as se allegear op deselde fleantúch binne dat bepaald wurde as in "kolleksje".
Yn dit "Hoe" kinne wy in kaartsje meitsje dy't basearre is op de spec. Efter de kaart te meitsjen mei in ferskaat oan ôfbylding en tekenwerkstikken, sille wy dêrom komme fan in oare rjochting. Wy sille de ark's yn Adobe's Untwerp-ûntwerp brûke, dy't op it stuit yn in Macintosh-allinich iepenbiere foarkar is en fergees is. Jo kinne hjir hjirboppe downloade.
Litte wy begjinne.
02 of 06
It artprotype Artboard yn Adobe Experience Design CC oanmeitsje
Der is gjin ferkearde manier om in Android-skerm te meitsjen fan 'e start skerm yn ûnderfining ûntwerp CC (XD). Wat wy dien hawwe doe't wy XD iepenje, is de opsje fan 'e iPhone 6 te selektearjen, en as it ynterface iepenet, selektearje wy it Artboard-ark oan' e boaiem fan 'e Arkbalke en selektearje Android Mobile fan' e seleksjes op it Panel Properties nei rjochts. Dêrnei wee we nei it seleksje-ark om te klikken, klik dan ienris op de namme fan 'e artboard, en it artbrûk wiskje. Net mear.
Yn 'e aktuele ferzje fan XD is der in lyts pylk by it iPhone 6, wêryn't jo klikke, in drop-down menu iepene. Fan dêrút selektearje jo de Android Mobile ferzje en de selektearre Android- artboard iepenet yn 'e ynterface.
Om te soargjen dat wy de juste skermromte iepen hawwe foar de kaart, wurde wy normaal nei Sketch 3 kopieare en kopiearje en paste in Status Bar, Nav Bar en App bar fan 'e Material Design Template yn it artboard. Skatte 3.2 befettet in Material Design template ( bestân> Nije fan sjabloan> Material ûntwerp ) en in oar echt goeie frij is ien fan Kyle Ledbetter dy't jo hjir kinne krije. As jo gjin Sketch hawwe, kinne jo kopieare en pleatst wurde fan 'e XD-stickers dy' t fûn binne yn Triem> Iepenje UI Kit> Google Material . Jo kinne se ek fan Google downloade foar gebrûk yn Photoshop, Illustrator, After Effects en Sketch.
03 of 06
Meitsje in Material Design Card nei in Adobe XD CC Artboard
Ien fan 'e nuttichste funksjes fan XD is it opnimmen fan UI-kits foar Apple iOS, Google Material en Microsoft Windows. Yn in protte respekt binne se it wurd "rapid" taheakke oan 'e term "Rapid prototyping". Ek makken se de funksje fan' e ûntwerper makliker te meitsjen yn dy mienskiplike UI-eleminten moatte net altyd werboud wurde yn in ûntwerpapplikaasje lykas Photoshop, Illustrator of Skets.
It UI-elemint dat wy nedich wie, wie in kaart. Om dat te krijen hawwe wy gewoane bestannen fan> Open UI Kit> Google Material en it kit as in nije dokumint iepene. It elemint dat wy nedich binne fûn yn 'e kaarten kategory.
Wat wy leaf ha oer dizze is se oan 'e spesifikaasje Material Designing lykas yn' e ynhâld blokken speciaat lykas de tekstformatearing en bepaalde spesifikaasjes yn 'e typografie spec setten.
De kaartstyl dy't wy woe, wie de iene yn 'e ûnderkant links. Wy markearje gewoan it mei ús mûs en kopieare it nei it klamboerd. Spitigernôch befettet XD gjin tabblêd-ynterface foar iepen dokuminten. Wat wy dogge, ferpleatst it iepen dokumint finster in bytsje om te sjen wat wy wurkje, selektearje en ynfoegje. In oare manier om gau tusken te gean tusken iepen XD-dokuminten is te drukken op 'Kommando-' .
04 of 06
Hoe kinne jo in materiaal ûntwerpsel yn Adobe Experience Design CC feroarje
As de kaart yn XD út it klamboerd komt, begjinne se net wer mei har te wurkjen. It earste wat jo nedich binne, is om de kaart te yngroupearje om't jo tagong hawwe ta de bit en stikken dy't de kaart komponearje. Om dit te dwaan, selektearje de kaart en selektearje Object> Ungroup of drukke Shift-Command-G.
Jo kaartsje bestiet út trije stikken:
- Ljochte griiseksel foar it byld.
- Middele griis kast foar de tekst
- It efterkant brûkt as eftergrûn.
De earste stap is om it ljocht griis te wiskjen. It ienige doel is om as plakplak te hanneljen foar it byld dat it makket, as jo kieze, fakultatyf.
It fakje mei de tekst is eigentlik in donkere griis mei 50% opsetsje. Dit fjild kin brûkt wurde as de tekst eftergrûn en jo kinne de kleur en de opsetsje fan it fekje feroarje.
Hoewol it net direkt dúdlik is, folget de ljocht griis fan it Material Design spec yn dat syn boppeste hoeken troch 2 puntels rûn binne. Hâld dit yn 't sin as jo in ôfbylding taheakje. It sil ek de rûnte hoeken nedich wêze dy't tafoege wurde oan in ôfbyldingsapplikaasje of yn XD.
Sjoch as hoe dit de rêstende steat fan 'e kaart is, moat it ek in skaad hawwe. De spesifikaasje makket it dúdlik dat der in rêstige heul fan 'e kaart is fan 2 piksels. Om dit te folle, selektearje de swarte eftergrûnfoarm en set de Y- en B (Blur) wearden nei 2 yn it eigenskippenpaniel.
05 of 06
Hoe in foto oan de Material Design Card yn Adobe XD CC oanmeitsje
It witten fan 'e kaart is 344 piksels breed en de byldtriem is 150 pykels heech ( heale hichte fan' e ljoch griiske kaartsje ) Wy hawwe it byld oppenearre yn Photoshop, krige it oan 'e grutte en bewarre it mei de opsje @ 2x yn it fotomodel eksportearje as it dialooch doaze. It byld is ymportearre yn Adobe XD.
Wy slute dan de ljochte griene fekje oer it byld op de pasteboard en selektearre Object> Maske mei foarm . It resultaat wie it ôfbylding fan 'e rûnte hoeken fan' e foarm. Wy ferpleatst dan it byld nei har definitive posysje.
Mei it byld opnij feroare wy dan de eftergrûnkleur fan 'e Middele griene kast, de tekst en de kleur fan' e keppeling tekst feroare.
06 van 06
Mei de Adobe XD CC Grid Feature
Mei de kaart folslein moat it no krekt pleatst wurde neffens de Material Design spec. Dit betsjut dat der 8 piksels binne op elke kant fan 'e kaart en de kaartsje moat 8 piksels ûnder de appbalke wêze. Om dit te dwaan, klik dan ienris op de artboardnamme en yn it Eigenskippenpaniel, selektearje Grid. It raster ferskynt oer it artboard.
De standert grillegrutte is 8 piksels dy't binnen itselde gridgrutte wurde foar Material Design. As jo in oare grutte nedich binne, feroarje de wearde yn it Gridgebiet. As jo de kleur fan it grid feroarje wolle, klikje jo op 'e kleurchip en kieze in kleur fan' e resultant kleurferkiezer.
Mei it grid sichtber, klikje op 'e kaart en ferpleatse it yn' e definitive posysje.
Om te foltôgjen, hawwe wy de kaart selektearre, klikke op 'e knop Repeat Grid en feroare de ôfstân tusken de kaarten oant 8 piksels.