Har du nog hörsel av frasen? Materialdesign? poppar upp i konversationer. Konceptet är ganska nytt; den introducerades på sommaren och hänvisar till ett nytt design språk från folk på Google.
Men materiell design är mer än bara en idé; Det är troligt att konstruktörer helt och hållet tänker på web- och appdesignprocesser. Webbplatser börjar redan utarbeta designscheman med hjälp av Googles materialdesigndokumentation. Så nu är det dags att lära sig vad det handlar om och om en materiell designram är i din framtid.
Vad är materialdesign?
Materialdesign är ett visuellt språk skapat av designteamet på Google för att hjälpa designers att skapa webbplatser och appar som är tillgängliga, praktiska och användbara. Konceptet är baserat på ett levande dokument som är offentligt tillgängligt. Dokumentationen uppdateras ständigt för att spegla ändringar i räckvidd och teknik.
Materialdesign bygger på en uppsättning mål och principer som är enklare att tänka på än att uppnå. (Men det är okej. Tanken är att tänka mer om design och hur man kan förbättra det.)
Material design mål:
- Skapa ett visuellt språk som syntetiserar klassiska principer för bra design med innovation och möjlighet till teknik och vetenskap.
- Utveckla ett enda underliggande system som möjliggör en enhetlig upplevelse över plattformar och enhetsstorlekar. Mobila föreskrifter är grundläggande, men peka, röst, mus och tangentbord är alla? Första klassens inmatningsmetoder.
Material design principer:
- Material är metaforen: Visuella signaler bör grundas i verkligheten
- Fet, grafisk, avsiktlig: grundläggande designteori (användning av typ, galler, utrymme, skala, färg och bilder) bör vägleda visuella
- Motion ger mening: Flytta objekt eller åtgärder bör inte störa användarupplevelsen och ge koherens
De ledande faktorerna för materialdesign är många. (Dokumentationen är ganska imponerande.) Den bryter ner till en rad olika begrepp och behandlingar. Google har kommit med en uppsättning regler? för hur man skapar animering, stil, layouter, komponenter, mönster och användbarhet.
Alla dessa riktlinjer börjar med förståelse av grundläggande fysiska, transformerande och rörelseegenskaper för materialdesign. Den ledande teorin är att materialet är baserat i verkligheten, där föremål ligger i ett nästan 3D-utrymme. När det gäller estetik faller det mellan storleken på plattform och skeoumorfism.
Färg och typografi
Materialkonstruktionens färgkoncept låter ganska lite från plandesignen. Paletterna är djärva och ljusa. Typografi följer även det platta temat med enkla sans serifs.
? Färgen är inspirerad av djärva färgdeklarationer i stället för dämpade miljöer, med signaler från samtida arkitektur, vägskyltar, beläggningstejp och sportbanor? enligt materialdesigndokumentation. ? Betona djärva skuggor och höjdpunkter. Presentera oväntade och levande färger.?
Vad som är bra om färgkoncepten är användningen av distinkt kontrast. I varje exempel kan du se? Design School 101? teorier i aktion. Google tillhandahåller en komplett färgpalett med nedladdningsbara korrigeringar. Färgkoncept är så grundläggande att du måste undra om Google tycker att designers har glömt färgteori.
Typografi riktlinjer är lika grundläggande. En standard typsnitt för alla applikationer - Roboto, standard för Android-applikationer - är försedd med en hämtningslänk och en stege för typsnitt.
Layout och design
Grundutformningen och designstrukturen för materialprojekt är född ur tryckkonceptkoncept. Designers uppmuntras att skapa och använda ett baslinje och matematisk struktur till placering av element.
Layouten bryter vidare ner i regioner som föreslår hur och var att placera element för optimal användarinteraktion. (Det finns också riktlinjer för hur stora delar ska vara.)
Och varje koncept har en nedladdningsbar mall för att skapa för Android. Riskerna slutar med en design som är för cookie-cutter eller har en app som ser ut? För Android? tryckt ut för dem som älskar iOS.
Gemensamma element
Någon element i materialdesign beskrivs i detalj. Från hur man skapar den till var den ska visas på skärmen, skulle det vara svårt att visualisera något som inte är här. (Listan innehåller 19 komponenter för att vara exakta.)
- Bottenark
- Knappar
- kort
- Pommes frites
- dialog~~POS=TRUNC
- avdelare
- galler
- listor
- Lista kontroller
- menyer
- plockare
- Framsteg och aktivitet
- sliders
- Snackbarar och skålar
- Subheaders
- Växlar
- flikar
- Textfält
- verktygstips
Designers som gillar utseendet på utvalda komponenter kan till och med hämta en Adobe Photoshop Illustrator-fil som innehåller alla element och Android-systemikoner. Klisterbladen är komplett med stilar och följer det föreslagna nätet.
Användbarhet och interaktion
? En produkt är tillgänglig när alla - oavsett förmåga - kan navigera, förstå det och använda den för att uppnå sina mål. En verkligt framgångsrik produkt är tillgänglig för bredast möjliga publik.Materialdesigndokumentation öppnar våra ögon för mönster för interaktion och användbarhet och tillgänglighetshänsyn på ett sätt som är ganska användbart. Medan många av de verkliga estetiska egenskaperna kan känna sig grundläggande för erfarna designers, är några av användbarhets- och interaktionskoncepten saker som behöver beaktas.
Sektionen av interaktionsmönster är speciellt användbar. Det beskriver en uppsättning idéer för att göra vissa element universella över design. (Tänk på saker som hur man skriver ut en tid eller ett datum eller hur sökningen ska fungera.) Det här är några av de mest grundläggande verktygen som användarna förväntar sig att arbeta och för att de ska fungera specifikt för alla användare är en bestämd fördel.
Tillgänglighet är en annan verklig angelägenhet och en som beskriver materialdesigndokumentation och gav bra alternativ till. Tänk på att användare som kan interagera med en webbdesign på ett sätt som inte innehåller ljud eller färg, med hög kontrast aktiverad, med förstorad skärm, utan en synlig skärm eller med enbart röststyrning eller ens en kombination av dessa element kan stå för en betydande användargrupp.
10 Material Design Resurser
Materialdesignen dyker upp överallt. Det finns massor av saker att ladda ner direkt från Google, men andra utvecklar sätt att använda det också. Här är några resurser som hjälper dig att utforska materialkonceptkoncept.
- Google-layoutmallar för mobil-, tablett- och skrivbordsramar
- Materialdesign för Bootstrap
- Angular.js Materialprojekt
- Polymer Designer
- Materialisera Front-End Framework
- Material färgpalett
- Materialinteraktion
- Materialdesign på Android checklista
- Materialdesign Skissmall
- Gratis material UI-kit
Material Design Gallery
Som med alla trender och koncept finns det många webbplatser och mobilappar som redan använder de begrepp som skisseras i materialdesign. Här är fem exempel som visar principerna och hur designers kan arbeta med och experimentera med koncepten.
Runtastic Running and Fitness
Google Inställningar
Ond kanin
Väder Tidslinje
Slutsats
Begreppet materialdesign är en bra. Riktlinjerna är rena och fräscha. Men mest erfarna designers behöver förmodligen inte denna vägledning. Inom dokumentationen innehåller nästan alla idéer en nedladdningsbar fuska. Behöver vi verkligen så mycket hjälp?
Dokumentationen är kul att läsa, får dig att tänka och är en förhandsvisning av saker som snart kommer att översvämma webben. Spela med begreppen, men känner dig inte gift med dem. Design, särskilt när det gäller trender och teknik, förändras så fort vi kan föreställa oss det.
Precis som alla andra designtrender, ramar eller koncept, måste du själv bestämma om koncepten är användbara i dina projekt. Ser du dig själv med hjälp av materialdesign? Varför eller varför inte? Låt oss veta i kommentarerna.