Paleta de colors
Per a la paleta de colors de Disseny de materials, Google prefereix un sistema de 'dos colors' amb variants:
Així, per exemple, com en aquesta foto. El vostre color principal seria el morat, amb el color secundari com a cian. I, a continuació, per a altres elements de la vostra interfície d’usuari, heu d’utilitzar variants d’ombra de porpra i cian, de manera que tot es combina.
Això Editor de disseny de materials és una eina molt útil que us ajuda a ajuntar variacions de color. També podeu buscar inspiració d’agències professionals de disseny d’interfície d’usuari / UX com Argila , o aquesta llista de empreses de disseny web amb millor puntuació el 2019.
Disseny de quadrícula sensible
Entendre el disseny de quadrícula sensible significa entendre com densitat de píxels i l’adaptació automàtica de pantalla funciona. En la seva major part, el DPI mitjà del telèfon Android oscil·la entre els 300 i els 480 DPI.
Amb això en ment, una pantalla de 300 DPI normalment podrà mostrar fins a 4 columnes:
Mentre que una pantalla de 600 dpi mostrarà fins a 8 columnes.
Entre cada columna hi ha 'canalons', bàsicament les zones que separen cada columna. Així, doncs, en un mòbil de 360 pd, cada canaló rondaria els 16 pd.
Comprensió de la pantalla DPI
A l’hora de dissenyar la interfície d’usuari, ja sigui la interfície d’usuari del sistema o la interfície d’usuari de la vostra aplicació, heu de tenir en compte les diferents densitats de píxels de diferents mides de telèfon. Aquí teniu un gràfic de les resolucions i densitats de píxels més habituals de la pantalla:
Per tant, com a regla general, en dissenyar un tema o una aplicació 'global' i no centrar-vos en la creació de temes per a un sol dispositiu, hauríeu de començar amb la densitat més baixa. Això es deu al fet que si inicieu el disseny a 1x, simplement haureu de prendre mesures en píxels i els valors seguiran sent els mateixos a tots els PD.
Tanmateix, si dissenyeu 3.5x, heu de dividir tots els valors per 3.5 per adaptar-vos a altres densitats i, aleshores, només es converteix en un mal de cap al càlcul de diversos valors DP.
Consells addicionals per al disseny UI / UX d'Android 10
Si necessiteu un color personalitzat per a components del tema com ara ràdios, botons, caselles de selecció, etc., hauríeu de fer-ho no utilitzeu dibuixos per mostrar els diferents estats ( comprovat, fet clic, etc.) . Perquè quan feu servir dibuixos, perdeu els efectes de disseny de materials natius (com ondulació) que Google va actualitzar àmpliament a Android 9 i Android 10.
Quan treballeu amb Material Design, Google inclou molts avantatges que podeu aprofitar i que fluiran de manera més natural amb la vostra interfície d’usuari / UX.
Per exemple, aquí teniu algunes paraules clau per a components temàtics amb elements de disseny de materials integrats, i la vostra aplicació o interfície d’usuari / UX encara gaudiran del comportament del sistema i dels estats d’interfície d’usuari natius.
Botó amb color personalitzat android: backgroundTint = '@ color / red' ----- Botó de ràdio amb color personalitzat android: buttonTint = '@ color / red' ----- Imatges i icones android: drawableTint = '@ color / vermell '----- ProgressBar amb Android de color personalitzat: progressTint =' @ color / red '
Per mostrar una ombra simple a sota dels components, com en el mode de visualització de targeta, només cal que utilitzeu la propietat elevació.
android: elevation = '1dp'
La combinació d’etiquetes i propietats parentals és extremadament útil per proporcionar-vos un millor control i maneig dels fitxers XML.
Els canvis de disseny animats poden millorar la vostra UX i gairebé tot ViewGroup ho respectarà. Per tant, sempre que hi hagi un canvi en la jerarquia de la vista, inclourà una animació. Amb una mica de coneixement, també podeu dissenyar efectes de transició personalitzats .
android: animateLayoutChanges = 'true'Etiquetes android Desenvolupament 4 minuts de lectura
