Wat is het verschil tussen plat ontwerp en materiaalontwerp. Gratis set mobiele ontwerptools. Matkrial-ontwerp voor Android door Ivan Bjelajac

laat een reactie achter 6,950

Van de auteur: Material Design is de laatste tijd uitgegroeid tot een behoorlijk grote beweging. Tegenwoordig vind je in veel toepassingen al verschillende componenten van materiaalontwerp: van kaarten tot verbeterde animatie.

Dit is al vele malen besproken, aan de ene kant is het een mooi voorbeeld van evolutie. Het is nu gemakkelijker dan ooit om een echt samenhangend ontwerp te maken. Aan de andere kant is er een mening dat er absoluut geen originaliteit in deze richting is, omdat iedereen het materiaalontwerp gebruikt.

In deze zelfstudie laten we u zien hoe u het ontwerpmateriaal als basis voor het concept kunt nemen en het kunt gebruiken om een sterk verbeterde interface te creëren die tegelijkertijd de essentie ervan veel duidelijker zal overbrengen.

Materiaalontwerp als basis

Allereerst verbiedt niemand je om interfaces te ontwerpen met materiaalontwerp. In feite helpt deze aanpak om de basis te leggen, de basis waaraan Android-gebruikers al heel lang gewend zijn.

"Als je iets wilt creëren dat aantrekkelijk is voor de gebruiker, hoef je het wiel niet opnieuw uit te vinden."

Het toepassen van normen is een goede garantie dat uw project ook echt gaat werken. In dit geval zult u nooit problemen hebben met de structuur van de interface en de interactie met elkaar. Dit betekent echter niet dat u geen fouten zult maken of dat u niet iets beters zult creëren.

Kaarten gebruiken in ontwerp

Het hele punt van Material Design brengt ons terug naar het gebruik van kaarten. Tegenwoordig zijn kaarten zeker een onderdeel dat in veel situaties kan worden gebruikt en daarom buitengewoon nuttig. Tegelijkertijd is het een mooie uitdaging om na te denken over welke elementen gebruikt kunnen worden om de kaarten te vervangen. We zien steeds meer sites die gebaseerd zijn op inhoudskaarten, dus je zou kunnen nadenken over hoe je deze kunt vervangen.

Laten we als voorbeeld een kalender nemen. De kaart geeft specifieke evenementen weer in plaats van een lijst met dagen, terwijl de Sunrise-app een combinatie van de maand en aankomende evenementen in de week weergeeft.

Links: Material Design kalenderconcept; Rechts: Zonsopgang

Als je je wilt laten inspireren door nieuwe, unieke interfaces, dan zijn games daar geweldig voor. Bekijk de UIMovement-site-interface voor inspiratie.

"Zijn kaarten de meest optimale oplossing voor het maken van interfaces, of zijn er interessantere manieren om dit probleem op te lossen?"

Elke applicatie lost dit probleem op zijn eigen unieke manier op. Als je deze gedachte voortzet, kun je eraan toevoegen dat je misschien in jouw geval gewoon een andere benadering nodig hebt om een interface te maken. En wat ga jij doen? Het begint allemaal met de inhoud en het menu, hier vertel ik je hieronder meer over.

Pas op voor zwevende knoppen

Een voorbeeld van een zwevende knop in Google inbox

Nog een van de sjablonen in Material Design zijn zwevende knoppen. Knoppen zoals deze werken prima en je kunt ze gebruiken om nieuwe acties aan je interface toe te voegen. Maar tegelijkertijd kunnen ze een van de slechtste mechanismen in het ontwerp zijn. Er zijn veel manieren om zwevende knoppen te misbruiken:

Een knop op een scherm met meerdere taken plaatsen

Menulocatie in een zwevende knop

Wijs kritische ontwerpelementen toe aan een knop

Persoonlijk zie ik een paar voorbeelden waar zwevende knoppen perfect passen, voornamelijk applicaties met één interface. Een goed voorbeeld zijn ook messengers, dezelfde Uber.

De truc is om erachter te komen of uw project deze knoppen nodig heeft. Ga er niet vanuit dat als het een standaard ontwerpelement is, het perfect in uw toepassing zal passen. En voor complexere projecten waarbij de gebruiker veel verschillende handelingen moet uitvoeren, zijn zwevende knoppen niet meer geschikt.

Strategieën voor gebruikersconversie en gebruikersbehoud op uw site

Met te veel ijver in Material Design, is het vrij gemakkelijk om de basis te vergeten. Hoe bepaal je vooraf welke Material Design-componenten je wilt gebruiken en wat je kunt verbeteren?

"Als je in een vroeg stadium specifieke ontwerpcomponenten kiest, kun je in een hokje worden geplaatst."

Hieronder heb ik een korte lijst gemaakt van specifieke elementen die een duidelijk begrip vereisen van wat je er vervolgens mee gaat doen.

Op basis van de bovenstaande regels kunt u beslissen welke manier van navigeren door de applicatie het beste is voor uw gebruikers. Als je een extreem complexe en verwarrende applicatie hebt, dan is een uitklapmenu iets voor jou. Is uw service eenvoudig? Dan kun je tabbladen gebruiken. Voor meer informatie over navigatie en Material Design raad ik aan de tutorial te lezen.

Inhoud

De interface verbeteren

We zijn nu in het stadium waarin we de basis van onze applicatie al hebben gelegd en weten welke Material Design-elementen we zullen gebruiken. Nu is het tijd om het hele ding "op te peppen". Er zijn verschillende manieren om de interface van uw website te verbeteren, enkele hiervan worden hieronder weergegeven.

Typografie

Het juiste lettertype draagt in grote mate bij aan de look en feel van uw website. Door een aangepast lettertype te gebruiken, kunt u het ontwerp effectief verbeteren en uw site zonder veel moeite een unieke uitstraling geven. Het kiezen van het gewenste lettertype is echter geen gemakkelijke taak en in de regel een kwestie van smaak. Mijn favoriete bron voor Typewolf-lettertypen.

pictogrammen

Het maken van unieke, unieke animaties kost de meeste moeite. Hoe gaaf is het echter om live op jouw site te zien hoe het werkt. Unieke animatie, gebouwd op een niet-standaard en zeer eenvoudige interface, is een zeer zeldzaam en waardevol fenomeen dat op het net te vinden is.

Uniek kleurenschema

De app maakt gebruik van het Material Design-concept met een ongebruikelijk kleurenschema. ...

Material Design heeft een zeer rijke keuze aan kleuren. Maar dit betekent niet dat je niet zelf iets kunt bedenken.

klein voorbehoud

Er is een reden waarom de meeste interfaces die we tegenkomen vrij eenvoudig en primitief van ontwerp zijn. Deze aanpak werkt, het is gemakkelijker voor gebruikers om te navigeren in een lichte, pretentieloze interface.

Experimenteel ontwerp kan uw site verpesten

Maar zelfs met kleine wijzigingen zoals lettertype en kleurenpalet, kunt u ver genoeg gaan en uw eigen unieke ontwerpen ontwerpen.

Conclusie

Material Design is een geweldige airbag voor het geval je ontwerpproblemen tegenkomt. U bent vrij om uit te zoeken hoe uw interface zou moeten werken. Snapchat heeft gebarenlogica, Facebook Paper (iOS) heeft de lay-out, hiërarchie en animatie opnieuw uitgevonden, en Medium is buitengewoon effectief geweest in het minimaliseren van de interface en het vestigen van de aandacht van gebruikers op lezen (en schrijven).

In ons artikel van vandaag zullen we ingaan op een onderwerp dat nog niet is besproken over Rusability. Eerlijkheidshalve merken we op dat in Runet als zodanig de belangstelling voor dit onderwerp net begint te groeien, ondanks het feit dat het concept zelf vorig jaar werd geboren. Dit is een sensationele en, zoals sommigen geloven, revolutionaire ontwerprichting, die Google materiaalontwerp heeft genoemd.

