Conoce Liquid Glass

Liquid Glass es un gran avance y evolución del aspecto y sensación del software de Apple. Presenta una capa dinámica y flexible para apps y experiencias del sistema en todos los productos Apple. Se basa en resultados que van desde la IU Aqua de macOS X, iOS 7 y la fluidez del iPhone X hasta la flexibilidad de Dynamic Island y la IU envolvente de visionOS. Basándose en estos aspectos, Liquid Glass es un nuevo metamaterial digital que dobla y da forma a la luz, en lugar de recrear un material real. Se comporta y se mueve orgánicamente como un líquido liviano, y responde a la fluidez del tacto y al dinamismo de las apps modernas.

Soy Chan, diseñador del equipo Human Interface Design. En esta sesión, repasaremos las propiedades principales de Liquid Glass. Shubham analizará cómo Liquid Glass se adapta automáticamente a diferentes contextos y entornos. Por último, Bruno explicará lo esencial para trabajar con Liquid Glass. Empecemos. Liquid Glass complementa la evolución del diseño de los productos Apple, que tienen pantallas más envolventes. Aparece en la IU con aspecto redondo, adaptado a las curvas de los dispositivos modernos. Estas formas definidas son fáciles de tocar y se complementan con la forma del dedo, por lo que resultan agradables a la interacción. Liquid Glass se define visualmente a través de algo llamado “efecto de lente”. Es algo que ocurre a nuestro alrededor en nuestra experiencia del mundo natural. Así entendimos cómo los cambios en la luz de un objeto transparente muestran su presencia, movimiento y forma.

Con esas señales, Liquid Glass ofrece una separación y, a la vez, muestra las capas y deja que el contenido brille debajo. A diferencia de los materiales anteriores que dispersaban la luz, estos doblan dan forma y concentran la luz de forma dinámica. Ofrece definición frente al contenido de fondo, manteniéndonos visualmente en el mundo natural. Así, los controles son livianos y transparentes, pero visualmente distinguibles.

Los objetos con Liquid Glass se materializan según los efectos de la luz, con una transición elegante cuidando la integridad óptica del material.

La forma en que el material se SIENTE y se comporta es tan importante como su aspecto. Desde el inicio, la parte visual Y el movimiento de Liquid Glass se pensaron en conjunto. El movimiento de los líquidos es algo que todos conocemos intuitivamente. Las interfaces usan ese comportamiento y movimiento para actuar de una forma alineada con nuestra comprensión del mundo físico.

Liquid Glass responde a la interacción flexionándose y energizándose con la luz. Esto hace a la interfaz receptiva y gratificante, y que cobre vida. Su flexibilidad muestra su naturaleza maleable, que se mueve al ritmo de la interacción. Esta fluidez alinea la interfaz con la naturaleza cambiante y dinámica de nuestro pensamiento y movimiento.

Los elementos pueden elevarse temporalmente en Liquid Glass, como al interactuar con un componente. Así, el estado de reposo permanece visualmente tranquilo y cobra vida con el tacto. Funciona genial con controles, donde puedes ver el valor a través del lente líquido transparente.

Esta fluidez también se extiende a cómo reacciona el material a los entornos dinámicos de las apps de hoy. Al cambiar de estado en una app, Liquid Glass cambia entre los controles según el contexto. Así, se sigue la idea de tener un solo plano en el cual aparecen los controles. Y hace que las transiciones fluyan a la perfección, ya que los controles cambian continuamente. Al mostrar un menú, la burbuja se abre para revelar su contenido. Esta transición ligera mantiene todo justo donde lo tocas. Y muestra una relación clara y directa entre el botón y su contenido. Con estas propiedades, Liquid Glass marca una nueva era en la apariencia de las apps. Pero también cambia cómo se sienten. Gracias a la capacidad de curvar, moldear y adaptar la luz y cambiar de forma, Liquid Glass crea una experiencia más orgánica, envolvente y fluida.

Ahora, Shubham hablará de cómo se adapta a diferentes contextos y plataformas. Gracias, Chan. Liquid Glass está diseñado para adaptarse tanto a su tamaño como a su entorno. El objetivo es que sea transparente y haga referencia al contenido debajo. Pero cambia de forma constante y sutil para garantizar la legibilidad y separarse claramente del contenido. Liquid Glass tiene varias capas, combinadas para darle su aspecto único. A diferencia de los materiales anteriores con apariencia clara u oscura, cada capa se adapta según lo que hay atrás.

A medida que el texto se desplaza, las sombras se marcan para crear más separación.

El tinte y el rango dinámico cambian para que se vean tanto los botones como el contenido. De ser necesario, puede cambiar entre claro y oscuro para adaptarse a cualquier contexto y resaltar el contenido de la app. Cuando el vidrio se hace más grande, como cuando se presenta un menú, se transforma para simular un material más grueso. Genera sombras más profundas, efectos de lente y refracción más pronunciados y una dispersión de la luz más suave. Estos cambios sutiles mejoran la profundidad aparente y ayudan en la legibilidad del contenido. Liquid Glass es esencial para crear un lenguaje de diseño unificado en todas las plataformas. En el iPad y la Mac, aplicamos estos mismos principios. Al igual que en el iPhone, estas capas forman una capa distinta para los controles y la navegación, que flota y brinda un lienzo más grande para el contenido.

