Den här inspirerande, livfulla och vackra designstilen blir snabbt populär bland designers och är verkligen en stor ansträngning från Google för att föra samman visuell design, rörelsedesign och interaktionsdesign över olika typer av plattformar och enheter. Med hjälp av djärv grafisk design, taktila ytor och flytande rörelser, ger detta innehållsfokuserade designspråk enhetliga, lekfulla och intuitiva upplevelser till användarna.

Ursprungligen skapades Material Design för L-utgåvan av Android, men senare applicerade Google den på hemskärmarna i Dokument, Kalkylark och Presentationer. Inspirerade av detta började designers använda materialdesign för webbplatser de skapar. I det här blogginlägget tar jag dig på en rundtur i Material Design-konceptet och utforskar även hur du kan använda det i dina kommande webbdesignprojekt.

Låt oss börja!

Grundläggande principer för materialdesign

Materialmetafor:

Materialdesign lägger stor vikt vid att göra element, animationer och övergångar lika verkliga som de ser ut i verkligheten. Efter intensiva studier av papper och bläck beslutade Google-teamet att använda en materiell metafor som den enhetliga principen om ett rationaliserat utrymme och ett rörelsesystem. I ett nötskal kan vi säga Materialdesign är inget annat än en kombination av olika klassiska designkoncept och grundläggande fysiska egenskaper.

Påtagliga ytor:

I materialdesign etablerar ytor och kanter på materialet en fysisk struktur för att ge användarna visuella ledtrådar som hjälper dem att snabbt förstå vad de kan röra vid och röra på. Genom att använda principerna för tryckdesign håller materialdesign det viktiga innehållet framför användarens öga, samtidigt som annat mindre användbart innehåll ignoreras. Användningen av välbekanta, intuitiva och naturliga attribut gör att användarens hjärna kan arbeta mindre och snabbt förstå möjligheter.

Dimensionella förmåner:

Om det finns en bunt papper på ditt skrivbord får de dimension samtidigt som de skyddar sina skuggor. På samma sätt, i materialdesign, när du tillämpar den här egenskapen på användargränssnittet, kommer du att ha hierarki och skuggor för att dra en användares uppmärksamhet till det viktigaste objektet de ska interagera med. Med hjälp av grunderna för ljus, yta och rörelse förmedlar materialdesign hur ett objekt kommer att interagera med användarna. Dessutom låter realistisk belysning användare få den mest realistiska bilden av gränssnittet du har designat.

En adaptiv design:

Materialdesign använder ett enda underliggande designsystem för att organisera utrymme och interaktioner. Konceptet med en adaptiv design ger koherens mellan olika enheter, vilket innebär att en enhetlig design skapar specialiserade vyer för olika typer av enheter. Varje vy är skräddarsydd på ett unikt sätt för interaktionen och storleken som är lämplig för en viss enhet. Å andra sidan görs inga ändringar i hierarki, ikonografi, färger och rumsliga relationer.

Fet och avsiktligt innehåll:

En annan sak du kommer att märka med detta nya visuella språk är dess djärva design med ljusa färgscheman. Med hjälp av vägmarkeringsband, modern arkitektur, vägskyltar och sportbanor har Google introducerat fantastiska och livfulla färger som du aldrig hade förväntat dig. Dessutom har de förfinat Roboto-teckensnittet i stor utsträckning, vilket gör det något bredare och rundare för att göra läsningen till en bättre upplevelse. Dessutom skapar avsiktligt vitt utrymme och kant-till-kant-bilder klarhet och fördjupning.

Betona åtgärder:

Materialdesign lägger stor vikt vid att göra interaktionen mellan användare och ytor mer digital, magisk och lyhörd. I denna designstil, när någon interagerar med användargränssnittet, förvandlas hela designen på ett överraskande sätt. Det grafiska uttrycket med färg, yta och ikonografi ger användarna en tydlig uppfattning om vad ett objekt kan göra, medan responsiv interaktion uppmuntrar användaren att på djupet utforska gränssnittet: om jag rör vid detta, vad händer? Och vad händer sedan?

