Découvrez Liquid Glass

Liquid Glass marque une évolution significative dans l’apparence des logiciels Apple. Il ajoute une couche flexible et dynamique aux apps et aux expériences système de l’écosystème de produits Apple. Il s’appuie sur les enseignements tirés allant de l’interface utilisateur Aqua de macOS X, à l’interface immersive de visionOS, en passant par les flous en temps réel d’iOS 7, la fluidité de l’iPhone X et la flexibilité de Dynamic Island. En s’appuyant sur ces enseignements au lieu d’essayer de recréer simplement un matériau inspiré du monde physique, Liquid Glass est un nouveau méta-matériau numérique qui reflète la lumière de manière dynamique. En même temps, il se comporte et se déplace de manière organique comme un liquide léger, répondant à la fois à la fluidité du toucher et au dynamisme des apps modernes.

Je m’appelle Chan et je suis designer de l’équipe de conception de l’interface humaine d’Apple. Dans cette session, nous abordons les principales propriétés dynamiques de Liquid Glass. Shubham discutera ensuite de la façon dont Liquid Glass s’adapte automatiquement à différents contextes et environnements. Enfin, Bruno nous expliquera quelques principes clés sur l’utilisation de Liquid Glass. Allons-y. Liquid Glass suit l’évolution du design des produits Apple, puisque les écrans sont devenus plus arrondis et plus immersifs. Il est représenté dans la UI sous des formes arrondies et flottantes qui s’imbriquent dans les courbes des appareils modernes. Ces formes clairement définies sont faciles à toucher et sont conçues pour s’adapter à la géométrie naturelle de nos doigts. Elles nous invitent à interagir avec elles. Liquid Glass se définit visuellement est par le biais de ce qu’on appelle des lentilles gravitationnelles. Les lentilles gravitationnelles ont lieu tout autour de nous dans le monde naturel. Grâce à cette expérience, nous avons tous acquis une compréhension intuitive de la façon dont la déformation et la courbure de la lumière d’un objet transparent nous communiquent sa présence, son mouvement et sa forme.

Liquid Glass utilise ces repères visuels instinctifs pour séparer et communiquer la superposition d’une nouvelle manière tout en laissant transparaître le contenu sous-jacent. Alors que les matériaux précédents diffusaient la lumière, ce nouvel ensemble de matériaux reflète, façonne et concentre la lumière de manière dynamique en temps réel. Cela fournit une définition par rapport au contenu de fond tout en restant visuellement ancré dans notre expérience du monde naturel. En sculptant la lumière, les commandes peuvent sembler légères et transparentes tout en continuant à pouvoir être distinguées visuellement.

Au lieu de s’estomper, les objets en Liquid Glass se matérialisent en modulant progressivement la courbure de la lumière et la lentille gravitationnelle, assurant une transition qui préserve l’intégrité optique du matériau.

La sensation et le comportement du matériau sont tout aussi importants que son apparence. Dès sa création, les visuels ET le mouvement de Liquid Glass ont été conçus comme une seule entité. Le mouvement des liquides nous ramène tous à un sentiment intuitif. Leur mouvement et leur comportement fluides, réactifs et sans effort sont des propriétés dont les interfaces peuvent s’inspirer pour bouger et réagir à l’image de notre compréhension innée du monde physique.

Liquid Glass réagit à l’interaction en se courbant et en se dynamisant instantanément avec la lumière. Cela donne le sentiment que l’interface est réactive, satisfaisante et vivante. Liquid Glass a une flexibilité semblable à celle d’un gel qui communique sa nature transitoire et malléable, car il se déplace avec votre interaction. Cette fluidité permet à l’interface de s’aligner sur le dynamisme et la nature en constante évolution de notre pensée et de nos mouvements.