Los controles encajan en las esquinas redondeadas de las ventanas, manteniendo la concentricidad en la IU. En elementos más grandes, como barras laterales, su apariencia se adapta a la app.

Los colores del contenido cercano pasan a su superficie, reforzando el contexto del material y la sensación de elevación. Este efecto no solo se aplica a la superficie, la luz también se refleja y filtra en la sombra, tal como ocurriría en el mundo físico. Las barras laterales del iPad y la Mac permiten un nuevo nivel de inmersión.

La barra lateral y de pestañas, juntas, crean un lenguaje uniforme para navegar por las apps en todas las plataformas. Ahora puede verse como un único elemento de navegación único que se ajusta al lienzo de la app. A continuación, hablemos de los efectos de bordes de desplazamiento.

Funcionan con Liquid Glass para separar la IU y las capas de contenido y garantizar la legibilidad, especialmente con contenidos que se desplazan dinámicamente. Al igual que Liquid Glass, los efectos son inherentemente adaptativos. Al desplazarse debajo de un elemento de vidrio, el contenido se disuelve en el fondo y el vidrio se levanta por encima del contenido, permitiendo que elementos flotantes como los títulos permanezcan siempre claros.

Cuando pasa por abajo un contenido oscuro, provocando la transición del propio vidrio a su estilo oscuro, el efecto aplica un leve oscurecimiento para garantizar la legibilidad. En algunos casos, como cuando hay vistas accesorias ancladas bajo una barra de herramientas, utilizamos, en su lugar, un efecto de “estilo intenso”.

En ese caso, se aplica en toda la barra de herramientas y la vista de accesorios anclada. Permite crear una mayor separación visual entre elementos flotantes en la vista de accesorios y contenido. Así se puede usar Liquid Glass para adaptar los diferentes tamaños, entornos y plataformas y los efectos de desplazamiento para garantizar claridad y legibilidad sin dejar de destacar el contenido de la app. Bruno hablará de variantes de Liquid Glass y de cómo usarlas en tus apps. Gracias, Shubham. Para aprovechar al máximo Liquid Glass, hay que estudiarlo en profundidad. Repasemos cómo está construido y algunos de sus comportamientos. De esta manera, sabrás qué esperar cuando empieces a diseñar con él.

Su verdadera magia está en su diseño holístico. El juego con la luz, los efectos de profundidad y los cambios adaptativos no son funcionalidades aisladas. Son capas dentro de un sistema sofisticado, combinadas para crear un material más grande. Veamos algunas de ellas más de cerca. Primero, la capa superior. Liquid Glass vive en un entorno que se comporta como nuestro mundo. Las fuentes de luz en el entorno brillan y crean reflejos que responden a la geometría. Al interactuar, como bloquear y desbloquear el contenido, las luces se mueven y la luz viaja alrededor del material para definir su silueta. A veces, la luz responde al movimiento, como si conociera su posición real. Las sombras ayudan a definir los elementos. Presta atención a la sombra en la siguiente diapositiva.

El elemento sabe lo que hay detrás de él y aumenta la opacidad de su sombra. Por otro lado, reduce la opacidad de la sombra cuando está sobre un fondo claro sólido. Esto ofrece una separación del contenido para detectar fácilmente a los elementos.

Al interactuar con Liquid Glass, el material se ilumina como respuesta.

El brillo comienza debajo del dedo y se extiende por el elemento y los elementos de Liquid Glass cercanos, interactuando con las propiedades del material de forma natural y fluida.

Esto hace que la interfaz cobre vida y se conecte con el exterior y la entrada del dispositivo. A veces, varias capas se adaptan juntas para mantener la claridad y el enfoque en la jerarquía de la IU.

Cuando una ventana pierde el enfoque en la Mac o el iPad, Liquid Glass cambia la apariencia para guiar la atención.

