Materiaalontwerp, gebruikersinterface volgens Google

In het moderne scenario, als je beweging wilt opnemen, moet je het echt maken, met respect voor de natuurwetten en de functionaliteit van dingen in de echte wereld. Gebruikers zijn inderdaad gewend om beweging te voelen in hun dagelijkse leven. Dit trekt hun aandacht aan en helpt hen de functionaliteit van dingen beter te begrijpen.

20 basisprincipes van het materiaalontwerp

Het materiaalontwerp is een reeks principes en richtlijnen die het ontwerp van moderne en elegante gebruikersinterfaces (IU) begeleiden. Deze visuele taal is gelanceerd door Google en beoogt coherente en harmonieuze interfaces op alle apparaten te maken, ongeacht het besturingssysteem of de gebruikte interface.

Het materiaalontwerp is gebaseerd op drie hoofdpijlers: het fysieke universum, kleur en ruimte. Elke interfacecomponent moet in dit universum opgaan, met respect voor de verhoudingen en kleuren die specifiek zijn voor elk materiaal. De spaties moeten ook goed worden gedefinieerd, zodat de gebruiker gemakkelijk van het ene element naar het andere kan navigeren.

Wat is het materiële ontwerp ?

Het is wat ?

Het materiaalontwerp is een reeks ontwerpregels, gemaakt door Google in 2014. Dit instrument vergemakkelijkt het beheer van de componenten van het platform. Google -ontwerpers hebben inderdaad begrepen dat componenten specifieke fysieke eigenschappen moeten hebben.

Het materiële ontwerp bevat dus richtlijnen voor alles:

• De breedte
• Snelheid
• De schaduw

• De typografie
• Roosteren
• Ruimte
• De kleur
• De schaal
• In beeld brengen

Op deze manier hebben gebruikers de indruk in contact te zijn met fysieke elementen van de echte wereld.

Evenzo is het materiële ontwerp niet alleen een kwestie van ontwerpers hoe ze kunnen werken aan de verschijningen van producten en diensten. Het stelt ontwerpers ook in staat om opzettelijke ontwerpen te maken.

Waarom kiezen voor het materiaalontwerp ?

Net als de meeste ontwerpsystemen is materiaalontwerp gemaakt om een ​​betere gebruikerservaring te bieden op verschillende apparaten en platforms. Het doel is dat gebruikers een coherente ervaring hebben .

Het materiaalontwerp is geen eenvoudige set stijlrichtlijnen. Dit is een compleet ontwerpsysteem.

In tegenstelling tot andere minder complete ontwerpsystemen, kan het ontwerpsituaties beheren, met complexe use cases.

Evenzo is het materiaalontwerp een vrij flexibele ontwerpbibliotheek. In richtlijnen wordt een groot deel van de specificiteiten van de implementatie van het ontwerp volledig aan de ontwerper overgelaten.

Lijst met principes van het materiële ontwerp

Principe 1: maak je vertrouwd met belangrijke bronnen

Als u specifieke kennis van het materiaalontwerp wilt verwerven, is de beste oplossing om de officiële Google -bron te raadplegen.

Het wordt continu bijgewerkt en bevat alle volledige en noodzakelijke details, voor het ontwerp van materiaalontwerpen.

Het beste voordeel met betrekking tot deze bron is dat deze niet alleen beperkt is tot specifieke aspecten in Android. Integendeel, het omvat het gehele materiaalontwerpaspect, in elk project dat ook het type applicatie of op het web.

Het is raadzaam om op zijn minst de eerste hoofdstukken van deze bron te bladeren om zich vertrouwd te maken met zijn fundamentele principes.

Principe 2: weet wat “materiaal” is in het materiaalontwerp

Het ontwerp van de naam materiaal is verre van onschadelijk. Materiaalontwerp is een imitatie van het materiaal en de fysieke wereld. Ze is geïnspireerd door haar texturen, zelfs door de weerspiegeling van licht en de projectie van schaduwen. De materiaaloppervlakken vinden het papier opnieuw uit en inkt ondersteunt.

Het centrale idee van de principes van het materiële ontwerp is inderdaad gericht op het creëren.

Principe 3: gebruik schaduwen om visuele hiërarchieën te definiëren

De belangrijkste materiaalontwerptools zijn:

• Randen
• Oppervlakken
• Verlichting
• Realistische schaduwen

De schaduwen helpen u bijvoorbeeld om prioriteit te geven aan de verschillende elementen, om een ​​volledig ontwerp te hebben.

Principe 4: Gebruik heldere kleuren

