Implementación de componentes y lineamientos de Material Design – ¡Googlifica tu aplicación!

Diseño de materiales de Google

Material Design es un lenguaje de diseño creado por Google para alentar a los desarrolladores a implementar interfaces de usuario consistentes y atractivas. Material Design se basa en una serie de principios rectores, así como en bloques de construcción específicos llamados componentes de Material Design.

Este enfoque de interfaz de usuario se utiliza en la mayoría de las aplicaciones y herramientas de Google, pero también se encuentra en muchas otras aplicaciones de Android e incluso en sitios web.

Si eres un desarrollador de Android, tener al menos un conocimiento pasajero de Material Design puede ser de gran ayuda para darle a tu aplicación ese brillo profesional que resuena con los usuarios. Afortunadamente, ahora es más fácil que nunca implementar componentes de Material Design.

¿Pero deberías?

Las reglas del diseño de materiales

Si desea conocer las “reglas” del diseño de materiales, consulte las pautas de Google.

En general, todo en una aplicación de Material Design debe representar “materiales” físicos e interacciones. Los elementos deben aparecer como si estuvieran en una superficie física. Suele ser cartón y papel. Estos “materiales” deben utilizar sombras y movimiento como espera el usuario.

Las ventanas emergentes tienen sombras. Esto también se usa para comunicar la jerarquía (lo que le permite ver de un vistazo lo que está “arriba”).

Componentes de Material Design

Esto es “abstracción de papel”.

Las animaciones deben utilizar la facilidad de entrada y salida y otras técnicas para crear movimientos más naturales. De hecho, se le da mucha importancia al movimiento. En general, el usuario debe sentirse como estático y la interfaz está en movimiento. alrededor de ellos en lugar de al revés. El movimiento puede volver a transmitir importancia, significado y orden.

Material Design es grande y atrevido: utiliza colores en bloque que a menudo contrastan. Todo debe ser fácil de seguir, lo que significa titulares en negrita y botones grandes e intuitivos. Google usa mucho Roboto, ¡pero esto de ninguna manera es una regla!

Sea “audaz, gráfico e intencional”.

El Material Design es grande y atrevido.

El diseño del material es minimalista. Cada elemento de la pantalla debe tener un propósito específico, lo que significa que no hay fondos demasiado diseñados. Estos solo sirven para confundir al usuario y crear desorden visual.

Finalmente, los desarrolladores deben usar componentes comunes de Material Design, como el botón de acción flotante (FAB) y las “tarjetas”. Estos ayudan a los usuarios a familiarizarse rápidamente con la navegación.

Diseño de materiales 2

Hace unos años, Google decidió construir sobre la base que sentó con su Material Design. Lo hizo al traernos una actualización de sus pautas. Esta nueva iteración ha sido denominada por gran parte de Internet “Material Design 2”. ¡No fue aplaudido universalmente!

Diseño de material redondeado 2

Una de las razones de este movimiento fue que durante los primeros días de Material Design, no había componentes de Material Design listos para usar a los que los diseñadores pudieran recurrir. Esto ha llevado a muchas interpretaciones diferentes de las ideas de Google con resultados mixtos.

Además, Material Design estuvo inicialmente muy limitado a su implementación en la plataforma Android. El propósito de esta “actualización” era hacer que Material Design fuera más “independiente de la plataforma”. Los usuarios observadores han comenzado a ver cambios que aparecen en los productos de Google.

El propósito de MD2 nunca ha sido introducir nuevas “reglas” ni ningún cambio drástico de dirección. Sin embargo, los desarrolladores notaron un mayor uso de esquinas redondeadas, espacios en blanco y Google Sans. ¡Aquí, por supuesto, es donde estaba la controversia!

¿Es el diseño de materiales una fuerza positiva?

Antes de comenzar a implementar componentes y temas de Material Design en sus aplicaciones, es posible que se pregunte si esto es una buena idea.

Hay argumentos a favor y en contra, como siempre.

Porque Material Design es algo bueno

Material Design fomenta las decisiones y tendencias de diseño sensatas que ayudan a proporcionar una experiencia más fluida entre las aplicaciones móviles y la Web. También proporciona un marco útil para desarrolladores sin su propia teoría de diseño.

Esto crea la impresión de un flujo continuo entre servicios complementarios.

Los usuarios de Android se benefician especialmente de este lenguaje visual consistente; especialmente cuando cambian de aplicación para compartir archivos y chatear con amigos. En lugar de la experiencia discordante de cambiar de una interfaz de usuario a algo completamente diferente al seleccionar una foto; en cambio, esto crea la impresión de un flujo continuo entre servicios complementarios.

Más importante aún: Material Design pone fin a terribles decisiones de diseño. Como el mal uso del skeuomorfismo (íconos que están diseñados como representaciones en 3D de sus contrapartes físicas, piense en pequeñas imágenes de teléfonos y cámaras), colores excesivamente saturados y la vieja apariencia “holográfica” del pasado de Android. Alguien lo recuerda:

Interfaz de usuario de Holo

Todavía extraño la interfaz de usuario de Holo …

Gracias a los componentes de Material Design (ahora consistentes) proporcionados a los desarrolladores, los usuarios generalmente pueden confiar en encontrar ciertos elementos de navegación en ubicaciones consistentes. Estos incluyen botones de acción flotantes en la parte inferior derecha y un menú de hamburguesas en la parte superior izquierda. Definitivamente es mejor pasar horas aprendiendo cada nuevo diseño.

