Paleta de color
Para la paleta de colores de Material Design, Google prefiere un sistema de 'dos colores' con variantes:
Por ejemplo, como en esta foto. Su color primario sería el púrpura, con su color secundario como cian. Y luego, para otros elementos de su interfaz de usuario, usaría variantes de tonos de violeta y cian, para que todo se mezcle.
Esta Editor de material design es una herramienta muy útil que te ayuda a armar variaciones de color. También puede buscar inspiración en agencias profesionales de diseño de UI / UX como Arcilla , o esta lista de los empresas de diseño web mejor valoradas en 2019.
Diseño de cuadrícula receptiva
Comprender el diseño de cuadrícula receptiva significa comprender cómo densidad de pixeles y funciona la adaptación automática de la pantalla. En su mayor parte, el DPI promedio de un teléfono Android está entre 300 y 480 DPI.
Teniendo esto en cuenta, una pantalla de 300 DPI normalmente podrá mostrar hasta 4 columnas:
Mientras que una pantalla con 600 ppp mostrará hasta 8 columnas.
Entre cada columna hay 'canaletas', básicamente las áreas que separan cada columna. Entonces, en un móvil con 360 dp, cada canal sería de alrededor de 16 dp.
Comprensión de los DPI de la pantalla
Al diseñar la interfaz de usuario, ya sea la interfaz de usuario del sistema o la interfaz de usuario de su aplicación, debe tener en cuenta las diferentes densidades de píxeles de los diferentes tamaños de teléfono. A continuación, se muestra una tabla con las resoluciones de pantalla y densidades de píxeles más comunes:
Por lo tanto, como regla general, al diseñar un tema o aplicación 'global', y no enfocarse en crear temas para un solo dispositivo, debe comenzar con la densidad más baja. Esto se debe a que si comienza su diseño en 1x, simplemente tiene que tomar medidas en píxeles y los valores seguirán siendo los mismos en todos los DP.
Sin embargo, si diseña para 3.5x, necesita dividir todos los valores por 3.5 para adaptarse a otras densidades, y luego simplemente se convierte en un dolor de cabeza calcular múltiples valores de DP.
Consejos adicionales para el diseño de UI / UX de Android 10
Si necesita un color personalizado para los componentes del tema, como radios, botones, casillas de verificación, etc., debe no use dibujables para mostrar los distintos estados ( comprobado, hecho clic, etc.) . Porque cuando usa elementos de diseño, pierde los efectos nativos de Material Design (como ondulación) que Google actualizó ampliamente en Android 9 y Android 10.
Al trabajar con Material Design, Google incluye muchas ventajas que puede aprovechar y que fluirán de forma más natural con su UI / UX.
Entonces, por ejemplo, aquí hay algunas palabras clave para componentes temáticos con elementos de Material Design integrados, y su aplicación o UI / UX aún disfrutará del comportamiento del sistema nativo y los estados de la interfaz de usuario.
Botón con color personalizado android: backgroundTint = '@ color / red' ----- Botón de radio con color personalizado android: buttonTint = '@ color / red' ----- Imágenes e iconos android: drawableTint = '@ color / red '----- ProgressBar con color personalizado android: progressTint =' @ color / red '
Para mostrar una sombra simple debajo de los componentes como en el modo de vista de tarjeta, solo necesita usar la propiedad de elevación.
android: elevación = '1dp'
Combinar etiquetas y propiedades principales es extremadamente útil para brindarle un mejor control y archivos XML manejables.
Los cambios de diseño animados realmente pueden mejorar su UX, y casi todos los ViewGroup respetarán esto. Entonces, siempre que haya un cambio en la jerarquía de vistas, vendrá con una animación. Con un poco de conocimiento, también puede diseñar efectos de transición personalizados .
android: animateLayoutChanges = 'verdadero'Etiquetas android Desarrollo 4 minutos de lectura
