Specifikacija materijala dizajna od strane Google-a je prvobitno bila usmerena na Android platformu kao način da se predloži doslednost dizajna na platformi.
01 od 06
Kako kreirati materijalni dizajn karticu u programu Adobe Experience Design CC
Jednom kada su dizajneri počeli da ga šalju i razumeju razmišljanje iza toga, Material Design je tiho postao jedna od najutjecajnijih vizuelnih filozofija u dizajnu web i mobilnih uređaja . Sve što treba da uradite da biste videli šta smo dobili jeste da uradimo materijalno pretraživanje na Pinterestu i videćete na stotine primera i eksperimenata na uređajima, tabletima, pa čak i na veb lokacijama.
Fascinantni aspekt materijalnog dizajna je da Google razmišlja kako se aplikacije pojavljuju i rade na mobilnim uređajima, ali se koncepti primjenjuju na bilo koji ekran bilo koje veličine na bilo kojoj platformi. Kako Google navodi u prvom stavu specifikacije, "Mi smo izazvali sebe da stvorimo vizuelni jezik za naše korisnike koji sintetizuju klasične principe dobrog dizajna sa inovacijom i mogućnošću tehnologije i nauke. Ovo je materijalni dizajn. Ova specifikacija je živi dokument koji će se ažurirati dok nastavljamo sa razvojem principa i specifičnosti dizajna materijala. "
Materijal o kojem govore, uopšteno govoreći, je papir i znak Materijalnog dizajna je kartica. Pomislite na indeksnu karticu na površini i na pravom ste mestu. Kartica je element koji sadrži fotografije, video zapise, tekstualne veze i tako dalje, ali gde se razlikuju od većine interaktivnih dizajna, oni su namenjeni da se fokusiraju na jedan predmet. Kartice imaju zaobljene uglove, sadrže slabe senke koje ukazuju da su iznad površine i ako su svi na istoj ravni, nazivaju se "kolekcija".
U ovom "Kako" ćemo kreirati karticu zasnovanu na specifikaciji. Umesto da kreiramo kartu sa raznim alatima za slikanje i crtanje, dolazimo do toga iz drugog pravca. Koristićemo alate u Adobeovom iskustvu dizajna koji je trenutno u pregledu samo za Macintosh i besplatan. Možete ga preuzeti ovdje.
Hajde da počnemo.
02 od 06
Izrada prototipa Artboard u Adobe Experience Design CC
Ne postoji očigledan način za kreiranje Android ekrana sa početnog ekrana u Experience Design CC (XD). Ono što smo radili kada otvorimo XD, je da izaberemo opciju iPhone 6, a kada se otvori interfejs, biranje artborda na dnu trake sa alatkama izaberite i izaberite Android Mobile iz opcija na panelu Properties na desnoj strani. Zatim prelazimo na alat za selekciju, kliknite jednom na ime ploče iPhone-a i obrišite artboard. Dosta.
U trenutnoj verziji XD-a nalazi se mala strelica pored iPhone-a 6, koja, kada se klikne, otvara padajući meni. Odavde izaberete Android Mobile verziju i otvara se Android Mobile tabla u interfejsu.
Kako bismo osigurali da imamo pravi prostor za ekran koji je otvoren za karticu, obično se nalazimo na Sketch 3 i kopiramo i nalepimo statusnu traku, Nav Bar i App bar iz Materijala dizajna u tablu. Skica 3.2 sadrži Šablon materijala ( File> New From Template> Material Design ), a drugi zaista dobar besplatan je od Kyle Ledbetter koji možete dobiti ovde. Ako nemate Sketch, možete ih kopirati i nalepiti sa XD naljepnica pronađenih u File> Open UI Kit> Google Material . Možete ih takođe preuzeti sa Google-a za korišćenje u Photoshop-u, Illustrator, After Effects i Sketch-u.
03 od 06
Dodavanje materijala za dizajn materijala na Adobe XD CC Artboard
Jedna od najkorisnijih karakteristika XD-a je uključivanje UI Kitsa za Apple iOS, Google materijal i Microsoft Windows. U mnogim aspektima, dodaju riječ "Rapid" na izraz "brzo izrada prototipova". Takođe, olakšavaju posao dizajnera u tome da se obični elementi UI ne moraju konstantno stvarati u aplikaciji za dizajn kao što su Photoshop, Illustrator ili Skica.
Element UI-a koji nam je bio potreban je kartica. Da bi došli do njega, izabrali smo File> Open UI Kit> Google Material i komplet je otvoren kao novi dokument. Element koji nam je potreban nalazio se u kategoriji kartice.
Ono što mi se sviđamo jeste da se pridržavaju specifikacije materijala za dizajn kako je navedeno u specifikacijama Content Blocks-a, kao i specifikacijama za formatiranje teksta i razmaka postavljenih u specifikaciji Typography.
Stil koji smo želeli bio je onaj u donjem levom uglu. Jednostavno smo ga obrisali mišem i kopirali u klipbord. Nažalost, XD ne sadrži interfejs sa karticama za otvorene dokumente. Ono što radimo je pomeranje otvorenog prozora dokumenta malo da otkrije onaj na kojem radimo, da ga selektujemo i zalepimo. Drugi način brzo prebacivanje između otvorenih XD dokumenata je da pritisnete Command- ' .
04 od 06
Kako promijeniti element dizajna materijala u Adobe Experience Design CC
Kada kartica iz XD-a stigne sa klipborda, ne radosno počnite da radite s njim. Prva stvar koju treba da uradite je da razdvojite karticu jer vam je potreban pristup bitu i komadi koji čine karticu. Da biste to uradili, izaberite karticu i izaberite stavku Obuhvatiti grupu ili pritisnite Shift-Command-G.
Vaša kartica je sada sastavljena od tri dela:
- Svetlosiva kutija za sliku.
- Srednja siva kutija za tekst
- Poleđina se koristi kao pozadina.
Prvi korak je da izbrišete svetlosivu kutiju. Njegova jedina svrha je da se ponaša kao mesto za sliku koja ga čini, ako izaberete, opciono.
Kutija sa tekstom je zapravo tamno siva sa 50% prozirnosti. Ovo polje se može koristiti kao pozadina teksta i možete promijeniti nejasnost boja i kutije.
Iako nije odmah evidentno, svetlo siva kutija prati Material Design specifikaciju jer su njegovi gornji uglovi zaokruženi za 2 piksela. Imajte ovo na umu ako dodate sliku. Takođe će biti potrebni zaobljeni uglovi koji se mogu dodati u aplikaciju za snimanje ili u XD.
Gledajući kako je ovo stanje odmora na kartici, potrebna je i senka. Specifikacijom jasno je da postoji pokrivna karta kartice od 2 piksela. Da biste ovo dodali, izaberite oblik crne pozadine i postavite vrednosti Y i B (Blur) na 2 na panelu svojstava.
05 od 06
Kako dodati sliku na materijalnu karticu u Adobe XD CC
Poznavanje kartice je širine 344 piksela i površina slike je visoka 150 piksela ( pola visine sive boje box-a ) Otvorili smo sliku u Photoshop-u, isecirali je veličinu i sačuvali ga pomoću opcije @ 2x u dijalogu Export As Photoshop-a box. Slika je uvezena u Adobe XD.
Zatim smo povukli svetlosivu kutiju preko slike na kartonu i izabrali Object> Mask With Shape . Rezultat je bio slika koja je pokupila zaobljene kutove oblika. Zatim smo sliku pomerili na svoj krajnji položaj.
Sa imenom na mestu, mi smo onda promenili boju pozadine srednje siva kutija, promijenili tekst i boju teksta linka.
06 od 06
Korišćenje funkcije Adobe XD CC Grid
Sa završenom karticom sada je potrebno pravilno postaviti u skladu sa specifikacijom Material Design. To znači da na obje strane kartice ima 8 piksela i kartica mora biti 8 piksela ispod trake aplikacije. Da biste to uradili, jednom kliknite na ime table i na Properties Panelu izaberite Grid. Mreža se pojavljuje iznad artboarda.
Podrazumevana mrežna veličina je 8 piksela, što je slučaj sa istom veličinom mreže za Dizajn materijala. Ako vam je potrebna drugačija veličina, promenite vrednost u oblasti Grid. Ako želite da promenite boju mreže, kliknite na obojeni čip i izaberite boju iz rezultirajućeg izbora boja.
Kada je mreža vidljiva, kliknite na karticu i pomerite je u njen krajnji položaj.
Da završimo, izabrali smo karticu, kliknuli na dugme Repeat Grid i promenili razmak između kartica i na 8 piksela.