Les éléments peuvent se soulever temporairement avec Liquid Glass, par exemple, lorsque vous interagissez avec un composant. L’état au repos reste visuellement silencieux alors qu’il s’anime au toucher. Cela convient très bien à des éléments comme les commandes, où la translucidité permet d’observer précisément la valeur sous-jacente.

Cette fluidité s’étend à la façon dont le matériau réagit à votre entrée, mais aussi à la façon dont il réagit aux environnements en constante évolution des apps modernes. Lorsque vous passez d’un état à un autre dans une app, Liquid Glass se transforme dynamiquement entre les commandes dans chaque contexte. Cela maintient le concept de plan flottant unique sur lequel les commandes vivent. Les transitions entre les différentes sections d’une app sont fluides et transparentes lorsque les commandes changent de forme. Lorsque vous affichez un menu, la bulle s’ouvre simplement pour révéler son contenu. Cette transition légère vous permet de retrouver tout là où vous venez d’appuyer. Elle communique une relation très claire et directe entre le bouton et son contenu. Grâce à ces propriétés, Liquid Glass inaugure une nouvelle ère en matière d’apparence des apps. Mais, cela change aussi le ressenti. Avec sa capacité à courber et à façonner la lumière de façons innovantes, alliée à sa capacité à fléchir et à changer de forme de manière dynamique, Liquid Glass rend l’expérience des apps plus organique, plus immersive et plus fluide.

Je passe la parole à Shubham pour voir comment Liquid Glass s’adapte automatiquement à différents contextes et plates-formes. Merci Chan. Liquid Glass est entièrement conçu pour s’adapter à la fois à sa taille et à son environnement. Son objectif est de rester visuellement clair, en s’en remettant au contenu sous-jacent. Il change aussi constamment, subtilement, pour assurer la lisibilité et maintenir une séparation claire avec le contenu. Liquid Glass est composé de plusieurs couches qui interagissent pour lui donner son aspect unique. Contrairement aux matériaux précédents qui avaient un aspect clair ou foncé fixe, chaque couche s’adapte en fonction de ce qui se trouve derrière.

Alors que le texte défile en dessous, les ombres deviennent plus visibles pour créer une séparation supplémentaire.

La quantité de teinte et la plage dynamique changent pour que les boutons restent lisibles, tout en laissant passer le plus de contenu possible. Il peut basculer indépendamment entre la lumière et l’obscurité, ce qui lui permet de s’adapter à n’importe quel contexte et de mettre en avant le contenu de votre app. Lorsque le verre se courbe et se transforme en tailles plus grandes, comme lors de l’affichage d’un menu à partir d’un bouton de la barre d’outils, ses caractéristiques matérielles changent pour simuler un matériau plus substantiel. Il projette des ombres plus profondes, a des effets de lentille gravitationnelle et de réfraction plus prononcés et une diffusion plus douce de la lumière. Ces changements subtils améliorent la profondeur perçue et la lisibilité du contenu à l’intérieur de l’élément translucide lui-même. Liquid Glass est fondamental pour créer un langage de conception unifié sur toutes nos plates-formes. Sur iPad et Mac, nous appliquons ces mêmes principes. Comme sur l’iPhone, ces couches de verre liquide forment une couche fonctionnelle distincte pour les commandes et la navigation, flottant au-dessus de tout et offrant une toile plus vaste pour vos contenus.

Les commandes en verre s’imbriquent dans les angles arrondis des fenêtres, tout en maintenant la concentricité de la UI. Sur les éléments plus grands, comme les barres latérales, l’apparence de Liquid Glass dépend de l’environnement ambiant de l’app.

La lumière d’un contenu coloré à proximité peut subtilement se répandre sur sa surface, renforçant le contexte du matériau et sa sensation d’élévation au sein de l’interface. Cet effet ne se limite pas à la surface, la lumière se reflète, se disperse et se mêle à l’ombre, un peu comme elle le ferait dans le monde physique. Les barres latérales flottantes sur iPad et Mac offrent un niveau d’immersion inédit.

