Hur man utformar UI / UX för de senaste Android 9 och 10 uppdateringarna

Färgpalett

För färgpalett för materialdesign föredrar Google ett 'tvåfärgat' system med varianter:

Så till exempel, som på det här fotot. Din primära färg skulle vara lila, med din sekundära färg som cyan. Och sedan för andra element i ditt användargränssnitt skulle du använda skuggvarianter av lila och cyan, så allt smälter samman.

Detta Materialdesignredaktör är ett mycket användbart verktyg som hjälper dig att sätta ihop färgvariationer. Du kan också leta efter inspiration från professionella UI / UX designbyråer som Lera , eller den här listan över topprankade webbdesignföretag 2019.

Responsiv rutnätlayout

Att förstå responsiv rutnätlayout innebär att förstå hur pixel densitet och automatisk skärmanpassning fungerar. För det mesta ligger den genomsnittliga Android-telefonen DPI någonstans mellan 300 och 480 DPI.

Med detta i åtanke kommer en 300 DPI-skärm vanligtvis att kunna visa upp till fyra kolumner:

Medan en skärm med 600 dpi kommer att visa upp till 8 kolumner.

Mellan varje kolumn finns 'takrännor', i princip de områden som skiljer varje kolumn. Så på en mobil med 360dp skulle varje rännsten vara runt 16dp.

Förstå skärmen DPI

När du utformar användargränssnittet, oavsett om det är systemgränssnittet eller appens gränssnitt, måste du ta hänsyn till de olika pixeldensiteterna i olika telefonstorlekar. Här är ett diagram över de vanligaste skärmupplösningarna och pixeltätheten:

Så som en tumregel bör du börja med den lägsta densiteten när du utformar ett 'globalt' tema eller app och inte fokuserar på att skapa teman för en enda enhet. Detta beror på att om du startar din design med 1x måste du helt enkelt göra mätningar i pixlar och värdena förblir desamma över DP.

Men om du designar för 3,5x måste du dela alla värden med 3,5 för att anpassa sig till andra densiteter, och då blir det bara en huvudvärk för att beräkna flera DP-värden.

Ytterligare tips för Android 10 UI / UX-design

Om du behöver en anpassad färg för temakomponenter som radioapparater, knappar, kryssrutor osv., Borde du göra det inte använd dragbara för att visa de olika tillstånden ( markerad, klickad, etc) . För när du använder drawables förlorar du de ursprungliga materialdesigneffekterna (som krusning) som Google utförligt uppdaterade i Android 9 och Android 10.

När du arbetar med materialdesign innehåller Google många godsaker som du kan dra nytta av, och de kommer att flyta mer naturligt med ditt användargränssnitt / UX.

Så till exempel, här är några nyckelord för temakomponenter med inbyggda materialdesignelement, och din app eller UI / UX kommer fortfarande att njuta av det ursprungliga systembeteendet och UI-tillstånden.

Knapp med anpassad färg android: backgroundTint = '@ färg / röd' ----- Radioknapp med anpassad färg android: buttonTint = '@ färg / röd' ----- Bilder och ikoner android: drawableTint = '@ färg / röd '----- ProgressBar med anpassad färg android: progressTint =' @ färg / röd '

För att visa en enkel skugga under komponenter som i cardview-läge behöver du bara använda höjdegenskapen.

android: elevation = '1dp'

Att slå samman taggar och överordnade egenskaper är extremt användbart för att ge dig bättre kontroll och hanterbara XML-filer.

Animerade layoutändringar kan verkligen förbättra din UX och nästan alla ViewGroup respekterar detta. Så när det finns en förändring i synhierarkin kommer den med en animering. Med lite kunskap kan du också designa anpassade övergångseffekter .

android: animateLayoutChanges = 'true'