{"id":257330,"date":"2023-01-02T13:31:00","date_gmt":"2023-01-02T10:31:00","guid":{"rendered":"https:\/\/inform.click\/exploring-material-design-et-nytt-ui-designkonsept-fra-google\/"},"modified":"2023-01-02T13:31:00","modified_gmt":"2023-01-02T10:31:00","slug":"exploring-material-design-et-nytt-ui-designkonsept-fra-google","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/exploring-material-design-et-nytt-ui-designkonsept-fra-google\/","title":{"rendered":"Exploring Material Design: Et nytt UI-designkonsept fra Google"},"content":{"rendered":"

\n For et par m\u00e5neder siden, p\u00e5 deres 7. \u00e5rlige I\/O-utviklerkonferanse, hadde Google introdusert et nytt UI-designkonsept kalt Material Design.\n<\/p>\n

\n Denne inspirerende, livlige og lekre designstilen er raskt i ferd med \u00e5 bli popul\u00e6r blant designere, og er virkelig en stor innsats fra Google for \u00e5 bringe visuell design, bevegelse og interaksjonsdesign sammen p\u00e5 tvers av ulike typer plattformer og enheter. Ved \u00e5 bruke dristig grafisk design, taktile overflater og flytende bevegelser, leverer dette innholdsfokuserte designspr\u00e5ket enhetlige, lekne og intuitive opplevelser til brukerne.\n<\/p>\n

\n Opprinnelig ble Material Design laget for L-utgaven av Android, men senere brukte Google det p\u00e5 hjemmeskjermer for Dokumenter<\/a>, Regneark<\/a> og Slides<\/a>. Inspirert av dette begynte designere \u00e5 bruke Material Design for nettsteder de lager. I dette blogginnlegget vil jeg ta deg med p\u00e5 en omvisning i Material Design-konseptet og ogs\u00e5 utforske hvordan du kan bruke det i dine kommende webdesignprosjekter.\n<\/p>\n

\n La oss begynne!\n<\/p>\n

\n Kjerneprinsipper for materialdesign\n<\/p>\n

\n Materiell metafor:
\n<\/h5>\n

\n Materialdesign legger stor vekt p\u00e5 \u00e5 gj\u00f8re elementer, animasjoner og overganger like ekte som de ser ut i det virkelige liv. Etter intensive studier av papir og blekk, bestemte Google-teamet seg for \u00e5 bruke en materiell metafor som det enhetlige prinsippet om et rasjonalisert rom og et bevegelsessystem. I et n\u00f8tteskall kan vi si at Materialdesign ikke er annet enn en kombinasjon av ulike klassiske designkonsepter og grunnleggende fysiske egenskaper.\n<\/p>\n

\n Materielle overflater:
\n<\/h5>\n

\n I materialdesign etablerer overflater og kanter av materialet en fysisk struktur for \u00e5 gi brukerne visuelle hint for \u00e5 hjelpe dem raskt \u00e5 forst\u00e5 hva de kan ber\u00f8re og bevege seg. Ved \u00e5 bruke prinsipper for trykkdesign holder materialdesign det viktige innholdet foran brukerens \u00f8ye, mens man ignorerer annet mindre nyttig innhold. Bruken av kjente, intuitive og naturlige attributter gj\u00f8r at brukerens hjerne kan jobbe mindre og raskt forst\u00e5 r\u00e5d.\n<\/p>\n

\n Dimensjonale fordeler:
\n<\/h5>\n

\n Hvis det er en bunke med papirer p\u00e5 skrivebordet ditt, f\u00e5r de dimensjon sammen med \u00e5 beskytte skyggene. P\u00e5 samme m\u00e5te, i materialdesign, n\u00e5r du bruker denne egenskapen p\u00e5 brukergrensesnittet, vil du ha hierarki og skygger for \u00e5 trekke en brukers oppmerksomhet til det viktigste objektet de b\u00f8r samhandle med. Ved \u00e5 bruke det grunnleggende om lys, overflate og bevegelse, formidler materialdesign hvordan et objekt vil samhandle med brukere. I tillegg lar realistisk belysning brukere f\u00e5 den mest realistiske visningen av grensesnittet du har designet.\n<\/p>\n

\n One Adaptive Design:
\n<\/h5>\n

\n Materialdesign bruker et enkelt underliggende designsystem for \u00e5 organisere rom og interaksjoner. Konseptet med \u00e9n adaptiv design bringer sammenheng mellom ulike enheter, betyr at en enhetlig design skaper spesialiserte visninger for ulike typer enheter. Hver visning er skreddersydd p\u00e5 en unik m\u00e5te til interaksjonen og st\u00f8rrelsen som passer for en bestemt enhet. P\u00e5 den annen side gj\u00f8res det ingen endringer i hierarki, ikonografi, farger og romlige forhold.\n<\/p>\n

\n Fet og tilsiktet innhold:
\n<\/h5>\n

\n En annen ting du vil legge merke til med dette nye visuelle spr\u00e5ket er dens dristige design med lyse fargevalg. Ved \u00e5 ta pekepinner fra fortaustape, moderne arkitektur, veiskilt og idrettsbaner, har Google introdusert fantastiske og livlige farger som du aldri hadde forventet. De har ogs\u00e5 foredlet Roboto-skrifttypen<\/a> omfattende, noe som gj\u00f8r den litt bredere og rundere for \u00e5 gj\u00f8re lesingen til en bedre opplevelse. Videre skaper bevisst hvitt rom og kant-til-kant-bilder klarhet og fordypning.\n<\/p>\n

\n Legg vekt p\u00e5 handlinger:
\n<\/h5>\n

\n Materialdesign legger mye vekt p\u00e5 \u00e5 gj\u00f8re interaksjonen mellom brukere og overflater mer digital, magisk og responsiv. I denne designstilen, n\u00e5r noen samhandler med brukergrensesnittet, blir hele designet forvandlet p\u00e5 en overraskende m\u00e5te. Det grafiske uttrykket med farge, overflate og ikonografi gir brukerne en klar id\u00e9 om hva et objekt kan gj\u00f8re, mens responsiv interaksjon oppmuntrer brukeren til \u00e5 utforske grensesnittet dypt: hvis jeg ber\u00f8rer dette, hva vil skje? Og hva skjer videre?\n<\/p>\n

\n Brukerinitiert endring:
\n<\/h5>\n

\n N\u00e5r en person ber\u00f8rer vannoverflaten og lager b\u00f8lger, gir energien som kommer fra hans handlinger for \u00e5 gj\u00f8re endringer i grensesnittet ham en virkelig og h\u00e5ndgripelig opplevelse. P\u00e5 samme m\u00e5te gj\u00f8r materialdesign brukere i stand til \u00e5 ber\u00f8re brukergrensesnittet slik de gj\u00f8r i det virkelige liv. For dette foresl\u00e5r Google designere \u00e5 ta en ekstra dimensjon av interaksjon, som er «bevegelsesfeedback», i betraktning. S\u00e5 brukeren kan f\u00f8le at de blir h\u00f8rt av overflaten n\u00e5r de ruller, drar, lysbilder og trykker.\n<\/p>\n

\n Animasjonskoreografi:
\n<\/h5>\n

\n I den virkelige verden har hver handling en bevegelse, begynnelse og slutt. For eksempel, n\u00e5r du \u00e5pner en kartong i det virkelige liv, trykker du et sted p\u00e5 den og viser hva som er inni den. P\u00e5 samme m\u00e5te foreg\u00e5r alle brukerhandlingene i materialdesign i et enhetlig milj\u00f8. Hvert objekt presenteres for brukeren med en rask, jevn og kontinuerlig animasjon som er koreografert p\u00e5 en delt scene. Ettersom alle eiendeler i materialdesign beveger seg inn i en rytme, fremst\u00e5r skjermen mer fascinerende og interaktiv enn noen gang.\n<\/p>\n

\n Meningsfull bevegelse:
\n<\/h5>\n

\n Som vi alle vet, for Google er brukeropplevelse viktigere enn noe annet. Den samme regelen gjelder for det siste prinsippet for materialdesign. Dette prinsippet sier at bevegelse skal v\u00e6re passende, meningsfylt og n\u00f8ye koreografert, og m\u00e5 ikke brukes bare for \u00e5 imponere brukere. Bevegelse i materialdesign skal ikke bare v\u00e6re vakker, men ogs\u00e5 bygge mening om funksjonaliteten og romlige relasjoner sammen med \u00e5 opprettholde skj\u00f8nnheten og enkelheten til en s\u00f8ml\u00f8s brukeropplevelse.\n<\/p>\n

\n Implementering av materialdesign for nettet med polymer
\n<\/h3>\n

\n Ikke kjent med Polymer<\/a> enn\u00e5? Vi vil! Polymer er et flott UI-verkt\u00f8ysett som lar deg bringe materialdesign til nettet. Med papirelementsamlingen<\/a> til Polymer vil du ha tilgang til alle egenskapene til materialdesign og v\u00e6re i stand til \u00e5 bringe h\u00e5ndgriplighet, dristig grafikk og jevne overganger og animasjoner til applikasjonene dine p\u00e5 nettet. Du kan se polymer- og materialdesignm\u00f8nstre i aksjon med Topeka<\/a>, en morsom quiz-app.\n<\/p>\n

\n N\u00e5 skal jeg utforske Polymers papirelementer og vise deg hvordan du kan bruke dette nye designparadigmet i nettprosjektene dine.\n<\/p>\n

\n Starter:
\n<\/h5>\n

\n Polymers startveiledning<\/a> kommer med en kort veiledning og et startprosjekt for \u00e5 hjelpe deg med \u00e5 bli kjent med n\u00f8kkelbegrepene til Polymer. For det f\u00f8rste m\u00e5 du laste ned startprosjektet<\/a> som inneholder alle avhengigheter og biblioteker som kreves for \u00e5 jobbe med Polymer. N\u00e5r du har lastet ned startprosjektet, pakk det ut et sted p\u00e5 din lokale stasjon.\n<\/p>\n

\n F\u00f8r du begynner, trenger du en rask HTTP-server som kj\u00f8rer. Hvis du allerede har Python installert, kj\u00f8r en av f\u00f8lgende kommandoer p\u00e5 toppniv\u00e5et i eksempelprosjektet.\n<\/p>\n

\n Python 2.x:\n<\/p>\n

python -m SimpleHTTPServer<\/code><\/pre>\n
\n  Python 3.x:\n<\/p>\n
python -m http.server<\/code><\/pre>\n
\n  Last n\u00e5 den ferdige versjonen av prosjektet for \u00e5 teste ut webserveren. For eksempel, hvis den lokale serveren lytter p\u00e5 port 8000:\n<\/p>\n
\n  http:\/\/localhost:8000\/finished\/<\/a>\n<\/p>\n
\n  Installer papirelementer:
\n<\/h5>\n
\n  Etter det m\u00e5 du installere papirelementer p\u00e5 en av f\u00f8lgende tre m\u00e5ter:\n<\/p>\n