Ensemble, la barre latérale et la barre d’onglets représentent un langage cohérent pour la navigation de base des apps sur toutes les plates-formes. Il peut être considéré comme un élément de navigation unique qui s’adapte de manière fluide à mesure que le canevas de l’app s’agrandit. Parlons maintenant de l’effet du bord de défilement.

L’effet du bord de défilement fonctionne de concert avec Liquid Glass pour maintenir cette séparation cruciale entre les couches de la UI et de contenu et assurer la lisibilité, avec le contenu à défilement dynamique. Les effets du bord de défilement sont intrinsèquement adaptatifs. Lorsque le contenu défile sous un élément en verre, l’effet dissout doucement le contenu dans l’arrière-plan, levant le verre visuellement au-dessus du contenu en mouvement et permettant aux éléments flottants tels que les titres de rester clairs en permanence.

Lorsqu’un contenu plus sombre défile en dessous, faisant passer le verre lui-même à son style sombre, l’effet bascule intelligemment pour appliquer un assombrissement subtile à la place, garantissant à nouveau contraste et lisibilité. Dans certains cas, comme lorsque des vues accessoires sont épinglées sous une barre d’outils, comme les en-têtes de colonne, nous utilisons un effet de « style dur » à la place.

Au lieu d’un fondu progressif, l’effet est appliqué uniformément sur toute la hauteur de la barre d’outils et de la vue épinglée. Optez pour ce style lorsque vous avez besoin de plus de séparation visuelle entre les éléments flottants dans la vue accessoire et le contenu défilant en dessous. Voilà comment Liquid Glass s’adapte à la taille, à l’environnement et à la plate-forme, et comment vous pouvez l’exploiter avec les effets de bord de défilement pour garantir clarté et lisibilité, tandis que le contenu de votre app occupe le devant de la scène. Je cède la parole à Bruno qui va vous expliquer les variantes de Liquid Glass et comment en tirer le meilleur parti dans vos apps. Merci Shubham. Pour tirer le meilleur parti de Liquid Glass, il est important de bien le comprendre. Passons en revue sa structure et ses comportements. Vous saurez ainsi à quoi vous en tenir lorsque vous l’utiliserez.

La véritable magie de Liquid Glass réside dans son design holistique. Le jeu de lumière, les effets de profondeur, les changements adaptatifs ne sont pas des fonctionnalités isolées. Il s’agit des couches d’un système sophistiqué qui interagissent pour créer un matériau qui va au-delà de la somme de ses parties. Examinons certaines de ces couches de plus près. La couche de reflets Liquid Glass vit dans un environnement qui se comporte comme le monde qui nous entoure. Des sources lumineuses au sein de cet environnement se reflètent sur le matériau, produisant des reflets qui réagissent à la géométrie comme ils le devraient. Lors d’interactions, telles que le verrouillage ou le déverrouillage du téléphone, ces lumières circulent dans l’espace, définissant la silhouette du matériau grâce au déplacement de la lumière autour de lui. Dans certains cas, l’éclairage réagit au mouvement de l’appareil, ce qui donne l’impression que Liquid Glass est conscient de sa position dans le monde réel. Les ombres jouent également un rôle pour mieux ancrer et définir les éléments. Portez une attention particulière à l’ombre dans la diapositive suivante.

L’élément tient compte de ce qui se trouve derrière et augmente l’opacité de son ombre lorsqu’il est sur du texte. À l’inverse, il réduit l’opacité de son ombre lorsqu’il est sur un fond clair uni. Cela assure la séparation du contenu et contribue à une meilleure visibilité des éléments.

Lorsque vous interagissez avec Liquid Glass, le matériau s’illumine de l’intérieur en guise de réaction.

La lueur, qui commence directement sous vos doigts, se propage à l’élément et à tous les éléments Liquid Glass à proximité, interagissant avec les propriétés flexibles du matériau d’une manière naturelle et fluide.