Materiaalontwerp is niet zozeer een nieuwe benadering om relaties tussen de gebruiker en de virtuele omgeving op te bouwen, maar eerder een hele filosofie die dergelijke relaties reguleert. Zoals veel echt heldere en frisse fenomenen van de afgelopen tijd, is materiaalontwerp een succesvolle compilatie van die ideeën en concepten die ofwel al afzonderlijk in verschillende producten zijn aangetroffen, of, zoals ze zeggen, in de lucht waren. Het debat over de vraag of materiaalontwerp een goede richting is, is nog steeds gaande, evenals een kieskeurige en nauwgezette zoektocht naar allerlei tekortkomingen, maar misschien ontkent niemand dat dit concept een zeer nauwkeurige weerspiegeling is van de tijdgeest en de ambities van gewone gebruikers. Het is esthetisch consistent, aantrekkelijk, intuïtief en blijkbaar heel gemakkelijk te gebruiken. "Materiaalontwerp is cool" - dit soort emotie brengt zowel een enthousiast publiek als een publiek met een meer kritische blik bij elkaar en wijst op de tekortkomingen van materiaalontwerp.

Materiaalontwerp kan worden gezien als de eerste grote en redelijk voorspelbare stap naar massale interface-unificatie, en dus een uniforme gebruikerservaring als zodanig. Deze functie is de sleutel tot materiaalontwerp - het is veelzijdig en consistent. Het tweede kenmerkende kenmerk van materiaalontwerp is intuïtiviteit, het volgende belangrijkste aspect na alomvattende eenwording. In feite zijn deze twee componenten - interface-unificatie en maximale intuïtiviteit - ontworpen om van materiaalontwerp een werkelijk enorm fenomeen te maken.

Google heeft Material Design op 25 juni 2014 voor het grote publiek uitgebracht als het ontwerp van het nieuwe Android-besturingssysteem, later Lollipop genoemd. Materiaalontwerp kan alleen volledig worden gebruikt in het kader van het maken van applicaties voor Lollipop, maar sommige applicaties voor Android 4 kunnen ook opnieuw worden ontworpen in de materiaalstijl, echter met bepaalde beperkingen. De belangrijkste en waarschijnlijk enige factor die de vrijheid van ontwikkelaars van applicaties voor Lollipop aanzienlijk beperkt, is de slechte compatibiliteit van het materiaalontwerpconcept met eerdere versies van Android en de nog steeds lage prevalentie van Android 5.1 Lollipop. Hoe dan ook, het wegwerken van dit laatste gebrek is slechts een kwestie van tijd.

Android Lolly

De release van het materiaalontwerpconcept ging gepaard met de opkomst van een gedetailleerd, toegankelijk en gedetailleerd Richtlijn van Google... Terwijl we materiaalontwerp in ons artikel bespreken, zullen we regelmatig verwijzen naar deze complete en kleurrijke tutorial van de ontwerpers van Google.

Kernpunten en basisprincipes van materiaalontwerp

De hele filosofie van materiaalontwerp berust op vier fundamentele en begrijpelijke principes:

Oppervlakken. Belichaamd in de vorm van kaarten gemaakt van "digitaal papier", gehoorzamen dergelijke oppervlakken volledig aan de wetten van de fysieke wereld, hebben een tactiele respons en bieden sterke feedback samen met een hoge intuïtie.
Typografie van de polygrafische zin. Waarom zou u niet profiteren van meer dan een eeuw printervaring in plaats van het wiel opnieuw uit te vinden? Aangezien het oorspronkelijke oppervlak nu wordt weergegeven door lagen virtueel, praktisch tastbaar papier, is het vrij logisch om er informatie op aan te brengen in overeenstemming met de beste voorbeelden van printproducten. Meer overdreven, Google heeft de regels van "echte" typografie aangepast voor mobiele schermen.
Animatie. Animatie in materiaalontwerp moet fysieke wetten gehoorzamen, en daarom - de intuïtieve verwachtingen van de gebruiker. De relatie tussen bewegende objecten, hun invloed op elkaar, de manier waarop ze verschijnen en bewegen - dit alles moet echt, logisch en voorspelbaar zijn.
Adaptief ontwerp. Het belangrijkste aspect waar we het aan het begin van het artikel over hadden. Responsive design is bedoeld om de gebruikerservaring te verenigen en consistent te maken op alle platforms.

Door deze vrij eenvoudige en voor de hand liggende principes te combineren, heeft Google een krachtig en zeer logisch systeem gecreëerd, dat waarschijnlijk de komende vijf jaar door ons zal worden gebruikt. Laten we elk van de vier aspecten van materiaalontwerp eens nader bekijken.

Oppervlakken, hun eigenschappen en functies

De materialiteit van het Google-concept is geconcentreerd in de eigenschappen van oppervlakken. De interfacestructuur zelf is zo realistisch mogelijk - het heeft een diepte die wordt beperkt door de dikte van het apparaat. Een apparaat van 1 cm dik door materiaalontwerp zal bijvoorbeeld een binnenwereld van dezelfde dikte bevatten. Dit lijkt erg op een dun aquarium, dat een achterwand en een voorruit heeft, maar in plaats van het zeeleven drijven in dit aquarium oppervlakken die op vellen papier lijken en in lagen over de dikte van het aquarium zijn verdeeld. En, net als de onderwaterbewoners, zijn deze oppervlaktekaarten volledig onderworpen aan fysieke wetten - soms lijkt het alsof ze meer dan echt zijn, ingesloten tussen de achterkant van de smartphone en het glas van het scherm.

Materiaal ontwerp cutaway

AsZin de wereldmateriaal ontwerp verantwoordelijk voor het volume van de interface

In de wereld van materiaalontwerp bevinden oppervlakken zich op verschillende diepteniveaus. En als er in plat ontwerp, dat een van de voorlopers van materiaal is, geen spoor van volume was, in materiaalontwerp, bijna onmerkbaar, vormen lichte schaduwen een ongelooflijk realistische diepte.

Schaduwen weergeven in materiaalontwerp

Stel je voor dat je stukjes gewoon papier op je bureau hebt liggen, in rechthoeken van verschillende afmetingen gesneden. Door ze over het tafelblad te schuiven en elkaar overlappend te zien, zie je duidelijk welke van de papieren kaarten op elkaar liggen. Dit komt door de lichte schaduw van de randen van het papier. Bij het materiaalontwerp hebben de ontwikkelaars dit principe volledig opnieuw gecreëerd, en de distributie van digitale papieren kaarten op verschillende niveaus, wanneer de ene kaart de andere overlapt, komt volledig overeen met de inhoudshiërarchie - het oppervlak op het andere en het werpen van een schaduw erop is momenteel de belangrijkste, daarop is de aandacht van de gebruiker gericht.

Het prioriteitsoppervlak komt naar voren en werpt een schaduw op het onderste "blad"

Het oppervlak zelf is inderdaad een vlak met een bepaalde vorm (in de meeste gevallen rechthoekig), dat een schaduw kan werpen. Het oppervlak dient als platform voor inhoud, een blanco vel papier waarop later andere elementen zullen verschijnen. Niets meer wordt bedoeld met het oppervlak in het materiaalontwerp - de stukjes "digitaal papier" hebben en kunnen geen textuur- of gradiëntovergangen hebben.

Kenmerken van typografie in materiaalontwerp

Zoals we al zeiden, is typografie in materiaalontwerp net zo 'echt' als oppervlakken. Dit betekent dat ze dezelfde regels en benaderingen gebruikt als bij het zetten. In de voorbeelden die Google liet zien, vindt u de beste voorbeelden van klassieke typografie in virtuele uitvoering.

Typografische voorbeeldenmateriaal ontwerp

Lettertypen

Het standaardlettertype dat lange tijd in Android wordt gebruikt, is Roboto. In het nieuwe Lollipop-besturingssysteem en in Material Design wordt het ook als hoofdlettertype gebruikt. Naast Roboto kunnen Android-applicaties ook gebruik maken van het Noto-lettertype, dat zich richt op talen waarvoor Roboto niet is ontwikkeld. Ondanks de algemene stijl van Android-applicaties en de lettertype-aanbevelingen die in de richtlijn worden gegeven, is het in sommige gevallen heel acceptabel om uw eigen merklettertype te gebruiken in plaats van Roboto, ontworpen om de juiste associaties voor de gebruiker te vormen.

Lettertyperobot

