Kaip sukurti NS / UX naujausiems „Android 9“ ir „10“ naujiniams

Spalvų paletė

„Material Design“ spalvų paletėje „Google“ teikia pirmenybę „dviejų spalvų“ sistemai su variantais:

Taigi, pavyzdžiui, kaip šioje nuotraukoje. Jūsų pagrindinė spalva būtų violetinė, o antrinė - žydra. Tada kitiems naudotojo sąsajos elementams naudosite purpurinės ir žydros spalvos atspalvių variantus, todėl viskas susilieja.

Tai Medžiagos dizaino redaktorius yra labai naudinga priemonė, padedanti sujungti spalvų variantus. Taip pat galite ieškoti įkvėpimo iš profesionalių UI / UX dizaino agentūrų, tokių kaip Molis , arba šis sąrašas geriausiai vertinamos interneto dizaino įmonės 2019 m.

Interaktyvus tinklelio išdėstymas

Suprasti reaguojantį tinklelio išdėstymą reiškia suprasti, kaip pikselių tankis veikia automatinis ekrano pritaikymas. Dažniausiai vidutinis „Android“ telefono DPI yra nuo 300 iki 480 DPI.

Atsižvelgiant į tai, 300 DPI ekrane paprastai bus galima rodyti iki 4 stulpelių:

600 dpi ekrane bus rodoma iki 8 stulpelių.

Tarp kiekvieno stulpelio yra „latakai“, iš esmės plotai, skiriantys kiekvieną koloną. Taigi mobiliajame telefone su 360dp kiekvienas latakas būtų apie 16dp.

Supratimas ekrano DPI

Kurdami vartotojo sąsają, nesvarbu, ar tai sistemos, ar jūsų programos vartotojo sąsaja, turite atsižvelgti į skirtingą skirtingų dydžių telefono taškų tankį. Čia pateikiama dažniausiai naudojamų ekrano skiriamųjų gebų ir taškų tankio diagrama:

Taigi, kaip taisyklė, kurdami „visuotinę“ temą ar programą, o ne sutelkdami dėmesį į vieno įrenginio temų kūrimą, turėtumėte pradėti nuo mažiausio tankio. Taip yra todėl, kad jei pradėsite dizainą 1x, paprasčiausiai turite atlikti matavimus pikseliais, o vertės išliks tos pačios visose DP.

Tačiau jei kuriate 3,5x, visas vertes reikia padalyti iš 3,5, kad prisitaikytumėte prie kitų tankių, ir tada tai tampa tik galvos skausmu skaičiuojant kelias DP reikšmes.

Papildomi „Android 10 UI / UX“ dizaino patarimai

Jei jums reikia pasirinktinės temos komponentų, tokių kaip radijo imtuvai, mygtukai, žymės langeliai ir kt., Spalvos, turėtumėte ne naudokite skolinamuosius elementus, kad parodytumėte įvairias būsenas ( patikrinta, spustelėta ir pan.) . Nes kai naudojate piešiamus, jūs prarandate natūralius „Material Design“ efektus (kaip bangavimas) kurį „Google“ plačiai atnaujino „Android 9“ ir „Android 10“.

Dirbdama su „Material Design“, „Google“ įtraukia daugybę gėrybių, kuriomis galite pasinaudoti, ir jos natūraliau tekės kartu su jūsų vartotojo sąsaja / vartotojo sąsaja.

Pavyzdžiui, čia yra keli komponentų temų su įmontuotais medžiagų dizaino elementais raktiniai žodžiai, o jūsų programai arba vartotojo sąsajai / vartotojo sąsajai vis tiek bus naudinga įprasta sistemos elgsena ir vartotojo sąsajos būsenos.

Mygtukas su pasirinktine spalva android: backgroundTint = '@ spalva / raudona' ----- radijo mygtukas su pasirinktine spalva android: buttonTint = '@ spalva / raudona' ----- vaizdai ir piktogramos android: drawableTint = '@ color / raudona '----- „ProgressBar“ su pasirinktine spalva „Android“: progressTint =' @ color / red '

Jei norite parodyti paprastą šešėlį po komponentais, pvz., Kortelės vaizdo režimu, jums tereikia naudoti aukščio ypatybę.

androidas: aukštis = '1dp'

Žymų ir pirminių ypatybių sujungimas yra labai naudingas, kad galėtumėte geriau valdyti ir valdyti XML failus.

Animuoti išdėstymo pakeitimai tikrai gali pagerinti jūsų UX, ir beveik visa „ViewGroup“ tai paisys. Taigi, kai pasikeičia rodinio hierarchija, tai bus animacija. Turėdami šiek tiek žinių, jūs taip pat galite kurti pasirinktiniai perėjimo efektai .

android: animateLayoutChanges = 'true'