Ces comportements rendent l’interface vivante et connectée au monde physique et aux interactions avec l’appareil. Il arrive que plusieurs couches s’adaptent ensemble pour assurer la clarté et la concentration dans la hiérarchie de la UI.

Par exemple, lorsqu’une fenêtre devient inactive sur Mac ou iPad, Liquid Glass change d’apparence et recule visuellement pour orienter l’attention.

Cette sophistication est intégrée. Vous bénéficiez automatiquement de tous ces comportements dynamiques lorsque vous appliquez Liquid Glass à vos créations. Maintenant que j’ai passé en revue sa structure et ses comportements, découvrons comment et quand utiliser Liquid Glass, et voyons les différentes variantes possibles. Il peut être tentant d’utiliser Liquid Glass partout, mais mieux vaut le réserver à la couche de navigation qui flotte au-dessus du contenu de votre app. Prenons l’exemple de cette vue de table : l’utilisation de Liquid Glass entrerait en conflit avec d’autres éléments et brouillerait la hiérarchie. Gardez-la plutôt dans la couche de contenu pour assurer la clarté. Évitez toujours d’utiliser du verre sur du verre. Empiler des éléments Liquid Glass les uns sur les autres donne vite une impression d’encombrement à l’interface. Si vous placez des éléments au-dessus de Liquid Glass, évitez d’appliquer le matériau aux deux couches. Utilisez plutôt des remplissages, de la transparence et de l’éclat pour les éléments supérieurs afin de donner l’impression d’une fine superposition faisant partie du matériau. Parlons maintenant des variantes de Liquid Glass. Il en existe deux : standard et claire. Elles ne doivent jamais être combinées, car elles ont leurs propres caractéristiques et cas d’utilisation. La variante standard, qui est celle que vous utiliserez le plus, est plus polyvalente. Cette variante vous offre tous les effets visuels et adaptatifs dont nous avons parlé, et assure la lisibilité quel que soit le contexte. Elle fonctionne à n’importe quelle taille, sur tout type de contenu et peut accueillir n’importe quel élément. La variante claire, en revanche, n’a pas de comportement adaptatif. Elle est en permanence plus transparente, ce qui permet à la richesse du contenu sous-jacent de transparaître et d’interagir joliment avec le verre. Pour assurer une lisibilité des symboles ou des libellés, une couche d’assombrissement doit assombrir le contenu sous-jacent. Sans cela, la lisibilité se détériore sensiblement. Si les éléments Liquid Glass de votre app ont une empreinte plus petite, vous pouvez utiliser l’assombrissement localisé et permettre au contenu de conserver son éclat d’origine. Pour récapituler, alors que la variante standard fonctionne n’importe où, la claire ne doit être utilisée que lorsque ces 3 conditions sont remplies. Tout d’abord, l’élément auquel vous l’appliquez doit être un contenu riche en médias. Deuxièmement, l’introduction d’une couche d’assombrissement ne doit pas nuire à votre couche de contenu. Enfin, le contenu situé au-dessus doit apparaître en gras et être lumineux. Parlons maintenant de la lisibilité : un facteur clé faisant partie intégrante de la conception de Liquid Glass.

Les petits éléments comme les barres de navigation et les barres d’onglets adaptent leur apparence en fonction du contenu sous-jacent. Ils passent également du clair au foncé en fonction de l’arrière-plan pour que le matériau soit aussi plaisant que possible et facilement discernable.

Les grands éléments, comme les menus ou les barres latérales, s’adaptent selon le contexte, mais ne passent pas du clair à l’obscurité. Leur surface est trop grande. Des transitions comme celles-ci seraient donc gênantes. Pour assurer la lisibilité, les symboles et les glyphes au-dessus de Liquid Glass en font de même. Ils basculent de la lumière à l’obscurité et vice versa, en reflétant le comportement du verre pour maximiser le contraste. Tout le contenu placé sur la variante standard bénéficie automatiquement de ce traitement. Vous pouvez également utiliser des couleurs personnalisées. Utilisez-les avec parcimonie. Lorsque des objets ou des éléments ont un objectif fonctionnel distinct, vous pouvez les teinter pour les mettre en valeur. Voyons comment cela fonctionne.

