Share
Inte för länge sedan introducerade Google Material Design, en helt ny uppsättning riktlinjer för såväl designers som utvecklare. Material Design introducerar ett nytt perspektiv på användargränssnitt, rörelse och interaktionstillstånd och är en utmärkt grund för dig att bygga en produkt på.
I huvudsak kan du sammanfatta Googles materialdesign med två komponenter:
Material ger kontext i konstruktion, ytan och kanten av ett "material" ger oss visuella signaler. Låt oss jämföra detta med det verkliga livet. Vi förstår dimensionerna i ett rum, för vi ser väggar. Samtidigt ger interiören oss en förståelse för rummets sammanhang. Ditt kök ser väldigt annorlunda ut än ditt badrum.
Samma sak gäller Material Design. Kombinationen av stil och innehåll ger sammanhang till användaren i ett digitalt utrymme, mycket som fysiska väggar och interiörer. En användare har en bättre förståelse för användargränssnittet, eftersom det konstruerade materialet ger sammanhang för gränssnittet.
Ett kort ger kontextuell design och är ett vanligt förekommande element i Material Design. Ett kort ger sammanhang i sig, liksom genom att ha ett förhållande till andra kort.Konceptet av Rörelse i Material Design har en mycket liknande historia. Motion ger sammanhang i en design genom strömma av en ansökan, särskilt när det gäller kontinuitet av en produkt har en användare känslan av att vara oavbruten. Det finns inga hinder, såsom inkonsekvens i design eller en förvirrande navigering.
Hur exakt fungerar rörelse? Här är ett exempel. Det finns en hemmatning som består av en lista med kort. När du knackar på ett enda kort expanderar kortets material för att bli full bredd och höjd på skärmen i stället för dimensionerna för ett enskilt kort.
Lägg märke till hur det här exemplet gäller både material och rörelse. Ett kort är materialet. När en användare interagerar med det, kommer det genom rörelse att expandera för att visa mer innehåll. Detta ger kontinuitet åt användaren eftersom det visar hur deras inmatning påverkar användargränssnittet.
Låt oss utforska materialet lite mer. I huvudsak är materialet kombinationen av dina statiska designelement. Tänk på former, färg, typografi och olika verktyg du använder för att skapa mönster. Allt detta utgör tillsammans ett material.
Färg är en stor sak för såväl konstruktörer som användare. Det har en enorm mängd inflytande på utseendet på en design, liksom de psykologiska effekterna på en användare. Färg kan göra en design trovärdig, spännande, utilitaristisk och mycket mer. I Material Design har vi tillgång till en stor palett av färger, som vi kan använda som grund för att designa en produkt.
Jag rekommenderar starkt att följande färgreferens sparas som ett bokmärke, det är en praktisk hänvisning till att designa en färgpalett för ett användargränssnitt.
Roboto, standardfonten för Android, har blivit polerad för att förbättra den för användning på flera plattformar. För designers som inte är mycket bekant med typografi, tillhandahåller Material Design riktlinjer som hanterar typografiutformningen för dig.
Det enklaste sättet för dig själv att komma igång med detta rutnät är att ladda ner följande klistermärke. Riktlinjerna ger dig en struktur för din typografi när du börjar en ny design.
Att utforma en layout i Materialdesign använder några av kärnprinciperna för tryckdesign, vilket Google indikerar som inspirationskälla för Materialdesign. Det finns en stark tonvikt på att bygga användargränssnitt som är välskala mellan olika typer av enheter. Som du är medveten har skalbarhet blivit avgörande för att designa produkter som lyckas på flera enheter.
Denna illustration visualiserar begreppet djup i användargränssnitt.Ett av kärnbegreppen är stapling. När du utformar ett användargränssnitt med materialdesign använder du droppskuggor, kontrast i färg och z-positionering för att ge användaren en känsla av djup i användargränssnittet. Djup skapar sammanhang för användare. Flytande element ovanpå staplar, som en knapp, betonar uppmaningen till ett användargränssnitt.
Exempel på tre lager djup: en meny, den övre navigeringsfältet och innehållsområdet.För mer avancerade konstruktörer innehåller riktlinjerna grunnlinjer. Metrics och keylines-sidan i riktlinjerna för materialdesign går i stor detalj och ger dig resurser att experimentera med.
Om du hellre vill arbeta med en förlagd layout kan du ladda ner Googles vita rammall.
Exempel på en designad layout. Motion går hand i hand med material som beskrivits tidigare i kortexemplet. Motion är det som gör designmaterialet levande.
När du börjar lära dig grunderna för rörelsedesignen är en av de första principerna du lär dig om lättare.
När du underlättar en animering, försöker du göra en rörelse mer naturlig. Istället för att animera rörelsen för ett objekt med en jämn hastighet ökar du hastigheten i början av animationen och sänker hastigheten i slutet av animationen.
Tänk på en rörlig bil i trafik och hur en bil accelererar och bromsar, det är en väldigt naturlig rörelse. Easing försöker replikera det, så en användare anser att ett objekts rörelse är naturligt.
Det enklaste sättet att lära känna easing är att se några design exempel. Följande resurser är ett bra bokmärke:
Denna illustration visar lättnad, som finns i "Animationsprinciper i UI Design: Understanding Easing".När en användare interagerar med ett designelement, bör elementet i de flesta fall ge feedback. I Material Design är målet att glädja användaren med rörelseåterkoppling samt tillhandahålla sammanhang för det material som användaren interagerar med. Den snygga rörelsen är att du erkänner användarens handling, vilket förbättrar användbarheten hos din produkt.
Det vackraste exemplet jag har sett är touch Ripple, en visuell höjdpunkt när användaren interagerar med ett visst element.
Ett annat exempel är att öppna eller expandera element. När du trycker på ett visst element för att expandera det, expanderar nytt material från den punkt som användaren rörde. Tillväxten av ett element känns naturligt när det växer direkt från mitten av användarens beröring. För mer exempel på responsiv interaktion, besök Googles materialdesignwebbplats.
Sist men inte minst, övergångar mellan gränssnitt är viktigt för responsiv interaktion. Det är den viktigaste formen av rörelse för att utforma kontinuitet för användaren. För inkommande och utgående skärmar ger ursprungspunkten kontext. Ett användargränssnitt kan växa och expandera dynamiskt, vilket ger designers gott om utrymme att spela med vackra övergångar. Och bäst av allt kan de göra dem meningsfulla.
Nedan följer några bra exempel på Material Design skapad av utmärkta designers.
Google - Materialutforskning av Aurélien Salomon
Larm Material UI av Ehsan Rahimi
Aviasales L (Material Design) av Mark MDetta är en kort introduktion till Material Design. Om något av ovanstående gav upphov till ditt intresse rekommenderar jag starkt att läsa mer i officiella riktlinjer av Google.
Var vänlig kontakta Material Design med en kreativ inställning. Mycket av det som presenteras är en påminnelse om vad som gör stor design stor. Samtidigt är de endast riktlinjer, vilket innebär att för att växa som designer är du mer än välkommen att ge den en egen vridning.
Jag uppmanar er alla att skapa en design med dessa riktlinjer i åtanke. Det kan innebära att du tar ett annat tillvägagångssätt än vanligt, vilket är bra att behålla dina färdigheter på kanten och växa som designer.
Vad tycker du om Material Design? Vad har dina erfarenheter varit så långt? Vänligen dela det nedan i kommentarerna, jag är väldigt nyfiken och jag är säker på att många andra är lika bra.
Accentsconagua