Kako dizajnirati UI / UX za najnovija ažuriranja za Android 9 i 10

Kako dizajnirati UI / UX za najnovija ažuriranja za Android 9 i 10

nije stvarni razvoj aplikacija, za ovaj članak.

Paleta boja

Za paletu boja Material Design, Google preferira sustav u dvije boje s varijantama:





Tako na primjer, kao na ovoj fotografiji. Vaša bi primarna boja bila ljubičasta, a sekundarna bi bila cijan. A onda biste za ostale elemente korisničkog sučelja koristili varijante sjene ljubičaste i cijan boje, tako da se sve kombinira.

Ovaj Urednik dizajna materijala je vrlo koristan alat koji vam pomaže da sastavite varijacije boja. Inspiraciju možete potražiti i u profesionalnim agencijama za dizajn UI / UX-a Glina , ili ovaj popis najbolje ocijenjene tvrtke za web dizajn u 2019.



Prilagodljiv raspored mreže

Razumijevanje responzivnog rasporeda mreže znači razumijevanje kako gustoća piksela i radi automatska prilagodba zaslona. Uglavnom je prosječni DPI za Android telefon negdje između 300 i 480 DPI.

Imajući to na umu, zaslon od 300 DPI obično će moći prikazati do 4 stupca:



Dok će zaslon s 600 dpi prikazati do 8 stupaca.

Između svakog stupca nalaze se 'žljebovi', u osnovi područja koja odvajaju svaki stupac. Tako bi na mobitelu s 360dp svaki oluk bio oko 16dp.

Razumijevanje DPI zaslona

Prilikom dizajniranja korisničkog sučelja, bilo da se radi o korisničkom sučelju sustava ili korisničkom sučelju vaše aplikacije, morate uzeti u obzir različite gustoće piksela različitih veličina telefona. Evo tablice najčešćih razlučivosti zaslona i gustoće piksela:

tablica gustoće zaslona Android DPI

Dakle, kao pravilo, prilikom dizajniranja „globalne“ teme ili aplikacije i ne fokusiranja na stvaranje tema za jedan uređaj, trebali biste započeti s najmanjom gustoćom. To je zato što ako svoj dizajn započnete s 1x, jednostavno morate mjeriti u pikselima, a vrijednosti će ostati iste za DP-ove.

Međutim, ako dizajnirate za 3,5x, trebate podijeliti sve vrijednosti s 3,5 za prilagodbu drugim gustoćama, a to onda postaje glavobolja izračunavanja višestrukih DP vrijednosti.

Dodatni savjeti za dizajn Android 10 UI / UX

Ako vam je potrebna prilagođena boja za komponente teme kao što su radio, gumbi, potvrdni okviri itd., Trebali biste ne koristiti crtaće za prikaz različitih stanja ( provjereno, kliknuto itd.) . Jer kada koristite crtaće, gubite izvorne efekte Materijalnog dizajna (poput mreškanja) koje je Google opsežno ažurirao u sustavima Android 9 i Android 10.

Kada radite s Materijalnim dizajnom, Google uključuje puno dodataka koje možete iskoristiti, a prirodnije će teći uz vaš UI / UX.

Tako, na primjer, evo nekoliko ključnih riječi za tematske komponente s ugrađenim elementima Materijalnog dizajna, a vaša aplikacija ili UI / UX i dalje će uživati ​​u ponašanju izvornog sustava i UI stanjima.

Gumb s prilagođenom bojom android: backgroundTint = '@ color / red' ----- Radio tipka s prilagođenom bojom android: buttonTint = '@ color / red' ----- Slike i ikone android: drawableTint = '@ color / crvena '----- ProgressBar s prilagođenom android bojom u boji: progressTint =' @ color / red '

Da biste prikazali jednostavnu sjenu ispod komponenata, kao u načinu prikaza karte, samo trebate koristiti svojstvo elevacije.

android cardview sa sjenom

android: elevacija = '1dp'

Spajanje oznaka i roditeljskih svojstava izuzetno je korisno kako bi vam pružili bolju kontrolu i upravljanje XML datotekama.

 

Animirane promjene izgleda stvarno mogu poboljšati vaš UX, a gotovo svi ViewGroup to će poštivati. Dakle, kad god dođe do promjene u hijerarhiji prikaza, ona će doći s animacijom. Uz malo znanja, možete i dizajnirati prilagođeni efekti prijelaza .

android: animateLayoutChanges = 'true'
Oznake android Razvoj 4 minute čitanja