Kuidas kujundada UI / UX uusimate Android 9 ja 10 värskenduste jaoks

Värvipalett

Materjali kujunduse värvipaleti jaoks eelistab Google kahe värviga süsteemi koos variantidega:

Nii näiteks nagu sellel fotol. Teie põhivärv oleks lilla, teise värvusega tsüaan. Ja siis kasutaksite oma kasutajaliidese muude elementide jaoks violetset ja tsüaanvarjundit, nii et kõik seguneks.

See Materjali kujunduse toimetaja on väga kasulik tööriist, mis aitab teil värvivariatsioone kokku panna. Inspiratsiooni saate otsida ka professionaalsetest UI / UX disainibüroodest, näiteks Savi või see loend parimad veebidisainifirmad aastal 2019.

Tundlik võrgu paigutus

Reageeriva võrgu paigutuse mõistmine tähendab mõistmist, kuidas pikslitihedus ja automaatne ekraani kohandamine töötab. Enamasti on keskmine Android-telefoni DPI kuskil 300 kuni 480 DPI.

Seda silmas pidades saab 300 DPI ekraan tavaliselt kuvada kuni 4 veergu:

Kui ekraanil on 600 dpi, kuvatakse kuni 8 veergu.

Iga veeru vahel on vihmaveerennid, põhimõtteliselt alad, mis eraldavad iga veeru. Nii et 360dp-ga mobiilis oleks iga vihmaveerenn umbes 16dp.

Ekraani DPI mõistmine

Kas kasutajaliidese kujundamisel, olenemata sellest, kas see on süsteemi kasutajaliides või teie rakenduse kasutajaliides, peate arvestama telefoni erineva suurusega erineva pikslitihedusega. Siin on diagramm kõige tavalisematest eraldusvõimest ja pikslitihedusest:

Nii et rusikareeglina peaksite globaalse teema või rakenduse kujundamisel ja mitte keskenduma ühe seadme teemade loomisele, alustades madalaimast tihedusest. Seda seetõttu, et kui alustate kujundust 1x-ga, peate mõõtmisi tegema lihtsalt pikslites ja DP-de väärtused jäävad samaks.

Kui aga kavandate 3,5x suuruse, peate teiste tihedustega kohanemiseks jagama kõik väärtused 3,5-ga ja siis muutub see lihtsalt mitme DP väärtuse arvutamise peavaluks.

Täiendavad näpunäited Android 10 UI / UX kujunduse kohta

Kui vajate teemakomponentide (raadiod, nupud, märkeruudud jne) jaoks kohandatud värvi, peaksite seda tegema mitte kasutage erinevate olekute kuvamiseks väljatõmmatavat ( kontrollitud, klõpsatud jne) . Sest kui kasutate väljatõstetavaid asju, kaotate materjalide kujunduse looduslikud efektid (nagu pulsatsioon) mida Google värskendas ulatuslikult operatsioonisüsteemides Android 9 ja Android 10.

Materjalidisainiga töötades sisaldab Google palju head, mida saate ära kasutada, ja need voolavad teie kasutajaliidese / kasutajaliidesega loomulikumalt.

Nii et siin on näiteks mõned sisseehitatud materjalidisaini elementidega komponentide teema kujundamise märksõnad ja teie rakendus või kasutajaliides / kasutajaliides naudivad endiselt süsteemi loomulikku käitumist ja kasutajaliidese olekut.

Kohandatud värvi androidiga nupp: backgroundTint = '@ color / red' ----- kohandatud värvi androidiga raadionupp: buttonTint = '@ color / red' ----- pildid ja ikoonid android: drawableTint = '@ color / punane '----- ProgressBar kohandatud värvi androidiga: progressTint =' @ color / red '

Komponentide all lihtsa varju näitamiseks, näiteks kaardivaaterežiimis, peate lihtsalt kasutama atribuuti kõrgus.

android: kõrgus = '1dp'

Siltide ja vanemate omaduste ühendamine on äärmiselt kasulik, et anda teile parem kontroll ja hallatavad XML-failid.

Animeeritud paigutusmuudatused võivad teie UX-i tõeliselt parandada ja peaaegu kõik ViewGroup austavad seda. Nii et alati, kui vaate hierarhias on muutusi, kaasneb sellega animatsioon. Pisut oskusteavet kasutades saate ka kujundada kohandatud üleminekuefektid .

android: animateLayoutChanges = 'true'