En titt på Googles materialdesign

Under det senaste I / O-evenemanget 2014 kom Google tillbaka med sina nya överraskningar. Förutom officiellt släppt den nya Android-uppdateringen med kodnamn Lollipop, introducerade Google också sitt nya nya designspråk, Materialdesign. Det är ett designsystem som inte bara är avsett för de nya förbättringarna av Lollipop-användargränssnittet, utan också för alla enheter och miljöer.

Materialdesign har några viktiga funktioner som skiljer den mellan andra designtrender med sina egna unika sätt. Precis som namnet var det inspirerad av riktiga material och kombinerade dem i ett designsystem för att skapa elegant, intuitiv, vacker och mest interaktiv användarupplevelse. I det här inlägget tittar vi på vad som finns i Materialdesign och ger dig en snabb guide om hur du implementerar den. Genom att citera Googles blogg kommer jag att säga "Detta är materialdesign".

En introduktion

Materialdesign är ett enhetligt designsystem, vilket innebär att det gjordes för att fungera med alla tillgängliga dagens enheter och plattformar. Från surfplatta, smartphone till skrivbord och från Android, iOs, Windows till webbplattformar. All design ser ut och känns ska vara densamma varhelst den är.

Huvudprinciper

Det finns tre huvudprinciper som konstruerar materialdesign. Dessa är den mest grundläggande delen av vad Material erbjuder i allmänhet.

• Material är metaforen. Utvecklingen av Material inspirerades av studien av taktila element som vi använder varje dag, papper och bläck. Det gör föremålet ljus, yta och rörelser är bättre när de interagerar med varandra.

• Djärv, grafisk och avsiktlig. Typografi, rutnät, utrymme, skala, färg och användning av bilder som används i den tryckbaserade designfundamentet gör materialets innehåll bättre.

• Rörelse ger mening. Detta är en av de mest noterade sakerna. I Material bör du ha meningsfull och lämplig rörelse, subtil och tydlig feedback och effektiv och sammanhängande övergång.

Komponenterna

Materialdesign uppmärksammar alla detaljer i dess komponenter så att de kan användas universellt. Dessa komponenter hjälper dig att bygga fantastisk app och webbplats. Det finns så många komponenter som tillhandahålls av material som knappar, switch, kort, textinmatning, fab (flytande åtgärdsknapp), dialog, toast, undermeny, flik och mer. Var och en av dem har sin egen regel och guide om hur man bygger dem så att du inte har några viktiga element.

Patterns Thing

Förutom komponenter ger Material dig också några grundläggande mönster för ytterligare användargränssnitt. Dessa mönster förbättrar användargränssnittet du skapade med Materials komponenter. Mönstren inklusive dataformat, navigeringslåda, fel, gester, rullningsteknik, sökning, inställningar, laddning av bilder, svep för att uppdatera och mer.

Materialdesignfärger

Färgerna i Material hade designats på ett sådant sätt att du inte känner dig obekväm, konstig och platt. Med inspiration från våra dagliga miljöer som vägskyltar, modern arkitektur, markeringstejp för trottoarer och sportbanor ger Material Design dig oväntade och livfulla färger. Det finns så många färgpalett att välja vilket ger dig mer bekvämlighet när du utvecklar appar eller webbplatser. Du kan också ladda ner färgrutorna för lokal användning som för din Photoshop-samling.

Materials ikon

Om du är en Android-utvecklare måste du känna till några gratis ikonpaket som Google tillhandahållit. De används vanligtvis endast för huvudelement och actionfält. Medan vi letar efter andra resurser måste vi söka efter andra ikoner som mapp, fil, kopiera och klistra in manuellt. I Material Design har Google åtgärdat problemet med massor av ikonpaket du kan använda.

Var och en av ikonerna har gått igenom någon designmetod som också använder studiet av taktila material. De upprätthåller också materialprincipen, det är konsekvent. Du kan ladda ner dessa ikoner på GitHub, de kommer med något alternativ för olika användningar som för iOS, webb, Android eller svg. Om du vill ha ett bredare alternativ för enkel anpassning, vill du antagligen se Ikonpaket för materialdesign på FlatIcon. Inuti förpackningen får du ikonvektorn (SVG & EPS), PSD och PNG-versionen.

Materialets animering

Det här är de materialfunktioner som jag gillar mest. Animationerna i Material är så verkliga och intuitiva. Varje animation har en meningsfull, konsekvent och rätt timingövergång. Gif-demo som visas nedan är bara en av vackra materialanimationer. För att ge engagerande och lyhörd interaktion skapar Google-team också animering för vattenkrusning för användarinmatningseffekt. Det används mest på knappar och kort.

De funktioner jag förklarade är bara en liten del av vad Material Design erbjuder. För att lära dig mer om Materialvärlden, gå bara till dokumentationssidan.

Genomförande

Som standard kommer Material Design som den nya UI-uppdateringen för Android Lollipop. Alla riktlinjer som Material har applicerats inuti. Eftersom Material är riktat för alla typer av miljöer är det inte svårt att implementera det i ett annat system. Och tack vare samhällen är det ännu enklare med några verktyg de skapade.

Det här är flera sätt du kan uppnå för att få Material Design utanför Android, till exempel webb.

Använda CSS Frameworks

Detta är det enklaste sättet om du vill implementera Materialdesign i webbplattform. Med ramar är allt du behöver göra att initialisera det och sedan skriva elementen du behöver. Det finns många ramar du kan använda som Materialize, Material UI eller Polymer för att nämna några. Mitt personliga val faller inom Materialize. Det är lättare att använda och förstå och ha bra dokumentation med trevlig demo.

Följ riktlinjerna

Om du vill implementera material utan hjälp av ramverk och föredrar att röra med koder mest måste du följa riktlinjer för material. Där hittar du alla saker och ting som du bör märka för att uppnå väsentliga principer. Du ser all grundläggande guide för att skapa komponenter, layout, animering, färg, mönster och mer. Du kanske vill se någon materialchecklista för enklare utveckling.

Slutsats

Materialdesign är ett fantastiskt designsystem och har blivit en av årets mest efterlängtade trend. Under de närmaste månaderna kan vi se det överallt. Fler appar och webbplatser kommer att poleras med den här nya Googles designuppdatering.

Och med materialdesign har Google visat sin överlägsenhet som ett av de största tekniska företagen. Det gör Google inte bara ledande inom sökmotorer och mobila operativsystem utan också inom designfältet. Nu finns det inga andra företag som utvecklar den här stora saken som Google gjorde. Men erfarenheten säger att det inte kommer att pågå länge. Låt oss bara vänta på att andra företag svarar på Googles materialdesign.