UI / UX: n suunnittelu uusimmille Android 9- ja 10 -päivityksille

ei todellinen sovelluskehitys, tässä artikkelissa.



Väripaletti

Materiaalisuunnittelun väripaletissa Google pitää parempana kaksiväristä järjestelmää, jossa on vaihtoehtoja:

Joten esimerkiksi kuten tässä kuvassa. Ensisijainen väri olisi violetti, toissijainen värisi syaanina. Ja sitten muille käyttöliittymän elementeille käytät violettia ja syaania sävyvariantteja, joten kaikki sulautuu yhteen.



Tämä Materiaalisuunnittelun toimittaja on erittäin hyödyllinen työkalu, jonka avulla voit koota värivaihtoehtoja. Voit myös etsiä inspiraatiota ammattimaisista käyttöliittymien / käyttöliittymien suunnittelutoimistoista, kuten Savi tai tämä luettelo huippuluokan web-suunnitteluyritykset vuonna 2019.



Reagoiva ruudukon asettelu

Reagoivan ruudukon asettelun ymmärtäminen tarkoittaa ymmärtämistä miten pikselitiheys ja automaattinen näytön mukauttaminen toimii. Suurimmaksi osaksi keskimääräinen Android-puhelimen DPI on välillä 300-480 DPI.

Tässä mielessä 300 DPI -näyttö pystyy yleensä näyttämään jopa 4 saraketta:



600 dpi: n näyttö näyttää jopa 8 saraketta.

Jokaisen sarakkeen välissä on 'kourut', periaatteessa alueet, jotka erottavat kunkin sarakkeen. Joten 360 dp: n matkapuhelimella kukin kouru olisi noin 16 dp.

Näytön DPI: n ymmärtäminen

Suunnitellessasi käyttöliittymää, olipa kyseessä järjestelmän käyttöliittymä tai sovelluksesi käyttöliittymä, sinun on otettava huomioon puhelinkoon erikokoiset pikselitiheydet. Tässä on kaavio yleisimmistä näytön tarkkuuksista ja pikselitiheyksistä:

taulukko Android DPI -näytön tiheydestä

Joten nyrkkisääntönä, kun suunnittelet 'globaalia' teemaa tai sovellusta, etkä keskity teeman luomiseen yhdelle laitteelle, sinun on aloitettava pienimmällä tiheydellä. Tämä johtuu siitä, että jos aloitat suunnittelun yhdellä kertaa, sinun on yksinkertaisesti tehtävä mittauksia pikseleinä, ja arvot pysyvät samoina kaikissa DP: ssä.

Jos kuitenkin suunnittelet 3,5x, sinun on jaettava kaikki arvot 3,5: llä mukautuaksesi muihin tiheyksiin, ja sitten siitä tulee vain päänsärky laskettaessa useita DP-arvoja.

Lisävinkkejä Android 10 UI / UX -suunnitteluun

Jos tarvitset mukautetun värin teemaosille, kuten radioille, painikkeille, valintaruuduille jne., Sinun pitäisi ei käytä erilaisten tilojen näyttämistä tarkistettu, napsautettu jne.) . Koska kun käytät nostettavia, menetät alkuperäiset materiaalisuunnittelutehosteet (kuten aaltoilu) jonka Google päivitti laajasti Android 9: ssä ja Android 10: ssä.

Kun työskentelet materiaalisuunnittelun kanssa, Google sisältää paljon herkkuja, joita voit hyödyntää, ja ne kulkevat luonnollisemmin käyttöliittymän / käyttöliittymän kanssa.

Joten tässä on muutama avainsana komponenttien teemoimiseksi sisäänrakennetuilla materiaalisuunnitteluelementeillä, ja sovelluksellasi tai käyttöliittymällä / käyttöliittymällä nautit silti natiivijärjestelmän käytöstä ja käyttöliittymän tiloista.

Painike mukautetun värin androidilla: backgroundTint = '@ väri / punainen' ----- Radiopainike mukautetun värin androidilla: buttonTint = '@ väri / punainen' ----- Kuvat ja kuvakkeet android: drawableTint = '@ color / punainen '' ----- ProgressBar mukautetulla väri-androidilla: progressTint = '@ color / red'

Jos haluat näyttää yksinkertaisen varjon komponenttien alapuolella, kuten korttinäkymätilassa, sinun tarvitsee vain käyttää korkeusominaisuutta.

android-korttinäkymä varjolla

android: korkeus = '1dp'

Tunnisteiden ja pääominaisuuksien yhdistäminen on erittäin hyödyllistä, jotta saat paremman hallinnan ja hallittavat XML-tiedostot.

 

Animoidut asettelumuutokset voivat todella parantaa käyttöjärjestelmääsi, ja melkein kaikki ViewGroup kunnioittaa tätä. Joten aina, kun näkymähierarkiassa tapahtuu muutoksia, siihen liittyy animaatio. Pienellä osaamisella voit myös suunnitella mukautetut siirtymäefektit .

android: animateLayoutChanges = 'true'
Tunnisteet android Kehitys 4 minuuttia luettu