I det siste 2014 I / O-arrangementet kom Google tilbake med sine nye overraskelser. Foruten den nye Android-oppdateringen med kodenavnet Lollipop, introduserte Google også sitt friske nye designsprog, Material Design . Det er et designsystem som ikke bare er ment for de nye Lollipop-brukergrensesnittforbedringene, men også for tvers av enheter og miljøer.
Material Design har noen viktige funksjoner som skiller den blant andre designtrender med sine egne unike måter. På samme måte som navnet, ble det inspirert av ekte materialer og kombinert dem til ett designsystem for å skape en elegant, intuitiv, vakker og mest interaktiv brukeropplevelse. I dette innlegget ser vi på hva som er inni Material Design, og gir deg en rask guide til hvordan du implementerer den. Ved å sitere Googles blogg, skal jeg si, "Dette er Material Design".
En introduksjon
Material Design er et enhetlig design system, betyr at det ble laget for å arbeide med alle tilgjengelige dagens enheter og plattformer. Fra nettbrett, smarttelefon til skrivebord og fra Android, iOS, Windows til Web-plattformer. Alt design ser og føles bør være det samme hvor som helst.
Hovedprinsipper
Det er tre hovedprinsipper som bygger Material Design. Dette er den mest grunnleggende delen av det materielle tilbudet generelt.
- Materialet er metaforen . Utviklingen av Material ble inspirert av studiet av taktile elementer vi bruker hver dag, papir og blekk . Det gjør objektet lys, overflate og bevegelser er bedre når de samhandler med hverandre.
- Fet, grafisk og forsettlig . Typografi, grids, rom, skala, farge og bruk av bilder som brukes i den skrivebaserte designbasen gjør materialets innhold bedre.
- Motion gir mening . Dette er en av de mest merkede ting. I Material, bør du ha meningsfull og passende bevegelse, subtil og klar tilbakemelding og effektiv og sammenhengende overgang.
Komponentene
Material Design legger merke til alle detaljer i komponentene, slik at de kan brukes universelt. Disse komponentene vil hjelpe deg med å bygge fantastisk app og nettsted. Det er så mange komponenter som leveres av Material som knapper, bytte, kort, tekstinngang, fab (flytende handlingsknapp), dialog, toast, undermeny, fan og mer. Hver av dem har sin egen regel og veileder om hvordan man bygger dem, slik at du ikke vil ha noen ulemper.
Mønstre Tingen
Foruten komponenter, gir Material deg også noen grunnleggende mønstre for ekstra brukergrensesnitt. Disse mønstrene vil forbedre brukergrensesnittet du opprettet med Materialets komponenter. Mønstrene inkludert dataformat, navigasjonsskuff, feil, bevegelser, rulleteknikk, søk, innstillinger, lasting av bilder, sveip for å oppdatere og mer.
Materiale Designfarger
Fargene i Materialet hadde blitt utformet på en slik måte at du ikke vil føle deg ubehagelig, rar og flat. Med inspirasjon fra våre daglige miljøer som trafikkskilt, moderne arkitektur, teltbånd og sportsbaner, gir Material Design deg uventede og høyspenne farger. Det er så mange fargepaletter å velge å gi deg mer bekvemmelighet når du utvikler apper eller nettsteder. Du kan også laste ned fargeprøver til lokal bruk som for din Photoshop-samling.
Materialets ikon
Hvis du er en Android-utvikler, må du være kjent med noen gratis ikonpakker levert av Google. De brukes vanligvis bare for hovedelement og actionbar. Mens for andre ressurser, må vi søke andre ikoner som for mappe, fil, kopiere og lime, etc manuelt. I Material Design har Google løst problemet med tonnevis av ikonpakker du kan bruke.
Hver av ikonene har gått gjennom noen design tilnærming som også bruker studiet av taktile materialer. De er opprettholder Material-prinsippet også, det er konsistent. Du kan laste ned disse ikonene på GitHub, de kommer med noe alternativ for forskjellig bruk som for iOs, web, Android eller svg. Hvis du vil ha et bredere alternativ for enkel tilpasning, vil du sannsynligvis se Material Design ikonpakker på FlatIcon. I pakken får du ikonvektoren (SVG & EPS), PSD og PNG-versjonen.
Materialets animasjon
Dette er materialets egenskaper jeg liker mest. Animasjonene i Materialet er så ekte og intuitive. Hver animasjon har en meningsfylt, konsistent og riktig timingovergang. Gif-demoen vist deg nedenfor er bare en av de vakre Material animasjonene. For å gi engasjerende og responsiv samhandling, oppretter Google-team også vannrippelignende animasjoner for brukerinngangseffekt. Det brukes mest på knapper og kort.
De funksjonene jeg forklarte er bare en liten del av hva Material Design tilbyr. For å lære mer om Material verden, bare gå over til dokumentasjonssiden.
Gjennomføring
Som standard kommer Material Design som den nye brukergrensesnittoppdateringen til Android Lollipop. Alle retningslinjene som Materialet har blitt brukt i det. Siden Materialet er rettet mot alle slags miljøer, vil det ikke være vanskelig å implementere det til et annet system. Og takket være samfunnene, er det enda langt lettere med noen verktøy de opprettet.
Dette er flere måter du kan oppnå for å få Material Design utenfor Android, nett for eksempel.
Bruke CSS-rammer
Dette er den enkleste måten hvis du vil implementere Material Design i webplattform. Med rammer, alt du trenger å gjøre er å initialisere det og skrive elementene du trenger. Det er mange rammer du kan bruke som Materialisere, Material UI eller Polymer for å nevne noen. Mitt personlige valg faller inn i materialisere. Det er lettere å bruke og forstå og ha god dokumentasjon med fin demo.
Følger retningslinjene
Hvis du vil implementere Materiale uten hjelp av rammebetingelser og foretrekker å rotere med koder mest, må du følge Materiale retningslinjer. Der finner du alle de gjøremål og ikke som du bør legge merke til for å oppnå Materielle prinsipper. Du ser all grunnleggende veiledning for å lage komponenter, layout, animasjon, farge, mønstre og mer. Du vil kanskje se noen Material sjekkliste for enklere utvikling.
Konklusjon
Materiell design er et flott designsystem og har blitt en av de mest forventede trendene i året. I de neste par månedene kan vi se det overalt. Flere programmer og nettsteder vil bli polert med denne nye Googles designoppdatering.
Og med materialdesign har Google bevist sin overlegenhet som et av de største teknologiske selskapene. Det gjør at Google ikke bare fører i søkemotor og mobil OS-område, men også i designfeltet. Nå er det ingen andre selskaper som utvikler denne store tingen som Google gjorde. Men erfaring sier at det ikke varer lenge. La oss bare vente på at andre selskaper svarer på Googles materialdesign.
