Kā izveidot UI / UX jaunākajiem Android 9 un 10 atjauninājumiem

Krāsu palete

Materiālu dizaina krāsu paletei Google dod priekšroku divu krāsu sistēmai ar variantiem:

Tā, piemēram, tāpat kā šajā fotoattēlā. Jūsu galvenā krāsa būtu purpursarkana, bet sekundārā krāsa būtu ciāna. Pēc tam citiem lietotāja saskarnes elementiem jūs izmantojat violetas un ciāna krāsas nokrāsas variantus, tāpēc viss sajaucas kopā.

Šis Materiālu dizaina redaktors ir ļoti noderīgs rīks, kas palīdz salikt krāsu variācijas. Jūs varat arī meklēt iedvesmu no tādām profesionālām lietotāja saskarnes / UX dizaina aģentūrām kā Māls , vai šo sarakstu visaugstāk novērtētās tīmekļa dizaina kompānijas 2019. gadā.

Reaģējošā režģa izkārtojums

Izprotot atsaucīgu režģa izkārtojumu, ir jāsaprot, kā pikseļu blīvums un darbojas automātiski ekrāna pielāgošana. Lielākoties vidējais Android tālruņa DPI ir kaut kur no 300 līdz 480 DPI.

Paturot to prātā, 300 DPI ekrāns parasti varēs parādīt līdz 4 kolonnām:

Savukārt ekrānā ar 600 dpi parādīsies līdz 8 kolonnām.

Starp katru kolonnu ir “notekas”, galvenokārt laukumi, kas atdala katru kolonnu. Tātad mobilajā ierīcē ar 360dp katra noteka būtu aptuveni 16dp.

Izpratne par ekrāna DPI

Veidojot lietotāja saskarni neatkarīgi no tā, vai tā ir sistēmas lietotāja saskarne vai jūsu lietotnes lietotāja saskarne, jums jāņem vērā dažādu pikseļu blīvums un dažādu tālruņu izmēri. Šeit ir diagramma ar visbiežāk izmantotajām ekrāna izšķirtspējām un pikseļu blīvumiem:

Tāpēc parasti, izstrādājot “globālu” motīvu vai lietotni un nekoncentrējoties uz tēmu izveidi vienai ierīcei, jums jāsāk ar zemāko blīvumu. Tas ir tāpēc, ka, ja jūs sākat dizainu ar 1x, jums vienkārši jāveic mērījumi pikseļos, un vērtības visā DP paliks nemainīgas.

Tomēr, ja jūs plānojat 3,5x, visas vērtības jāsadala ar 3,5, lai pielāgotos citiem blīvumiem, un tad tas vienkārši kļūst par galvassāpēm, aprēķinot vairākas DP vērtības.

Papildu padomi Android 10 UI / UX dizainam

Ja jums ir nepieciešama pielāgota krāsa tēmas komponentiem, piemēram, radio, pogām, izvēles rūtiņām utt., Jums tas jādara nē izmantojiet atvilktnes, lai parādītu dažādos stāvokļus ( pārbaudīts, noklikšķināts utt.) . Tā kā, lietojot izņemamos materiālus, jūs zaudējat materiālos dizaina efektus (piemēram, pulsācija) ko Google plaši atjaunināja operētājsistēmās Android 9 un Android 10.

Strādājot ar materiālu dizainu, Google iekļauj daudz labumu, kurus varat izmantot, un tie dabiskāk plūdīs kopā ar jūsu lietotāja saskarni / lietotāja interfeisu.

Tā, piemēram, šeit ir daži atslēgvārdi komponentu tematikai ar iebūvētiem materiāla dizaina elementiem, un jūsu lietotnei vai lietotāja saskarnei / lietotāja saskarnei joprojām būs patīkama vietējās sistēmas darbība un lietotāja saskarnes stāvokļi.

Poga ar pielāgotu krāsu android: backgroundTint = '@ color / red' ----- Radio poga ar pielāgotu krāsu android: buttonTint = '@ color / red' ----- Attēli un ikonas android: drawableTint = '@ color / sarkans '----- josla Progress ar pielāgotu krāsu android: progressTint =' @ color / red '

Lai parādītu vienkāršu ēnu zem komponentiem, piemēram, kartes skata režīmā, jums vienkārši jāizmanto rekvizīts augstums.

android: pacēlums = '1dp'

Tagu un vecāku rekvizītu apvienošana ir ārkārtīgi noderīga, lai nodrošinātu labāku kontroli un pārvaldāmus XML failus.

Animētas izkārtojuma izmaiņas patiešām var uzlabot jūsu UX, un gandrīz visa ViewGroup to ievēros. Tāpēc ikreiz, kad skata hierarhijā mainās, tam būs animācija. Izmantojot nelielu zinātību, jūs varat arī noformēt pielāgoti pārejas efekti .

android: animateLayoutChanges = 'true'