Het materiaalontwerp is ongetwijfeld een ontwerp gemaakt in een minimalistische aanpak. Met andere woorden, u hoeft niet veel ontwerp- en stijltools te gebruiken.

Een van de weinige materiële dingen die u kunt gebruiken, is de kleur. Precies de heldere kleur. Inderdaad, felle kleuren spelen een belangrijke rol bij het verbeteren van het materiaalontwerp. Ze trekken de aandacht van gebruikers en moedigen hen aan om te communiceren met design.

Principe 5: verwaarloek de primaire kleur en accent niet

De beste manier om dit principe aan elk type ontwerp aan te passen, is door drie tinten te kiezen die als een hoofdpalet zullen dienen, met een kleur die als een accent zal dienen.

De primaire kleuren die u kiest, kunnen worden gebruikt in belangrijke elementen van de interface, waaronder:

• De velden
• Dozen
• De achtergronden
• Lettertypen, etc.

En de kleur van het accent is, zoals de naam al doet vermoeden, benadrukt en vestigt de aandacht op een hoofdelement. Vergeet niet dat de gekozen accentkleur contrasteerder moet zijn dan die van primaire kleuren.

Principe 6: Maak goed gebruik van witte ruimtes

Witte ruimtes spelen een sleutelrol in de lay -out van de tekst en typografie. In werkelijkheid is White Space een hulpmiddel om de aandacht te trekken, gebruiker te trekken en hun aandacht op een bepaald element te richten.

Dus aarzel niet om:

• Gebruik grote typografie voor hoofdtitels
• Voeg veel witte spaties toe
• Houd voldoende lege ruimte in uw wereldwijde ontwerp.

Principe 7: Volg de nieuwe trend van edge-to-edge afbeeldingen

Materiaalontwerpen zijn volledig aangepast aan de afbeelding. Dus als u hebt besloten afbeeldingen aan uw ontwerp toe te voegen, moeten ze een hoofdrol hebben.

De afbeeldingen die zijn opgenomen in het materiaalontwerp, moeten de edge-to-rand-modus volgen. Dat wil zeggen, er mogen geen marges zijn, waardoor de rand van een afbeelding van de rand van het venster of het scherm wordt gescheiden.

Principe 8: Alles moet reactief zijn

Dingen toegankelijk en bruikbaar maken op elk apparaat, ongeacht de grootte van het scherm, is een van de basisprincipes van het materiaalontwerp. Het doel is om een ​​coherente ervaring aan te bieden. Op deze manier zal de gebruiker zich niet verward voelen tijdens de overgang van het ene apparaat naar het andere, omdat hij geen nieuwe interface zal krijgen elke keer dat hij het apparaat zal veranderen.

In dit geval moet het ontwerp reactief zijn. Gelukkig, dankzij geavanceerde kaders, is de helft van je werk al klaar. Bijgevolg zal het creëren van een reactief ontwerp geen moeilijke taak voor u zijn.

Principe 9: Dimensies

Op internet wordt de z -as gebruikt voor superpositie en niet voor het vooruitzicht. Aan de andere kant is de 3D -wereld gebaseerd op de Y -as.

Het ontwerpmateriaal gebruikt voornamelijk 3D, dus de y -as. Kijk eens naar het ontwerp van Google, om het isometrische perspectief op te merken. Deze manier van ontwerp is geïnspireerd door de echte wereld, vandaar de naam “materiaal”.

Principe 10: onthoud, succes is in detail

In het materiële ontwerp moet alles eenvoudig zijn. Het beste voorbeeld kan het skeuomorfe ontwerp zijn . Deze techniek is bedoeld om echte objecten te imiteren tijdens het ontwerp van virtuele objecten. U moet er daarom voor zorgen dat elk element van uw ontwerp er zoveel mogelijk uitziet in de dingen van het echte leven.

Principe 11: De beweging moet een betekenis hebben

Volgens Google geeft beweging betekenis aan een ontwerp. Wanneer u met het materiële ontwerp werkt, is beweging een component dat moet worden opgenomen.

In het materiaalontwerp moet de beweging deze 3 kenmerken hebben:

1. Wees informatief: het moet bij gebruikers bekend zijn waar en wanneer de actie beschikbaar was.
2. Help gebruikers u te concentreren en begeleid u naar de belangrijkste onderdelen van de pagina.
3. Wees expressief en voeg een beetje persoonlijkheid en dynamiek toe aan de interface.

Principe 12: De beweging moet authentiek zijn

