La interfaz de usuario de Material Design de Google se está renovando con nuevos colores, iconografía y un enfoque en el tacto

click fraud protection

Las nuevas confirmaciones en Chromium Gerrit parecen hacer referencia a "Material Design 2", que podría ser una versión nueva y mejorada del lenguaje Material Design de Google.

Material Design, el lenguaje de diseño unificado que se lanzó junto con Android Lollipop, presenta paletas de colores pastel planos, profundidad, iluminación suave y física realista. Su objetivo es imitar la tactilidad de los objetos del mundo real sin recurrir al esqueuomorfismo; Google lo describe como una síntesis de "principios clásicos" con "[la] innovación y posibilidad" de la tecnología.

Desde el debut de Material Design en 2014, se ha extendido por todo el ecosistema de Android como la pólvora, sin mencionar las aplicaciones de Google como YouTube, Chrome, Gmail, Hangouts y Google Calendar. Se han puesto a disposición botones de acción flotantes, colores agradables y técnicas de elevación como parte del Biblioteca de componentes de materiales en GitHub (la continuación de la Biblioteca de soporte de diseño de Android y Material Design Lite centrado en la web de Google), que ofrece Material bondad para Android en forma de vistas personalizadas y para la web en forma de paquetes que se pueden importar y usar como HTML estándar etiquetas.

Ahora, en vísperas del cuarto aniversario de Material Design, Google parece estar preparando la próxima generación de su inspirado en papel y tinta estético: Diseño de materiales 2. Hay muy poca información disponible públicamente sobre Material Design 2, cuya existencia descubrimos esta semana en nuevas confirmaciones en Chromium Gerrit. No afirmamos que sea un adecuado sucesor del marco de Material Design más nuevo, pero las confirmaciones apuntan a cambios notables, aunque sutiles, en las paletas de colores, la iconografía y el comportamiento de la pantalla táctil.


Material Design 2 aparece en Chromium Gerrit

A principios de febrero, nuevas confirmaciones en Chromium Gerrit implementaron la interfaz de usuario "Material Design 2" en Chrome. barra de pestañas: las pestañas que se pueden arrastrar y que contienen títulos de páginas web, favicons y el botón "cerrar pestaña" encima de Chrome Barra de dirección.

Las confirmaciones no son drásticas, pero realizan cambios en la apariencia de las pestañas de Chrome. Aumentan la altura de la tira; realizar ajustes no especificados en el diseño del contenido de las pestañas, específicamente en títulos e indicadores de alerta; y disminuya el ancho táctil de la pestaña mientras aumenta el ancho estándar de la pestaña. Ellos explícitamente no modifique los colores del indicador de alerta de pestaña, los colores del separador de pestañas, el botón "nueva pestaña" o cualquier tipografía de pestaña.

Una colección de pestañas de Chrome.

Es revelador que las confirmaciones hagan referencia a un ícono de botón de cierre de pestaña "Material Design 2" y "constantes de color básicas requeridas para Google Material Design 2".

Al profundizar en el código de confirmación, se muestran nuevas paletas de colores "Material Design 2" para temas de Chromium gris, rojo y rojo oscuro, y nuevos colores para la barra de herramientas estándar de Chrome y la barra de herramientas de incógnito. Usamos una tabla de búsqueda hexadecimal para generar las muestras RGB:

El rojo de Material Design 2 es ligeramente más oscuro que el actual Material Design rojo 800 (#C62828) y rojo 600 (#E53935), mientras que los nuevos tonos de gris (#3C4043, #5F6368, #BDC1C6, #F1F3F4) tienen un tinte azulado más claro. El diseño de materiales presenta grises tradicionales, donde R=G=B, mientras que aquí, B>G>R en todos los tonos (pero solo entre 1 y 4 de 255).

Las versiones de Chrome compatibles con Material Design 2 también contarán con una barra de herramientas mucho más brillante que las versiones actuales: es casi blanca en comparación con el esquema de color grisáceo actual.

Aquí hay una maqueta rápida de cómo se verá la barra de herramientas con los nuevos colores aplicados:

Finalmente, el compromiso agrega un nuevo IsTouchOptimizedMaterial() bandera a la MaterialDiseñoControlador, que podría referirse a elementos de Material Design 2 optimizados para el tacto. A principios de enero escribimos sobre el esfuerzo de Google para mejorar la La pantalla táctil del navegador web Chrome es compatible con dispositivos Chrome OS y parece ser una continuación del mismo.

Por ejemplo, la confirmación muestra que en dispositivos con pantalla táctil, SetStackedLayout de Chrome será "siempre activado.' De forma predeterminada, cuando abre muchas pestañas, el ancho de las otras pestañas se reduce para adaptarse a las nuevas pestañas. El diseño apilado de Chrome conserva el ancho de las pestañas originales y agrega pestañas nuevas detrás de ellas.


La importancia del color en el diseño de materiales

Entonces, ¿qué significan los nuevos colores en el contexto más amplio de Material Design?

Material Design es más que simplemente capas, componentes y elementos, y cómo se comportan entre sí. Un elemento central del diseño de Google son los temas de alto contraste, los colores brillantes y los reflejos llamativos: son los que hacen que las aplicaciones compatibles con Material Design se destaquen entre la multitud.

Google proporciona una muestra paletas de colores diseñado para "trabajar bien juntos" en todas las plataformas y alienta a los desarrolladores que aprovechan la fuente un color primario de aplicación, también conocido como color "dominante", de una colección de 500 diferentes muestras. (Piense en "azul", "verde" o "púrpura" y otros colores básicos). Si es necesario, obtienen un color secundario de una colección ampliada de 700 colores. (colores complementarios para los elementos de la interfaz de usuario más importantes, y análogos para los elementos de la interfaz de usuario menos importantes, y un color terciario de un subconjunto de 300).

El color juega un papel importante en la jerarquía de Material Design. Los colores brillantes sugieren importancia: están reservados para botones destacados y otros elementos interactivos. Los colores más sutiles, por otro lado, añaden interés visual al acentuar los campos de texto, las barras de progreso, los enlaces y otras partes de la interfaz de usuario.

Por lo que sabemos sobre la paleta de colores de Material Design 2, al menos algunas de las muestras en los "500 principales" de Google, como Red 600 y 800, son más oscuras que sus predecesores de Material Design. Pero otros, como el gris, reciben el tratamiento opuesto: Tanto las muestras de gris como de blanco que se muestran en la maqueta de la pestaña de Chrome tienen una escala de grises más fría y valores de azul más altos..


Por ahora, eso es todo lo que sabemos sobre Material Design 2. Pero las confirmaciones podrían ser una señal de que algo está sucediendo detrás de escena y, si eso es cierto, podríamos aprender más más temprano que tarde. Se espera que Google retire Android P, la próxima versión principal de Android, en marzo, y Google I/O 2018 comienza el 8 de mayo. Ambas son excelentes oportunidades para despejar Material Design 2.

Actualización 4/02/2018: Poco después de la publicación de este artículo, la confirmación se hizo privada, lo que potencialmente significa que debía mantenerse en secreto. Seguiremos revisando Chromium Gerrit en busca de cambios y actualizaremos este artículo si encontramos alguno.