Een van de meest opvallende typografische kenmerken in Material Design is het gebruik van contrasterende lettergroottes. Deze klassieke techniek is te zien in veel voorbeelden van Google - de koppen op de schermen zijn erg groot getypt en hierdoor onderscheiden ze zich aanzienlijk van de rest van de tekst. Tot op zekere hoogte kan de gebruiker, vanwege de grote, al van verre opvallende koppen, gemakkelijk navigeren tussen applicatieschermen en snel de essentie van de huidige inhoud begrijpen. Bovendien zien titels als deze er echt cool uit.

Contrasttypografie in actie

De locatie van inhoud of het principe van lay-out inmateriaal ontwerp

De manier waarop content in het material design concept wordt geplaatst, voldoet ook aan de principes van print design. De belangrijkste en stijlvormende component van virtuele lay-out in materiaalontwerp is de rangschikking van velden. Marges en opvulling zijn zo gerangschikt dat de focus van de gebruiker ligt op de inhoud in het midden van de hoofdkolom, en gemakkelijke en snelle toegang tot extra elementen is mogelijk dankzij de brede linkermarge. Een soortgelijk principe is te zien op de pagina's van veel gedrukte publicaties.

Structuur en lay-out van marges in materiaalontwerp

pictogrammen

De iconografie die wordt gebruikt in Material Design is een logische ontwikkeling van het idee van maximale vereenvoudiging die in eerdere versies van Android te zien was. Google beschrijft de pictogrammen voor materiaal als eenvoudig, duidelijk en vriendelijk. Tegelijkertijd kan het idee van materialiteit ook worden uitgebreid tot pictogrammen - Google belichaamt zelf consequent het idee van materiaal in de pictogrammen van zijn producten. Het Gmail-papieren enveloppictogram komt bijvoorbeeld van zijn echte tegenhanger. In een materiaalontwerpomgeving lijkt een vereenvoudigde envelopafbeelding bijna net zo echt als het "echte" prototype - het pictogram toont opvallende schaduwen die de rondingen en fysieke structuur van de gevouwen papieren envelop vertegenwoordigen.

Een virtueel prototype van een papieren envelop en een kant-en-klaar icoonGmail

Het is opmerkelijk dat een materiële benadering voor het maken van pictogrammen alleen is toegestaan voor die pictogrammen die een specifiek product symboliseren, zoals Gmail. Anderen, systeempictogrammen (of UI-pictogrammen) die toepassingen vullen, zijn van minder materiële aard. Ze zijn echt minimaal, uniform en eenvoudig. Door hun eenvoud en symboliek zijn ze leesbaar, zelfs als ze sterk verkleind zijn. Deze iconen worden gedomineerd door geometrische vormen.

pictogrammenAndroid Lolly- wat is er minimalistischer en eenvoudiger?

Voor ontwikkelaars biedt Google een indrukwekkende reeks Material Design-pictogrammen. In deze collectie vindt u misschien alle noodzakelijke pictogrammen voor het maken van toepassingen met materiaalontwerp. De iconenset voor materiaalontwerp van Google is beschikbaar op GitHub. Ik zou ook de bron materialdesignicons.com willen noemen, waar u niet alleen de iconen van andere auteurs kunt vinden, maar ook onafhankelijk kunt voorstellen.

Kleur filosofie

Kleur speelt een grotere rol in het nieuwe ontwerp van Lollipop dan in eerdere versies van Android. Zelfs in dit aspect van design valt de materialiteit op waar we het in het hele artikel over hebben. Google zelf manifesteert afzonderlijk een nieuw kleurenbeleid, waarbij inspiratiebronnen zoals moderne architectuur, verkeersborden en zelfs stoeptape worden benadrukt. Tegelijkertijd bestaan heldere, door de mens gemaakte kleurencombinaties in materiaalontwerp naast natuurlijke, gedempte natuurlijke tinten. In veel opzichten komt deze benadering weer overeen met de drukcanons, volgens welke kleur een speciaal effect heeft op de perceptie van informatie door de lezer.

Het belangrijkste idee van het werken met kleur in materiaalontwerp is de scheiding van tinten in hoofd- en accent. Google stelt voor om 500 verschillende tinten als primaire kleuren te gebruiken, die samen het primaire palet vormen. Alle andere kleuren die niet in dit palet zijn opgenomen, kunnen als accentkleuren worden gebruikt.

Voorbeelden van primaire kleuren uitprimairpaletten en gerelateerde accentkleuren (weergegeven in de onderste vakken, aangeduid als "EEN"Vóór het schaduwnummer)

Bij het ontwerpen van de interface stelt Google voor deze te beperken tot maximaal drie kleuren uit het hoofdpalet en één accentkleur. Primaire kleuren worden toegepast op elementen zoals de actiebalk, evenals (zoals in het geval van wit) toegepast op het oppervlak met de hoofdtekstinhoud. Het is opmerkelijk dat door de actiebalk van de toepassing in te kleuren met een van de kleuren, we de statusbalk moeten kleuren met een donkerdere tint van dezelfde kleur:

Toestand barneemt kleuractie barmaar valt nog steeds op met een rijkere, donkerdere tint

Echt levendige en opvallende kleuren in materiaalontwerp worden gebruikt om accenten te creëren. Actieve elementen van applicaties hebben zulke kleuraccenten nodig, allereerst natuurlijk de Floating Action Button. Daarnaast is het noodzakelijk om verschillende schuifregelaars en schakelaars in heldere accentkleuren te schilderen.

Actie-elementen zoals de zwevende knop en schuifregelaars zijn zeer intuïtief, grotendeels dankzij het gebruik van accentkleuren die de gebruiker aanzetten tot actie

Animatie

Suprematistische vierkante beweging, Kazimir Malevich (1920) enbetekenisvol Beweging, Google Materiaal Ontwerp (2014)

Animatie in materiaalontwerp is een van de meest interessante aspecten ervan. Het is dankzij de gedetailleerde animatie die voldoet aan de fysieke wetten van de echte wereld dat apparaten met Android 5 aan boord zo boeiend zijn en ervoor zorgen dat de gebruiker er uren aan wil sleutelen, vooral in de eerste keer na een ontmoeting. De functie van animatie in materiaalontwerp is om de gebruiker constant de gevolgen van zijn acties te laten zien. Animatie trekt de aandacht en laat de gebruiker op een visuele, welsprekende manier precies zien wat er op een bepaald moment gebeurt.

Net als alle andere componenten van materiaalontwerp, is animatie die aan fysieke wetten voldoet niet iets fundamenteel nieuws - de ontwikkelaars hebben alleen de regels van klassieke animatie aangepast aan de virtuele omgeving van het besturingssysteem.

De basis van materiaalontwerpanimatie is de interactie van vliegtuigen, de stukjes "digitaal papier" waar we het eerder over hadden. Deze vlakken, die op verschillende niveaus in hun wereld bewegen, beperkt door de achterwand van de smartphone en het glas van het scherm, kunnen elkaar ontmoeten, verplaatsen en verschuiven, naar buiten komen op bevel van de gebruiker naar de voorgrond, toenemend in omvang en vullend het scherm.

Net als in klassieke animatie, wordt alle beweging van vliegtuigen beheerst door strikte regels, waardoor een nauwkeurige imitatie van de beweging van oppervlakken in de echte wereld plaatsvindt.

Ten eerste hebben alle objecten in de echte wereld massa en dus een zekere weerstand. Om een voorwerp te verplaatsen, moet er kracht op worden uitgeoefend. In dit geval zal het object (in ons geval het oppervlak) niet onmiddellijk beginnen te bewegen - vanwege zijn massa en weerstand zal het enige tijd versnellen, en dan, na de hoofdbeweging veroorzaakt door het uitoefenen van kracht, eindigt, het zal ook een tijdje vertragen, al bewegend dankzij traagheid. Door deze eenvoudige wetten toe te passen, krijgen we een interface met ongelooflijk realistische oppervlaktebewegingen.

Bewegende oppervlakken kunnen natuurlijk bewegen met een voorspelbare weerstand tegen beweging.

Verplaats de digitale papierlaag in de galerij