In het moderne scenario, als je beweging wilt opnemen, moet je het echt maken, met respect voor de natuurwetten en de functionaliteit van dingen in de echte wereld. Gebruikers zijn inderdaad gewend om beweging te voelen in hun dagelijkse leven. Dit trekt hun aandacht aan en helpt hen de functionaliteit van dingen beter te begrijpen.

Dit is de reden waarom Google een apart gedeelte van de richtlijnen van materiaalontwerp heeft gereserveerd, om het concept van authentieke beweging te beschrijven.

Principe 13: versnelling en vertraging in bewegingen

U moet een duidelijke en praktische overgang voor gebruikers bieden. Het bewegingsproces moet waarschijnlijk en realistisch zijn, omdat het materiële ontwerp gericht is op de reproductie van fenomenen in de echte wereld.

Ontwerpers moeten de beste tijd vinden, voor elke objectbeweging.

Enerzijds kan een buitensporige traagheid van de elementen gebruikers afleiden en zelfs een negatieve invloed hebben op de stroom van gebruikers. Aan de andere kant kunnen te dynamische bewegingen internetgebruikers storen.

In dit geval moet u zich in het juiste midden bevinden en een optimale duur en een goede leesbaarheid van de animaties waarborgen. Het is noodzakelijk om gebruikers voldoende tijd te geven, zodat ze de wijzigingen kunnen opmerken. Maar laat ze niet wachten. Onderzoek bewijst dat 200 tot 500 ms de beste animatiesnelheden zijn.

Principe 14: Profiteer van pictogramanimaties

Soms kunnen pictogrammen worden gemaakt met contextknoppen met een cirkelvormig openbaring -effect.

Het is waar dat internetgebruikers deze details niet vaak opmerken, maar ze zijn belangrijk om een ​​positieve invloed te hebben op de wereldwijde gebruikerservaring.

Principe 15: Creëer verschillende timings voor verschillende bewegingen

De geanimeerde objecten die één voor één verschijnen, zijn interessanter en levendiger. Een dergelijke aanpak biedt gebruikers de mogelijkheid om naar elk item te kijken.

Aan de andere kant presenteren alle elementen van de pagina tegelijkertijd gebruikers, omdat ze niet weten waar ze moeten kijken.

Materiaalontwerp, gebruikersinterface volgens Google !

Het materiaalontwerp is een visuele en interactieve taal gemaakt door Google. Maar het is ook een handleiding om een ​​grafische interface (ontwerpsysteem) te ontwerpen. Dit ontwerp is “materiaal” omdat het is geïnspireerd door echte objecten, papier en inkt wat, het verschilt van een vlak ontwerp. Google gebruikte materiaalontwerp om de grafische stijl van de toepassingen en platforms te verenigen. De interface heeft daarom het voordeel dat het zeer geschikt is voor gebruik voor elk apparaat en alle weergave -resoluties. Ze is ook betaalbaar. Het materiaalontwerp zou de UX optimaliseren, terwijl het middelen aanbieden aan ontwikkelaars en interface -ontwerpers. Zoals bij elke grafische stroom, heeft het zijn amateurs en tegenstanders.

Materiaalontwerp is vooral een metafoor. Een materiële metafoor als een verenigende theorie van een gerationaliseerde ruimte en een bewegingssysteem. Het materiaal is verankerd in tactiele realiteit, geïnspireerd door de studie van papier en inkt, maar technologisch geavanceerd en open voor verbeelding en magie.

Wat is het materiële ontwerp ?

De naam “materiaalontwerp” komt overeen met een set van Ontwerpregels Voorgesteld door Google. Het wordt soms vertaald door “materiaalontwerp” of “contextueel ontwerp”. Het was in de eerste plaats een ontwerp bedoeld voor mobiele applicaties (eerst mobiel). Hij werd toen een van de belangrijkste trends in interface -ontwerp. De aanpak van Google herinnert aan de Plat ontwerp (of plat ontwerp): minimalisme, geometrische vormen en kleurrijk, zonder overbodig (in tegenstelling tot skeuomorfisme). Maar in dit geval is het een vlak ontwerp … met dikte en verlichting. Inderdaad, hier zijn de belangrijkste kenmerken:

• A metafoor papier en inkt van digitale apparatuur.
• Een gewaagd ontwerp en grafiek.
• De creatie van bewegingen Om de betaalbaarheid en de UX te verbeteren. De acties van de gebruiker veroorzaken aanzienlijke micro-interacties.

De polymeerbibliotheek

