Share
In de afgelopen maanden is Material Design gegroeid in een grote designbeweging. Verschillende componenten van materiaalontwerp, zoals inhoudskaarten en verbeterd gebruik van animatie, zijn te vinden in veel toepassingen die we vandaag gebruiken.
Zoals veel blogposts hebben behandeld, is dit aan de ene kant een goede evolutie omdat het gemakkelijker dan ooit wordt om een solide ontwerp te maken. Aan de andere kant zijn er stemmen die het gebrek aan originaliteit weerleggen, omdat iedereen een vergelijkbare stijl gebruikt. Bovendien betekent het hebben van toegang tot een goede ontwerptaal niet dat het correct wordt toegepast.
In deze zelfstudie bespreken we hoe u concepten van materiaalontwerp kunt gebruiken en deze kunt verbeteren om betere interfaces te maken die tegelijkertijd duidelijker zijn in hun visuele stijl. We zullen ook enkele algemene tips bekijken voordat u begint met ontwerpen door Material Design als uitgangspunt te nemen.
Eerst en vooral moet het starten van Material Design tot ontwerpinterfaces niet worden afgekeurd. Helemaal niet. Ik help het in feite een basis te leggen waar Android-gebruikers aan gewend zijn.
Als het gaat om het bouwen van een goede gebruikerservaring, wordt het opnieuw uitvinden van het wiel vaak niet aanbevolen.
Het gebruik van standaarden is een bijzonder goed begin om te verzekeren dat u iets bouwt dat werkt. De structuur van de interface en zijn interacties blijken te werken. Dat gezegd hebbende, dat betekent niet dat er geen ruimte is voor fouten of voor verbetering.
Een voorbeeld van een kaartontwerpDe essentie van Material Design komt terug op het gebruik van inhoudskaarten. Nu zijn kaarten beslist een onderdeel dat in veel situaties toepasbaar is, vandaar dat het zeer nuttige ontwerppatronen zijn. Tegelijkertijd kan het een goede ontwerpuitdaging zijn om te bedenken of er interessantere ontwerpalternatieven kunnen zijn. Aangezien we steeds meer op kaarten gebaseerde ontwerpen zien, is het goed om te bedenken hoe je iets kunt ontwerpen beter.
Neem de kalender als voorbeeld. In plaats van een lijst per dag met een kaart voor elke afspraak, ziet u hoe Sunrise een combinatieweergave heeft waarin u zowel de maandelijkse weergave als de dagelijkse weergave ziet.
Links: een conceptueel materiaalontwerpagenda; Rechts: SunriseGames zijn een andere grote inspiratiebron als u unieke interfaces probeert te vinden als een vorm van inspiratie. Bekijk inspirerende websites zoals UIMovement om nieuwe en nieuwe soorten interfaces als inspiratie te zien.
Wanneer u een interface aan het bouwen bent, zouden inhoudskaarten de meest optimale oplossing zijn of zouden er andere interessante manieren zijn om inhoud weer te geven die een betere oplossing zou kunnen zijn?
Elke app probeert een probleem op zijn eigen, unieke manier op te lossen. Met deze gedachtegang is het misschien logisch dat uw oplossing een ander soort interface vereist.
Hoe gaat het verder? Het begint allemaal met inhoud en navigatie, die ik hieronder in meer detail zal bespreken.
Voorbeeld van een zwevende actieknop in de inbox van GoogleEen ander ontwerppatroon geïntroduceerd door Material Design is de zwevende actieknop. Een zwevende actieknop is een geweldige manier om een actie prominent in een interface weer te geven. Tegelijkertijd kan het een van de slechtst mogelijke ontwerpmechanismen zijn. Er zijn tal van manieren om een zwevende actieknop op de verkeerde manier te gebruiken:
Persoonlijk zie ik een aantal gevallen waarin een zwevende actieknop een geweldige toevoeging is voor het product, vooral in apps die dat wel hebben één kerninteractie voor de gebruiker. Een berichten-app is een goed voorbeeld. Met de zwevende actieknop kan de gebruiker een nieuw bericht samenstellen. Uber zou een ander geweldig voorbeeld zijn waar het logisch is. De kerninteractie van het product is om een auto te begroeten.
De kunst is om voorzichtig te zijn en te kijken of dit zinvol is in de context van uw product. Het is niet omdat het een standaard interface-element is dat het misschien goed past bij uw app. Voor meer gecompliceerde producten, waarbij een gebruiker vaak meerdere acties uitvoert, past een zwevende actieknop zelden goed.
Met een sterke ontwerprichting om vanuit Material Design te beginnen, is het soms vrij eenvoudig om een strategische basis te vergeten voordat je begint met ontwerpen. Hoe bepaalt u wat u kunt gebruiken bij Material Design en wat u kunt verbeteren?
Bepaalde ontwerpkeuzes, zoals het gebruik van inhoudskaarten bijvoorbeeld begrenzing jij vroeg.
Hieronder vindt u een korte checklist met bepaalde elementen van uw toepassing die moeten worden gedefinieerd voordat u dit soort ontwerpbeslissingen neemt.
Door de juiste vragen te stellen, krijgt u een beter begrip van wat u probeert te bouwen en op basis daarvan kunt u interfaces maken die beter werken.
Tot slot zijn er twee eenvoudige regels die ik meestal in gedachten houd bij het structureren van de navigatie van een product.
Pas de 80/20 regel toe. 80% van mijn gebruikers gebruikt slechts 20% van mijn functionaliteit. Hoe kan ik ervoor zorgen dat die 20% van mijn functies het gemakkelijkst toegankelijk zijn in mijn product??
Als er meerdere manieren zijn om toegang te krijgen tot een scherm in een product, moet u ervoor zorgen dat dit op een zeer consistente manier gebeurt. Het verplaatsen van een overzichtsscherm naar een detailscherm zou bijvoorbeeld op dezelfde manier moeten plaatsvinden.
Op basis van het bovenstaande kunt u beslissen wat het meest optimaal is voor gebruikers om door een product te navigeren. Als je een gecompliceerd product hebt met veel opties, is een lade de juiste keuze. Eenvoudig product? Werken met tabbladen is meestal uw antwoord. Voor meer informatie over navigatie en materiaalontwerp, raad ik u aan door de Material Design-richtlijnen te bladeren.
Dit muziekapp-concept gevonden op Dribbble is een voorbeeld van het omgaan met meerdere soorten inhoud.Elke app heeft inhoud. De volgende vragen moeten u helpen te beslissen hoe u inhoud vanuit een ontwerpperspectief structureert en weergeeft:
Zodra u uw inhoud hebt bepaald, wordt het veel gemakkelijker om ontwerpbeslissingen te nemen. Dat is het moment waarop u kunt bepalen of het gebruik van kaarten zinvol is of dat er betere of interessantere alternatieven zijn om te gebruiken voor uw interface.
De grootste ontwerpuitdaging waarmee u te maken kunt krijgen, is de volgende:
Hoe kan ik ervoor zorgen dat mijn applicatie even verheugend is voor nieuwe gebruikers als voor terugkerende gebruikers? Hoe zou dit van invloed zijn op mijn inhoud en navigatie?
Dit is een moeilijke uitdaging en komt vaak neer op effectief aan boord zijn en zorgt ervoor dat het hoofdscherm van uw product het scherm is waar de meeste waarde voor uw gebruikers is. Heb je een paar voorbeelden nodig? Bekijk de volgende producten. Wat is hun hoofdscherm en welke waarde heeft het? Hoe benaderen ze gebruikers onboarding?
De bovengenoemde producten zouden u wat inspiratie moeten geven. Wees niet ontmoedigd als dit eerst intimiderend aanvoelt. Het heeft de bovenstaande producten meerdere herhalingen gekost om te krijgen waar ze vandaag zijn.
Onboarding is een onderwerp op zichzelf. Ik raad aan om enkele bronnen te bekijken die u waardevolle inzichten geven, zoals User Onboard.
Nu we een goed idee hebben van hoe uw product fundamenteel gaat werken plus welke mogelijke elementen u van Material Design kunt gebruiken, is het tijd om dingen een beetje op te fleuren. Er zijn verschillende manieren om uw app esthetisch te verbeteren, waarvan sommige hieronder worden vermeld.
Uw lettertypeselectie draagt enorm bij aan de look en feel van uw product. Het kiezen van een aangepast lettertype kan er sterk toe bijdragen dat een meer divers ontwerp wordt gemaakt en een unieke look en feel wordt toegepast op uw product zonder een grote verandering aan te brengen. Het vinden van de juiste lettertypen kan lastig zijn en veel ervan komt ook neer op het ontwerpen van smaak. Mijn persoonlijke favoriete bron is Typewolf.
Dropbox is een geweldig voorbeeld van het toepassen van aangepaste pictogrammen en illustraties voor hun producten.Aangepaste pictogrammen toevoegen is een andere manier om uw eigen aangepaste uiterlijk en gevoel in een toepassing te integreren. Het gebruik van aangepaste iconografie is lastig omdat Material Design een uitstekende standaard heeft gecreëerd. Voor pictogrammen betekent dit dat bepaalde acties, navigatie en andere elementen hetzelfde pictogram hebben.
Als u besluit om met uw eigen set pictogrammen te gaan werken, zijn er twee belangrijke aspecten om uzelf te herinneren aan:
TimeShop is een geweldig voorbeeld van het gebruik van aangepaste illustraties om een aparte look en feel te creëren.Hoe u fotografische inhoud of het gebruik van illustraties weergeeft, kan gemakkelijk karakter toevoegen aan uw app. Wees creatief.
Dit is een voorbeeld van een unieke animatie en bijbehorende interactie. Bron.Aangepaste animaties en interacties vergen de meeste moeite, maar het is bevredigend werk om te zien dat ze tot leven komen in een product. Unieke animaties gebouwd op unieke interfaces die gewoon werk zijn enkele van de meest bevredigende ontwerpen die je online kunt vinden.
Dit ontwerp maakt gebruik van Material Design-concepten met kleuren die u niet zou verwachten. Bron.Materiaalontwerp biedt een grote selectie kleuren waaruit u kunt kiezen. Dat betekent niet dat je niet erg creatief kunt worden met je kleurgebruik om iets echt unieks te maken.
Er is een reden waarom de meeste van de interfaces die we dagelijks kennen, vrij eenvoudige ontwerpen zijn, het is bewezen dat het werkt en dat gebruikers zich vertrouwd voelen met het gebruik ervan.
Experimenteel ontwerp kan uw app schaden.
Dat gezegd hebbende, met enkele kleine aanpassingen, bijvoorbeeld door alleen te focussen op typografie en kleur, kun je een heel eind op weg om iets unieks voor je app te ontwerpen..
Material Design heeft een comfortabele fallback gecreëerd als u vastzit aan een ontwerpprobleem. Tot die tijd hebt u alle creatieve vrijheid om opnieuw na te denken over hoe een interface zou moeten werken. Snapchat bouwde een op gebaren gericht product, Facebook Paper (iOS) herdefinieerde hiërarchie en animatie, en Medium verminderde effectief een interface om zich te concentreren op alleen lezen (en schrijven).
Met dat in gedachten, ga je gang en ontwerp. Eventuele opmerkingen of vragen? Laat ze achter in de comments of neem contact met mij op via Twitter.
Accentsconagua