Liquid Glass offre une nouvelle façon de teinter les éléments, qui respecte les principes du matériau et maximise la lisibilité.

Cette technique est cohérente sur tous les éléments Liquid Glass, allant des libellés à l’heure de l’écran verrouillé, en passant par le texte et les boutons entièrement teintés. Elle donne vie et dynamisme au matériau et le relie plus profondément au contenu qui l’entoure.

La sélection d’une couleur génère une gamme de tons qui sont associés à la luminosité du contenu sous l’élément teinté. Elle s’inspire de la façon dont le verre coloré fonctionne dans la réalité : en modifiant sa teinte, sa luminosité et sa saturation en fonction de l’arrière-plan, sans trop s’écarter de la couleur voulue.

Cela met l’accent sur l’aspect physique du matériau, mais cela contribue également à la lisibilité et au contraste.

Les teintes sont compatibles en natif avec tous les comportements du verre. Vous pouvez donc teinter n’importe quel élément très facilement.

Voici un bouton qui utilise un remplissage uni au lieu de la teinte intégrée. Il est complètement opaque et brise le caractère visuel de Liquid Glass. Notez toutefois quand il commence à utiliser la nouvelle teinte. Tout à coup, il semble plus transparent et plus ancré dans son environnement.

La teinte ne doit être utilisée que pour mettre l’accent sur les éléments et actions principaux de la UI. Commençons par voir ce qu’il ne faut pas faire. Évitez de teinter tous les éléments. Lorsque chaque élément est teinté, rien ne se démarque, ce qui peut prêter à confusion. Si vous souhaitez imprégner de couleur votre app, faites-le plutôt dans la couche de contenu. En revanche, l’utilisation de la teinte est justifiée avec ce bouton View Bag. Le rouge le distingue comme l’action principale dans cette app de livraison de nourriture. La couche de contenu est essentielle pour éviter toute nuisance visuelle indésirable. Lorsque l’état est stable, par exemple, lors du premier lancement d’une app, évitez les intersections entre le contenu et Liquid Glass. Au lieu de cela, repositionnez ou redimensionnez le contenu pour conserver la séparation.

En plus de ces considérations de lisibilité, Liquid Glass propose plusieurs fonctionnalités d’accessibilité pour répondre à toutes sortes d’utilisateurs et de besoins.

Celles-ci agissent comme des modificateurs de matériau qui modifient certaines couches de Liquid Glass, sans en affecter les effets.

Par exemple, la réduction de la transparence donne à Liquid Glass un effet plus givré et masque une plus grande partie du contenu sous-jacent. L’augmentation du contraste rend les éléments principalement noirs ou blancs et les met en évidence avec une bordure contrastée, tandis que la réduction du mouvement diminue l’intensité de certains effets et désactive toutes les propriétés élastiques du matériau. Ces fonctionnalités sont disponibles automatiquement lorsque vous utilisez le nouveau matériau. Chaque fois que ces paramètres sont activés au niveau du système, les éléments Liquid Glass les rendent accessibles partout. Tout au long de cette session, nous avons couvert les principes fondamentaux de Liquid Glass. Nous avons exploré son comportement, et avons vu comment l’utiliser de manière efficace et inclusive.

Liquid Glass offre un langage de conception unifié sur toutes les plates-formes, alliant de manière transparente matériel et logiciel. Il offre une expérience d’interaction plus fluide et dynamique que jamais, apportant un nouveau look saisissant à chaque partie de l’interface. C’est le début d’une nouvelle ère dans le design visuel et le design d’interaction d’Apple, et nous avons hâte que vous en fassiez partie.