Om de grafische elementen van het materiaalontwerp (papieren elementen) en basiscomponenten (kernelementen) te gebruiken, heeft Google de bibliotheek, polymeer gemaakt, bedoeld voor ontwikkelaars van webtoepassingen. Sindsdien heeft Google verschillende sites en tools aangeboden om ontwerpers te helpen ontwerpen met deze ontwerpstijl.

Zie deze verklaring in de vorm van “manifest”, te vinden in de introductie van de materiaalreferentielite.IO:

“We hebben onszelf uitgedaagd om visuele taal te creëren voor onze gebruikers die de klassieke principes van goed ontwerp, innovatieve en de mogelijkheden van technologie en wetenschap synthetiseren. We noemen het: materiaalontwerp.»

Webdesign volgens Google

Het materiaalontwerp verschilt daarom van een vlak ontwerp. Het is een nieuw soort webontwerp. We kunnen zeggen dat hij een is Responsief webdesign (Auto Adaptive) Gecentreerd op de gebruikerservaring. Het doel is om een ​​ontwerp te krijgen:

• Intuïtief Voor alle gebruikers (inclusief niet ervaren)
• Geschikt voor alle steunen (computer, tablet, smartphone, enz.)
• Interactief Dankzij dynamische animaties.
• Homogeen tussen alle interfaces

Volgens Google maakt dit ontwerp gebruik van technologische en wetenschappelijke mogelijkheden om weboplossingen te bieden aan hedendaagse ergonomie en ontwerpproblemen. In de onderstaande video drukken de ontwerpers van Google hun eerste motivaties uit, de manier waarop ze werkten en de “fysieke” ervaringen uitgevoerd. We merken op dat als deze ontwerptaal verankerd is in een realiteit, het een belangrijke plek achterlaat aan de verbeelding van de gebruiker. De term “magie” keert vaak terug over het materiële ontwerp.

Google opnieuw ontwerpen

Om de aanpak van Google volledig te begrijpen, moet u teruggaan naar de oorsprong van Google, en het belang dat het bedrijf van Montain View heeft aangevallen ontwerp. Nou niet veel … volgens de initiatiefnemers van het materiële ontwerp.

Het zien van deze video geeft ons een goed idee van het belang van het dragen van een “visie” om dit project uit te voeren: Google opnieuw ontwerpen.

Waarom het materiële ontwerp ?

Zichtbaar in versie 5.0 van Android, het materiaalontwerp werd voor het eerst gepresenteerd op 25 juni 2014 door Matias Durity, directeur van de Android -gebruikerservaring bij Google. Het was als onderdeel van de Google I/O -conferentie. Met dit nieuwe ontwerpcharter heeft Google zijn eigen gemaakt beestjes, identificeerbaar, ongeacht de service of het product, van mobiele applicaties tot verbonden objecten.

Matias Duarte exposeerde de metafoor voor papier (Android / Materiaal) in 2014 in 2014).

Bekijk deze video om de eerste verjaardag van deze ontwerpbenadering te vieren. Het was er een na de lancering, in mei 2015. Matias Durate werpt het afgelopen jaar een retrospectieve blik op en zou al kunnen waarderen met welke enthousiasme -ontwerpers, maar ook ontwikkelaars, de principes hadden toegewezen die een jaar eerder werden gepresenteerd.

Voor of tegen het materiële ontwerp ?

Dit ontwerp is ook ontworpen om Verrijk de gebruikerservaring En de effectiviteit van de interface (nieuwe lettertypen die in meerdere talen zijn leesbaar, betere betaalbaarheid …) Een jaar later onthulde Google onder andere de materiaalontwerp Lite Kit voor webprojecten (download de kit hier).

Het materiaalontwerp heeft verschillende reacties gewekt. Sommigen keurden deze “verbetering” goed van een vlak ontwerp dat simplistisch en saai werd beschouwd. Het is inderdaad een “vloeistof” en ontroerend ontwerp. In de compositie structureren poorten, responsieven en dynamiek de interface. Spaties, uitlijning en kleuren zijn essentieel in de ontwerpfase. Al deze elementen geven prioriteit aan de inhoud en faciliteren de navigatie van de gebruiker. Animaties, gebaseerd op de natuurwetten, stellen de gebruiker geruststellen over het resultaat van zijn acties.

Voor anderen probeert Google echter op te leggen grafische stijl, Met het risico de creativiteit van ontwerpers/grafisch ontwerpers te beperken. Alle websites zouden er dan uitzien als Android -applicaties, ten nadele van de Kwaliteit van gebruikerservaring.

