Tæknilýsingin frá Google var upphaflega miðuð við Android vettvang sem leið til að stilla samræmi hönnun á vettvang.
01 af 06
Hvernig á að búa til hönnunarkort í Adobe Experience Design CC
Þegar hönnuðir byrjuðu að grípa í gegnum það og skilja hugsunina á bak við það, hefur Material Design hljóðlega orðið einn af áhrifamestu sjónrænu sjónarhornum í vef- og farsímahönnun . Allt sem þú þarft að gera til að sjá hvað við erum að fá á er að gera efnishönnun á Pinterest og þú munt sjá hundruð dæmi og tilrauna á tækjum, töflum og jafnvel vefsíðum.
Heillandi þátturinn í Material Design er að hugsa um hvernig forrit ætti að birtast og vinna á farsímum en hugtökin eru beitt á hvaða skjá sem er af hvaða stærð sem er á hvaða vettvangi sem er. Eins og Google segir í opna málsgreininni í forskriftinni: "Við skorðum okkur á að búa til sjónrænt tungumál fyrir notendur okkar sem nýtir klassíska grundvallarreglur góðrar hönnun með nýsköpun og möguleika á tækni og vísindum. Þetta er efni hönnun. Þessi sérstakur er lifandi skjal sem verður uppfærð þar sem við höldum áfram að þróa grundvallaratriði og sérstöðu efnishönnunar. "
Efnið talaði um, í mjög almennum skilmálum, er pappír og aðalsmerki Material Design er kortið. Hugsaðu um vísitölu kort á yfirborði og þú ert á réttri leið. Kort er frumefni sem inniheldur myndir, myndskeið, textatengla og svo framvegis en þar sem þau eru frábrugðin flestum gagnvirkum hönnun er þeim ætlað að einblína á eitt efni. Spilin eru með ávalar horn, innihalda dauf skuggar sem gefa til kynna að þau séu yfir yfirborði og ef þeir eru allir á sama plani eru þeir nefndar sem "safn".
Í þessari "Hvernig Til" erum við að fara að búa til kort byggt á sérstakri. Frekar en að búa til kortið með ýmsum mynd- og teiknibúnaði, ætlum við að koma á það frá öðrum áttum. Við ætlum að nota verkfæri í reynsluupplifun Adobe sem er nú í Macintosh-aðeins opinber sýnishorn og er ókeypis. Þú getur sótt það hér.
Byrjum.
02 af 06
Búa til frumgerðartafla í Adobe Experience Design CC
Það er engin augljós leið til að búa til Android skjá frá Start Screen í Experience Design CC (XD). Það sem við notuðum þegar við opna XD er að velja iPhone 6 valkostinn og þegar viðmótið opnast veljum við Artboard tólið neðst á tækjastikunni og velur Android Mobile frá valinu á Properties panelinu til hægri. Síðan skiptum við yfir í val tólið, smelltu einu sinni á nafn nafn iPhone listblaðsins og eyðu listblaðinu. Ekki meira.
Í núverandi útgáfu XD er lítill ör við hliðina á iPhone 6 sem opnar fellilistann þegar smellt er á hana. Þaðan velurðu Android Mobile útgáfan og Android Mobile listaritið sem valið er opnar í tengi.
Til að tryggja að við eigum rétta skjárýmið fyrir kortið sitjum við yfirleitt yfir á skissu 3 og afritaðu og límdu Stikustiku, Nav Bar og App bar úr Material Design Template í listbretti. Skýringin 3.2 inniheldur Material Design Template ( Skrá> Nýtt úr Sniðmát> Efni Hönnun ) og annar mjög góður frjáls einn er frá Kyle Ledbetter sem þú getur fengið hér. Ef þú ert ekki með skissu geturðu afritað og límt þau úr XD límmiða sem finnast í File> Open UI Kit> Google Material . Þú getur einnig sótt þau frá Google til notkunar í Photoshop, Illustrator, After Effects og Sketch.
03 af 06
Bæti upp á hönnunarkort til Adobe XD CC Artboard
Eitt af gagnlegustu eiginleikum XD er að taka þátt í notendaviðmóti fyrir Apple iOS, Google Efni og Microsoft Windows. Að mörgu leyti bætast þeir við orðin "Rapid" við hugtakið "Rapid Prototyping". Eins og þeir gera vinnu hönnuðar auðveldara, þarf ekki að endurskapa stöðugt í hönnunarforrit eins og Photoshop, Illustrator eða Skissa.
UI þátturinn sem við þurftum var kort. Til að komast að því að við valið File> Open UI Kit> Google Efni og pakkinn opnaði sem nýtt skjal. Einingin sem við þurftum var að finna í kortakortinu.
Það sem við elskum um þetta er að þeir fylgja viðmiðunarsvið efnishönnunarinnar eins og fram kemur í innihaldseiningunum, sem og textaformun og bilunarsnið sem mælt er fyrir um í ritgerðarsniðinu.
Kortastíllinn sem við vildum var sá sem er neðst til vinstri. Við sýnum einfaldlega það með músinni og afritaði það á klemmuspjaldið. Því miður inniheldur XD ekki flipa tengi fyrir opna skjöl. Það sem við gerum er að færa opinn skjal gluggann niður til að sýna þeim sem við erum að vinna á, veldu það og líma. Önnur leið til að fljótt skipta á milli opna XD skjala er að ýta á Command- ' .
04 af 06
Hvernig á að breyta efnisþáttur í Adobe Experience Design CC
Þegar kortið í XD kemur frá klemmuspjaldinu byrjar ekki fínt að vinna með það. Það fyrsta sem þú þarft að gera er að taka upp kortið af því að þú þarft aðgang að bita og stykki sem kortið samanstendur af. Til að gera þetta skaltu velja kortið og velja Object> Ungroup eða ýta á Shift-Command-G.
Kortið þitt samanstendur nú af þremur hlutum:
- Ljósgrár kassi fyrir myndina.
- Miðlungs grár kassi fyrir textann
- Bakpokinn er notaður sem bakgrunnur.
Fyrsta skrefið er að eyða ljósgráða kassanum. Eina tilgangurinn er að vera staður fyrir myndina sem gerir það, ef þú velur, valfrjálst.
Bókin með textanum er í raun dökkgrár með 50% ógagnsæi. Þessi kassi er hægt að nota sem textabakgrunn og þú getur breytt lit og ógagnsæi kassans.
Þó að það sé ekki strax ljóst, þá er ljós grár kassinn með efnishönnunarsniðið með því að topp hornin eru ávöl með 2 punktum. Hafðu þetta í huga ef þú bætir við mynd. Það mun einnig þurfa hringlaga horn sem hægt er að bæta við í myndvinnsluforriti eða í XD.
Að sjá hvernig þetta er hvíldarstaða kortsins, það þarf einnig skugga. The sérstakur gerir það ljóst að það er hvíld hækkun á kortinu 2 pixlar. Til að bæta þessu við skaltu velja svörtu bakgrunnsmyndina og stilla Y og B (Blur) gildi í 2 á eiginleikum spjaldið.
05 af 06
Hvernig á að bæta við mynd við efnið hönnunarkortið í Adobe XD CC
Vitið kortið er 344 punktar á breidd og myndasvæðið er 150 pixlar hátt ( hálft hæð ljósgráða kassans ) Við opnuðum myndina í Photoshop, skorið það í stærðina og vistað það með því að nota @ 2x valkostinn í Exports Photoshop sem valmynd kassi. Myndin var flutt inn í Adobe XD.
Við dróum síðan ljósgráða kassann yfir myndina á pasteboardinu og valið Object> Mask With Shape . Niðurstaðan var myndin sem tók upp hringlaga horna mótsins. Við fluttum þá myndina í lokastöðu sína.
Með myndinni í stað breyttum við síðan bakgrunnslitnum í Medium gráðu kassanum, breytti textanum og litnum á tengilinn texta.
06 af 06
Notkun Adobe XD CC Grid Feature
Með því að ljúka kortinu þarf það að vera rétt sett í samræmi við efnishönnunarsniðið. Þetta þýðir að það eru 8 punktar á hvorri hlið á kortinu og kortið þarf að vera 8 punktar fyrir neðan forritastikuna. Til að gera þetta, smelltu einu sinni á nafnspjaldsheitið og veldu Grid í Properties Panel. Ristið birtist á listblaðinu.
Sjálfgefið ristarstærð er 8 pixlar sem verða að vera sama ristarstærð fyrir Efni Hönnun. Ef þú þarft annan stærð skaltu breyta gildinu í ristarsvæðinu. Ef þú vilt breyta litnum á ristinu skaltu smella á litflísina og velja lit úr litarefnum sem veldur því.
Með ristinu sýnilegt skaltu smella á kortið og færa það í endanlegri stöðu.
Til að ljúka við völdum við kortið, smellir á Endurtaka rist hnappinn og breytti bilinu á milli spilanna í 8 punkta eins og heilbrigður.