Kleurenpalet
Voor het kleurenpalet van Material Design geeft Google de voorkeur aan een 'tweekleuren'-systeem met varianten:
Dus bijvoorbeeld zoals op deze foto. Je primaire kleur is paars, met je secundaire kleur cyaan. En voor andere elementen van uw gebruikersinterface zou u schaduwvarianten van paars en cyaan gebruiken, zodat alles in elkaar overvloeit.
Dit Materiaalontwerp-editor is een erg handig hulpmiddel waarmee u kleurvariaties kunt samenstellen. Je kunt ook inspiratie opdoen bij professionele UI / UX-ontwerpbureaus zoals Klei , of deze lijst van de best beoordeelde webdesignbedrijven in 2019.
Responsieve rasterlay-out
Als u een responsieve rasterindeling begrijpt, moet u weten hoe pixel dichtheid en automatische schermaanpassing werkt. De gemiddelde DPI van een Android-telefoon ligt voor het grootste deel ergens tussen de 300 en 480 DPI.
Met dat in gedachten kan een scherm van 300 DPI doorgaans maximaal 4 kolommen weergeven:
Terwijl een scherm met 600 dpi tot 8 kolommen kan weergeven.
Tussen elke kolom bevinden zich 'goten', in feite de gebieden die elke kolom scheiden. Dus op een mobiel met 360dp zou elke goot ongeveer 16dp zijn.
Inzicht in scherm-DPI
Bij het ontwerpen van de gebruikersinterface, of het nu de systeeminterface is of de gebruikersinterface van uw app, moet u rekening houden met de verschillende pixeldichtheden van verschillende telefoonformaten. Hier is een overzicht van de meest voorkomende schermresoluties en pixeldichtheden:
Als vuistregel geldt dat u bij het ontwerpen van een 'globaal' thema of app, en niet focust op het maken van thema's voor een enkel apparaat, moet beginnen met de laagste dichtheid. Dit komt omdat als u uw ontwerp begint bij 1x, u alleen metingen in pixels hoeft uit te voeren en de waarden hetzelfde blijven voor alle DP's.
Als u echter ontwerpt voor 3.5x, moet u alle waarden door 3.5 delen om u aan te passen aan andere dichtheden, en dan wordt het gewoon een probleem om meerdere DP-waarden te berekenen.
Extra tips voor Android 10 UI / UX-ontwerp
Als u een aangepaste kleur nodig heeft voor themacomponenten zoals radio's, knoppen, selectievakjes, enz., Zou u dat moeten doen niet gebruik drawables om de verschillende toestanden te tonen ( gecontroleerd, geklikt, enz.) . Omdat wanneer u drawables gebruikt, u de oorspronkelijke Material Design-effecten verliest (zoals rimpel) die Google uitgebreid heeft bijgewerkt in Android 9 en Android 10.
Wanneer u met Material Design werkt, bevat Google veel goodies waarvan u kunt profiteren, en ze zullen natuurlijker met uw gebruikersinterface / UX vloeien.
Hier zijn bijvoorbeeld een paar sleutelwoorden voor thematische componenten met ingebouwde Material Design-elementen, en uw app of UI / UX zal nog steeds genieten van het native systeemgedrag en UI-statussen.
Knop met aangepaste kleur android: backgroundTint = '@ color / red' ----- Keuzerondje met aangepaste kleur android: buttonTint = '@ color / red' ----- Afbeeldingen en pictogrammen android: drawableTint = '@ color / rood '----- ProgressBar met aangepaste kleur android: progressTint =' @ color / red '
Om een eenvoudige schaduw onder componenten weer te geven, zoals in de kaartweergavemodus, hoeft u alleen de eigenschap elevation te gebruiken.
android: elevation = '1dp'
Het samenvoegen van tags en bovenliggende eigenschappen is buitengewoon handig om u betere controle en beheersbare XML-bestanden te geven.
Geanimeerde lay-outwijzigingen kunnen uw UX echt verbeteren en bijna alle ViewGroup zullen dit respecteren. Dus wanneer er een wijziging is in de weergavehiërarchie, wordt deze geleverd met een animatie. Met een beetje knowhow kunt u ook ontwerpen aangepaste overgangseffecten .
android: animateLayoutChanges = 'true'Tags android Ontwikkeling 4 minuten gelezen