Y esta sofisticación viene integrada. Obtendrás todo esto de forma automática al aplicar Liquid Glass a tus diseños. Ahora que ya repasamos estos comportamientos, hablaré sobre cómo y cuándo usar Liquid Glass y de las diferentes variantes elegibles. Puede que quieras usarlo para todo, pero funciona mejor con la capa de navegación sobre el contenido de la app. Considera esta vista de tabla: convertirla en Liquid Glass haría que compitiera con otros elementos. Mantenla en la capa de contenido para garantizar la claridad. No coloques elementos de Liquid Glass uno sobre otro, ya que genera confusión y desorden. Al colocar elementos sobre Liquid Glass, evita aplicar el material en ambas capas. En su lugar, usa rellenos, transparencia e intensidad en los elementos superiores para aparentar una superposición que forma parte del material. Ahora, hablemos de las variantes de Liquid Glass. Hay dos para elegir: Regular y traslúcida. No deben mezclarse, ya que tienen características y casos de uso específicos. Regular es la más versátil y la que más utilizarás. Ofrece los efectos visuales y adaptativos que mencionamos, y legibilidad sin importar el contexto. Funciona en cualquier tamaño y contenido, y cualquier cosa puede colocarse encima. Traslúcida, por el contrario, no tiene comportamientos adaptativos. Es más transparente, por lo que el contenido se muestra e interactúa con el vidrio en una forma bella. Para que se lean los símbolos o etiquetas, usa una capa de atenuación sobre el contenido. Sin ella, la legibilidad empeora notablemente. Si Liquid Glass ocupa poco espacio, puedes usar la atenuación localizada para que el contenido conserve su intensidad. Mientras que la variante regular funciona en cualquier lugar, la traslúcida solo debe usarse cuando se cumplan estas tres condiciones. Primero, el elemento al que lo aplicas es sobre contenido multimedia. Segundo, introducir una capa de atenuación no afectará la capa de contenido. Por último, el contenido de arriba es llamativo e iluminado. Ahora, hablaré de legibilidad: una consideración central que se tuvo en cuenta durante el diseño.

Los elementos pequeños, como las barras, adaptan constantemente su aspecto según lo que tengan atrás. Y cambian de claro a oscuro según el fondo para que el material se vea lo mejor posible.

Los elementos grandes, como menús o barras laterales, también se adaptan, pero no pasan de claros a oscuros. Su superficie es demasiado grande y las transiciones así podrían distraer. Para mantener la legibilidad, los símbolos y glifos sobre Liquid Glass hacen lo mismo. Pasan de claro a oscuro y viceversa, reflejando el comportamiento del vidrio para generar contraste. Todo el contenido en la variante regular recibirá automáticamente este tratamiento. También puedes usar colores personalizados. Pero úsalos selectivamente. Puedes teñir los elementos con funcionalidades específicas y destacarlos. Veamos más de cerca cómo funciona esto.

Liquid Glass permite teñir elementos respetando el material y maximizando la legibilidad.

La técnica es igual en todos los elementos de Liquid Glass, desde etiquetas, texto y botones hasta la hora de la pantalla bloqueada. Aporta vida y vitalidad al material, y lo conecta aún más con el contenido.

Al seleccionar un color, se asigna una gama de tonos al brillo del contenido debajo del elemento teñido. Se basa en cómo funciona, en la realidad, el vidrio coloreado: cambia su tono, brillo y saturación según lo que hay detrás sin desviarse demasiado del color previsto.

No solo enfatiza la fisicalidad del material, también mejora la legibilidad y el contraste.

El tinte es compatible de forma nativa con todos los comportamientos del vidrio. Así que podrás teñir cualquier elemento muy fácilmente.

Este botón usa un relleno sólido en lugar del tinte integrado. Es completamente opaco y rompe el carácter visual de Liquid Glass. Pero nota lo que pasa cuando empieza a usar el nuevo tinte. De repente, se siente más transparente y más arraigado en su entorno.

Úsalo solo para destacar los elementos y las acciones principales en la IU. Primero veamos un ejemplo de lo que no se debe hacer. Evita teñir todos tus elementos. Cuando cada elemento está teñido, nada se destaca y puede resultar confuso. Si deseas incorporar color a la app, hazlo en la capa de contenido. El botón View Bag es un ejemplo de cuándo usar el tinte, el rojo lo destaca como acción principal en esta app. La capa de contenido también es clave para evitar el ruido visual no deseado. En estados estables, como cuando se ejecuta una app, evita las intersecciones entre el contenido y Liquid Glass. Mejor reposiciona o ajusta el contenido para mantener la separación.

Además de estas consideraciones, Liquid Glass también ofrece funcionalidades de accesibilidad que se adaptan a todas las necesidades y personas.

Actúan como modificadores del material que cambian ciertas capas de Liquid Glass sin perder prominencia.

La transparencia reducida lo hace más escarchado y oscurece más el contenido detrás de él. Mayor contraste hace que los elementos sean predominantemente negros o blancos y los resalta con un borde. Menor movimiento baja la intensidad de algunos efectos y desactiva las propiedades elásticas del material. Estas estarán disponibles automáticamente cada vez que utilices el nuevo material. Cuando estas configuraciones se activan en el sistema, los elementos de Liquid Glass las aplican de forma global. En esta sesión cubrimos los principios y valores principales de Liquid Glass. Vimos su funcionalidad, comportamiento y pautas para usarlo de forma efectiva e inclusiva.

Ofrece un lenguaje de diseño unificado en todas las plataformas, combinando a la perfección hardware y software. Ofrece interacciones más fluidas y dinámicas que nunca y un aspecto nuevo e increíble en toda la interfaz. Comienza una nueva era en el diseño visual e interactivo de Apple, y queremos que estés ahí.