I den senaste 2014-I / O-händelsen kom Google tillbaka med sina nya överraskningar. Förutom officiellt släppt den nya Android-uppdateringen med kodnamnslollipop, introducerade Google också sitt nya nya designsprog, Material Design . Det är ett designsystem som inte bara är avsiktligt för de nya Lollipop användargränssnittet förbättringar, men också för över enheter och miljöer.
Material Design har några viktiga funktioner som skiljer det bland andra designtrender med sina egna unika sätt. Precis som sitt namn inspirerades det av riktiga material och kombinerade dem till ett designsystem för att skapa en elegant, intuitiv, vacker och mest interaktiv användarupplevelse. I det här inlägget tittar vi på vad som finns inom Materialdesign och ger dig en snabb guide till hur du implementerar det. Genom att citera Googles blogg kommer jag att säga, "This is Material Design".
En introduktion
Material Design är ett enhetligt designsystem, vilket innebär att det gjordes för att fungera med alla tillgängliga dagens enheter och plattformar. Från tablett, smartphone till skrivbord och från Android, iOS, Windows till webbplattformar. Alla designutseende och känslor borde vara desamma där det än ä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 vardag, papper och bläck . Det gör objektet ljus, yta och rörelser är bättre när de interagerar med varandra.
- Fet, grafisk och avsiktlig Typografi, galler, utrymme, skala, färg och användning av bilder som används i den skrivbaserade designbasen gör materialets innehåll bättre.
- Motion ger mening . Detta är en av de mest kända sakerna. I Material borde du ha meningsfull och lämplig rörelse, subtil och klar feedback och effektiv och sammanhängande övergång.
Komponenterna
Material Design uppmärksammar varje detalj i dess komponenter så att de kan användas universellt. Dessa komponenter hjälper dig att bygga fantastiskt app och webbplats. Det finns så många komponenter som material som knappar, växlar, kort, textinmatning, fab (flytande åtgärdsknapp), dialogruta, toast, undermeny, flik och mer. Var och en av dem har sin egen regel och vägledning om hur man bygger dem så att du inte kommer att ha några olikkänliga element.
Mönster 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 materialets komponenter. Mönstren inklusive dataformat, navigationslådan, fel, gester, rullningsteknik, sökning, inställningar, laddning av bilder, svep för uppdatering och mer.
Material Design Färger
Färgerna i Materialet hade utformats så att du inte känner dig obekväm, konstig och platt. Med inspiration från våra dagliga miljöer som vägskyltar, samtida arkitektur, beläggningsband och sportbanor, ger Material Design dig oväntade och livliga färger. Det finns så många färgpalett att välja att ge dig mer bekvämlighet när du utvecklar appar eller webbplatser. Du kan också ladda ner färgproverna för lokal användning som för din Photoshop-samling.
Materialets Ikon
Om du är en Android-utvecklare måste du vara bekant med några gratis ikonpaket som Google tillhandahåller. De används vanligtvis endast för huvudelement och actionbar. Medan vi behöver andra resurser måste vi söka efter andra ikoner som för mapp, fil, kopiera och klistra in, etc manuellt. I materialdesign har Google åtgärdat problemet med massor av ikonpaket som du kan använda.
Var och en av ikonerna har gått igenom en del designmetoder som också använder studien av taktila material. De är bibehåller materialprincipen, det är konsekvent. Du kan ladda ner dessa ikoner på GitHub, de kommer med något alternativ för olika användningsområden som för IOS, web, Android eller SVG. Om du vill ha ett större alternativ för enkel anpassning, vill du förmodligen se Material Design ikonpaket på FlatIcon. Inne i paketet får du ikonvektorn (SVG & EPS), PSD och PNG-versionen.
Materialets Animation
Det här är materialets egenskaper som jag gillar mest. Animationerna i Material är så verkliga och intuitiva. Varje animering har meningsfulla, konsekventa och rättvisa övergångar. Den gif demo som visas nedan är bara en av vackra materialanimationer. För att ge engagerande och responsiv interaktion skapar även Google-team vattenrippeliknande animeringar för användarinmatningseffekt. Det används mest på knappar och kort.
De funktioner jag förklarade är bara en liten del av vad materialdesign 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 användargränssnittuppdateringen för Android Lollipop. Alla riktlinjer som Materialet har applicerats inuti det. Eftersom Material är inriktat på alla slags miljöer, kommer det inte att vara svårt att implementera det till ett annat system. Och tack vare samhällena är det ännu mycket 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-ramar
Detta är det enklaste sättet om du vill implementera Materialdesign i webbplattform. Med ramverk är allt du behöver göra att initiera det och skriv sedan de element du behöver. Det finns många ramar som du kan använda som Materialisera, Material UI eller Polymer för att nämna några. Mitt personliga val faller in i materialisera. Det är lättare att använda och förstå och ha bra dokumentation med bra demo.
Följer riktlinjerna
Om du vill implementera Material utan hjälp av ramar och föredrar att rota med koder mest, måste du följa Materialriktlinjer. Där hittar du alla de gör och inte som du bör märka för att uppnå Materialprinciper. Du får se alla grundläggande guider för att skapa komponenter, layout, animering, färg, mönster och mer. Du kanske vill se några material checklista för enklare utveckling.
Slutsats
Materialdesign är ett bra designsystem och har blivit en av årets mest förväntade trender. Under de närmaste månaderna ser vi det överallt. Fler appar och webbplats kommer att bli polerade 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 att Google inte bara leder i sökmotor och mobilt operativsystem men också inom designområdet. Vid det här laget finns inga andra företag som utvecklar denna stora sak som Google gjorde. Men erfarenheten säger att det kommer inte vara länge. Låt oss bara vänta på att ett annat företag svarar på Googles materialdesign.
