Share
Nog niet zo lang geleden introduceerde Google Material Design, een gloednieuwe reeks richtlijnen voor ontwerpers en ontwikkelaars. Material Design introduceert een nieuw perspectief op gebruikersinterfaces, beweging en interactiestatussen en vormt een geweldige basis voor u om een product op te bouwen.
In essentie kunt u Google's Material Design samenvatten in twee componenten:
Materiaal biedt context in ontwerp, het oppervlak en de rand van een "materiaal" geeft ons visuele aanwijzingen. Laten we dit vergelijken met het echte leven. We begrijpen de afmetingen van een kamer, omdat we muren zien. Tegelijkertijd geeft het interieur ons inzicht in de context van de ruimte. Je keuken ziet er heel anders uit dan je badkamer bijvoorbeeld.
Hetzelfde wordt toegepast in Material Design. De combinatie van stijl en inhoud biedt context voor de gebruiker in een digitale ruimte, net zoals fysieke muren en interieurs. Een gebruiker heeft een beter begrip van de gebruikersinterface, omdat het ontworpen materiaal context biedt voor de interface.
Een kaart biedt contextueel ontwerp en is een veelgebruikt element in Material Design. Een kaart biedt context op zichzelf, maar ook door een relatie te hebben met andere kaarten.Het concept van Beweging in Material Design heeft een zeer vergelijkbaar verhaal. Beweging biedt context in een ontwerp via de stroom van een applicatie, vooral als het gaat om de continuïteit van een product, heeft een gebruiker het gevoel ononderbroken te zijn. Er zijn geen obstakels, zoals inconsistentie in ontwerp of een verwarrende navigatie.
Hoe werkt de beweging precies? Hier is een voorbeeld. Er is een thuisfeed die bestaat uit een lijst met kaarten. Wanneer u op één kaart tikt, wordt het materiaal van de kaart groter tot de volledige breedte en hoogte van het scherm in plaats van de afmetingen van één kaart.
Merk op hoe dit voorbeeld zowel materiaal als beweging toepast. Een kaart is het materiaal. Wanneer een gebruiker ermee communiceert, wordt het door beweging uitgebreid om meer inhoud weer te geven. Dit zorgt voor continuïteit voor de gebruiker, omdat deze laat zien hoe hun invoer de gebruikersinterface beïnvloedt.
Laten we het materiaal een beetje verder verkennen. In essentie is materiaal de combinatie van uw statische ontwerpelementen. Denk aan vormen, kleuren, typografie en de verscheidenheid aan hulpmiddelen die u gebruikt om ontwerpen te maken. Dit alles vormt samen een materiaal.
Kleur is zowel voor ontwerpers als voor gebruikers van groot belang. Het heeft een enorme invloed op het uiterlijk en het gevoel van een ontwerp, maar ook op de psychologische effecten voor een gebruiker. Kleur kan een ontwerp betrouwbaar, spannend, utilitair en nog veel meer maken. Bij Material Design hebben we toegang tot een groot kleurenpalet, dat we kunnen gebruiken als basis voor het ontwerpen van een product.
Ik raad ten zeerste aan om de volgende referentie te hebben van kleuren die zijn opgeslagen als een bladwijzer, het is een handige verwijzing naar het ontwerpen van een kleurenpalet voor een gebruikersinterface.
Roboto, het standaard lettertype voor Android, is gepolijst om het te verbeteren voor gebruik op meerdere platforms. Voor ontwerpers die niet erg vertrouwd zijn met typografie, biedt Material Design richtlijnen die het ontwerp van typografie voor u regelen.
De gemakkelijkste manier om zelf aan de slag te gaan met dit raster, is door het volgende stickervel te downloaden. De richtlijnen zullen u voorzien van een structuur voor uw typografie wanneer u een nieuw ontwerp start.
Het ontwerpen van een lay-out in Material Design maakt gebruik van enkele van de basisprincipes van printontwerp, die Google aangeeft als inspiratiebron voor Material Design. Er is een sterke nadruk op het bouwen van gebruikersinterfaces die goed opschalen tussen verschillende soorten apparaten. Zoals u weet, is schaalbaarheid cruciaal geworden voor het ontwerpen van producten die succesvol zijn op meerdere apparaten.
Deze illustratie visualiseert het concept van diepte in gebruikersinterfaces.Een van de kernbegrippen is stapelen. Wanneer u een gebruikersinterface ontwerpt met materiaalontwerp, gebruikt u slagschaduwen, contrast in kleur en z-positionering om de gebruiker een gevoel van diepte te geven in de gebruikersinterface. Diepte creëert context voor gebruikers. Drijvende elementen bovenop stapels, zoals een knop, benadrukken de call-to-action in een gebruikersinterface.
Voorbeeld van drie dieptelaagdes: een menu, de bovenste navigatiebalk en het inhoudsgebied.Voor meer geavanceerde ontwerpers bevatten de richtlijnen basislijnrasters. De metrics en keylines-pagina in de Material Design-richtlijnen gaan gedetailleerd in en bieden u middelen om mee te experimenteren.
Als u liever werkt met een vooraf gemaakte lay-out, kunt u de witte kadersjabloon van Google downloaden.
Voorbeeld van een ontworpen lay-out. Beweging gaat hand in hand met materiaal zoals eerder beschreven in het kaartvoorbeeld. Beweging is wat ervoor zorgt dat ontworpen materiaal tot leven komt.
Wanneer je begint met het leren van de basisprincipes van bewegingsontwerp, is een van de eerste beginselen waar je over leert versoepelen.
Wanneer u een animatie vereenvoudigt, probeert u een beweging natuurlijker te maken. In plaats van de beweging van een object met een constante snelheid te animeren, verhoogt u de snelheid aan het begin van de animatie en verlaagt u de snelheid aan het einde van de animatie.
Denk aan een rijdende auto in het verkeer en hoe een auto accelereert en remt, het is een heel natuurlijke beweging. Easing probeert dat te repliceren zodat een gebruiker de beweging van een object als natuurlijk beschouwt.
De eenvoudigste manier om kennis te maken met versoepeling is om enkele ontwerpvoorbeelden te zien. De volgende bronnen zijn een goede bladwijzer:
Deze illustratie demonstreert versoepeling, zoals te zien in "Animation Principles in UI Design: Understanding Easing".Wanneer een gebruiker interactie heeft met een ontwerpelement, moet het element in de meeste gevallen feedback geven. In Material Design is het de bedoeling om de gebruiker te verrassen met bewegingsfeedback en om context te bieden voor het materiaal waarmee de gebruiker communiceert. Het mooie van responsive motion is dat u de actie van de gebruiker erkent, waardoor de bruikbaarheid van uw product wordt verbeterd.
Het mooiste voorbeeld dat ik heb gezien is de touch-rimpel, een visuele highlight wanneer de gebruiker een interactie aangaat met een bepaald element.
Een ander voorbeeld is het openen of uitbreiden van elementen. Wanneer u op een bepaald element tikt om het uit te vouwen, breidt nieuw materiaal uit vanaf het punt dat de gebruiker heeft aangeraakt. De groei van een element voelt natuurlijk aan als het direct vanuit het midden van de aanraking van de gebruiker groeit. Ga voor meer voorbeelden van responsieve interactie naar de Material Design-website van Google.
Last but not least, de overgangen tussen interfaces is belangrijk voor responsieve interactie. Het is de meest cruciale vorm van beweging om continuïteit voor de gebruiker te ontwerpen. Voor inkomende en uitgaande schermen biedt het punt van oorsprong context. Een gebruikersinterface kan dynamisch groeien en uitbreiden, waardoor ontwerpers voldoende ruimte hebben om met prachtige overgangen te spelen. En het beste van alles is dat ze ze zinvol kunnen maken.
Hieronder staan een paar geweldige voorbeelden van materiaalontwerp gemaakt door uitstekende ontwerpers.
Google - Materiaalverkenning door Aurélien Salomon
Alarmmateriaal UI door Ehsan Rahimi
Aviasales L (Materiaalontwerp) van Mark MDit is een korte introductie tot Material Design. Als een van de bovenstaande uw interesse heeft gewekt, raad ik u aan om meer te lezen in de officiële richtlijnen door Google.
Gelieve Material Design te benaderen met een creatieve mindset. Veel van wat wordt gepresenteerd is een herinnering aan wat geweldig ontwerp geweldig maakt. Tegelijkertijd zijn ze dat ook enkel en alleen richtlijnen, wat betekent dat u omwille van het groeien als ontwerper meer dan welkom bent om het uw eigen draai te geven.
Ik moedig jullie allemaal aan om een ontwerp te maken met deze set richtlijnen in gedachten. Het kan betekenen dat je een andere aanpak kiest dan normaal, wat geweldig is om je vaardigheden op scherp te houden en te groeien als ontwerper.
Wat denk je van Material Design? Wat zijn je ervaringen tot nu toe geweest? Deel het alsjeblieft hieronder in de comments, ik ben erg benieuwd en ik ben er zeker van dat vele anderen dat ook zijn.
Accentsconagua