Ten tweede verschijnt bij materiaalontwerp een nieuw object zeer effectief van het scherm of verlaat het het scherm. Net als in de echte wereld, verschijnen objecten in de materiaalontwerpomgeving niet uit het niets en gaan ze ook nergens heen. In OS Lollipop wordt het verschijnen van een nieuw object op de voorgrond geassocieerd met merkwaardige metamorfosen - het object verschijnt inderdaad niet plotseling uit het niets, het schuift naar buiten, strekt zich geleidelijk uit en verkrijgt de vorm van een oppervlak. In dit geval vindt er geen inachtneming van verhoudingen plaats, omdat een proportionele en symmetrische toename of afname van het oppervlak de indruk zal wekken van naderen of weggaan, terwijl we het uiterlijk op het scherm van een nieuw stuk "digitaal papier" moeten aangeven , geïsoleerd en onafhankelijk.

Om dit nieuwe objecteffect te realiseren, biedt materiaalontwerp twee benaderingen, met verschillende mate van bewijs. De meest levendige en ondubbelzinnige aanduiding van het uiterlijk van een nieuw oppervlak wordt gerealiseerd met behulp van een toenemende druppel - na aanraking met een vinger en het oproepen van een object, begint het oppervlak zich als een golf over het scherm te verspreiden.

Een druppel die een nieuw werkoppervlak vormt - een van de meest zichtbare effecten in materiaalontwerp

Het vloeiende oppervlakte-effect kan heel delicaat en kleurrijk zijn

Een andere manier om de gebruiker het principe van overgangen te laten zien, is door een door de gebruiker veroorzaakte asymmetrische, ongelijkmatige toename van een rechthoekig oppervlak te creëren. De oppervlakterechthoek wordt onevenredig uitgerekt tot de gewenste vorm. Met deze techniek kunt u de aandacht van de gebruiker trekken met actieve, niet-lineaire bewegingen en zijn aandacht vestigen op het principe van het verschijnen van nieuwe oppervlakken.

Een voorbeeld van het animeren van basispictogrammen inAndroid Lolly

AlomvertegenwoordigdRimpeling-het effect

Het rimpeleffect, namelijk de golvende beweging van schaduwen waarbij de vinger het scherm van het toestel raakt, is een ander belangrijk aspect van feedback. In Lollipop wordt het Ripple-effect bijna overal toegepast. Wanneer u de interface van een nieuw besturingssysteem aanraakt, lopen de golven in de meeste gevallen uiteen, of u nu op een knop drukt of door een galerij met foto's bladert. Technisch gesproken, zodra het systeem invoerinformatie ontvangt (het scherm met een vinger aanraken), bevestigt het systeem onmiddellijk de acceptatie van deze informatie door middel van een golfachtige waas van "digitale inkt".

Rimpeling-het effect dat optreedt wanneer u het scherm snel aanraakt met uw vinger

Rimpeling-effect dat optreedt wanneer u probeert een afbeelding binnen de galerij te verplaatsen

Het technische aspect van animatiemateriaal ontwerp of natuurlijke envelop

Zoals we al zeiden, moet er in de echte wereld een inspanning op worden geleverd om een object uit een rusttoestand te halen; in dit geval zal de hoofdfase van de beweging van het object worden voorafgegaan door zijn versnelling, net zoals een volledige stop zal worden voorafgegaan door vertraging. Omdat we constant de materiële wereld beïnvloeden, zijn we gewend aan deze stand van zaken, dus alle andere manieren om objecten te verplaatsen, zoals onmiddellijke versnelling en een abrupte stop zonder traagheid, lijken ons onnatuurlijk, vreemd en vaak vervelend. Gezien dit aspect hebben de makers van materiaalontwerp goed werk verricht op het gebied van de 'fysica' van animatie, waardoor het zo dicht mogelijk bij het echte leven komt.

In een materiaalontwerpomgeving worden objecten die snel (maar niet onmiddellijk!) uit een rusttoestand worden gehaald, versneld en langzaam vertraagd. Dit type beweging en animatie is prettig om mee om te gaan, omdat het overeenkomt met onze ervaring die is ontwikkeld tijdens het communiceren met de echte wereld.

Bewegingsgrafiek van geanimeerde objecten: snelle versnelling en soepele vertraging

Adaptief ontwerp

Het belangrijkste, belangrijkste aspect van materiaalontwerp. De materiaalontwerpfilosofie impliceert een volledige unificatie van de gebruikerservaring. Met andere woorden, de gebruiker mag niet geconfronteerd worden met verschillende versies van dezelfde applicatie met verschillende gadgets. De gebruikerservaring moet hetzelfde zijn voor een desktop en voor een smartphone of tablet. De enige acceptabele en objectieve verschillen zijn de verschillende afmetingen en verhoudingen van de applicatie-interface-elementen. Anders zouden verschillende versies van dezelfde applicatie een volledig identieke gebruikerservaring moeten vormen.

Google was een van de eersten die de noodzaak inzag om te verenigen en een consistente gebruikerservaring te ontwikkelen. In de praktijk veranderde dit besef in het zogenaamde "Kennedy"-project, toen het bedrijf in 2011 begon met het ontwikkelen van één type interface voor al zijn toepassingen. De esthetiek en UX van Google waren goed, maar er was nog steeds een kloof tussen de desktop- en mobiele versies van hun producten voor Android. Eigenlijk is het materiaalontwerp zelf de volgende poging na het Kennedy-project om een echt uniforme interface te creëren.

De visuele eenvoud van materiaal heeft ons in staat gesteld een aantal regels en methoden te ontwikkelen die het gemakkelijk maken om applicaties die zijn gemaakt in de stijl van materiaalontwerp voor verschillende platforms aan te passen.

Ten eerste hebben toepassingen die zijn gemaakt volgens het concept van materiaalontwerp een blokstructuur. Als je de interface van dergelijke applicaties analyseert, kun je zien dat deze wordt gekenmerkt door een duidelijke verdeling van blokken op een modulair raster. In plaats van een gevarieerd, niet altijd voor de hand liggend en verwarrend interface-ontwerp, krijgen we een soort constructor waarvan de afzonderlijke onderdelen relatief eenvoudig kunnen worden verplaatst en aangepast aan een specifieke weergave.

Modulair raster en gedistribueerde blokken

Dankzij de blokken, die elk een objectieve limiet van uitzetting of inkrimping hebben, kunnen we de applicatie-interface goed leesbaar en gebruiksvriendelijk maken op elk scherm. Het is dankzij de marge voor uitzetting en inkrimping dat elk van de toepassingsblokken heeft dat materiaalontwerp een echt effectief hulpmiddel is om de interfaces van verschillende softwareproducten volledig te verenigen.

Interface ontworpen in overeenstemming met de principesmateriaal ontwerp, universeel voor elk scherm

Ten tweede hangt de aanpassing van de applicatie-interface voor verschillende apparaten samen met de hoeveelheid informatie die op het scherm wordt weergegeven. Het is duidelijk dat hoe kleiner het scherm, hoe minder gedetailleerde informatie we binnen het kader ervan kunnen aantonen. In dit geval moeten we een deel van de inhoud overbrengen naar afzonderlijke schermen of deze verbergen achter extra elementen - deze praktijk is vooral typerend voor applicaties die zijn aangepast voor smartphones.

De elementen

Zwevende knop in normaal of mini-design

Drijvend actie knop. De zwevende knop is een van de meest onderscheidende en herkenbare elementen van materiaalontwerp. Het is haar dat de gebruiker in de eerste plaats opmerkt. De zwevende knop is een zeer goede manier om de gebruiker tot een belangrijke actie te duwen, met zijn hulp krijgt een persoon snel toegang tot die functies die op dit moment het meest relevant voor hem zijn. De knop verschijnt meestal in verschillende delen van het scherm en ondanks het feit dat hij meestal in de benedenhoek wordt gevonden, kan hij overal op het scherm worden geplaatst.

Houd er rekening mee dat een zwevende knop alleen kan worden gekoppeld aan een toets, een basisactie die in een specifieke toepassing wordt uitgevoerd. In bestandsbeheer kan een zwevende knop bijvoorbeeld betekenen dat u bestanden toevoegt of een nieuwe map maakt, in een messenger- of e-mailtoepassing - een nieuw bericht of brief maakt, in een sociaal netwerk - een "vind ik leuk"-teken, enzovoort. De hoofdactie is altijd gebonden aan een zwevende knop, hoewel er enkele beperkingen zijn.

