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

Google släppte den senaste Android 10 just det senaste september, och även om den bara är tillgänglig på en liten handfull av de senaste, mest premiumtelefonerna, förväntas många telefontillverkare lansera Android 10 på några av deras senaste telefoner i närområdet. framtida.

Android 10 tog med sig en handfull uppdateringar och coola funktioner, som ett systemomfattande mörkt läge, men väldigt lite i vägen för någon faktisk UI-uppdatering. Google har hållit fast vid materialdesignen eftersom den fungerar så bra, så den här guiden kommer också att tillämpas på tidigare Android-versioner (Oreo, Pie, etc).

Att veta hur man korrekt utformar användargränssnittselement för materialdesign hjälper till med många saker, från att utveckla appar som fungerar bra på Android-enheter till att få dina anpassade teman accepterade i temabutiker, till exempel Samsung Theme Store.

Du kan också läsa dessa andra ämnen på Appuals, vilket ger dig mycket extra information som är relevant för detta ämne:

• Hur man inkluderar ett mörkt tema i din Android-app
• Så här börjar du utveckla Android-appar i Visual Studio 2017
• Hur man bygger en anpassad ROM från Android Open Source Project Pt. 2
• Hur man manuellt teman Android System UI (några av stegen kan vara föråldrade för Android 9 / Android 10, men den övergripande informationen är fortfarande mycket användbar.)

En översikt över materialdesign

Materialdesign kretsar kring några viktiga saker. Färgpalett, responsiv rutnätlayout och kunskap om Android UI: s system om du utformar teman. För att utveckla appar måste du vara medveten om allt ovan, plus saker som Android-runtime-behörigheter och förfrågningar, om din app kommer åt användarens lagringsmappar, kamera etc.

Den här sidan på den officiella Android-utvecklaren går mycket djupare in i sekretess- och behörighetsändringarna som apputvecklare borde vara medvetna om för Android 10. Men för det mesta kommer vi att fokusera på teman, inte egentlig apputveckling, för den här artikeln.

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 för andra element i ditt användargränssnitt skulle du använda skuggvarianter av lila och cyan, så allt smälter samman.

Denna materialdesignredigerare ä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 Clay, eller den här listan över de topprankade webbdesignföretagen 2019.

Responsiv rutnätlayout

Att förstå responsiv rutnätlayout betyder att förstå hur pixeldensitet och automatisk skärmanpassning fungerar. För det mesta är 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 etc, 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 ritbara 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 flöda 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 = "@ color / red" ----- Radio Button med anpassad färg android: buttonTint = "@ color / red" ----- Bilder och ikoner android: drawableTint = "@ color / 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"