Hoe het werkt ? Toepassing met Android

We moeten er rekening mee houden dat dit “materiële elementen” zijn. Het is dus onmogelijk om een ​​element over te steken. Alleen de door de gebruiker getroffen onderdeel zal reageren. In het materiële ontwerp, deomgeving is 3D. Elk object, of “materiaal”, heeft 3 coördinaten: x, y, z. De Z -as betreft de verhoging van het object. We kunnen beslissen over de verhoging van het object, de afmetingen en de beschadigde schaduwen, maar de dikte blijft die van een vel papier. De laatste kan niet buigen. Aan de andere kant beweegt het op alle assen.

Android biedt drie thema’s (Dark of Light Material Theme, Light Material Theme met Dark ActionBar) om rechtstreeks in de toepassing te worden geïmplementeerd door te wijzigen, als u dat wilt, enkele van de attributen. DE entertainment Toepassen op objecten/elementen van de interface zijn twee: de tween -animatie (voor overgangen, bijvoorbeeld door te roteren op de afbeelding) en de frame -animatie (weergave van verschillende afbeeldingen). Met de loadanimatie kunt u ze laden en de startanimatie van het activeren/lanceren ervan.

Voorbeelden van materiaalontwerpinterfaces

Theoretische verklaringen – de metafoor van intelligent papier dat tot leven komt en met de gebruiker interageert – lijkt misschien onduidelijk. Maar observeer interfaces concreet het begrip van het concept van Google vergemakkelijkt.

Zie de bronnen op de UPLABS (verhalen.UPLABS.com)

Een andere bron, rijk aan voorbeelden: het Material Design Blog

Materiaalontwerppictogrammen

Dit ontwerpsysteem moest zijn eigen pictogrammen produceren. Een grote bibliotheek is beschikbaar op verschillende bronnensites, waardoor ui -ontwerpers veel tijd besparen wanneer u de complexiteit van een ontwerp van homogene coherente iconen kent.

Lees onze artikelen opnieuw op dit onderwerp:

Zie de GitHub -gids voor het gebruik van deze pictogrammen in verschillende omgevingen.

Andere materiële pictogrammen (om hier te downloaden)

U kunt hier veel materiaalontwerppictogrammen downloaden

Een andere bron van materiaalontwerppictogrammen om hier te downloaden

Grote keuze aan materiële pictogrammen in plat ontwerp om te gebruiken op uw projecten, maar ook gidsen om ze te gebruiken (hier)

Enkele bronnen en inspiraties

• De referentie op het materiaalontwerp: materiaal.io
  • Beweging
  • Stijl
  • Lay -out
  • Onderdeel
  • Patronen
  • Groei en communicatie
  • Bruikbaarheid
  • Platforms
  • Op de Google -ontwerpsite vindt u case studies en praktische gidsen (veel bronnen en mogelijkheid om zich te abonneren op een zeer rijke nieuwsbrief)

  Conclusie

  Het Google -materiaalontwerp profiteert van de Eenvoud van plat ontwerp. De interface is verfijnd en visueel evenwichtig. Net als een vlak ontwerp voldoet het aan de vereisten van Reagerend ontwerp. Maar waar een plat ontwerp vaak wordt bekritiseerd door zijn Gebrek aan betaalbaarheid, Google eerlijk Een deel van het skeuomorfisme op een hoog abstractieniveau. Het intelligente gebruik van animaties, typografische keuzes en de metafoor van papier verbeteren dus de gebruikerservaring. De omvang van de grafische elementen die aan ontwikkelaars worden aangeboden, maakt het ook mogelijk om te begrijpen hoe het ontwerp van het Android -materiaal het web heeft veroverd … met het risico dat het invasief is. Natuurlijk hangt de keuze om dit type ontwerp te gebruiken, zoals bij elke ontwerptrend, afhankelijk van gerichte gebruikers en bedrijfsdoelstellingen/merk. Aan de ontwerper/ontwerper om te beslissen of hij de Materiaalontwerp charter, Om er door geïnspireerd te worden of af te wenden.

  • Google Material Design, een ontwerpformalisering
  • Wat is serviceontwerp ?
  • Wat is ontwerpdenken ?
  • Wat is de betaling ?
  • Wat is een vlak ontwerp ?
  • Wat is skeuomorfisme ?
  • Definitie van emotioneel ontwerp, de plaats van emoties in ontwerp

  Zie onze diensten:

  • Onze training om een ​​systeemontwerp te ontwerpen
  • Onze 2 -day Thinken Design Training.