Et kig på Google's materiale design

• 2019

I sidste I / O-begivenhed i 2014 kom Google tilbage med sine nye overraskelser. Udover officielt udgivet den nye Android-opdatering med kodenavnet Lollipop introducerede Google også sit friske nye designsprog, Material Design . Det er et designsystem, der ikke kun er beregnet til de nye Lollipop-brugergrænsefladeforbedringer, men også til tværs af enheder og miljøer.

Material Design har nogle store træk, der adskiller det blandt andre designtendenser med sine egne unikke måder. Ligesom dets navn blev det inspireret af rigtige materialer og kombineret dem til et designsystem for at skabe en slank, intuitiv, smuk og mest interaktiv brugeroplevelse. I dette indlæg vil vi se på, hvad der er inde i Material Design og give dig en hurtig guide til, hvordan du implementerer det. Ved at citere Googles blog, vil jeg sige, "Dette er Material Design".

En introduktion

Material Design er et samlet design system, det betyder, at det blev lavet til at arbejde med alle tilgængelige nutidens enheder og platforme. Fra tablet, smartphone til skrivebord og fra Android, iOS, Windows til webplatforme. Alle design udseende og følelser skal være det samme, uanset hvor det er.

Hovedprincipper

Der er tre hovedprincipper, der konstruerer Material Design. Disse er den mest grundlæggende del af, hvad materiale tilbyder generelt.

• Materiale er metaforen . Udviklingen af ​​Materiale blev inspireret af undersøgelsen af ​​taktile elementer, vi bruger hverdag, papir og blæk . Det gør objektet lys, overflade og bevægelser er bedre, når de interagerer med hinanden.

• Fed, grafisk og forsætlig . Typografi, grids, rum, skala, farve og brug af billedsprog, der bruges i den printbaserede designgrundlag, gør materialets indhold bedre.

• Motion giver mening . Dette er en af ​​de mest bemærkede ting. I Materiale skal du have en meningsfuld og passende bevægelse, subtil og klar feedback og effektiv og sammenhængende overgang.

Komponenterne

Material Design lægger vægt på alle detaljer i dets komponenter, så de kan bruges universelt. Disse komponenter vil hjælpe dig med at opbygge fantastisk app og websted. Der er så mange komponenter, der leveres af Materiale som knapper, switch, kort, tekstindtastning, fab (flydende handlingsknap), dialog, toast, undermenu, faneblad og mere. Hver af dem har deres egen regel og vejledning om, hvordan man bygger dem, så du ikke har nogen uoverensstemmende elementer.

Mønstre ting

Udover komponenter giver Material dig også nogle grundlæggende mønstre til ekstra brugergrænseflade. Disse mønstre vil forbedre brugergrænsefladen du oprettede med Materialets komponenter. Mønstrene herunder dataformat, navigationsskuffe, fejl, gestus, rulningsteknik, søgning, indstillinger, indlæsning af billeder, svejs for at opdatere og meget mere.

Materiale Design Farver

Farverne i Materiale var designet på en sådan måde, at det ikke får dig til at føle sig ubehageligt, mærkeligt og fladt. Med inspiration fra vores daglige miljøer som vejskilte, moderne arkitektur, fortovsmærkningstape og sportsbaner, giver Material Design dig uventede og højspændte farver. Der er så mange farvepalet at vælge, hvilket giver dig mere bekvemmelighed, når du udvikler apps eller websteder. Du kan også downloade farveprøverne til lokal brug som for din Photoshop-samling.

Materialets ikon

Hvis du er en Android-udvikler, skal du være bekendt med nogle gratis ikonpakker, der leveres af Google. De bruges normalt kun til hovedelement og actionbar. Mens vi har brug for andre ressourcer, skal vi søge andre ikoner som for mappe, fil, kopiere og indsætte osv. Manuelt. I Material Design har Google rettet problemet med tonsvis af ikonpakker, du kan bruge.

Hver af ikonerne har gået igennem en vis design tilgang, som også bruger undersøgelsen af ​​taktile materialer. De er vedligeholder Materialets princip også, det er konsistent. Du kan downloade disse ikoner på GitHub, de leveres med nogle muligheder for forskellige anvendelser som for iOs, web, Android eller svg. Hvis du vil have en bredere mulighed for nem tilpasning, vil du sikkert se Material Design ikonpakker på FlatIcon. Inden i pakken får du ikonvektoren (SVG & EPS), PSD og PNG-versionen.

Materialets Animation

Dette er materialets funktioner, jeg kan lide mest. Animationerne i Materiale er så ægte og intuitive. Hver animation har en meningsfuld, konsekvent og rettidig timing overgange. Den gif demo vist nedenfor er blot en af ​​de smukke Material animation. For at give engagerende og lydhør interaktion skaber også Google-teamet vandrippelignende animation til brugerindgangseffekt. Det bruges mest på knapper og kort.

De funktioner, jeg forklarede, er kun en lille del af, hvad Material Design tilbyder. For at lære mere om Material verden, bare gå over til dokumentationssiden.

Implementering

Som standard kommer Material Design som den nye brugergrænseflade opdatering til Android Lollipop. Alle de retningslinjer, som Materialet har været anvendt indenfor det. Da Materialet er rettet mod alle slags miljøer, vil det ikke være svært at implementere det til et andet system. Og takket være samfundene er det endda langt lettere med nogle værktøjer, de har skabt.

Det er flere måder, du kan opnå for at få Material Design uden for Android, f.eks. Web.

Brug af CSS-rammer

Dette er den nemmeste måde, hvis du vil implementere Material Design i webplatform. Med rammer er alt, hvad du skal gøre, initialiseret, og skriv derefter de elementer, du har brug for. Der er mange rammer, du kan bruge som Materialer, Material UI eller Polymer for at nævne nogle få. Mit personlige valg falder ind i materialisere. Det er nemmere at bruge og forstå og have god dokumentation med god demo.

Følger retningslinjerne

Hvis du vil implementere Materiale uden hjælp af rammer og foretrækker at kaste med koder mest, så skal du følge Materialeguider. Der finder du alle de gør og ikke, som du bør lægge mærke til for at opnå Materiale principper. Du vil se alle de grundlæggende vejledninger for at oprette komponenter, layout, animation, farve, mønstre og meget mere. Du vil muligvis se nogle Materiale checkliste for lettere udvikling.

Konklusion

Materiale design er et godt design system og er blevet en af ​​de mest forventede tendenser i året. I de næste par måneder kan vi se det overalt. Flere apps og websted bliver poleret med denne nye Googles designopdatering.

Og med Material Design har Google vist sin overlegenhed som et af de største teknologiske virksomheder. Det gør Google ikke bare ledes i søgemaskine og mobil OS-område, men også i designfeltet. På nuværende tidspunkt er der ingen andre virksomheder, der udvikler denne store ting som Google gjorde. Men erfaring siger, det vil ikke vare længe. Lad os bare vente på, at en anden virksomhed reagerer på Googles Material Design.