<h1>Materialedesign, UI ifølge Google</h1>
<blockquote>I det moderne scenarie, hvis du vil inkludere bevægelse, bliver du nødt til at gøre det reelt og respektere fysikens love og funktionaliteten af ​​tingene i den virkelige verden. Faktisk er brugerne vant til at føle bevægelse i deres daglige liv. Dette tiltrækker deres opmærksomhed og hjælper dem bedre med at forstå funktionaliteten af ​​tingene.</blockquote>
<h2>20 grundlæggende principper for materialedesignet</h2>
<p>Det materielle design er et sæt principper og retningslinjer, der styrer designet til moderne og elegante brugergrænseflader (IU). Dette visuelle sprog er lanceret af Google i 2014 og sigter mod at skabe sammenhængende og harmoniske grænseflader på alle enheder, uanset operativsystemet eller den anvendte grænseflade.</p>
<p>Materialedesignet er baseret på tre hovedsøjler: det fysiske univers, farve og rum. Hver interface -komponent skal blandes i dette univers og respektere de proportioner og farver, der er specifikke for hvert materiale. Rummet skal også være veldefinerede, så brugeren let kan navigere fra et element til et andet.</p>
<h2>Hvad er materialedesignet ?</h2>
<h3>Det er hvad ?</h3>
<p>Materialedesign er et sæt designregler, oprettet af Google i 2014. Dette instrument letter styringen af ​​platformens komponenter. Faktisk har Google -designere forstået, at komponenter skal have specifikke fysiske egenskaber.</p>
<p>Materialedesignet inkluderer således direktiver til alt:</p>
<ul>
<li>Bredden</li>
<li>Fart</li>
<li>Skyggen</li>
</ul><ul>
<li>Typografien</li>
<li>Rist</li>
<li>Plads</li>
<li>Farven</li>
<li>Skalaen</li>
<li>Billeddannelse</li>
</ul>
<p>På denne måde har brugerne indtryk af at være i kontakt med fysiske elementer i den virkelige verden.</p>
<p>Ligeledes er materialedesignet ikke kun et spørgsmål om at vise designere, hvordan man arbejder med optrædener af produkter og tjenester. Det giver også designere mulighed for at skabe forsætlige design.</p>
<h3>Hvorfor vælge materialedesignet ?</h3>
<p>Som de fleste designsystemer er der oprettet materialedesign for at give en bedre brugeroplevelse på forskellige enheder og platforme. Målet er, at brugerne har en sammenhængende oplevelse .</p>
<p>Materialedesignet er ikke et simpelt sæt stilretningslinjer. Dette er et komplet designsystem.</p>
<p>I modsætning til andre mindre komplette designsystemer, kan det styre designsituationer med komplekse brugssager.</p>
<p>Ligeledes er materialedesignet et ret fleksibelt designbibliotek. I direktiver overlades en stor del af specificiteten af ​​implementeringen af ​​designet helt til designeren.</p>
<h2>Liste over principper for materialedesignet</h2>
<h3>Princip 1: Gør dig bekendt med nøgleressourcer</h3>
<p>Hvis du ønsker at erhverve specifik viden om materialedesignet, er den bedste løsning at konsultere den officielle Google -ressource.</p>
<p>Det opdateres kontinuerligt og indeholder alle de komplette og nødvendige detaljer til design af materialedesign.</p>
<p>Den bedste fordel ved denne ressource er, at den ikke kun er begrænset til specifikke aspekter i Android. Tværtimod dækker det hele det materielle designaspekt, i ethvert projekt overhovedet typen af ​​applikationen eller på nettet.</p>
<p>Det tilrådes at gennemse i det mindste de første kapitler i denne ressource for at være i stand til at gøre dig bekendt med dets grundlæggende principper.</p>
<h3>Princip 2: Ved hvad “materiale” er i materialedesignet</h3>
<p>Navnet materialesign er langt fra ufarligt. Materialedesign er en efterligning af materialet og den fysiske verden. Hun er inspireret af sine strukturer, selv fra afspejling af lys og fremskrivning af skygger. De materielle overflader genopfinder papiret og blækstøtter.</p>
<p>Faktisk er den centrale idé om principperne i materialedesignet fokuseret på at skabe design, der efterligner genstande i den virkelige verden.</p>
<h3>Princip 3: Brug skygger til at definere visuelle hierarkier</h3>
<p>De vigtigste materialesignværktøjer er:</p>
<ul>
<li>Kanter</li>
<li>Overflader</li>
<li>Belysning</li>
<li>Realistiske skygger</li>
</ul>
<p>For eksempel hjælper skyggerne dig med at prioritere de forskellige elementer for at få et komplet design.</p>
<h3>Princip 4: Brug lyse farver</h3>
<p>Materialedesignet er uden tvivl et design lavet i en minimalistisk tilgang. Med andre ord behøver du ikke bruge mange design- og stilværktøjer.</p>
<p>En af de få materielle ting, du kan bruge, er farven. Netop den lyse farve. Faktisk spiller lyse farver en vigtig rolle i at forbedre materialedesignet. De henleder opmærksomheden fra brugerne og opfordrer dem til at interagere med design.</p>
<h3>Princip 5: Forsøm ikke primær farve og accentfarve</h3>
<p>Den bedste måde at tilpasse dette princip til enhver form for design er at vælge tre nuancer, der vil fungere som en hovedpalet, med en farve, der vil tjene som en accent.</p>
<p>De primære farver, du vælger, kan bruges i nøgleelementer i grænsefladen, herunder:</p>
<ul>
<li>Markerne</li>
<li>Kasser</li>
<li>Baggrunde</li>
<li>Skrifttyper osv.</li>
</ul>
<p>Og farven på accent er, som navnet antyder, understreger og henleder opmærksomheden på et hovedelement. Husk, at den valgte accentfarve skal være mere kontrasterende end den i primærfarver.</p>
<h3>Princip 6: Gør godt brug af hvide rum</h3>
<p>Hvide rum spiller en nøglerolle i layoutet af teksten og typografien. I virkeligheden er hvidt rum et værktøj til at tiltrække opmærksomhed, bruger og rette deres opmærksomhed på et bestemt element.</p>
<p>Så tøv ikke med at:</p>
<ul>
<li>Brug stor typografi til hovedtitler</li>
<li>Tilføj en masse hvide rum</li>
<li>Hold nok tom plads i dit globale design.</li>
</ul>
<h3>Princip 7: Følg de nye kant-til-kant-billeder-trend</h3>
<p>Materialerdesign er fuldt tilpasset billedet. Så hvis du har besluttet at tilføje billeder til dit design, skal de have en hovedrolle.</p>
<p>Billederne inkluderet i materialedesignet skal følge kant-til-kant-tilstand. Det vil sige, der må ikke være marginer, der adskiller kanten af ​​et billede fra kanten af ​​vinduet eller skærmen.</p>
<h3>Princip 8: Alt skal være reaktivt</h3>
<p>Gør tingene tilgængelige og anvendelige på hver enhed, uanset størrelsen på dens skærm, er et af de grundlæggende principper for materialedesignet. Målet er at tilbyde en sammenhængende oplevelse. På denne måde vil brugeren ikke føle sig forvirret under overgangen fra en enhed til en anden, fordi han ikke får en ny grænseflade, hver gang han ændrer enheden.</p>
<p>I dette tilfælde skal designet være reaktivt. Heldigvis takket være avancerede rammer er halvdelen af ​​dit arbejde allerede udført. Derfor vil oprettelsen af ​​et reaktivt design ikke være en vanskelig opgave for dig.</p>
<h3>Princip 9: Dimensioner</h3>
<p>På nettet bruges Z -aksen til superposition og ikke til udsigten. På den anden side er 3D -verdenen baseret på Y -aksen.</p>
<p>Designmaterialet bruger hovedsageligt 3D, så y -aksen. Bare se på Googles design, for at bemærke det isometriske perspektiv. Denne måde at designe er inspireret af den virkelige verden, og dermed navnet “materiale”.</p>
<h3>Princip 10: Husk, succes er i detaljer</h3>
<p>I materialedesignet skal alt være enkelt. Det bedste eksempel kunne være det skeuomorfe design . Denne teknik sigter mod at efterligne reelle objekter under design af virtuelle objekter. Du skal derfor sikre dig, at hvert element i dit design ser så meget som muligt ud til tingene i det virkelige liv.</p>
<h3>Princip 11: Bevægelsen skal have en betydning</h3>
<p>Ifølge Google giver bevægelse mening til et design. Når du arbejder med materialedesignet, er bevægelse en komponent, der skal inkluderes.</p>
<p>I materialedesignet skal bevægelsen have disse 3 egenskaber:</p>
<ol>
<li>Vær informativ: Det skal være kendt for brugerne, hvor og hvornår handlingen var tilgængelig.</li>
<li>Hjælp med at koncentrere dig og guide brugere til de vigtigste dele af siden.</li>
<li>Vær udtryksfuld og tilføj en lille personlighed og dynamik til grænsefladen.</li>
</ol>
<h3>Princip 12: Bevægelsen skal være autentisk</h3>
<p>I det moderne scenarie, hvis du vil inkludere bevægelse, bliver du nødt til at gøre det reelt og respektere fysikens love og funktionaliteten af ​​tingene i den virkelige verden. Faktisk er brugerne vant til at føle bevægelse i deres daglige liv. Dette tiltrækker deres opmærksomhed og hjælper dem bedre med at forstå funktionaliteten af ​​tingene.</p>
<p>Dette er grunden til, at Google har reserveret et separat afsnit af direktiverne om materialedesign, for at detaljere begrebet autentisk bevægelse.</p>
<h3>Princip 13: Acceleration og afmatning i bevægelser</h3>
<p>Du skal tilbyde en klar og praktisk overgang for brugere. Bevægelsesprocessen skal være sandsynlig og realistisk, da materialedesignet sigter mod gengivelse af den virkelige verdensfænomener.</p>
<p>Designere skal finde den bedste tid for hver objektbevægelse.</p>
<p>På den ene side kan en overdreven langsomhed af elementerne distrahere brugerne og endda have en negativ indflydelse på strømmen af ​​brugere. På den anden side kan for dynamiske bevægelser forstyrre internetbrugere.</p>
<p>I dette tilfælde skal du være i den rigtige midterste og sikre en optimal varighed og en god læsbarhed af animationerne. Det er nødvendigt at give brugerne nok tid, så de kan bemærke ændringerne. Men få dem ikke til at vente. Forskning beviser, at 200 til 500 ms er de bedste animationshastigheder.</p>
<h3>Princip 14: Udnyt ikonanimationer</h3>
<p>Nogle gange kan ikoner oprettes med kontekstknapper med en cirkulær åbenbaringseffekt.</p>
<p>Det er sandt, at internetbrugere ikke ofte bemærker disse detaljer, men de er vigtige for at skabe en positiv indflydelse på den globale brugeroplevelse. </p>
<h3>Princip 15: Opret forskellige timinger for forskellige bevægelser</h3>
<p>De animerede objekter, der vises en efter en, er mere interessante og mere levende. En sådan tilgang giver brugerne mulighed for at se på hvert emne.</p>
<p>På den anden side skal du præsentere alle elementerne på siden på samme tid forvirrer brugerne, fordi de ikke ved, hvor de skal kigge.</p>
<h2>Materialedesign, UI ifølge Google !</h2>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/material-design-definition.jpg” alt=”Definition af materialesign” width=”600″ height=”450″ /></p>
<p>Det materielle design er et visuelt og interaktivt sprog skabt af Google. Men det er også en guide til at designe en grafisk grænseflade (designsystem). Dette design er “materielt”, fordi det er inspireret af virkelige genstande, papir og blæk hvad, det adskiller sig fra fladt design. Google brugte materialedesign til at forene den grafiske stil i dens applikationer og platforme. Dens grænseflade har derfor fordelen ved at være meget velegnet til brug til enhver enhed og alle visningsopløsninger. Hun er også overkommelig. Materialedesignet ville optimere UX, mens de tilbyder ressourcer til udviklere og interface -designere. Som med enhver grafisk strøm, har den sine amatører og krænkere.</p>
<p><em>Materialedesign er frem for alt en metafor. En materiel metafor som en samlende teori om et rationaliseret rum og et bevægelsessystem. Materialet er forankret i taktil virkelighed, inspireret af studiet af papir og blæk, men teknologisk avanceret og åben for fantasi og magi.</em></p>
<h2>Hvad er materialedesignet ?</h2>
<p>Navnet “materialesign” svarer til et sæt af <strong>Designregler</strong> foreslået af Google. Det er undertiden oversat af “materialesign” eller “kontekstuel design”. Det var først og fremmest et design beregnet til mobile applikationer (først mobil). Derefter blev han en af ​​de vigtigste tendenser inden for interface -design. Googles tilgang minder om <strong>Fladt design</strong> (eller fladt design): Minimalisme, geometriske former og farverige, uden overflødige (i modsætning til skeuomorfisme). Men i dette tilfælde er det et fladt design … med tykkelse og lettelse. Faktisk er her de vigtigste egenskaber:</p>
<ul>
<li>EN <strong>metafor</strong> papir og blæk fra digitalt udstyr.</li>
<li>Et fedt design og <strong>diagram</strong>.</li>
<li>Oprettelsen af <strong>bevægelser</strong> For at forbedre rådigheden og UX. Brugerens handlinger forårsager betydelige mikrointeraktioner.</li>
</ul>
<h2>Polymerbiblioteket</h2>
<p>For at bruge de grafiske elementer i materialedesignet (papirelementer) og grundlæggende komponenter (kerneelementer) har Google oprettet sit bibliotek, polymer, beregnet til webapplikationsudviklere. Siden da har Google tilbudt forskellige websteder og værktøjer til at hjælpe designere med at designe med denne designstil.</p>
<p>Se denne erklæring i form af “Manifesto”, der findes i introduktionen af ​​materialeferencepladen.Io:</p>
<p><em>”Vi udfordrede os til at skabe visuelt sprog for vores brugere, der syntetiserer de klassiske principper for godt design, innovative og de muligheder, der tilbydes af teknologi og videnskab. Vi kalder det: materialesign.&raquo;</em></p>
<h2>Webdesign ifølge Google</h2>
<p>Materialedesignet er derfor forskelligt fra fladt design. Det er en ny slags webdesign. Vi kan sige, at han er en <strong>Responsiv webdesign</strong> (Auto Adaptive) centreret om brugeroplevelsen. Målet er at få et design:</p>
<ul>
<li><strong>Intuitiv</strong> For alle brugere (inklusive ikke erfarne)</li>
<li><strong>Velegnet til alle understøttelser</strong> (computer, tablet, smartphone osv.)</li>
<li><strong>Interaktiv</strong> Tak til dynamiske animationer.</li>
<li><strong>Homogen</strong> mellem alle grænseflader</li>
</ul>
<p>Ifølge Google bruger dette design teknologiske og videnskabelige muligheder til at levere webløsninger til moderne ergonomi og designproblemer. I videoen herunder udtrykker Googles designere deres oprindelige motivationer, den måde, de arbejdede på, og de “fysiske” oplevelser udført. Vi bemærker, at hvis dette designsprog er forankret i virkeligheden, efterlader det et vigtigt sted til brugerens fantasi. Udtrykket “magi” vender ofte tilbage om materialedesignet.</p>
<h2>Omdesign Google</h2>
<p>For fuldt ud at forstå Googles tilgang er du nødt til at vende tilbage til Google’s oprindelse, og vigtigheden af, at firmaet Montain View angreb design. Godt ikke meget … ifølge initiativtagerne til materialedesignet.</p>
<p>At se denne video giver os en god idé om vigtigheden af ​​at bære en “vision” til at gennemføre dette projekt: redesign Google.</p>
<h2>Hvorfor materialedesignet ?</h2>
<p>Synlig i version 5.0 af Android blev materialedesignet præsenteret for første gang den 25. juni 2014 af Matias Durate, direktør for Android -brugeroplevelsen hos Google. Det var som en del af Google I/O -konferencen. Med dette nye designcharter skabte Google sin egen <strong>Visuelt sprog</strong>, Identificerbar uanset tjeneste eller produktet, fra mobile applikationer til tilsluttede objekter.</p>
<p>Matias Duarte udstillede metaforen til papir (Android / Material) i 2014 i 2014).</p>
<p>Se denne video for at fejre det første jubilæum for denne designtilgang. Det var en efter lanceringen, i maj 2015. Matias Durate ser et retrospektivt kig på det sidste år og kunne allerede værdsætte med hvilke entusiasme -designere, men også udviklere, havde afsat de principper, der blev præsenteret et år tidligere.</p>
<h2>For eller imod materialedesignet ?</h2>
<p>Dette design var også designet til <strong>berige brugeroplevelsen</strong> Og effektiviteten af ​​grænsefladen (nye skrifttyper, der kan læses på flere sprog, bedre rådgivning …) Et år senere afslørede Google blandt andet materialesign -lite -kittet til webprojekter (download kittet her).</p>
<p>Materialedesignet har vakt forskellige reaktioner. Nogle godkendte denne “forbedring” af et fladt design, der anses for forenklet og kedeligt. Det er faktisk et “flydende” og bevægende design. I sammensætningen, porte, responsiver og dynamik, strukturerer grænsefladen. Rum, justering og farver er vigtige i designfasen. Alle disse elementer prioriterer indholdet og letter brugerens navigation. Animationer, der er baseret på fysikens love, beroliger brugeren med hensyn til resultatet af hans handlinger.</p>
<p>For andre søger Google imidlertid at pålægge sin <strong>grafisk stil</strong>, Risikoen for at begrænse kreativiteten hos designere/grafiske designere. Alle websteder ville derefter begynde at se ud som Android -applikationer til skade for <strong>Kvalitet af brugeroplevelse</strong>.</p>
<h2>Hvordan det virker ? Ansøgning med Android</h2>
<p>Vi skal huske på, at dette er “materielle elementer”. Det er således umuligt at krydse et element. Kun den berørte bruger, der er berørt. I materialedesignet,<strong>Miljø er 3D</strong>. Hvert objekt eller “materiale” har 3 koordinater: x, y, z. Z -aksen vedrører objektets højde. Vi kan beslutte, at objektets højde, dens dimensioner og de beskadigede skygger, men tykkelsen er stadig på et ark papir. Sidstnævnte kan ikke bøje. På den anden side bevæger det sig på alle akserne.</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/02-material-design-environment-3D.png” alt=”Materialesign 3D -miljø” width=”700″ height=”700″ /></p>
<p>Android leverer tre temaer (mørkt eller let materielt tema, let materiale tema med mørk actionbar), der skal implementeres direkte i applikationen ved at ændre, hvis du ønsker det, nogle af attributterne. DET <strong>underholdning</strong> Anvend på objekter/elementer i grænsefladen er to: tween -animationen (til overgange, for eksempel ved at rotere på billedet) og rammeanimationen (visning af flere billeder). Loadanimation giver dig mulighed for at indlæse dem og startanimering af at aktivere dem/lancere dem.</p>
<h2>Eksempler på materialesigngrænseflader</h2>
<p>Teoretiske forklaringer – metaforen for intelligent papir, der kommer til live og interagerer med brugeren – kan virke uklar. Men observer grænseflader konkret letter forståelsen af ​​Google.</p>
<p>Se kilderne på Uplabs (historier.Uplabs.com)</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/03-uplab-material-design.jpg” alt=”UPLAB MATERIALES DESIGN” width=”394″ height=”151″ /></p>
<p>En anden kilde, rig på eksempler: materialesignbloggen</p>
<h2>Materiale designikoner</h2>
<p>Dette designsystem måtte producere sine egne ikoner. Et stort bibliotek er tilgængeligt på forskellige kildersider, der sparer betydelig tid til UI -designere, når du kender kompleksiteten af ​​et design af homogene sammenhængende ikoner.</p>
<p>Læs vores artikler til dette emne:</p>
<p>Se Github -guiden for brugen af ​​disse ikoner i forskellige miljøer.</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/10-icones-material-design.jpg” alt=”Materiale designikoner” width=”600″ height=”519″ /></p>
<p>Andre materielle ikoner (at downloade her)</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/11-icones-material-design.jpg” alt=”Materiale designikoner” width=”600″ height=”492″ /></p>
<p>Du kan downloade her mange materialesignikoner</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/12-icones-material-design.jpg” alt=”Materiale designikoner” width=”600″ height=”557″ /></p>
<p>En anden kilde til materialesignikoner, der skal downloades her</p>
<p><img src=”https://www.usabilis.com/wp-content/uploads/2018/04/13-icones-material-design.jpg” alt=”Materiale design og fladt designikoner” width=”600″ height=”365″ /></p>
<p>Stort valg af materielle ikoner i fladt design til brug på dine projekter, men guider også til at bruge dem (her)</p>
<h2>Nogle kilder og inspiration</h2>
<ul>
<li>Henvisningen til materialedesignet: Materiale.io<ul>
<li>Bevægelse</li>
<li>Stil</li>
<li>Layout</li>
<li>Komponent</li>
<li>Mønstre</li>
<li>Vækst og kommunikation</li>
<li>ANVENDELIGHED</li>
<li>Platforme</li>
</ul><ul>
<li>På Google Design -webstedet finder du casestudier og praktiske guider (mange ressourcer og mulighed for at abonnere på et meget rigt nyhedsbrev)</li>
</ul>
<h2>Konklusion</h2>
<p>Google Material -design drager fordel af <strong>Enkelhed af fladt design</strong>. Grænsefladen er raffineret og visuelt afbalanceret. Som fladt design opfylder det kravene til <strong>Responsivt design</strong>. Men hvor fladt design ofte kritiseres for dets <strong>Mangel på rådighed</strong>, Google ærlig <strong>En del af Skeuomorphism</strong> På et højt abstraktionsniveau. Således forbedrer den intelligente brug af animationer, typografiske valg og papirmetaforen brugeroplevelsen. Omfanget af de grafiske elementer, der tilbydes til udviklere. Som med hver designtrend afhænger selvfølgelig valget om at bruge denne type design af målrettede brugere og forretningsmæssige mål/brand. Til designeren/designeren for at beslutte, om han fuldt ud skal følge <strong>Materiale design charter</strong>, At blive inspireret af det eller vende sig væk.</p>
<ul>
<li>Google Material Design, en designformalisering</li>
<li>Hvad er servicedesign ?</li>
<li>Hvad er designtænkning ?</li>
<li>Hvad er til rådighed ?</li>
<li>Hvad er fladt design ?</li>
<li>Hvad er skeuomorfisme ?</li>
<li>Definition af følelsesmæssigt design, stedet for følelser i design</li>
</ul>
<p>Se vores tjenester:</p>
<ul>
<li>Vores træning til at designe et systemdesign</li>
<li>Vores 2 -dages tænkningstræning.</li>
</ul>