Kako oblikovati uporabniški vmesnik / uporabniške izkušnje za najnovejše posodobitve za Android 9 in 10

ni dejanski razvoj aplikacije za ta članek.



Barvna paleta

Pri barvni paleti Material Design Google daje prednost dvobarvnemu sistemu z različicami:



Tako na primer, kot na tej fotografiji. Vaša glavna barva bi bila vijolična, sekundarna pa bi bila modrozelena. In potem bi za druge elemente uporabniškega vmesnika uporabili različice odtenkov vijolične in cianove, tako da se vse združuje.



To Urejevalnik materialnega oblikovanja je zelo uporabno orodje, ki vam pomaga sestaviti barvne različice. Navdih lahko poiščete tudi pri profesionalnih agencijah za oblikovanje uporabniškega vmesnika / uporabniškega okolja Glina ali ta seznam najbolje ocenjena podjetja za spletno oblikovanje leta 2019.



Odzivna postavitev mreže

Razumevanje odzivne postavitve mreže pomeni razumevanje, kako gostota slikovnih pik in samodejna prilagoditev zaslona deluje. Povprečni DPI za telefon Android je v povprečju nekje med 300 in 480 DPI.

Ob upoštevanju tega bo zaslon z ločljivostjo 300 DPI običajno lahko prikazal do 4 stolpce:



Medtem ko bo zaslon s 600 dpi prikazal do 8 stolpcev.

Med vsakim stolpcem so 'žlebovi', v bistvu območja, ki ločujejo vsak stolpec. Na mobilnem telefonu s 360dp bi bil vsak žleb približno 16dp.

Razumevanje zaslona DPI

Pri oblikovanju uporabniškega vmesnika, ne glede na to, ali gre za uporabniški vmesnik sistema ali uporabniški vmesnik vaše aplikacije, morate upoštevati različne gostote slikovnih pik različnih velikosti telefona. Tu je graf najpogostejših ločljivosti zaslona in gostote slikovnih pik:

tabela gostote zaslona Android DPI

Torej, kot pravilo, pri oblikovanju 'globalne' teme ali aplikacije in ne osredotočanju na ustvarjanje tem za eno samo napravo, začnite z najnižjo gostoto. To je zato, ker če začnete načrtovati pri 1x, morate preprosto meriti v slikovnih pikah in vrednosti bodo ostale enake za DP.

Če pa načrtujete za 3,5x, morate za prilagoditev drugim gostotam vse vrednosti razdeliti na 3,5 in potem postane samo glavobol pri izračunu več vrednosti DP.

Dodatni nasveti za zasnovo UI / UX za Android 10

Če potrebujete barvo po meri za komponente teme, kot so radijski sprejemniki, gumbi, potrditvena polja itd., Bi morali ne uporabite risbe za prikaz različnih stanj ( preverjeno, kliknjeno itd.) . Ker ko uporabljate predloge, izgubite naravne učinke Material Design (kot valovanje) ki ga je Google obsežno posodabljal v sistemih Android 9 in Android 10.

Pri sodelovanju z Material Design Google vključuje veliko dobrot, ki jih lahko izkoristite, in bolj naravno bodo tekle z vašim uporabniškim vmesnikom / uporabniškim vmesnikom.

Tako je na primer tukaj nekaj ključnih besed za tematske komponente z vgrajenimi elementi Material Design, vaša aplikacija ali uporabniški vmesnik / uporabniški vmesnik pa bo še vedno užival v izvornem vedenju sistema in stanju uporabniškega vmesnika.

Gumb z barvnim androidom po meri: backgroundTint = '@ color / red' ----- Radio gumb z barvnim androidom po meri: buttonTint = '@ color / red' ----- Slike in ikone android: drawableTint = '@ color / rdeča '----- ProgressBar z barvnim androidom po meri: progressTint =' @ color / red '

Če želite prikazati preprosto senco pod komponentami, na primer v načinu pogleda kartice, morate samo uporabiti lastnost višine.

android cardview s senco

android: elevation = '1dp'

Združevanje oznak in nadrejenih lastnosti je izjemno koristno za boljši nadzor in upravljanje datotek XML.

 

Animirane spremembe postavitve lahko resnično izboljšajo vaš UX in skoraj vsi ViewGroup bodo to spoštovali. Torej, kadar koli se spremeni hierarhija pogleda, bo prišla z animacijo. Z nekaj znanja lahko tudi oblikujete učinki prehoda po meri .

android: animateLayoutChanges = 'true'
Oznake android Razvoj 4 minute branja