Användarinitierad ändring:

När en person rör vid vattenytan och gör vågor, ger energin som kommer från hans handlingar för att göra förändringar i gränssnittet honom en verklig och påtaglig upplevelse. På samma sätt gör materialdesign det möjligt för användare att beröra användargränssnittet som de gör i sitt verkliga liv. För detta föreslår Google designers att ta hänsyn till en extra dimension av interaktion, som är "rörelsefeedback", så att användaren kan känna att de hörs av ytan när de rullar, drar, glider och trycker.

Animationskoreografi:

I den verkliga världen har varje handling en rörelse, början och slut. Till exempel, när du öppnar en kartong i det verkliga livet, knackar du någonstans på den och visar vad som finns inuti. På samma sätt sker alla användaråtgärder i materialdesign i en enhetlig miljö. Varje objekt presenteras för användaren med en snabb, smidig och kontinuerlig animering som koreograferas på en delad scen. När alla tillgångar inom materialdesign rör sig i en rytm framstår skärmen som mer fängslande och interaktiv än någonsin.

Meningsfull rörelse:

Som vi alla vet är användarupplevelsen viktigare än något annat för Google. Samma regel gäller den sista principen för materialdesign. Denna princip säger att rörelse ska vara lämpligt, meningsfullt och noggrant koreograferat, och får inte användas bara för att imponera på användarna. Rörelse i materialdesign ska inte bara vara vacker, utan också skapa mening om funktionalitet och rumsliga relationer tillsammans med att behålla skönheten och enkelheten i en sömlös användarupplevelse.

Implementera materialdesign för webben med polymer

Ännu inte bekant med Polymer? Väl! Polymer är en fantastisk UI-verktygssats som gör att du kan ta materialdesign till webben. Med papperselementsamlingen av Polymer kommer du att ha tillgång till alla möjligheter för materialdesign och kunna ge handgriplighet, djärv grafik och smidiga övergångar och animationer till dina applikationer på webben. Du kan se polymer- och materialdesignmönster i aktion med Topeka, en rolig frågesportapp.

Nu ska jag utforska Polymers papperselement och visa dig hur du kan använda detta nya designparadigm i dina webbprojekt.

Komma igång:

Polymers guide för att komma igång levereras med en kort handledning och startprojekt för att hjälpa dig att bli bekant med nyckelbegreppen för Polymer. Först måste du ladda ner startprojektet som innehåller alla beroenden och bibliotek som krävs för att arbeta med Polymer. När du har laddat ner startprojektet, packa upp det någonstans på din lokala enhet.

Innan du ska börja behöver du en snabb HTTP-server som körs. Om du redan har Python installerat, kör något av följande kommandon på den översta nivån i exempelprojektet.

Python 2.x:

python -m SimpleHTTPServer

Python 3.x:

python -m http.server

Ladda nu den färdiga versionen av projektet för att testa webbservern. Till exempel, om den lokala servern lyssnar på port 8000:

http://localhost:8000/finished/

Installera papperselement:

Efter det måste du installera papperselement på något av följande tre sätt:

Zip: Ladda ner Zip -fil och packa upp den till din projektrot.
Bower: Kör detta kommando ovan från projektroten:
```
bower install Polymer/paper-elements
```
För mer information, gå igenom installationen med Bower.

Github: Kör detta kommando ovan från projektets rot:

git clone https://github.com/Polymer/paper-elements.git components/paper-elements

När du har fått papperselementen i din projektrot importerar du komponenten genom att inkludera följande kod i din HTML-fil:

<link rel="import" href="components/paper-elements/paper-elements.html">

Använda material UI-komponenter:

Precis som Foundation och Bootstrap är Polymers papperselementsamling packad med dialogrutor, flikar och formulärkontroller. Nedan är listan över standardkomponenter för användargränssnitt som ingår i papperselement:

pappers-knapp
kryssruta för papper
pappers-dialog-övergång
pappersdialog
papper-rullgardinsmeny
pappers-fab
pappersfokuserbar
pappers-ikon-knapp
pappersinmatning
pappersobjekt
pappers-meny-knapp
pappersframsteg
papper-radioknapp
pappers-radio-grupp
pappers-rippel
pappers-skugga
pappers-slider
pappersspinnare
pappersfliken
pappersflikar
papper-toast
pappersväxlingsknapp