Niet elk scherm heeft een zwevende knop nodig. Sommige acties zijn gemakkelijker uit te voeren door rechtstreeks te communiceren met de inhoud van de toepassing. Het meest typische voorbeeld van zo'n uitzondering is de fotogalerij. Door de foto's te bekijken is het makkelijker om direct in contact te komen met de afbeeldingen, zonder tussenpersonen in de vorm van een zwevende knop.

In de galerij heeft de gebruiker geen zwevende knop nodig - de belangrijkste actie is het selecteren en bekijken van foto's

De zwevende knop heeft altijd de vorm van een cirkel die een kleine schaduw werpt en is hetzelfde stuk digitaal papier als andere oppervlakken. De knop heeft een heldere accentkleur die niet overlapt met de hoofdkleuren van primair palet, dus het blijft altijd het belangrijkste en meest zichtbare element op het scherm. Zijn dominantie wordt ook benadrukt door zijn positie ten opzichte van andere lagen van de interface - de zwevende knop staat altijd bovenaan en kan niet worden overlapt door andere elementen van de applicatie.

Zwevende actieknopv actie

Het beste van alles is dat een zwevende knop wordt gekenmerkt door het feit dat deze alleen kan worden geassocieerd met positieve acties zoals maken, toevoegen of verplaatsen binnen navigatie. Een zwevende knop associëren met destructieve of atypische acties - verwijderen, het volume aanpassen of het instellingenmenu oproepen - is onlogisch en psychologisch onredelijk.

Positieve en negatieve actiesdrijvend actie knop

En tot slot, het laatste belangrijke punt - er kan maar één zwevende knop op het scherm zijn. Het hebben van meerdere zwevende actieknoppen binnen hetzelfde scherm vernietigt volledig het hele punt van een zwevende knop - het uitvoeren van een sleutelactie in een toepassing.

App barvervangenactie bar

De actiebalk is aanzienlijk veranderd in vergelijking met eerdere versies. In Android Lollipop is de functionaliteit aanzienlijk toegenomen en nu wordt het bijgewerkte element de app-balk genoemd. Dankzij de wijzigingen is de nieuwe app-balk een hulpmiddel voor volledige gebruikerscontrole over de applicatie, en, zoals het geval is met andere aspecten van materiaalontwerp en met name het nieuwe Lollipop-besturingssysteem, is de app-balk volledig intuïtief en begrijpelijk.

De app-balk is niet beperkt tot een vaste grootte - hij kan nu proportioneel worden opgeschaald, waarbij alle benodigde inhoud en toepassingsbesturingselementen worden geplaatst, zoals vervolgkeuzemenu's, filters, een zoekformulier, enzovoort.

Basisversie van de bijgewerkteactie barmet de nodige elementen om de applicatie te besturen

tintenapp barvoorgesteld doorGoogle

De huidige stand van zaken met Android Lollipop en AppCompat v21 app-ontwikkeling

Het grootste probleem met de overstap naar Material Design is de slechte compatibiliteit van nieuwe interfaces met oudere versies van Android. Er zijn zoveel ontwikkelaars die terughoudend zijn om deze compatibiliteit op te offeren, en om deze reden blijft de distributie van applicaties gebaseerd op de principes van materiaalontwerp vrij beperkt. Deze stand van zaken zal nog enige tijd aanhouden, terwijl de overgrote meerderheid van Android-toestellen op oudere versies ervan draait.

Voor die ontwikkelaars die hun applicaties echter compatibel willen houden met oudere versies van Android, biedt Google een reeks tools waarmee ze materiaalontwerpelementen kunnen gebruiken in applicaties voor de voorgangers van Lollipop. In de gerelateerde blog worden ontwikkelaars aangemoedigd om vertrouwd te raken met de AppCombat-bibliotheek, waarmee je materiële elementen kunt toevoegen aan oudere versies van Android.

Een van de interessantere functies is het uitrusten van een applicatie die draait op eerdere versies van Android met een volledige app-balk, wat een essentieel ontwerpelement is in Lollipop. Samen met de nieuwe widget krijgen oude applicaties alle geavanceerde functionaliteit die de app-balk onderscheidt van de vorige actiebalk.

Widgetapp bar

Een kritische blik op Material Design

Met alle voor de hand liggende nieuwigheid en succesvolle implementatie, zijn er enkele nadelen aan materiaalontwerp (indien gewenst). Hoewel, zoals bij alle soortgelijke kwesties, iedereen voor zichzelf beslist of de genoemde punten nadelen zijn. Opgemerkt moet worden dat op dit moment aanhangers van het concept van materiaalontwerp nog steeds de meerderheid vormen van het totale aantal degenen die krachtig blijven discussiëren over het nieuwste geesteskind van Google. Het meer sceptische publiek maakt echter de volgende klachten over de Lollipop-interface.

Microsoft Vlak Ontwerpwas veel praktischer en succesvollermateriaal ontwerp. Zoals we eerder zeiden, is materiaalontwerp niets meer dan een succesvolle compilatie van benaderingen en technieken die al door iemand anders zijn ontwikkeld en gebruikt. Een concept dat door materiaalontwerpontwikkelaars is overgenomen, is het zogenaamde platte ontwerp van Microsoft. Het idee om franje los te laten ten gunste van een platte digitale ruimte verscheen voor het eerst in Microsoft-producten. Het platte ontwerp vertegenwoordigde een volledige afwijzing van skeomorfisme in al zijn vormen. Materiaalontwerp is een afgezwakte versie van dit concept door digitaal papier en digitale inkt te simuleren. Materiaalontwerp heeft het beste van twee werelden geïntegreerd: platte en minimalistische ruimtes van een plat ontwerp en een bepaald geanimeerd volume van skeomorfisme.

Microsoft plat ontwerp

Niet iedereen ziet materiaalontwerp echter als de sweet spot en vriendelijkere versie van plat ontwerp. Veel gebruikers en ontwikkelaars beschouwen voldoende rijke animatie en volume in materiaalontwerp als een overkill, waardoor de gebruiker wordt afgeleid en hem wordt belast met onnodige visuele informatie. Ook wordt materiaalontwerp verantwoordelijk gehouden voor de hoge eisen aan de middelen die worden gebruikt om alle elementen te animeren.

Inefficiënt gebruik van schermoppervlak, te veel witruimte. De overvloed van de beruchte "lucht" in materiaalontwerp (evenals in modern design in het algemeen) is het onderwerp van de meest verhitte debatten tussen ontwerpers, ontwikkelaars en gewone gebruikers. De kwestie van lege ruimtes in moderne interfaces is inderdaad nogal controversieel, aangezien de houding ten opzichte van de hoeveelheid vrije ruimte op het scherm niettemin afhangt van individuele voorkeuren. Veel gebruikers willen alle (of de meeste) benodigde informatie voor zich zien en proberen niet te scrollen en om te draaien. Dergelijke gebruikers ergeren zich eerlijk gezegd aan grote inspringingen en gaten tussen inhoud, evenals de noodzaak om constant te scrollen. Gegroepeerde inhoud, intelligent verspreid over het volledige schermgebied - hun keuze.

Een ander type gebruiker daarentegen verwelkomt de schaarse inhoud, de aanwezigheid van "lucht" en schone vrije ruimte. Ze worden niet belast door de noodzaak om vaker te scrollen en virtuele pagina's om te draaien, en ze beschouwen de aanwezigheid van grote streepjes als een noodzakelijke voorwaarde om snel en gemakkelijk het gewenste element uit de algemene inhoudsmassa te markeren. Bovendien vinden deze gebruikers "lucht" gerechtvaardigd en esthetisch.

Laten we bijvoorbeeld de interface van het menu Instellingen op Android en iOS vergelijken:

Vergelijking van interfacesiOSenAndroid- de triomf van de subjectieve waarneming. Sommige gebruikers beschouwen de locatie van inhoud iniOSrationeler en gerechtvaardigder - alles is bij de hand, terwijl inAndroidhet kost extra moeite om het gewenste menu-item te vinden. Op zijn beurt vindt een ander deel van de gebruikers de interfaceiOS te druk en moeilijk te begrijpen, en de interfaceAndroid- lichter en voordeliger.

