Specifikacija Material Designa iz Googlea izvorno je bila usmjerena na Android platformu kao način da predloži dosljednost dizajna na platformi.
01 od 06
Kako stvoriti materijalnu dizajnersku karticu u Adobe Experience Design CC
Jednom kad su ga dizajneri počeli probijati i razumijevati razmišljanje iza sebe, Material Design je tiho postao jedna od najutjecajnijih vizualnih filozofija u web i mobilnom dizajnu . Sve što trebate učiniti da biste vidjeli što nam je potrebno je da napravimo pretraživanje materijala na Pinterestu i vidjet ćete stotine primjera i eksperimenata na uređajima, tabletima, pa čak i web-lokacijama.
Fascinantan aspekt dizajna materijala jest da Google razmišlja oko toga kako se aplikacije trebaju pojaviti i raditi na mobilnim uređajima, no koncepti se primjenjuju na bilo koji zaslon bilo koje veličine na bilo kojoj platformi. Kao što Google navodi u početnom odlomku specifikacije, "Mi smo se izazvali stvaranjem vizualnog jezika za naše korisnike koji sintetizira klasične principe dobrog dizajna s inovativnošću i mogućnošću tehnologije i znanosti. Ovo je materijalni dizajn. Ovaj je spis dokument koji će se ažurirati dok nastavljamo razvijati načela i specifičnosti dizajna materijala. "
Materijal je govorio, u vrlo općenitom smislu, papir i oznaka Material Design je kartica. Razmislite o indeksnoj kartici na površini i na pravom ste putu. Kartica je element koji sadrži fotografije, videozapise, tekstualne veze i tako dalje, ali gdje se razlikuju od većine interaktivnih dizajna, znači da se trebaju usredotočiti na pojedinačnu temu. Kartice imaju zaobljene kutove, sadrže blage sjene koje ukazuju da su iznad površine i ako su sve na istoj razini, nazivaju se "zbirka".
U ovom "Kako" kreirati ćemo karticu temeljenu na spec. Umjesto stvaranja kartice s raznovrsnim alatom za slikanje i crtanje, dolazimo do toga iz drugačijeg smjera. Upotrijebiti ćemo alate u dizajnu iskustva Adobe-a koji je trenutačno u javnom pregledu samo za Macintosh i besplatan je. Možete je preuzeti ovdje.
Započnimo.
02 od 06
Stvaranje prototipa Artboard u Adobe Experience Design CC
Ne postoji očigledan način stvaranja Androidovog zaslona s početnog zaslona u iskustvu dizajnerskog CC (XD). Ono što smo radili kada otvorimo XD jest odabir opcije iPhone 6 i, kada se otvori sučelje, odaberemo alat Artboard pri dnu Alatne trake i odaberemo Android Mobile iz odabira na ploči Svojstva s desne strane. Zatim prebacimo na alat za odabir, jednom kliknite na ime iPhone ploče i izbrisati ploču. Ne više.
U trenutnoj verziji XD-a nalazi se mala strelica pored iPhone 6 koji, kada se klikne, otvara padajući izbornik. Od tamo odabirete verziju Android Mobile i odabrana je odabrana radna površina Android Mobile koja se otvara u sučelju.
Da bismo osigurali prikladan prostor zaslona otvoren za karticu, obično prelazimo na Sketch 3 i kopirajte i zalijepite traku statusa, navigacijsku traku i traku App iz predloška dizajna materijala u ploču s instrumentima. Skica 3.2 sadrži predložak Dizajn materijala ( Datoteka> Nova iz predloška> Dizajn materijala ), a drugi stvarno dobar besplatan je od Kyle Ledbettera kojeg možete nabaviti ovdje. Ako nemate Sketch, možete ih kopirati i zalijepiti s XD naljepnica pronađenih u Datoteka> Open UI Kit> Google Material . Možete ih preuzeti i od Googlea za upotrebu u programu Photoshop, Illustrator, After Effects i Skica.
03 od 06
Dodavanje materijalne kartice za dizajn u Adobe XD CC Artboard
Jedna od najkorisnijih značajki XD-a je uključivanje UI Kit za Apple iOS, Google Material i Microsoft Windows. U mnogim aspektima, oni dodaju riječ "Rapid" na pojam "Rapid Prototyping", kao i oni čine posao dizajner lakše u tome da zajednički UI elemenata ne moraju biti stalno ponovo u dizajnu aplikacija kao što su Photoshop, Illustrator ili Skica.
Element UI koji nam je potreban bio je kartica. Da bismo mu pristupili, odabrali smo Datoteka> Otvori paket UI> Google materijal i paket je otvoren kao novi dokument. Element koji nam je potreban pronađen je u kategoriji Kartice.
Ono što volimo o njima je da se pridržavaju specifikacija materijala kao što je navedeno u specifikacijama Bloksa sadržaja, kao i načina oblikovanja teksta i razmaka navedenih u tipografskom spec.
Stil kartice koji smo željeli bio je onaj u donjem lijevom kutu. Jednostavno ga označimo s mišem i kopiramo ga u međuspremnik. Nažalost, XD ne sadrži sučelje s karticama za otvorene dokumente. Ono što radimo je da pomaknemo otvoreni prozor dokumenta malo da bismo otkrili onu na kojoj radimo, odaberite ga i zalijepite. Drugi način brzog prebacivanja između otvorenih XD dokumenata je pritisnuti Command- ' .
04 od 06
Kako urediti element dizajna materijala u programu Adobe Design Experience Design
Kad kartica u XD stigne iz međuspremnika, ne veselo počnite s njom raditi. Prvo što trebate učiniti je razdvajati karticu jer vam je potreban pristup bitu i komadima koji sastavljaju karticu. Da biste to učinili, odaberite karticu i odaberite Object> Ungroup ili pritisnite Shift-Command-G.
Vaša kartica sada se sastoji od tri dijela:
- Svjetlosiva kutija za sliku.
- Srednje siva kutija za tekst
- Pozadina se koristi kao pozadina.
Prvi korak je brisanje svijetlosive kutije. Njegova je jedina svrha da djeluje kao rezervirano mjesto za sliku koja ga čini, ako to želite, izborno.
Kutiju s tekstom zapravo je tamnosiva s 50% neprozirnosti. Ovaj se okvir može koristiti kao tekstualna pozadina i možete promijeniti boju i neprozirnost okvira.
Iako nije odmah vidljivo, svijetlo siva kutija slijedi materijal dizajn spektakla u kojoj je njegov gornji kutovi zaobljeni po 2 piksela. Imajte na umu ako dodajete sliku. Također će trebati zaobljeni kutovi koji se mogu dodati aplikaciji za snimanje ili u XD formatu.
Vidjevši kako je to stanje mirovanja kartice, ona također treba sjenu. Pojava jasno ukazuje na odmorišnu elevaciju kartice od 2 piksela. Da biste to dodali, odaberite crnu pozadinu i postavite vrijednosti Y i B (Blur) na 2 na ploči svojstava.
05 od 06
Kako dodati sliku na materijalnu dizajnersku karticu u Adobe XD CC
Poznavanje kartice je široko 344 piksela i područje slike je visoka 150 piksela ( pola visine svjetlosnog sive kutije ) Otvorili smo sliku u Photoshopu, oborili ga na veličinu i spremili ga pomoću opcije 2x 2x u Photoshopovom Izvezi kao dijaloškom okviru kutija. Slika je uvezena u Adobe XD.
Zatim smo povucili svjetlosnu boju preko slike na kartici i odabrali Objekt> Maska s oblikom . Rezultat je bila slika koja je zaokružila kutove oblika. Zatim smo preselili sliku na njegov krajnji položaj.
Uz sliku na mjestu, promijenili smo pozadinsku boju Srednje sive kutije, promijenili tekst i boju teksta veze.
06 od 06
Korištenje značajke Adobe XD CC Grid
Kada kartica završi, treba ga ispravno postaviti prema specifikaciji Material Design. To znači da na svakoj strani kartice postoji 8 piksela, a kartica mora biti 8 piksela ispod trake aplikacije. Da biste to učinili, jednom kliknite na naziv plohe, a na ploči Svojstva odaberite Raster. Raster se pojavljuje iznad ploče s instrumentima.
Zadana veličina rešetke je 8 piksela koja se dogoditi da budu iste veličine rešetke za dizajn materijala. Ako vam je potrebna drugačija veličina, promijenite vrijednost u području mreže. Ako želite promijeniti boju rešetke, kliknite žeton boja i odaberite boju iz dobivenog odabira boja.
Kada je mreža vidljiva, kliknite karticu i premjestite ga u završni položaj.
Da bismo završili, odabrali smo karticu, kliknuli gumb Repeat Grid i promijenili razmak između kartica do 8 piksela.