Materialdesignspecifikationen från Google riktades ursprungligen till Android-plattformen som ett sätt att föreslå konsistens av design på plattformen.
01 av 06Hur man skapar ett materialdesignkort i Adobe Experience Design CC
När designers började plocka igenom det och förstå tanken bakom det, har Material Design tyst blivit en av de mest inflytelserika visuella filosofierna i webb- och mobildesign. Allt du behöver göra för att se vad vi får på är att göra en materialdesignsökning på Pinterest och du kommer att se hundratals exempel och experiment på enheter, tabletter och till och med webbplatser.
Den fascinerande aspekten av materialdesign är att det är Googles tänkande hur appar ska visas och arbeta på mobila enheter men koncepten tillämpas på alla skärmar av vilken storlek som helst på vilken plattform som helst. Som Google anger i beskrivningspublikationen "Vi utmanade oss att skapa ett visuellt språk för våra användare som syntetiserar de klassiska principerna för bra design med innovation och möjlighet till teknik och vetenskap. Det här är materiell design. Denna spec är ett levande dokument som kommer att uppdateras när vi fortsätter att utveckla principerna och detaljerna i materialdesignen. "
Materialet talade om, i mycket allmänna termer, det är papper och ett kännetecken för Material Design är kortet. Tänk på ett indexkort på en yta och du är på rätt spår. Ett kort är ett element som innehåller foton, videoklipp, textlänkar och så vidare men där de skiljer sig från de flesta interaktiva mönster är de avsedda att fokusera på ett enskilt ämne. Kort har rundade hörn, innehåller svaga skuggor som indikerar att de är över en yta och om de är alla på samma plan kallas de som en "samling".
I den här "How To" kommer vi att skapa ett kort baserat på specifikationen. Istället för att skapa kortet med en mängd olika bild- och ritverktyg kommer vi att komma åt det från en annan riktning. Vi kommer att använda verktygen i Adobes Experience Design, som för tillfället finns i en Macintosh-bara offentlig förhandsgranskning och är gratis. Du kan ladda ner det här.
Låt oss börja.
02 av 06Skapa prototypen i Adobe Experience Design CC
Det finns ingen uppenbar väg att skapa en Android-skärm från startskärmen i Experience Design CC (XD). Vad vi brukade göra när vi öppnar XD är att välja alternativet iPhone 6 och när gränssnittet öppnas väljer vi verktyget Artboard längst ner på Verktygsfältet och väljer Android Mobile från valen på panelen Egenskaper till höger. Då byter vi över till urvalsverktyget, klickar en gång på iPhone-tavlan och tar bort tavlan. Inte mer.
I den nuvarande versionen av XD finns en liten pil bredvid iPhone 6, som, när den klickas, öppnar en rullgardinsmeny. Därifrån väljer du Android Mobile versionen och den valda Android Mobile-tavlan öppnas i gränssnittet.
För att säkerställa att vi har rätt skärmutrymme öppet för kortet går vi vanligtvis över till Sketch 3 och kopiera och klistra in en statusfält, navfält och appfält från materialdesignmallen till tavlan. Sketch 3.2 innehåller en mall för mallar för design (Arkiv> Ny från mall> Materialdesign) och en annan riktigt bra fri är från Kyle Ledbetter som du kan få här. Om du inte har skiss kan du kopiera och klistra in dem från de XD-klistermärken som finns i Arkiv> Öppna UI-kit> Google Material. Du kan också hämta dem från Google för användning i Photoshop, Illustrator, After Effects och Sketch.
03 av 06Lägga till ett materialdesignkort till en Adobe XD CC Artboard
En av de mest användbara funktionerna i XD är införandet av användargränssnitt för Apple iOS, Google Material och Microsoft Windows. I många avseenden lägger de ordet "Rapid" till termen "Rapid Prototyping". Dessutom gör de designerns arbete enklare, eftersom gemensamma UI-element inte behöver återskapas ständigt i en designapplikation som Photoshop, Illustrator eller Skiss.
UI-elementet vi behövde var ett kort. För att komma till det valde vi Arkiv> Öppna UI-kit> Google Material och satsen öppnade som ett nytt dokument. Elementet vi behövde hittades i kategorikortet.
Vad vi älskar om dessa följer de specifikationerna för materialdesign enligt vad som anges i innehållsblockspecifikationerna samt textformaterings- och distansspecifikationerna som anges i typografi-specifikationen.
Kortstilen vi ville ha var den längst ner till vänster. Vi markerar det enkelt med musen och kopierar det till urklippet. Tyvärr innehåller XD inte ett flikgränssnitt för öppna dokument. Vad vi gör är att flytta det öppna dokumentfönstret lite för att avslöja det vi jobbar med, välj det och klistra in. Ett annat sätt att snabbt växla mellan öppna XD-dokument är att tryck kommando- '.
04 av 06Hur man redigerar ett materialelement i Adobe Experience Design CC
När kortet i XD kommer från klippbordet börjar du inte gärna jobba med det. Det första du behöver göra är att ta upp kortet eftersom du behöver tillgång till den bit och bitar som komponerar kortet. För att göra detta, välj kortet och välj Objekt> Ungroup eller tryck på Shift-Command-G.
Ditt kort består nu av tre stycken:
- Ljusgrå ruta för bilden.
- Medium grå ruta för texten
- Bakrutan används som bakgrund.
Det första steget är att ta bort den ljusgrå rutan. Dess enda syfte är att fungera som platshållare för bilden som gör det, om du väljer, valfritt.
Lådan med texten är faktiskt en mörkgrå med 50% opacitet. Den här rutan kan användas som textbakgrund och du kan ändra färg och rutans opacitet.
Även om det inte är omedelbart uppenbart följer den ljusgrå rutan Material Design-specifikationen genom att dess översta hörn är avrundade med 2 pixlar. Tänk på om du lägger till en bild. Det kommer också att behöva de avrundade hörnen som kan läggas till en bildbehandling eller i XD.
Att se hur det här är vilodag på kortet, det behöver också en skugga. Specet gör det klart att det finns en viloprovning av kortet med 2 pixlar. För att lägga till detta, välj den svarta bakgrundsformen och ställ in värdena Y och B (Blur) till 2 i egenskapspanelen.
05 av 06Så här lägger du till en bild på materialdesignkortet i Adobe XD CC
Att veta kortet är 344 pixlar bredt och bildområdet är 150 pixlar högt ( halva höjden på den ljusgrå rutan ) Vi öppnade bilden i Photoshop, beskärde den till storleken och sparade den med alternativet @ 2x i Photoshop Exportera som dialog ruta. Bilden importerades till Adobe XD.
Vi släpade sedan den ljusgrå rutan över bilden på pasteboarden och valdes Objekt> Mask med form. Resultatet var bilden som plockade upp de rundade hörnen av formen. Vi flyttade sedan bilden till sin slutliga position.
Med bilden på plats ändrade vi sedan bakgrundsfärgen på Medium Gray-rutan, ändrade texten och färgen på länktexten.
06 av 06Använda Adobe XD CC Grid Feature
Med kortet färdigt måste det nu placeras korrekt enligt Material Design-specifikationen. Det betyder att det finns 8 pixlar på vardera sidan av kortet och kortet måste vara 8 pixlar under appfältet. För att göra detta klickar du en gång på listpostens namn och väljer Grid i Egenskaperpanelen. Ristet visas över tavlan.
Standardnätstorleken är 8 pixlar, som råkar vara samma gallerstorlek för materialdesign. Om du behöver en annan storlek ändrar du värdet i rutnätet. Om du vill ändra färg på rutnätet klickar du på färgchip och väljer en färg från den resulterande färgväljaren.
Med gallret synligt, klicka på kortet och flytta det till sin slutliga position.
För att avsluta valde vi kortet, klickade på Repeat Grid-knappen och ändrade mellanrummet mellan korten till 8 pixlar också.
