Share
For ikke lenge siden presenterte Google Material Design, et helt nytt sett med retningslinjer for både designere og utviklere. Material Design introduserer et nytt perspektiv på brukergrensesnitt, bevegelses- og samspillstilstander, og er et godt grunnlag for å bygge et produkt på.
I hovedsak kan du oppsummere Googles materialdesign av to komponenter:
Materiale gir kontekst i design, gir overflaten og kanten av et "materiale" oss visuelle signaler. La oss sammenligne dette med virkeligheten. Vi forstår dimensjonene til et rom, fordi vi ser vegger. Samtidig gir interiøret oss en forståelse av konteksten til rommet. Kjøkkenet ditt ser veldig annerledes ut enn på badet ditt.
Det samme gjelder i Material Design. Kombinasjonen av stil og innhold gir kontekst til brukeren i et digitalt rom, mye som fysiske vegger og interiør. En bruker har bedre forståelse av brukergrensesnittet, fordi det utformede materialet gir kontekst for grensesnittet.
Et kort gir kontekstuell design og er et vanlig element i Material Design. Et kort gir sammenheng i seg selv, samt ved å ha forhold til andre kort.Konseptet av Bevegelse i Material Design har en veldig lignende historie. Motion gir sammenheng i et design gjennom strømme av et søknad, spesielt når det kommer til kontinuitet av et produkt har en bruker følelsen av å være uavbrutt. Det er ingen hindringer, for eksempel inkonsekvens i design eller en forvirrende navigasjon.
Hvor nøyaktig virker bevegelsen? Her er et eksempel. Det er et hjemmat som består av en liste over kort. Når du klikker på et enkelt kort, utvides materialet på kortet for å bli full bredde og høyde på skjermen i stedet for dimensjonene til et enkelt kort.
Legg merke til hvordan dette eksemplet gjelder både materiale og bevegelse. Et kort er materialet. Når en bruker kommuniserer med det, vil det gjennom bevegelse ekspandere for å vise mer innhold. Dette gir kontinuitet til brukeren, da det viser hvordan innspillet påvirker brukergrensesnittet.
La oss utforske materialet litt mer. I hovedsak er materiale kombinasjonen av dine statiske designelementer. Tenk på figurer, farge, typografi og forskjellige verktøy du bruker til å lage design. Alt dette sammen danner et materiale.
Farge er en stor sak for designere så vel som brukere. Det har en enorm mengde innflytelse på utseende og følelse av et design, samt de psykologiske effektene på en bruker. Farge kan gjøre et design troverdig, spennende, utilitaristisk, og mye mer. I Material Design har vi tilgang til en stor palett av farger, som vi kan bruke som grunnlag for å designe et produkt.
Jeg anbefaler på det sterkeste at du har følgende referanse for farger lagret som et bokmerke, det er en praktisk referanse til å designe en fargepalett for et brukergrensesnitt.
Roboto, standardfonten for Android, har blitt polert for å forbedre den for bruk av kryssplattform. For designere som ikke er veldig kjent med typografi, gir Material Design retningslinjer som håndterer utformingen av typografi for deg.
Den enkleste måten for deg selv å komme i gang med dette rutenettet er å laste ned følgende klistremerkeark. Retningslinjene gir deg en struktur for din typografi når du starter en ny design.
Å designe et layout i Material Design bruker noen av kjerneprinsippene for trykkdesign, som Google indikerer som en kilde til inspirasjon for Material Design. Det er stor vekt på å bygge brukergrensesnitt som skiller seg godt mellom ulike typer enheter. Som du er klar over, har skalerbarhet blitt viktig for å designe produkter som er vellykkede på flere enheter.
Denne illustrasjonen visualiserer konseptet med dybde i brukergrensesnitt.Et av hovedkonseptene er stabling. Når du designer et brukergrensesnitt med Material Design, bruker du dropshadows, kontrast i farge og z-posisjonering for å gi brukeren en følelse av dybde i brukergrensesnittet. Dybde skaper kontekst for brukere. Flytende elementer på toppen av stabler, for eksempel en knapp, understreker kallet til handling i et brukergrensesnitt.
Eksempel på tre lag med dybde: en meny, toppnavigasjonslinjen og innholdsområdet.For mer avanserte designere inkluderer retningslinjene grunnlinjen. Metrics og keylines-siden i retningslinjene for Materialdesign går i detalj og gir deg ressurser til å eksperimentere med.
Hvis du helst vil jobbe med en forhåndsdefinert oppsett, kan du laste ned Googles hvite rammemal.
Eksempel på et utformet layout. Bevegelsen går hånd i hånd med materiale som beskrevet tidligere i korteksemplet. Bevegelse er det som gjør utformet materiale blir levende.
Når du begynner å lære det grunnleggende om bevegelsesdesign, er det en av de første prinsippene du lærer om å lette.
Når du leter en animasjon, prøver du å gjøre en bevegelse mer naturlig. I stedet for å animere bevegelsen til et objekt med en konstant hastighet, øker du farten i begynnelsen av animasjonen og reduserer hastigheten på slutten av animasjonen.
Tenk på en bevegelig bil i trafikken og hvordan en bil akselererer og bremser, det er en veldig naturlig bevegelse. Easing prøver å replikere det, slik at en bruker anser bevegelsen til et objekt som naturlig.
Den enkleste måten å bli kjent med lettelse er å se noen designeksempler. Følgende ressurser er et flott bokmerke:
Denne illustrasjonen viser lettelse, som vist i "Animasjonsprinsipper i UI Design: Understanding Easing".Når en bruker samhandler med et designelement, skal elementet i de fleste tilfeller gi tilbakemelding. I Material Design er målet å glede brukeren med bevegelses tilbakemelding, samt gi sammenheng for materialet brukeren samhandler med. Den vakre responsen er at du anerkjenner brukerens handling, noe som forbedrer bruken av produktet.
Det vakreste eksemplet jeg har sett er berøringsrippelen, et visuelt høydepunkt når brukeren samhandler med et bestemt element.
Et annet eksempel er å åpne eller utvide elementer. Når du klikker på et bestemt element for å utvide det, utvides det nye materialet fra det punktet brukeren berørte. Veksten av et element føles naturlig når den vokser direkte fra midten av brukerens berøring. For flere eksempler på responsiv samhandling, besøk Googles Material Design nettsted.
Sist men ikke minst, den overganger mellom grensesnitt er viktig for responsiv samhandling. Det er den mest avgjørende form for bevegelse for å designe kontinuitet for brukeren. For innkommende og utgående skjermer gir opprinnelsespunktet kontekst. Et brukergrensesnitt kan vokse og utvide dynamisk, noe som gir designere god plass til å spille med flotte overganger. Og best av alt, de kan gjøre dem meningsfylte.
Nedenfor er noen få gode eksempler på Material Design laget av gode designere.
Google - Materialutforskning av Aurélien Salomon
Alarm Material UI av Ehsan Rahimi
Aviasales L (Material Design) av Mark MDette er en kort introduksjon til Material Design. Hvis noen av de ovennevnte viste interesse, anbefaler jeg at du leser mer i offisielle retningslinjer av google.
Vennligst kontakt Material Design med et kreativt tenkemåte. Mye av det som presenteres er en påminnelse om hva som gjør flott design flott. Samtidig er de bare retningslinjer, noe som betyr at for å vokse som designer er du mer enn velkommen til å gi den din egen vri.
Jeg oppfordrer dere alle til å lage et design med disse retningslinjene i tankene. Det kan bety at du tar en annen tilnærming enn vanlig, noe som er flott å holde ferdighetene dine på kanten og vokse som designer.
Hva synes du om Material Design? Hva har dine erfaringer vært så langt? Vennligst del det nedenfor i kommentarene, jeg er veldig nysgjerrig, og jeg er sikker på at mange andre også er.
Accentsconagua