{"id":264979,"date":"2023-01-02T13:48:00","date_gmt":"2023-01-02T10:48:00","guid":{"rendered":"https:\/\/inform.click\/exploring-material-design-a-new-ui-design-concept-fran-google\/"},"modified":"2023-01-02T13:48:00","modified_gmt":"2023-01-02T10:48:00","slug":"exploring-material-design-a-new-ui-design-concept-fran-google","status":"publish","type":"post","link":"https:\/\/inform.click\/sv\/exploring-material-design-a-new-ui-design-concept-fran-google\/","title":{"rendered":"Exploring Material Design: A New UI Design Concept fr\u00e5n Google"},"content":{"rendered":"

\n F\u00f6r ett par m\u00e5nader sedan, vid sin 7:e \u00e5rliga I\/O-utvecklarkonferens, hade Google introducerat ett nytt UI-designkoncept kallat Material Design.\n<\/p>\n

\n Den h\u00e4r inspirerande, livfulla och vackra designstilen blir snabbt popul\u00e4r bland designers och \u00e4r verkligen en stor anstr\u00e4ngning fr\u00e5n Google f\u00f6r att f\u00f6ra samman visuell design, r\u00f6relsedesign och interaktionsdesign \u00f6ver olika typer av plattformar och enheter. Med hj\u00e4lp av dj\u00e4rv grafisk design, taktila ytor och flytande r\u00f6relser, ger detta inneh\u00e5llsfokuserade designspr\u00e5k enhetliga, lekfulla och intuitiva upplevelser till anv\u00e4ndarna.\n<\/p>\n

\n Ursprungligen skapades Material Design f\u00f6r L-utg\u00e5van av Android, men senare applicerade Google den p\u00e5 hemsk\u00e4rmarna i Dokument<\/a>, Kalkylark<\/a> och Presentationer<\/a>. Inspirerade av detta b\u00f6rjade designers anv\u00e4nda materialdesign f\u00f6r webbplatser de skapar. I det h\u00e4r blogginl\u00e4gget tar jag dig p\u00e5 en rundtur i Material Design-konceptet och utforskar \u00e4ven hur du kan anv\u00e4nda det i dina kommande webbdesignprojekt.\n<\/p>\n

\n L\u00e5t oss b\u00f6rja!\n<\/p>\n

\n Grundl\u00e4ggande principer f\u00f6r materialdesign\n<\/p>\n

\n Materialmetafor:
\n<\/h5>\n

\n Materialdesign l\u00e4gger stor vikt vid att g\u00f6ra element, animationer och \u00f6verg\u00e5ngar lika verkliga som de ser ut i verkligheten. Efter intensiva studier av papper och bl\u00e4ck beslutade Google-teamet att anv\u00e4nda en materiell metafor som den enhetliga principen om ett rationaliserat utrymme och ett r\u00f6relsesystem. I ett n\u00f6tskal kan vi s\u00e4ga Materialdesign \u00e4r inget annat \u00e4n en kombination av olika klassiska designkoncept och grundl\u00e4ggande fysiska egenskaper.\n<\/p>\n

\n P\u00e5tagliga ytor:
\n<\/h5>\n

\n I materialdesign etablerar ytor och kanter p\u00e5 materialet en fysisk struktur f\u00f6r att ge anv\u00e4ndarna visuella ledtr\u00e5dar som hj\u00e4lper dem att snabbt f\u00f6rst\u00e5 vad de kan r\u00f6ra vid och r\u00f6ra p\u00e5. Genom att anv\u00e4nda principerna f\u00f6r tryckdesign h\u00e5ller materialdesign det viktiga inneh\u00e5llet framf\u00f6r anv\u00e4ndarens \u00f6ga, samtidigt som annat mindre anv\u00e4ndbart inneh\u00e5ll ignoreras. Anv\u00e4ndningen av v\u00e4lbekanta, intuitiva och naturliga attribut g\u00f6r att anv\u00e4ndarens hj\u00e4rna kan arbeta mindre och snabbt f\u00f6rst\u00e5 m\u00f6jligheter.\n<\/p>\n

\n Dimensionella f\u00f6rm\u00e5ner:
\n<\/h5>\n

\n Om det finns en bunt papper p\u00e5 ditt skrivbord f\u00e5r de dimension samtidigt som de skyddar sina skuggor. P\u00e5 samma s\u00e4tt, i materialdesign, n\u00e4r du till\u00e4mpar den h\u00e4r egenskapen p\u00e5 anv\u00e4ndargr\u00e4nssnittet, kommer du att ha hierarki och skuggor f\u00f6r att dra en anv\u00e4ndares uppm\u00e4rksamhet till det viktigaste objektet de ska interagera med. Med hj\u00e4lp av grunderna f\u00f6r ljus, yta och r\u00f6relse f\u00f6rmedlar materialdesign hur ett objekt kommer att interagera med anv\u00e4ndarna. Dessutom l\u00e5ter realistisk belysning anv\u00e4ndare f\u00e5 den mest realistiska bilden av gr\u00e4nssnittet du har designat.\n<\/p>\n

\n En adaptiv design:
\n<\/h5>\n

\n Materialdesign anv\u00e4nder ett enda underliggande designsystem f\u00f6r att organisera utrymme och interaktioner. Konceptet med en adaptiv design ger koherens mellan olika enheter, vilket inneb\u00e4r att en enhetlig design skapar specialiserade vyer f\u00f6r olika typer av enheter. Varje vy \u00e4r skr\u00e4ddarsydd p\u00e5 ett unikt s\u00e4tt f\u00f6r interaktionen och storleken som \u00e4r l\u00e4mplig f\u00f6r en viss enhet. \u00c5 andra sidan g\u00f6rs inga \u00e4ndringar i hierarki, ikonografi, f\u00e4rger och rumsliga relationer.\n<\/p>\n

\n Fet och avsiktligt inneh\u00e5ll:
\n<\/h5>\n

\n En annan sak du kommer att m\u00e4rka med detta nya visuella spr\u00e5k \u00e4r dess dj\u00e4rva design med ljusa f\u00e4rgscheman. Med hj\u00e4lp av v\u00e4gmarkeringsband, modern arkitektur, v\u00e4gskyltar och sportbanor har Google introducerat fantastiska och livfulla f\u00e4rger som du aldrig hade f\u00f6rv\u00e4ntat dig. Dessutom har de f\u00f6rfinat Roboto-teckensnittet<\/a> i stor utstr\u00e4ckning, vilket g\u00f6r det n\u00e5got bredare och rundare f\u00f6r att g\u00f6ra l\u00e4sningen till en b\u00e4ttre upplevelse. Dessutom skapar avsiktligt vitt utrymme och kant-till-kant-bilder klarhet och f\u00f6rdjupning.\n<\/p>\n

\n Betona \u00e5tg\u00e4rder:
\n<\/h5>\n

\n Materialdesign l\u00e4gger stor vikt vid att g\u00f6ra interaktionen mellan anv\u00e4ndare och ytor mer digital, magisk och lyh\u00f6rd. I denna designstil, n\u00e4r n\u00e5gon interagerar med anv\u00e4ndargr\u00e4nssnittet, f\u00f6rvandlas hela designen p\u00e5 ett \u00f6verraskande s\u00e4tt. Det grafiska uttrycket med f\u00e4rg, yta och ikonografi ger anv\u00e4ndarna en tydlig uppfattning om vad ett objekt kan g\u00f6ra, medan responsiv interaktion uppmuntrar anv\u00e4ndaren att p\u00e5 djupet utforska gr\u00e4nssnittet: om jag r\u00f6r vid detta, vad h\u00e4nder? Och vad h\u00e4nder sedan?\n<\/p>\n

\n Anv\u00e4ndarinitierad \u00e4ndring:
\n<\/h5>\n

\n N\u00e4r en person r\u00f6r vid vattenytan och g\u00f6r v\u00e5gor, ger energin som kommer fr\u00e5n hans handlingar f\u00f6r att g\u00f6ra f\u00f6r\u00e4ndringar i gr\u00e4nssnittet honom en verklig och p\u00e5taglig upplevelse. P\u00e5 samma s\u00e4tt g\u00f6r materialdesign det m\u00f6jligt f\u00f6r anv\u00e4ndare att ber\u00f6ra anv\u00e4ndargr\u00e4nssnittet som de g\u00f6r i sitt verkliga liv. F\u00f6r detta f\u00f6resl\u00e5r Google designers att ta h\u00e4nsyn till en extra dimension av interaktion, som \u00e4r ”r\u00f6relsefeedback”, s\u00e5 att anv\u00e4ndaren kan k\u00e4nna att de h\u00f6rs av ytan n\u00e4r de rullar, drar, glider och trycker.\n<\/p>\n

\n Animationskoreografi:
\n<\/h5>\n

\n I den verkliga v\u00e4rlden har varje handling en r\u00f6relse, b\u00f6rjan och slut. Till exempel, n\u00e4r du \u00f6ppnar en kartong i det verkliga livet, knackar du n\u00e5gonstans p\u00e5 den och visar vad som finns inuti. P\u00e5 samma s\u00e4tt sker alla anv\u00e4ndar\u00e5tg\u00e4rder i materialdesign i en enhetlig milj\u00f6. Varje objekt presenteras f\u00f6r anv\u00e4ndaren med en snabb, smidig och kontinuerlig animering som koreograferas p\u00e5 en delad scen. N\u00e4r alla tillg\u00e5ngar inom materialdesign r\u00f6r sig i en rytm framst\u00e5r sk\u00e4rmen som mer f\u00e4ngslande och interaktiv \u00e4n n\u00e5gonsin.\n<\/p>\n

\n Meningsfull r\u00f6relse:
\n<\/h5>\n

\n Som vi alla vet \u00e4r anv\u00e4ndarupplevelsen viktigare \u00e4n n\u00e5got annat f\u00f6r Google. Samma regel g\u00e4ller den sista principen f\u00f6r materialdesign. Denna princip s\u00e4ger att r\u00f6relse ska vara l\u00e4mpligt, meningsfullt och noggrant koreograferat, och f\u00e5r inte anv\u00e4ndas bara f\u00f6r att imponera p\u00e5 anv\u00e4ndarna. R\u00f6relse i materialdesign ska inte bara vara vacker, utan ocks\u00e5 skapa mening om funktionalitet och rumsliga relationer tillsammans med att beh\u00e5lla sk\u00f6nheten och enkelheten i en s\u00f6ml\u00f6s anv\u00e4ndarupplevelse.\n<\/p>\n

\n Implementera materialdesign f\u00f6r webben med polymer
\n<\/h3>\n

\n \u00c4nnu inte bekant med Polymer<\/a>? V\u00e4l! Polymer \u00e4r en fantastisk UI-verktygssats som g\u00f6r att du kan ta materialdesign till webben. Med papperselementsamlingen<\/a> av Polymer kommer du att ha tillg\u00e5ng till alla m\u00f6jligheter f\u00f6r materialdesign och kunna ge handgriplighet, dj\u00e4rv grafik och smidiga \u00f6verg\u00e5ngar och animationer till dina applikationer p\u00e5 webben. Du kan se polymer- och materialdesignm\u00f6nster i aktion med Topeka<\/a>, en rolig fr\u00e5gesportapp.\n<\/p>\n

\n Nu ska jag utforska Polymers papperselement och visa dig hur du kan anv\u00e4nda detta nya designparadigm i dina webbprojekt.\n<\/p>\n

\n Komma ig\u00e5ng:
\n<\/h5>\n

\n Polymers guide f\u00f6r att komma ig\u00e5ng<\/a> levereras med en kort handledning och startprojekt f\u00f6r att hj\u00e4lpa dig att bli bekant med nyckelbegreppen f\u00f6r Polymer. F\u00f6rst m\u00e5ste du ladda ner startprojektet<\/a> som inneh\u00e5ller alla beroenden och bibliotek som kr\u00e4vs f\u00f6r att arbeta med Polymer. N\u00e4r du har laddat ner startprojektet, packa upp det n\u00e5gonstans p\u00e5 din lokala enhet.\n<\/p>\n

\n Innan du ska b\u00f6rja beh\u00f6ver du en snabb HTTP-server som k\u00f6rs. Om du redan har Python installerat, k\u00f6r n\u00e5got av f\u00f6ljande kommandon p\u00e5 den \u00f6versta niv\u00e5n i exempelprojektet.\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  Ladda nu den f\u00e4rdiga versionen av projektet f\u00f6r att testa webbservern. Till exempel, om den lokala servern lyssnar p\u00e5 port 8000:\n<\/p>\n
\n  http:\/\/localhost:8000\/finished\/<\/a>\n<\/p>\n
\n  Installera papperselement:
\n<\/h5>\n
\n  Efter det m\u00e5ste du installera papperselement p\u00e5 n\u00e5got av f\u00f6ljande tre s\u00e4tt:\n<\/p>\n