De discussie over de voor- en nadelen van materiaalontwerp is nog steeds aan de gang, waarbij gebruikers en ontwikkelaars aandacht besteden aan controversiële punten en tekortkomingen en op zoek zijn naar manieren om het meest effectieve gebruik van het materiaalontwerpconcept te maken. In de zeer nabije toekomst zullen we zien welk lot het materiaalontwerp wacht - blijft het een tijdje een ambigue rage die ons wordt opgelegd door de gigant Google, wordt het gewoon weer een groot experiment op het gebied van interfaces, of wordt het een nieuwe fase die de kunst van UI naar een nieuw niveau zal tillen.

Conclusie

Als je van plan bent je serieus bezig te houden met materiaalontwerp en het hele materiaalconcept in zijn geheel wilt zien, dan moet je een eenvoudige, toegankelijke en visuele studie bestuderen. Richtlijn van Google... We hopen dat ons korte overzicht geïnteresseerde lezers een introductie zal bieden op een veelbelovend gebied als materiaalontwerp. Als u de filosofie van het nieuwe Google-project begrijpt, kunt u niet alleen uw ideeën in dit frisse en praktische formaat implementeren, maar waarschijnlijk ook het concept van materiaal verfijnen en verbeteren, uw eigen "chips" ontwikkelen en de relatie van de gebruiker met de digitale interface.

Vandaag zullen we twee ontwerpstijlen vergelijken die op elkaar lijken, waarvan de eerste een hete nieuwigheid is en de tweede steeds populairder wordt. De eerste wordt spontaan aangepast, terwijl de tweede duidelijke regels heeft. U bent misschien bekend met de strijd die tegenwoordig tussen hen plaatsvindt.

Maar echt, wat is het verschil tussen hen? Waar is de eerste beter dan de tweede? Wat is het beste ontwerp om te gebruiken voor de taken die voorhanden zijn? Sommige mensen vragen zich zelfs vaak af hoeveel verschil deze twee ontwerpstijlen hebben. Om te beginnen is het noodzakelijk eraan te herinneren dat skeuomorfisme de kern van elk is.

Skeuomorfisme

Skeuomorphism is een ontwerp dat probeert de dingen die we gewend zijn op het scherm weer te geven zoals ze er in werkelijkheid uitzien. Ooit was deze stijl dominant bij het ontwerpen van interfaces.

Het probleem is dat zo'n afbeelding van elementen niet erg handig is, hoewel het eerder als een geweldige manier werd beschouwd. Nou, dit komt allemaal omdat we vroeger anders naar design keken.

Uiteindelijk kwam het ontwerp in de wereld tot de conclusie dat het nodig was om alle decoratieve elementen te verwijderen en er alleen in te laten wat handig zou zijn om mee te werken. Het was ook nodig om het volume te verminderen om sneller te laden en om de ogen van de gebruiker te concentreren op de belangrijkste en meest fundamentele. Zo werd alle onnodige skeuomorfisme verwijderd en verscheen er een nieuwe stijl in het ontwerp, dat plat ontwerp werd genoemd.

Plat ontwerp

Een plat ontwerp is in veel opzichten erg simplistisch en negeert de aanwezigheid van schaduwen, verlopen en texturen. Met deze techniek kunt u uw ogen richten op pictogrammen, kleuren en lettertypen.

Dit is in de eerste plaats de stijl voor digitale apparaten - het is erg handig en stelt gebruikers perfect in staat om gemakkelijk met uw product te communiceren, omdat al het onnodige erin ontbreekt.

Flat design probeert u gefocust te houden op gemakkelijke interactie met de site. De eenvoud van de iconografie maakt het mogelijk om de functionaliteit te vereenvoudigen, aangezien het voor gebruikers mogelijk is om zelfs via foto's met de site te communiceren. Tegelijkertijd versnelt het gebruik ervan het laden van site-elementen. Ze schalen ook goed, waardoor ze er op elk apparaat goed uitzien, ongeacht de resolutie. En dus vereenvoudigt dit veel voor zowel de ontwerper als de gebruiker.

Voordelen:

Zelfde weergave op alle schermen
De afwezigheid van skeuomorfisme stelt u in staat het proces te versnellen om te begrijpen wat u aan gebruikers wilde overbrengen
Door alle onnodige elementen te verwijderen, kunt u de site versnellen
De eenvoud van een plat ontwerp stelt u in staat uw site volledig aan te passen en responsief te maken

minpuntjes:

Plat ontwerp kan te beperkt zijn door simplistische kleuren, schaduwen, iconografie
Het is heel eenvoudig om een overdreven onopvallende en saaie site te maken.
In sommige toepassingen en sites zijn complexere visuele associaties nodig om de gebruiker te begeleiden bij het gebruik van uw product - dit is het grootste nadeel van een plat ontwerp. Een veelgehoorde klacht is ook het ontbreken van schaduwen en uitstulpingen, waardoor we soms niet begrijpen dat het element klikbaar is.
Het wijdverbreide gebruik ervan staat u soms niet toe om uw interface uniek te maken.
Gebrek aan specifieke vaste regels (in tegenstelling tot materiaalontwerp)

Materiaal ontwerp

Flat design critici beweren dat het te ver is gegaan. De scheiding van de laag met schaduwen, geanimeerde elementen - dit is wat ons in staat stelt om de elementen van de pagina intuïtiever te begrijpen.

Voor degenen die het niet wisten, het materiaalontwerp is afkomstig van Google en ze hebben een kleine pagina gemaakt die schetst voorschriften ontwerp materiaal. Deze stijl heeft talloze en unieke kenmerken, maar misschien wel een van de beste eigenschappen is het gebruik van de Z-as. In feite voegt het een beetje skeuomorfisme toe, waardoor de twee vlakken over elkaar kunnen 'zweven'.

Het is ook de standaard voor Android-applicaties. Moet het op iOS worden gebruikt? Dit onderwerp is nog steeds een hot item voor discussie, hoewel sommigen zeggen dat het beter is om deze stijl te laten in het kader waarin het nu is afgesloten. Welnu, iedereen heeft, zoals gewoonlijk, zijn eigen mening over deze kwestie.

Voordelen:

Driedimensionale ruimte maakt interactie gemakkelijker. Door bijvoorbeeld schaduwen te gebruiken, kunt u begrijpen wat boven wat uitstijgt en geeft zo aan waar de blik van de gebruiker op moet worden gericht.
Een duidelijke set regels waardoor u niet kunt raden wat en hoe het eruit moet zien
Als je een website of applicaties voor Android gaat maken, dan kun je met het materiaalontwerp een uitstekend merk creëren.
Als je geïnteresseerd bent in animatie, dan biedt Material Design ook een duidelijke set regels voor het gebruik ervan.

minpuntjes:

Of je het ermee eens bent of niet, ontwerpmateriaal is onlosmakelijk verbonden met Google, waardoor het erg moeilijk is om een unieke identiteit voor je site of app te creëren als je de richtlijnen van Google volgt.
Niet alle systemen kunnen de animatie die u maakt, reproduceren en dit kan de algehele functionaliteit van uw product beïnvloeden.
Animaties laten je batterij sneller leeglopen
Duidelijke regels kunnen de ontwikkeling van deze ontwerpstijl vertragen.

Conclusie

Materiaalontwerp verschilt niet fundamenteel van plat ontwerp, beide zijn schoon en minimalistisch. U zult eerder uw stem geven aan de materiële interface, omdat een plat ontwerp simplistischer is. En hoewel Material Design-animatie door velen wordt geprezen, dient het vooral om uw interactie met het product gemakkelijker te maken. Maar niets verbiedt je om deze twee stijlen te combineren.

Ik denk dat platte websites praktischer zijn, hun laadsnelheid is aanzienlijk hoger dan de snelheid van websites vol met animaties en zware graphics. Maak je een website gericht op eenvoud, dan is flat design zeker iets voor jou, maar ben je meer geïnteresseerd in het onderwerp animatie, dan raad ik je aan om material design te gebruiken.

Schrijf je keuze in de comments, laten we eens kijken wie er meer is!

Op de Google I / O 2018-ontwikkelaarsconferentie presenteerde Google, naast de bijgewerkte Android en diepere integratie van kunstmatige intelligentie in zijn diensten, een nieuwe standaard in systeem- en mobiele applicatie-ontwerp - Material Design 2.0. Wat is er nieuw?

Witruimte en doorschijnendheid

