-
Conoce Liquid Glass
Liquid Glass unifica el lenguaje de diseño de la plataforma de Apple al tiempo que proporciona una experiencia de usuario más dinámica y expresiva. Conoce los principios de diseño del Liquid Glass, explora sus principales propiedades ópticas y físicas, y descubre dónde usarlo y por qué.
Capítulos
- 0:00 - Introducción
- 1:29 - Dinámica
- 6:00 - Adaptabilidad
- 10:31 - Principios
- 18:53 - Próximos pasos
Recursos
Videos relacionados
WWDC25
-
Buscar este video…
-
-
- 0:00 - Introducción
Liquid Glass presenta una capa flexible y dinámica para apps y experiencias del sistema en todo el ecosistema de productos de Apple. Es un nuevo metamaterial digital que dobla y da forma dinámica a la luz, comportándose orgánicamente como un líquido liviano, respondiendo tanto a la fluidez del tacto como al dinamismo de las apps modernas.
- 1:29 - Dinámica
Liquid Glass complementa la experiencia visual y táctil de los dispositivos modernos de Apple con sus pantallas redondeadas. Usa Efecto de lente, que dobla y concentra la luz dinámicamente, creando una apariencia transparente y liviana que brinda definición frente al contenido de fondo. Los elementos de Liquid Glass se materializan con gracia, respondiendo a la interacción, flexionándose y energizándose con la luz. La interfaz se adapta dinámicamente a la entrada del usuario y a los entornos cambiantes de las apps modernas, lo que hace que las transiciones se sientan fluidas y naturales.
- 6:00 - Adaptabilidad
Liquid Glass se adapta según el contenido que se encuentra debajo y el tamaño de la pantalla. Está compuesto de múltiples capas que cambian continuamente el tinte, las sombras y el rango dinámico para garantizar la legibilidad y la claridad visual. Cuando Liquid Glass se flexiona y aumenta de tamaño, imita un material más denso, creando sombras más marcadas y efectos de lente y refracción más pronunciados que acentúan la profundidad. Con controles más grandes como las barras laterales de iPadOS y macOS, Liquid Glass se ve influenciado por el entorno ambiental, permitiendo que la luz de contenidos coloridos se derrame sobre su superficie, lo que refuerza su contexto y elevación. Los efectos de borde de desplazamiento funcionan en conjunto con Liquid Glass para disolver el contenido en el fondo, levantando el vidrio visualmente por encima del contenido en movimiento y manteniendo el contraste y la legibilidad.
- 10:31 - Principios
El juego de luces, los efectos de profundidad y los cambios adaptativos son capas de un sistema sofisticado que trabajan juntas. Liquid Glass vive en un entorno que se comporta como el mundo que nos rodea. Las fuentes de luz brillan sobre los materiales para producir reflejos que responden a la geometría y al movimiento. La opacidad de la sombra aumenta o disminuye dinámicamente proporcionando una separación leve del contenido de fondo. Al interactuar con los controles, los materiales se iluminan desde adentro y se reflejan en otros elementos de Liquid Glass para proporcionar retroalimentación visual. Liquid Glass se reserva mejor para la capa de navegación. Evita colocar vidrio en la capa de contenido y evita colocarlo dentro o encima de otros elementos de vidrio para mantener la jerarquía y evitar el desorden. Hay dos variantes de Liquid Glass: Regular, que es versátil y adaptable, y Translúcida, que es permanentemente transparente y necesita una capa de oscurecimiento para su legibilidad. Las variantes no deben mezclarse, ya que tienen características y casos de uso específicos. Usa Translúcida sólo cuando se cumplan tres condiciones: el elemento se encuentra sobre un contenido multimedia enriquecido; su capa de contenido no se verá afectada negativamente por una capa de atenuación y el contenido que se encuentra sobre él es llamativo y brillante. Los elementos adaptan su apariencia en función de lo que hay detrás de ellos. Los elementos pequeños, símbolos y glifos cambian de claros a oscuros, por lo que el material es discernible. Los elementos grandes, como menús y barras laterales, también se adaptan, pero no pasan de claros a oscuros. Una nueva forma de tinte de elementos genera una gama de tonos en función del brillo del contenido que se encuentra debajo, imitando el vidrio de color real. Este tinte enfatiza la fisicalidad y mejora la legibilidad y el contraste. Usa el tinte de forma selectiva para resaltar elementos y acciones principales. Evita el tinte de todos los elementos ya que puede resultar confuso. Liquid Glass ofrece varias funcionalidades de accesibilidad, como Ambiente reducido, Contraste aumentado y Movimiento reducido, que modifican Liquid Glass sin comprometer su atractivo visual y se aplican automáticamente cuando se habilitan las configuraciones a nivel del sistema.
- 18:53 - Próximos pasos
Liquid Glass ofrece un lenguaje de diseño unificado en todas las plataformas de Apple, 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. Este es el comienzo de un nuevo capítulo en el diseño visual y de interacción de Apple.