Además, el área de la aplicación Material Design generalmente es liviana en activos y se carga rápidamente debido a su dependencia de colores de bloque e imágenes planas.

El lado oscuro del Material Design

Si bien estos aspectos de Material Design han mejorado la experiencia del usuario en gran parte de Android, existen desventajas en el impulso hacia la visión singular de Google.

Material Design promueve la homogeneización de aplicaciones.

Material Design promueve la homogeneización de aplicaciones y servicios en el ecosistema de Android y en la web. Esto reduce el impacto único de la marca corporativa y evita que las aplicaciones se destaquen.

Google intenta de alguna manera combatir este problema con herramientas de “Tematización de diseño de materiales”. Estos aplican cambios globales a medida que cambia aspectos específicos de la interfaz de usuario, como el color y la tipografía. Sin embargo, esto todavía tiene un alcance limitado y, en última instancia, da como resultado variaciones del diseño basado en tarjetas de alto contraste que Google está pedaleando.

Y debido a la gran cantidad de aplicaciones disponibles en Android e iOS, esto puede significar mucho trabajo adicional para los desarrolladores. Dicho esto, muchas aplicaciones con temas de Google todavía terminan en la App Store.

Esto también perjudica al usuario. Encontrar una aplicación con una interfaz verdaderamente única o una animación llamativa puede ser una gran experiencia. Google afirma ofrecer “pautas, no reglas” y muchos han interpretado los cambios realizados con Material Design “2” de esta manera. Pero no se puede negar que las aplicaciones de Material Design tienen un cierto “aspecto” y un comportamiento prescriptivo.

Sin consideración por el gusto

Todo esto se aplica doblemente si No me gusta el diseño de materiales. Si bien el buen diseño sigue una serie de reglas indiscutibles, también es subjetivo.

No soy un gran fan de Material Design. En particular, no me gusta el uso que hace Google del color en algunos casos (¡especialmente el nuevo ícono de Gmail!). Del mismo modo, encuentro Google Calendar en Android todo menos intuitivo. Y sí, me encanta que mi tecnología se vea “de alta tecnología”. El gusto no se tiene en cuenta, ¿eh?

Captura de pantalla de Google Calendar 2020

Crédito: Joe Hindy / Autoridad de Android

Pero Material Design es tan exitoso que los desarrolladores eligen ir versus los consejos a menudo terminan pareciendo fuera de este mundo e incluso obsoletos.

Su trabajo como desarrollador es encontrar el equilibrio adecuado. Para utilizar Material Design y Componentes de Material Design cuando sea apropiado, sin dejar de encontrar su propio estilo. Hasta cierto punto, dependerá del tipo de aplicación que esté creando. Esto es mucho menos importante para los desarrolladores de juegos, por ejemplo.

Cómo implementar los componentes de Material Design

Entonces, ¿cómo se crea una aplicación que se ajuste al lenguaje de Material Design y se comporte como los usuarios esperan?

La buena noticia es que esto es más fácil que nunca. Las plantillas que se ofrecen en el cuadro de diálogo Nuevo proyecto utilizan componentes de Material Design de forma predeterminada y coincidirán automáticamente con los temas y las recomendaciones de estilo más recientes de Google. En Android Studio 4.1, esto se ha actualizado para reflejar los cambios realizados con Material Design 2.

Archivo de diseño 1 1

Crédito: Adam Sinicki / Autoridad de Android

Obviamente, esto trae un poco más de repetición, pero afortunadamente todo es bastante simple de entender y ya viene comentado.

Ver también: Presentamos el nuevo Motion Editor en Android Studio 4.0

A partir de ahí, es importante considerar las pautas de Google y cómo las interpretará. Hay muchos puntos de vista que hacen que esto sea más fácil y que valga la pena abordar. Los fragmentos, por ejemplo, son excelentes para mantener al usuario en un solo lugar. Asimismo, Cardview y RecyclerView son inherentemente “Material Design-ey”. Los fragmentos son vistas que pueden contener diseños completos y vienen con su propio código Java adjunto. Los fragmentos actúan como sus propias miniaplicaciones dentro del contexto más amplio de su negocio principal, lo que le permite brindar más información al usuario.

Ver también: Cómo usar fragmentos en su aplicación de Android para una interfaz de usuario potente y dinámica

Android Studio 4.0 nos proporcionó anteriormente el “Editor de movimiento”, que hace que sea mucho más fácil diseñar diseños de movimiento con un uso efectivo del movimiento. Jetpack Compose también tiene como objetivo simplificar la creación de nuevas interfaces de usuario. Aunque como siempre, Google tiene la costumbre de lanzar un poco demasiado nuestra manera. Comience con su proyecto y trabaje hacia atrás para averiguar qué necesita aprender.

Dedique algún tiempo a investigar otras aplicaciones de Google. Cuestione el propósito detrás de cada decisión de diseño (¡comuníquese, no decore!). Apunta a la “abstracción del papel”.

Y si todo lo demás falla: ¡contrate a un diseñador!

About MiReal

Compruebe también

The Android Arsenal – Vistas

Un FragmentDialog implementado con RecyclerView que puede aceptar selecciones únicas o múltiples Instalación RecyclerPickerDialog se …

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *