Material Design 3 y el color en Android para el UID en dispositivos móviles

Material Design, el sistema de diseño de Google, ha evolucionado desde su primera versión, en 2014, hasta su reciente versión 3, introducido con Android 12 y su enfoque en Material You, que permite personalización dinámica del color. En este artículo es una breve reseña sobre el uso del color en M3, aplicado en Android, con referencias a los colores dinámicos, estados de los componentes, y herramientas como Theme Builder, pensadas para mejorar la accesibilidad y experiencia del usuario, dos aspectos clave para el diseño de interfaces modernas, adaptables y funcionales.

Material Design 3 y su relación con el UID para Android

¿Qué es Material Design?

Material Design es un sistema de diseño (Design System) creado por Google en 2014, como guía coherente para el diseño visual y la interacción coherente en aplicaciones, basado en principios de realismo digital, ha incluido, en sus distintas versiones, guías claras tanto sobre luces, materialidad, movimiento, sonidos, accesibilidad, usabilidad y adaptabilidad. El concepto de materialidad se inspira en materiales físicos como papel y la tinta, para definir cómo deben comportarse los distintos elementos en pantalla.

Algunas características de Material Design:

  • Jerarquía visual clara mediante el uso de espaciados, sombras, capas y profundidad para resaltar la importancia de los elementos en pantalla.
  • Interacciones y animaciones intuitivas y naturales.
  • Paletas y guías de uso del color bien definidas dirigidas a mejorar la accesibilidad y la identidad visual.
  • Uso de tipografía y escalas tipográficas orientadas a la accesibilidad, usabilidad y experiencia del usuario.
  • Componentes reutilizables, tales como botones, tarjetas, listas, menús y otros, diseñados para mantener la coherencia visual en múltiples dispositivos.

Evolución de Material Design:

  • Material Design 1: Lanzado en 2014, introdujo el concepto de "materialidad", a través del uso de sombras, capas y movimiento.
  • Material Design 2: Se lanzó 4 años después (2018) ofreciendo mayor personalización, esquinas redondeadas y una paleta de colores más definida.
  • Material Design 3: En 2021, junto con el lanzamiento de Android 12, esta versión de Material Design introdujo Material You, permitiendo personalizar la apariencia del sistema, a través de los color dinámicos, basados en el fondo de pantalla elegido por el usuario.

Plataformas

Aunque Material Design se utiliza también en otras plataformas, como web, por poner solo un ejemplo, en este artículo hablaremos de Material Design aplicado en Android.

Veamos entonces algunas relaciones entre M3 y el color en Android:

Imagen: Captura de pantalla parcial desde el documento Build a Material color scheme.

  • Color dinámico y personalización: Como dijimos antes, M3 adopta Material You, que admite el uso de colores dinámicos, integrándose con la función de Color Dinámico de Android 12+ para ofrecer una experiencia más personalizada y coherente con las preferencias del usuario.
  • Paleta de colores expandida: M3 ofrece una paleta de colores más rica y flexible, con una estructura que incluye tonos primarios, secundarios, terciarios, fijos y de superficie, asegurando mejor contraste y accesibilidad. Especialmente útil resulta en este sentido "Build a Material color scheme", desarrollado por Material Design e ivyknight para Figma, en el que se detallan, de manera muy clara, varios aspectos sobre este tema.
  • Theming con Material Design 3: La implementación de temas en M3 utiliza la biblioteca Material Theme Builder, la que facilita la creación de esquemas de color, mejorando la legibilidad y accesibilidad.
  • Introducing Material Theme Builder (documentación oficial)
  • Material Theme Builder en GitHub
  • Plugin para Figma: Material Theme Builder

¿Quieres aprender más sobre el diseño de interfaces con MD3?

Escríbenos o consúltanos por WhatsApp al +51 992 386 197

Asesorías y talleres a medida para empresas y profesionales del diseño.

M3 en el diseño de interfaces de usuario para Android

Veamos algunos aspectos esenciales del uso del color en Android:

  • Definición de colores: Los valores de color se establecen utilizando códigos hexadecimales de 6 dígitos. Para incluir la opacidad, se añade un valor al inicio, formando un código de 8 dígitos.
  • Fuente: Color de Android para el diseño de dispositivos móviles
  • Implementación en el código: En proyectos que utilizan Jetpack Compose, los colores se definen en el archivo color.kt.
  • Fuente: Color de Android para el diseño de dispositivos móviles
  • Listas de colores por estado: Las ColorStateList permiten definir colores según el estado del componente. Por ejemplo, un botón puede tener colores diferentes según esté en reposo, presionado, enfocado o deshabilitado.
  • Fuente: Recurso de lista de estados de color
  • Temas dinámicos: A partir de Android 12, la función de color dinámico (DynamicColors) permite que las aplicaciones modifiquen sus colores basándose en la imagen de fondo de pantalla del sistema, lo que proporciona una experiencia más personalizada y coherente.
  • Paleta de colores: La biblioteca Palette facilita la extracción de colores dominantes de una imagen para aplicarlos en la UI, asegurando una armonía visual entre los elementos gráficos y la interfaz de la aplicación.
  • Fuente: Selecciona colores con la API de Palette (Incluye códigos en Kotlin y Java)

Saludos y bonita jornada para ti.

Plácido Luna.

Comments (0)
Login or Join to comment.