-
Découvrez Liquid Glass
Liquid Glass unifie le langage de conception des plates-formes Apple tout en offrant une expérience utilisateur plus dynamique et expressive. Familiarisez-vous avec les principes de conception de Liquid Glass, explorez ses principales propriétés optiques et physiques, et découvrez où et pourquoi l'utiliser.
Chapitres
- 0:00 - Introduction
- 1:29 - Dynamique
- 6:00 - Adaptabilité
- 10:31 - Principes
- 18:53 - Étapes suivantes
Ressources
Vidéos connexes
WWDC25
-
Rechercher dans cette vidéo…
-
-
- 0:00 - Introduction
Liquid Glass ajoute une couche flexible et dynamique aux apps et aux expériences système de l’écosystème de produits Apple. C’est un nouveau matériau numérique innovant qui manipule et module la lumière de façon dynamique. Il se comporte naturellement comme un fluide léger, sensible aussi bien aux interactions tactiles qu’au caractère dynamique des apps modernes.
- 1:29 - Dynamique
Liquid Glass complète l’expérience visuelle et tactile des appareils Apple modernes dotés d’écrans incurvés. Il utilise la technologie Lensing, qui courbe et concentre la lumière de manière dynamique. Il offre ainsi un aspect transparent et léger tout en assurant une bonne définition par rapport au contenu en arrière-plan. Les composants Liquid Glass prennent vie avec finesse et délicatesse. Ils répondent aux interactions en se déformant gracieusement tout en s’illuminant. L’interface évolue naturellement au rythme des actions de l’utilisateur et s’harmonise avec l’environnement dynamique des apps modernes pour créer une expérience fluide et intuitive.
- 6:00 - Adaptabilité
Liquid Glass s’adapte au contenu affiché et à la taille de l’écran. Il est composé de plusieurs couches qui modifient en permanence la teinte, les ombres et la gamme dynamique afin de garantir la lisibilité tout en conservant une clarté visuelle optimale. Lorsque Liquid Glass s’adapte et se transforme pour s’agrandir, il simule un matériau plus épais avec des ombres plus profondes et des effets de lentille et de réfraction plus prononcés, ce qui renforce la perception de la profondeur. Avec des commandes plus grandes, comme les barres latérales d’iPadOS et de macOS, Liquid Glass s’adapte à l’environnement ambiant. La lumière des contenus colorés se répand ainsi sur sa surface, ce qui renforce son contexte et son relief. Les effets de bord de défilement interagissent avec Liquid Glass pour dissoudre le contenu dans l’arrière-plan, ce qui donne l’impression que le verre se soulève au-dessus du contenu en mouvement tout en conservant le contraste et la lisibilité.
- 10:31 - Principes
Les jeux d’ombre et de lumière, la perspective et les variations dynamiques s’entremêlent harmonieusement dans un mécanisme complexe et élaboré. Liquid Glass évolue dans un environnement qui se comporte comme le monde qui nous entoure. Les sources lumineuses éclairent les matériaux pour produire des reflets qui réagissent à la géométrie et au mouvement. L’opacité des ombres augmente ou diminue de manière dynamique, ce qui permet de séparer légèrement le contenu de l’arrière-plan. Lorsque vous interagissez avec les commandes, les matériaux s’illuminent de l’intérieur et leur lumière se reflète sur les autres éléments Liquid Glass pour créer un effet visuel interactif. Nous vous recommandons d’utiliser Liquid Glass uniquement pour la couche de navigation. Pour maintenir une hiérarchie claire et éviter toute surcharge visuelle, n’appliquez pas cet effet de verre dans la zone de contenu ni en superposition avec d’autres éléments vitrés. Il existe deux variantes de Liquid Glass : Regular, qui est polyvalente et adaptative, et Clear, qui est parfaitement transparente et nécessite une couche d’opacité pour être lisible. Ces deux variantes ne doivent jamais être mélangées, car elles ont chacune leurs propres caractéristiques et leurs propres cas d’utilisation. N’utilisez Clear que lorsque les trois conditions suivantes sont remplies : l’élément se trouve au-dessus d’un contenu riche en médias ; votre couche de contenu ne sera pas affectée négativement par une couche d’assombrissement ; et le contenu situé au-dessus est en gras et lumineux. Les éléments adaptent leur apparence en fonction de ce qui se trouve derrière eux. Les petits éléments, symboles et caractères varient du plus clair au plus sombre pour garantir une meilleure lisibilité du contenu. Les éléments plus grands, tels que les menus et les barres latérales, s’adaptent également en fonction du contexte, mais ne passent pas du clair au foncé. Une technique innovante de teinte des composants crée un éventail de nuances qui s’adapte à la clarté du contenu en arrière-plan, comme un effet de verre teinté. Cette teinte met en valeur l’aspect physique et améliore la lisibilité et le contraste. Utilisez la teinte de manière sélective pour mettre en évidence les éléments et actions principaux. Évitez de teinter tous les éléments, car cela peut prêter à confusion. Liquid Glass propose plusieurs fonctionnalités d’accessibilité, notamment la réduction de la transparence, l’augmentation du contraste et la réduction des mouvements, qui modifient Liquid Glass sans compromettre son attrait visuel et s’appliquent automatiquement lorsque les paramètres système sont activés.
- 18:53 - Étapes suivantes
Liquid Glass offre un langage visuel unifié sur toutes les plateformes Apple, où le matériel et les logiciels s’intègrent parfaitement. Il offre une expérience d’interaction plus fluide et dynamique que jamais, et donne un nouveau look saisissant à chaque élément de l’interface. C’est le début d’un nouveau chapitre dans le design visuel et interactif d’Apple.