Specifikationen af materiale design fra Google var oprindeligt rettet mod Android-platformen som en måde at foreslå konsistens af design på platformen.
01 af 06Sådan opretter du et materiale designkort i Adobe Experience Design CC
Når designere begyndte at peke igennem det og forstå tanken bag det, er Material Design tydeligt blevet en af de mest indflydelsesrige visuelle filosofier i web- og mobildesign. Alt du skal gøre for at se, hvad vi får på, er at lave en Material Design-søgning på Pinterest, og du vil se hundredvis af eksempler og eksperimenter på enheder, tabletter og endda websteder.
Det fascinerende aspekt ved Material Design er, at det er Googles tænkning omkring, hvordan apps skal vises og arbejde på mobile enheder, men begreberne bliver anvendt til enhver skærm af enhver størrelse på enhver platform. Som Google anfører i beskrivelsens åbnings afsnit: "Vi udfordrede os til at skabe et visuelt sprog til vores brugere, der syntetiserer de klassiske principper for godt design med innovation og mulighed for teknologi og videnskab. Dette er materiale design. Denne spec er et levende dokument, der vil blive opdateret, da vi fortsætter med at udvikle principperne og specifikationerne for materialet design. "
Materialet talte om, i meget generelle termer, er papir og et kendetegn ved Material Design er kortet. Tænk på et indekskort på en overflade, og du er på rette spor. Et kort er et element, der indeholder billeder, videoer, tekstforbindelser osv., Men hvor de adskiller sig fra de fleste interaktive designs, er de ment at fokusere på et enkelt emne. Kort har afrundede hjørner, indeholder svage skygger, der angiver, at de er over en overflade, og hvis de alle er på samme plan, betegnes de som en "samling".
I denne "How To" skal vi oprette et kort baseret på spec. I stedet for at oprette kortet med en række billeddannelses- og tegningsværktøjer, kommer vi til at komme på den fra en anden retning. Vi skal bruge værktøjerne i Adobes Experience Design, som i øjeblikket findes i et offentligt forhåndsvisning af Macintosh og er gratis. Du kan downloade det her.
Lad os komme igang.
02 af 06Oprettelse af prototypebordet i Adobe Experience Design CC
Der er ingen åbenbar måde at oprette en Android-skærm fra Startskærmen i Experience Design CC (XD). Hvad vi plejede at gøre, når vi åbner XD, er at vælge indstillingen iPhone 6, og når grænsefladen åbnes, vælger vi værktøjslinjen Artboard nederst på værktøjslinjen og vælger Android Mobile fra valgene på panelet Egenskaber til højre. Så skifter vi over til udvælgelsesværktøjet, klik en gang på iPhone-tavlenes navn og slet det tavle. Ikke mere.
I den nuværende version af XD er der en lille pil ved siden af iPhone 6, der, når den klikkes, åbner en rullemenu. Derfra vælger du Android Mobile-versionen, og den valgte Android Mobile-kunstplade åbnes i grænsefladen.
For at sikre, at vi har det rigtige skærmrum åbent for kortet, går vi normalt over til Sketch 3 og kopierer og indsætter en statuslinje, navbjælke og en applikationslinje fra materialet designskabelon til tavlen. Skitse 3.2 indeholder en Material Design skabelon (Fil> Ny fra skabelon> Materialdesign) og en anden rigtig god gratis en er fra Kyle Ledbetter, som du kan få her. Hvis du ikke har Sketch, kan du kopiere og indsætte dem fra de XD-klistermærker, der findes i Fil> Åbn UI-sæt> Google Material. Du kan også downloade dem fra Google til brug i Photoshop, Illustrator, After Effects og Sketch.
03 af 06Tilføjelse af et materiale designkort til et Adobe XD CC-kunstplade
En af de mest nyttige funktioner i XD er Inkluderingen af UI-kits til Apple iOS, Google Material og Microsoft Windows. I mange henseender tilføjer de ordet "Rapid" til udtrykket "Rapid Prototyping". Desuden gør de designers arbejde nemmere, fordi fælles UI-elementer ikke behøver konstant at genskabes i et Design Application, såsom Photoshop, Illustrator eller Skitse.
UI elementet vi havde brug for var et kort. For at komme til det valgte vi Fil> Åbn UI-sæt> Google Material og kittet blev åbnet som et nyt dokument. Det element, vi havde brug for, blev fundet i kortkategorien.
Hvad vi elsker om disse er, at de overholder specifikationen Material Design som beskrevet i indholdsblokernes specifikationer såvel som tekstformatering og afstandsspecifikationer, der er angivet i Typography spec.
Den kort stil vi ønskede var den ene i bunden til venstre. Vi markerer det simpelthen med musen og kopierer det til udklipsholderen. Desværre indeholder XD ikke en flad grænseflade til åbne dokumenter. Hvad vi gør, er at flytte det åbne dokumentvindue lidt for at afsløre den, vi arbejder på, vælge den og indsæt. En anden måde at hurtigt skifte mellem åbne XD-dokumenter på er at tryk kommando-.
04 af 06Sådan redigeres et materiale designelement i Adobe Experience Design CC
Når kortet i XD kommer fra klippebordet, skal du ikke begynde at arbejde med det. Det første du skal gøre er at ophæve kortet fordi du har brug for adgang til den bit og stykker der komponerer kortet. For at gøre dette skal du vælge kortet og vælg Objekt> Ungroup eller tryk skift-kommando-g.
Dit kort består nu af tre stykker:
- Lysegrå boks til billedet.
- Medium grå boks til teksten
- Baggrundsboksen bruges som baggrund.
Det første skridt er at slette den lysegrå boks. Det eneste formål er at fungere som pladsholder for billedet, der gør det, hvis du vælger, valgfrit.
Kassen med teksten er faktisk en mørkegrå med 50% opacitet. Denne boks kan bruges som tekstbakgrund, og du kan ændre farven og boksens opacitet.
Selvom det ikke umiddelbart er tydeligt, følger den lysegrå boks Material Design-specifikationen, idet dens øverste hjørner er afrundet med 2 pixel. Husk det, hvis du tilføjer et billede. Det vil også have brug for de afrundede hjørner, som kan tilføjes til et billeddannelsesprogram eller i XD.
For at se, hvordan dette er kortets hvilestatus, har det også brug for en skygge. Specen gør det klart, at der er en hvilende højde af kortet på 2 pixel. For at tilføje dette, vælg den sorte baggrundsform og indstil Y og B (Blur) værdierne til 2 i egenskabspanelet.
05 af 06Sådan tilføjes et billede til Material Design Card i Adobe XD CC
At kende kortet er 344 pixel bredt, og billedområdet er 150 pixel højt ( halvdelen af den lysegrå boks højde ) Vi åbnede billedet i Photoshop, beskærede det til størrelsen og gemte det ved hjælp af @ 2x-indstillingen i Photoshop's Eksporter som dialog boks. Billedet blev importeret til Adobe XD.
Vi slæbte derefter den lysegrå boks over billedet på bordet og valgte Objekt> Mask med form. Resultatet var billedet, der samler de afrundede hjørner af formen. Vi flyttede derefter billedet til sin endelige position.
Med billedet på plads ændrede vi derefter baggrundsfarven på den mellemstore grå boks, ændrede teksten og farven på linkteksten.
06 af 06Brug af Adobe XD CC Grid Feature
Med kortet færdigt skal det nu placeres korrekt i henhold til Material Design spec. Dette betyder at der er 8 pixel på hver side af kortet, og kortet skal være 8 pixels under applinjen. For at gøre dette skal du klikke en gang på genstandsnavnet og i ruten Egenskaber vælge Gitter. Gitteret vises over tavlen.
Standardgitterstørrelsen er 8 pixel, som tilfældigvis er den samme gitterstørrelse til Material Design. Hvis du har brug for en anden størrelse, skal du ændre værdien i Gitter-området. Hvis du vil ændre farven på nettet, skal du klikke på farvechip og vælge en farve fra den resulterende farvevælger.
Når gitteret er synligt, skal du klikke på kortet og flytte det til sin endelige position.
For at afslutte valgte vi kortet, klikker på knappen Gentag gitter og ændrede mellemrummet mellem kortene til 8 pixels.