Een van de meest opvallende veranderingen in het nieuwe materiaalontwerp is de minimale hoeveelheid verzadigde kleuren en grijstinten, alleen effen witruimte en doorschijnendheid. Naar mijn mening ziet het er erg fris uit, waardoor het besturingssysteem en de software naar een nieuw niveau van visuele waarneming worden gebracht. Vanaf nu Android P op voorraad, zonder grafische add-ons van externe fabrikanten, beschouw ik met recht de mooiste oplossing onder de interfaces. NAAR MIJN BESCHEIDEN MENING.

Nieuwe ontwikkelaarstools:

Materieel thema

De Material Theme-plug-in voor Sketch is in wezen een bibliotheek met lettertypen, pictogrammen en bedrijfskleuren die worden geleverd door de nieuwe Google-richtlijnen in Android P. Ook kunt u, wanneer u ermee ontwikkelt, de vorm van de componenten en typografie in uw project in een paar van klikken.

Meer afronding en minimalisme

Zoals velen opmerkten, lijkt het uiterlijk erg op Apple iOS 10 en 11, maar zeker een dergelijke stap is door het bedrijf genomen specifiek voor fabrikanten en eigenaren van frameloze smartphones, waarvan het aantal elk jaar onverbiddelijk toeneemt, omdat dit uiterlijk van het systeem en de software passen veel beter bij hun ronde schermen.

Nieuwe lettertypen

Google-ontwikkelaars en -ontwerpers gebruikten het lettertype Product Sans voor het nieuwe ontwerp van logo's en merkservices. Voor hen is een speciale Google Sans-vork gemaakt. Het is gebaseerd op het bovengenoemde lettertype en vervangt de standaard Roboto.

Binnenkort kunnen we een grootschalig herontwerp van alle web- en mobiele diensten van Google verwachten. Op dit moment, in de app store, zijn enkele van deze eerstgeborenen Google Play Games, Google Tasks en de Google I / O 2018-conferentie-app.

Bijgewerkte merkillustraties

De vier primaire kleuren van het logo als beeldtaal gebruiken

Voorbeeld, nieuwe versie van Gmail:

Materiaalontwerp 2.0-concepten

Onnodig te zeggen dat de ontwerpgemeenschap reageerde op de aanstaande ontwerpwijzigingen van Google, en precies een maand geleden presenteerde een Reddit-gebruiker onder de bijnaam Morphicsn0w zijn visie op de Google Play-site.

Naast visuele veranderingen in de vorm van ronde kaarten die applicaties presenteren, heeft de auteur naar zijn mening onnodige secties zoals recent gedownloade applicaties verlaten, waardoor de winkelinterface eenvoudiger en informatiever is geworden.

Op de app-schermen concentreerde Morphicsn0w zich op app-beschrijvingen, waardoor de focus verschuift van downloads en gebruikersbeoordelingen.

De ontwerper heeft ook het zoeksysteem van Google Play opnieuw ontworpen en de gevonden resultaten gesorteerd op prijs, updatedatum, beoordeling en aantal downloads. De aanwezigheid van een dergelijke sortering zou het zoeken naar de benodigde software in de open ruimtes van de winkel aanzienlijk vereenvoudigen, ik wacht en hoop op de implementatie van een van Google.

Niet gespaard en geliefd bij veel YouTube, de auteur van de portal 9to5Google, en in combinatie, een goede ontwerper Alex Brooks (Alex Brooks) fantaseerde over wat er zou kunnen veranderen in de bestaande klant van de videohosting. Reuzltat heeft me persoonlijk heel erg geïnspireerd.

Het eerste dat Alex opnieuw heeft ontworpen, was de navigatiebalk op het startscherm, die hij in heldere, vrolijke kleuren schilderde. Het eerste item wordt gevolgd door een opnieuw ontworpen zoekregel, nu is het geen aparte knop, maar beslaat het het hele bruikbare gebied van het bovenste deel van de applicatie, waardoor het gemakkelijker toegankelijk is. En de plaat met het aantal abonnees, de knop voor het abonneren op het kanaal en terugkeren naar het vorige niveau in de mening van de auteur bevindt zich onderaan, wat ook een handige oplossing is vanuit het oogpunt van gebruiksgemak.

De ontwerper combineerde het bibliotheekgedeelte (geschiedenis van bekeken video's, beheer van geüploade video's, gelikete video's, enz.) met het gedeelte met gebruikersprofielinstellingen, nu zijn beide parameters toegankelijk door op de gebruikersafbeelding te klikken. Naar mijn mening, hoewel het controversieel is, is het nog steeds een enigszins correcte oplossing, omdat het de interactie van de gebruiker met de service vereenvoudigt en de applicatie begrijpelijker maakt voor nieuwe gebruikers die net kennis maken met de wereld van mobiele technologieën.

Lees het originele artikel voor meer informatie over het YouTube-concept van Alex.

Google Play Muziek-concept in Material Design 2.0

Geïnspireerd door de presentatie en tientallen werken van andere ontwerpers, besloot ik om te proberen iets voor mezelf te doen, waarbij ik een van de huidige Google-services als basis nam, mijn keuze viel op Play Music. Voorheen heb ik nog nooit met deze dienst gewerkt, net als met een streamingplatform, maar ik moest wel aan mijn plicht werken. De service maakte zeer positieve indruk, al was het maar omdat de applicatie zelf naar behoren werkt en niet crasht, in tegenstelling tot Apple Music, dat ik sinds de release op Android gebruik.

Over het algemeen zijn de services vergelijkbaar en vervullen beide hun primaire doel: muziek afspelen. En voor beide zijn er claims met betrekking tot de interface, maar sinds vandaag hebben we het over Google, dan zullen we hun service dienovereenkomstig overwegen.

Hoofdscherm

De eerste klacht over het hoofdscherm is dat ik niet hou van de enorme ruimte die uitsluitend wordt ingenomen door de zoekbalk en de covers van afspeellijsten met selecties. Eigenlijk heb ik in de eerste plaats besloten om het te repareren.

In mijn concept is het hoofdscherm allemaal hetzelfde, maar een beetje heroverwogen tape met verzamelingen albums, liedjes, afspeellijsten op basis van de smaak van de gebruiker, alleen nu, om de inhoud te bekijken en naar het afspelen van het gewenste nummer te gaan, heb je dat niet nodig om een extra klik te maken en het hoofdscherm te verlaten hetzelfde geldt voor de overgang tussen secties (hoofd, recent, hitparade, etc.), die nu kan worden gedaan met behulp van swipes op het scherm.

Speler

Het tweede punt dat naar mijn mening niet succesvol is in het ontwerp, is de speler. In de officiële Google Play Music-applicatie zijn songcovers uitgerekt over de hele diagonaal van het smartphonescherm, waardoor ze er erg slordig en besmeurd uitzien op apparaten met een scherm met hoge resolutie. Ik presenteerde de oplossing voor het probleem als volgt:

Nu zijn de covers netjes in het midden gerangschikt en wordt langs de linker- en rechterrand een voorbeeld van de vorige en volgende nummers getoond, alsof ze een hint geven naar de mogelijkheid om ze met een veegbeweging te wisselen.

Mediatheek

Het derde wat ik niet leuk vind aan Play Music is de lay-out en inrichting van de mediabibliotheek. Naar mijn mening is de structuur ervan te ingewikkeld. Om dit gedeelte bijvoorbeeld vanuit het hoofdscherm te openen, moet u maximaal vier acties uitvoeren: veeg met een veegbeweging om het zijmenu te openen; klik om het gedeelte "Muziekbibliotheek" te selecteren; veeg door de lijst om het gewenste tabblad te selecteren (afspeellijsten, radiostations, artiesten, albums).

Daarom heb ik de knop met toegang tot de toegevoegde nummers naar het onderste dock verplaatst en wanneer je het opent, wordt het tabblad Albums standaard weergegeven met de mogelijkheid om ze te sorteren op releasedatum, toevoeging en alfabet.

Menu / Zijbalk

In overeenstemming met de nieuwe ontwerpprincipes van Google-applicaties, heb ik het gebruikelijke menu met toegang tot instellingen naar de rechterbovenhoek verplaatst.

Google Play Muziek-conceptpresentatie op Behance

Conclusie

Samenvattend wil ik zeggen dat ik erg blij ben met het pad dat Google probeert te volgen. Naast een grote sprong voorwaarts in de ontwikkeling en het gemak van zijn diensten, duwt het bedrijf de ontwerpcode naar voren. Nadat ik zes maanden geleden een artikel had geschreven over de ervaring van het gebruik van iOS 6 in 2018, betrapte ik mezelf erop dat ik door de jaren heen dacht dat de mobiele besturingssystemen Android en iOS in termen van visuele en conceptuele prestaties van de interface niet veel zijn geëvolueerd, maar nu Ik heb mijn standpunt volledig afgeraden, althans met betrekking tot Android.

Bedankt voor de aandacht!

De hoofdregel van Google is om de gebruikersbehoeften goed in de gaten te houden en op basis daarvan je ontwerp (en niet alleen het) aan te passen. Met een trend als Material Design kun je de UX verbeteren, waardoor je keer op keer terug wilt komen naar de bron. En een van de belangrijkste elementen is de mogelijkheid om naadloos te communiceren met verschillende functies op één platform.

Material Design komt voort uit het idee van vrij bewegen in de door de gebruiker gewenste richting en is gebaseerd op de tactiele realiteit. Aanvankelijk werden de ontwikkelaars geïnspireerd door gewone inkt en papier, maar sindsdien is het zeker ver verwijderd van dit fundamentele kenmerk en heeft het de kenmerken van echte magie gekregen. Met andere woorden, door het visuele en functionele deel te verbeteren, hebben Google-experts de principes van goed ontwerp gecombineerd met innovatie en de mogelijkheden van nieuwe technologieën.

Wat zijn de kenmerken van Material Design? De oppervlakken en randen van elementen in deze ontwerprichting combineren visuele beelden en aanwijzingen om aanwijzingen te creëren die de gebruiker helpen om intuïtief door de site te navigeren (alsof het allemaal in de echte wereld gebeurt).

Bovendien gebruikt Material Design de principes van printontwerp om effectief te markeren (dat wil zeggen, focus op het gewenste element), navigatie in de interface te vereenvoudigen en intuïtief de betekenis van de elementen over te brengen. Material Design wordt gekenmerkt door rijke, gelijkmatige kleuren, scherpe randen met contouren, grote typografie en aanzienlijke afstand tussen elementen. Samen vormen deze elementen niet alleen een oogstrelend plaatje, maar creëren ze een nieuwe realiteit met conceptuele betekenis en vele functies die de gebruiker een unieke UX geven.

Bij dit soort ontwerpen staat het handelen van de gebruiker centraal. Alle interacties vinden plaats in één omgeving, interactieve objecten verplaatsen zich zonder de reeks te onderbreken van de ene omgeving naar de andere.

Material Design is een verhaal van functionaliteit waar elk element naar streeft. Volgens dit principe is het belangrijk om te focussen op de belangrijkste aandachtspunten van de gebruiker om deze in goede banen te leiden.

Material Design is een verhaal over interactiviteit. De pagina reageert op elke kleinste beweging van de gebruiker, terwijl elke overgang soepel moet verlopen, alsof je in een boot op een kalme rivier vaart en weet waar en waarom je moet afslaan. Material Design is daarom ook een verhaal over bewustwording: naast het feit dat elke handeling prettig (en makkelijk) uit te voeren is, moet de gebruiker duidelijk en helder begrijpen wat en waarom hij doet en waar de volgende aanraking hem heen zal leiden. Feedback moet dus duidelijk, toegankelijk en gemakkelijk herkenbaar zijn.

Zoals eerder vermeld, heeft de structuur van de interface veel "chips" van het printontwerp geleend, maar ze worden allemaal niet in hun oorspronkelijke vorm toegepast, maar in een verbeterde vorm. Material Design voegt aan deze functies een onbeperkt aantal opties toe voor schalen en paginagrootte, waarmee u het ontwerp kunt aanpassen aan elk apparaat, zoals een tablet of smartphone. Al deze functies geven een gevoel van maximaal comfort bij het werken met navigatie en de hele interface (aangezien onbeperkte mogelijkheden gehoorzamen aan de principes van eenvoud) en wekken een gevoel van vertrouwen.

De belangrijkste vraag die een ontwerper moet beantwoorden voordat hij gaat ontwikkelen, is wat de gebruiker precies zal (of wil) doen als hij met de applicatie werkt? Nadat u uw antwoord hebt geformuleerd, kunt u beginnen met het belichamen van de ideeën van Material Design.

Houd er bij het maken van uw app rekening mee dat inhoud hier net zo belangrijk is als beeldmateriaal. Het mag de gebruiker niet in een verdoving brengen, maar integendeel een gevoel van comfort en een duidelijk begrip creëren van waarom hij hier is en wat hij nu zal doen.

Test verschillende opties voor de rangschikking van elementen, de werkbalk kan bijvoorbeeld bovenaan het scherm worden geplaatst en lost zo alle navigatieproblemen op, waardoor het gemakkelijker wordt om tussen verschillende tabbladen te schakelen en te zoeken.

Onthoud de principes van functionaliteit en probeer de gebruiker te begeleiden, "gooi" hem niet op de eerste pagina. Deze aanpak zal voordeliger uitpakken: u kunt de aandacht van de bezoeker richten op belangrijke aspecten van het product/de dienst die u levert. Denk al in de ontwikkelingsfase na over het maken van een navigatiesysteem waarmee u de ondersteunende componenten kunt markeren die elke bezoeker gemakkelijk en snel kan bereiken.

Bij het kiezen van de beste objecten, vormen en kleuren, stop daar niet: begin deze elementen te manipuleren met bewegingen, geef ze flexibiliteit en tastbaar "materieel" gewicht. Deze volledige tactiele controle over elke beweging, zelfs de kleinste beweging, maakt Material Design uniek mooi.

Je doel in dit ontwikkelingsstadium is om een balans te vinden tussen bewegingsvrijheid en de fysieke "fysiek" van elk object, dat voldoet aan de principes van onbelemmerde UX.

Grondig plannen en testen werpen hun vruchten af bij de lancering: als je alles goed hebt gedaan, zal de gebruiker verslaafd zijn aan de informatie die je verstrekt. Als het nodig is om een actie in verschillende stappen uit te voeren, zal een gepland algoritme met heldere objecten en animatie hem bovendien aan het einde van de operatie brengen (hij zal tenslotte duidelijk begrijpen wat er van hem wordt verwacht en hoe hij het moet doen ).

Animatie in Material Design wordt vaak gebruikt om vloeiendere overgangen te maken, maar je moet je niet beperken tot alleen deze frames. Met zijn hulp kunt u veel details van de interface en de navigatiebalk verbeteren. Bovendien kunt u kleine details in het pictogrammenu gebruiken, wat niet alleen duidelijkheid zal scheppen, maar ook nogmaals uw zorg voor de esthetiek van de applicatie zal benadrukken.

Onthoud dat Material Design zich richt op bruikbaarheid, niet alleen op goed ontwerp op zich. De principes kunnen het beste startpunt zijn voor het maken van een applicatie die een enorm publiek zal veroveren met zijn gratie en gemak.

Het is jouw taak als ontwerper om het leven van de gebruiker gemakkelijker te maken en een effectieve oplossing te bieden wanneer deze interactie heeft met de applicatie. Dit is voornamelijk te danken aan het verstrekken van de belangrijkste informatie in de kortst mogelijke tijd en in het meest geschikte formaat.

Houd altijd rekening met de aandachtspunten waar de gebruiker zich door moet laten leiden, en zorg ervoor dat deze bij elke test niet naar de achtergrond verdwijnen terwijl de bezoeker door de bron "dwaalt". Pop-ups, meldingen en andere afleiding kunnen bezoekers irriteren of in het nauw drijven. Wees een soort gids: help ze niet te verdwalen en te vinden wat ze nodig hebben. Instructies en een helpknop moeten ook altijd beschikbaar zijn.

Een ander goed idee is om beschrijvingen in te voegen van de links die u op de bron plaatst. Ze zijn nodig voor een duidelijk en snel begrip van waar de gebruiker uiteindelijk zal komen. Een minder effectieve tool is om de "klik hier"-knop te gebruiken

4. Pictogramsjabloon van Google Design:

5. Icon Grid-systeem voor Android L: