UI / UX ontwerpen voor de nieuwste Android 9- en 10-updates

Google heeft afgelopen september de nieuwste Android 10 uitgebracht, en hoewel deze slechts beschikbaar is op een klein handvol van de nieuwste, meest premium telefoons, wordt van veel telefoonfabrikanten verwacht dat ze Android 10 in de nabije toekomst op een aantal van hun meest recente telefoons zullen uitrollen. toekomst.

Android 10 bracht een handvol updates en coole functies met zich mee, zoals een systeembrede donkere modus, maar weinig in de weg van een daadwerkelijke UI-update. Google is bij het materiaalontwerp gebleven omdat het zo goed werkt, dus deze handleiding is ook van toepassing op eerdere Android-versies (Oreo, Pie, enz.).

Weten hoe u UI-elementen voor Material Design op de juiste manier ontwerpt, zal bij veel dingen helpen, van het ontwikkelen van apps die goed presteren op Android-apparaten tot het accepteren van uw aangepaste thema's in themawinkels, zoals de Samsung Theme Store.

Je kunt deze andere onderwerpen ook lezen op Appuals, waardoor je veel extra informatie krijgt die relevant is voor dit onderwerp:

• Hoe u een donker thema in uw Android-app kunt opnemen
• Beginnen met het ontwikkelen van Android-apps in Visual Studio 2017
• Een aangepast ROM bouwen vanuit Android Open Source Project | Pt. 2
• Hoe u de gebruikersinterface van het Android-systeem handmatig kunt thematiseren (sommige stappen zijn mogelijk verouderd voor Android 9 / Android 10, maar de algemene informatie is nog steeds erg handig.)

Een overzicht van Material Design

Material Design draait om een ​​paar belangrijke dingen. Kleurenpalet, responsieve rasterlay-out en wegwijs in de gebruikersinterface van het Android-systeem, als u thema's ontwerpt. Voor het ontwikkelen van apps moet u op de hoogte zijn van al het bovenstaande, plus zaken als Android-runtime-machtigingen en -verzoeken, als uw app toegang heeft tot de opslagmappen, camera, enz. Van de gebruiker.

Deze pagina over de officiële Android-ontwikkelaar gaat veel dieper in op de privacy- en toestemmingswijzigingen waarvan app-ontwikkelaars op de hoogte moeten zijn voor Android 10. Maar voor het grootste deel gaan we ons concentreren op thema, niet de daadwerkelijke app-ontwikkeling, voor dit artikel.

Kleurenpalet

Voor het Material Design-kleurenpalet geeft Google de voorkeur aan een "tweekleuren" -systeem met varianten:

Dus bijvoorbeeld zoals op deze foto. Je primaire kleur zou paars zijn, met je secundaire kleur als cyaan. En dan zou je voor andere elementen van je gebruikersinterface schaduwvarianten van paars en cyaan gebruiken, zodat alles in elkaar overvloeit.

Deze Material Design-editor is een zeer handige tool die u helpt bij het samenstellen van kleurvariaties. Je kunt ook inspiratie opdoen bij professionele UI / UX-ontwerpbureaus zoals Clay, of bij deze lijst met best beoordeelde webdesignbedrijven in 2019.

Responsieve rasterlay-out

Als u een responsieve rasterlay-out begrijpt, moet u begrijpen hoe pixeldichtheid en automatische schermaanpassing werken. 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 je echter voor 3,5x ontwerpt, moet je alle waarden delen door 3,5 om je aan te passen aan andere dichtheden, en dan wordt het gewoon een hoofdpijn 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 de 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 maar de eigenschap elevatie te gebruiken.

android: elevation = "1dp"

Het samenvoegen van tags en bovenliggende eigenschappen is buitengewoon handig om u een 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 kennis kun je ook aangepaste overgangseffecten ontwerpen.

android: animateLayoutChanges = "true"