Paleta de culori
Pentru paleta de culori Material Design, Google preferă un sistem „cu două culori” cu variante:
De exemplu, ca în această fotografie. Culoarea dvs. primară ar fi violet, iar culoarea dvs. secundară este cyan. Și apoi pentru alte elemente ale interfeței dvs. de utilizare, ați folosi variante de nuanțe de violet și cian, astfel încât totul să se amestece.
Acest Editor de design material este un instrument foarte util care vă ajută să puneți împreună variații de culoare. De asemenea, puteți căuta inspirație de la agenții profesionale de proiectare UI / UX, cum ar fi Lut , sau această listă a companii de design web de top în 2019.
Aspectul grilei receptiv
Înțelegerea aspectului grilei receptive înseamnă înțelegerea modului densitatea pixelilor și funcționează adaptarea automată a ecranului. În cea mai mare parte, media DPI pentru telefonul Android este cuprinsă între 300 și 480 DPI.
Având în vedere acest lucru, un ecran de 300 DPI va putea afișa de obicei până la 4 coloane:
În timp ce un ecran cu 600 dpi va afișa până la 8 coloane.
Între fiecare coloană sunt „jgheaburi”, practic zonele care separă fiecare coloană. Deci, pe un telefon mobil cu 360dp, fiecare jgheab ar fi în jur de 16dp.
Înțelegerea ecranului DPI
Atunci când proiectați interfața de utilizare, indiferent dacă este vorba de interfața de sistem sau de interfața aplicației dvs., trebuie să țineți cont de diferitele densități de pixeli de diferite dimensiuni ale telefonului. Iată un grafic cu cele mai comune rezoluții ale ecranului și densitățile pixelilor:
Deci, de regulă, atunci când proiectați o temă sau o aplicație „globală” și nu vă concentrați pe crearea temelor pentru un singur dispozitiv, ar trebui să începeți de la cea mai mică densitate. Acest lucru se datorează faptului că, dacă începeți proiectarea la 1x, trebuie pur și simplu să luați măsurători în pixeli, iar valorile vor rămâne aceleași în DP.
Cu toate acestea, dacă proiectați pentru 3.5x, trebuie să împărțiți toate valorile la 3.5 pentru a vă adapta la alte densități și atunci devine doar o durere de cap a calculării mai multor valori DP.
Sfaturi suplimentare pentru Android 10 UI / UX design
Dacă aveți nevoie de o culoare personalizată pentru componentele temei, cum ar fi aparatele de radio, butoanele, casetele de selectare etc., ar trebui nu folosiți desenele pentru a arăta diferitele stări ( bifat, făcut clic, etc) . Deoarece atunci când folosești desenele, pierzi efectele native de design material (cum ar fi ondularea) pe care Google l-a actualizat extensiv în Android 9 și Android 10.
Când lucrați cu Material Design, Google include o mulțime de bunătăți pe care le puteți profita și vor curge mai natural cu interfața dvs. UI / UX.
De exemplu, iată câteva cuvinte cheie pentru componentele tematice cu elemente de proiectare a materialelor încorporate, iar aplicația sau UI / UX se vor bucura în continuare de comportamentul sistemului nativ și de stările UI.
Buton cu culoare personalizată android: backgroundTint = '@ color / red' ----- Buton radio cu culoare personalizată android: buttonTint = '@ color / red' ----- Imagini și pictograme android: drawableTint = '@ color / roșu '----- ProgressBar cu Android color personalizat: progressTint =' @ color / red '
Pentru a afișa o umbră simplă sub componente, cum ar fi în modul cardview, trebuie doar să utilizați proprietatea elevation.
android: elevation = '1dp'
Fuzionarea etichetelor și a proprietăților părinte este extrem de utilă, pentru a vă oferi un control mai bun și fișiere XML gestionabile.
Modificările de aspect animate pot îmbunătăți într-adevăr UX-ul dvs. și aproape toate ViewGroup vor respecta acest lucru. Deci, ori de câte ori există o schimbare în ierarhia de vizualizare, aceasta va veni cu o animație. Cu un pic de know-how, puteți, de asemenea, să proiectați efecte de tranziție personalizate .
android: animateLayoutChanges = 'true'Etichete Android Dezvoltare 4 minute citite