Ikoner är en annan viktig del av materialdesign. Polymers <core-icon>element ger ett antal ikoner som du kan använda. Du kan installera kärnikoner på samma sätt som du har installerat papperselement.

På grund av sin deklarativa karaktär är papperselement lika lätta att använda som komponenter i andra front-end-ramverk. Nedan har jag visat implementeringen av några mest använda UI-element i materialdesign.

pappersmeny-knapp:

För att skapa en enkel menyknapp som öppnar en rullgardinsmeny när du klickar på den, måste du använda följande kod:

<paper-menu-button icon="menu">
<div>Web Design</div>
<div>WordPress</div>
<div>JavaScript</div>
<div>HTML5</div>
<div>Responsive</div>
</paper-menu-button>

Förhandsgranskningen av menyknappen kommer att se ut ungefär så här:

pappers-fab:

Det <paper-fab>är en flytande åtgärdsknapp som används för främjade handlingar. För att skapa en flytande åtgärdsknapp måste du använda koden nedan:

<paper-fab icon="favorite"></paper-fab>

Dessutom kan den flytande åtgärdsknappen storleksändras mindre genom att använda klassen mini.

<paper-fab class="mini"></paper-fab>

pappersflikar:

Du kan skapa flikar med följande kod:

<paper-tabs selected="0">
 <paper-tab>ITEM ONE</paper-tab>
 <paper-tab>ITEM TWO</paper-tab>
 <paper-tab>ITEM THREE</paper-tab>
</paper-tabs>

pappersinmatning:

Det <paper-input>är ett textfält med en eller flera rader där användare kan ange önskade värden. Detta papperselement kan valfritt ha en etikett.

<paper-input label="User Name"></paper-input>
<paper-input multiline label="Keep Multiple Lines Here"></paper-input>

pappersdialog:

Elementet <paper-dialog>används för att rendera en dialogruta. Till exempel:

<paper-dialog heading="Dialog">
<p>Lorem ipsum ....</p>
<p>Id qui scripta ...</p>
<paper-button label="MORE INFO..." dismissive></paper-button>
<paper-button label="DECLINE" affirmative></paper-button>
<paper-button label="ACCEPT" affirmative autofocus></paper-button>
</paper-dialog>

pappersskugga:

Elementet <paper-shadow>hjälper dig att lägga till skuggeffekter till element. Detta görs genom att kapsla <paper-shadow>elementet inuti en <div>.
Skuggan kan appliceras på ett element genom att deklarera det som målet.

<div id="myCard" class="card"></div>
<paper-shadow id="myShadow" z="1"></div>
myShadow.target = document.getElementById('myCard');

Om du inte tilldelar ett element som mål, kommer skuggan att appliceras på det överordnade elementet i paper-shadow-elementet.

<div class="card">
<paper-shadow z="1"></paper-shadow>
</div>

Alternativt kan du direkt använda CSS-klasser av ett element.

<div class="card paper-shadow-top paper-shadow-top-z-1">
<div class="card-inner paper-shadow-bottom paper-shadow-bottom-z-1"></div>
</div>

Övergångar:

Som jag nämnde tidigare är animationer och övergångar viktiga aspekter av materialdesign. Där animationer förbättrar användarupplevelsen avsevärt, å andra sidan, ger övergångar ett vackert, engagerande och sömlöst sätt att leda användarna till nästa steg. Polymers kärnelement används för att hantera övergångar samtidigt som man växlar mellan två sidor.

För att se olika typer av övergångar i aktion föreslår jag att du besöker följande demolänkar för element och Topeka-appen.

Det handlar om materialdesign!

Vad tycker du om Material Design-konceptet? Vilka är chanserna för materialdesignstil att få framgång inom webbdesign? Är detta koncept framtiden för webbdesign?

Du kan dela din åsikt genom kommentarsfältet nedan!