Découvrez le nouveau système de conception

Bonjour. Je m’appelle Maria et je suis designer au sein de l’équipe Apple Design. Dans cette vidéo, je couvre les nouveautés de notre système de conception concernant le design, l’architecture de l’information et les composants système essentiels. Je vous recommande de commencer par la session « Meet Liquid Glass », de mes collègues Chan, Shubham et Bruno. Elle pose les bases de tous les éléments que nous allons aborder ici, en présentant la façon de les utiliser de manière efficace et inclusive dans vos propres apps. Liquid Glass est la mise à jour la plus complète de conception logicielle. Elle redéfinit la relation entre interface et contenu grâce à un tout nouvel ensemble d’heuristiques. Il en résulte un langage de conception harmonisé, plus cohérent, adaptatif et expressif. Aborder les systèmes de manière holistique offre de puissantes possibilités. Cela permet d’étendre ces principes à toutes les surfaces et interactions au sein de l’écosystème Apple. Et grâce à des technologies comme SwiftUI et Mac Catalyst, ainsi qu’à de nouvelles fonctionnalités logicielles comme le redimensionnement des fenêtres de l’iPad, nous nous dirigeons vers une base de conception commune afin de maintenir la fluidité entre les appareils, les tailles d’écran et les modes de saisie. Qu’il s’agisse de concevoir des fonctionnalités individuelles ou de façonner des systèmes entiers, la flexibilité des frameworks Apple rend la conception multiappareils plus transparente, évolutive que jamais. Il y a beaucoup de choses à explorer et je vous laisse le plaisir de les découvrir par vous-même. Pour mettre en évidence les mises à jour les plus percutantes, je me concentre sur trois domaines : Le nouveau langage de conception et la façon dont il pose les bases de la cohésion à grande échelle. Ensuite, la structure qui guide la navigation et l’engagement relatif au contenu. Enfin, la façon dont la continuité rend les interactions familières, où qu’elles se produisent. Entrons dans le vif du sujet. Liquid Glass a joué un rôle majeur dans l’évolution du langage de conception d’Apple, en créant une familiarité entre les plates-formes et en adaptant chaque expérience pour qu’elle soit parfaite. En concevant ce système, nous avons mis l’accent sur l’impact des moindres détails. Une approche systématique consiste à concevoir avec intention à tous les niveaux, en veillant à ce que tous les éléments, du plus petit contrôle à la plus grande surface, soient considérés par rapport à l’ensemble. Notre gamme de couleurs système a été ajustée de manière subtile, mais significative pour les apparences claire, sombre et au contraste accru, afin qu’elles fonctionnent en harmonie avec Liquid Glass, ce qui améliore la différenciation des teintes, sans perdre l’esprit optimiste qui en fait des couleurs Apple exclusives. La typographie a été affinée pour améliorer la clarté et la structure. Elle est désormais davantage en gras et alignée sur la gauche pour améliorer la lisibilité dans les moments clés comme lors des alertes et du processus d’intégration. L’un des changements les plus significatifs concerne la façon dont nous utilisons les formes. Le matériel Apple présente une bordure uniforme, et cette même précision guide l’interface utilisateur, dont la courbure, la taille et les proportions sont alignées pour créer une parfaite harmonie entre ce que vous tenez et ce que vous voyez. Une géométrie silencieuse, axée sur la concentricité, régit la façon dont nos formes s’imbriquent.

En alignant les rayons et les marges autour d’un centre commun, nous permettons aux formes de s’emboîter confortablement. Pour l’équilibre optique, les vues sont mathématiquement centrées lorsque cela est logique, et subtilement décalées lorsque cela ne l’est pas. Nous utilisons trois types de formes pour créer des dispositions concentriques. Les formes fixes ont un rayon d’angle constant. Les capsules utilisent un rayon égal à la moitié de la hauteur du conteneur. Pour les formes concentriques, le rayon est calculé en soustrayant la marge intérieure de celui du parent.

La géométrie de la capsule favorise la concentricité. C’est pourquoi vous la verrez dans tout le système : dans les proportions en miroir des curseurs et des commutateurs, et dans les barres, les boutons et les coins arrondis des vues de tableau groupées. Les capsules apportent de la clarté aux présentations tactiles, mais dans les environnements de bureau denses, leur utilisation convient mieux aux actions exceptionnelles. Sous macOS, les commandes de tailles mini, petite et moyenne continuent d’utiliser des rectangles arrondis, ce qui les rend adaptées aux dispositions compactes à haute densité, comme les panneaux d’inspection. Les commandes de grande taille auront désormais des formes de capsule, tout comme la nouvelle taille XL, qui tire parti de Liquid Glass pour mettre l’accent sur les zones plus spacieuses. Utilisées ensemble, ces commandes créent une hiérarchie et un équilibre à travers les dispositions de bureau complexes. Il est important que votre langage de conception visuelle et vos éléments d’interface s’harmonisent avec Liquid Glass. C’est comme si vous jouiez dans la même tonalité musicale : vos éléments d’interface doivent compléter le rythme et la tonalité du système, plutôt que d’entrer en conflit avec eux. C’est là que les choses peuvent se compliquer, surtout lorsque vous gérez votre propre système de conception. L’utilisation des trois types de formes que nous avons abordés permet d’aligner vos composants sur le système et de travailler plus facilement avec les API d’Apple.

Lorsque vous mettez à jour vos apps, gardez un œil sur les coins qui semblent trop étroits ou évasés. Ils peuvent créer des tensions et rompre l’équilibre. Cela apparaît souvent dans les conteneurs imbriqués, comme les illustrations d’une carte. Si quelque chose ne va pas, la réponse est simple. Sa forme doit probablement être concentrique pour permettre au système de calculer automatiquement les rayons intérieurs. Vous pouvez remarquer cela près des bords des appareils, comme ce bouton. Pour les iPhone, utilisez une capsule avec une marge supplémentaire pour créer de l’espace près du bord de l’écran. Pour l’iPad et le Mac, utilisez une forme concentrique qui s’aligne sur le bord de la fenêtre pour un meilleur équilibre. Et voici une astuce pour gérer les composants qui doivent fonctionner à la fois à l’intérieur d’un conteneur et seuls : utilisez une forme concentrique avec un rayon de secours. La valeur concentrique s’adapte lorsqu’elle est imbriquée, et le rayon de secours intervient lorsque le composant est autonome. Une fois les bases en place, l’étape suivante consiste à comprendre comment structurer votre app pour tirer le meilleur parti de Liquid Glass. Alors que les apps deviennent de plus en plus immersives et axées sur le contenu, la UI doit permettre l’interaction là où elle est nécessaire, et rester discrète dans le cas contraire. Liquid Glass définit une nouvelle couche fonctionnelle dans l’interface, flottant au-dessus de votre contenu pour apporter clarté, sans voler la vedette. Cette nouvelle couche dépeint les relations entre les surfaces, c’est-à-dire la façon dont elles apparaissent et restent connectées à leur source d’une manière à la fois spatiale, mais ancrée. Prenons l’exemple de la feuille Action. Auparavant, elle apparaissait au bas de l’écran, quelle que fût l’origine de l’action. Désormais, elle surgit à partir de l’action elle-même, qui lui sert de source. Des rôles clairement définis aident le système à comprendre cette relation, en ancrant l’interaction alors qu’elle s’étend directement à partir de l’élément touché. Lorsque vous créez des commandes personnalisées, adoptez la même approche et appliquez le contenu directement à la commande, et non à ses vues internes.

Liquid Glass aide à refléter l’orientation de la navigation en introduisant une variation matérielle subtile à mesure que la navigation s’approfondit ou se déplace. Cela s’appuie sur des indices familiers, comme l’utilisation d’une couche de gradation pour signaler la modalité lorsqu’une fenêtre apparaît. Lorsqu’une tâche interrompt le flux principal, associez Liquid Glass à une couche de gradation pour aider à concentrer l’attention, donnant l’impression que la fenêtre est un espace clair et utile. En revanche, lorsqu’une tâche se déroule en parallèle, Liquid Glass crée une séparation naturelle pour aider à garder une structure claire sans interrompre le flux. Lorsque le centre de l’attention change, par exemple, si vous faites glisser une fenêtre vers le haut, Liquid Glass disparaît subtilement, devenant plus opaque, et la taille augmente pour signaler un niveau d’engagement plus soutenu. Outre son rôle dans la mise en évidence et la profondeur, Liquid Glass contribue à améliorer les commandes de navigation. Auparavant, ces dernières se fondaient dans l’arrière-plan lorsque l’interface était au repos. Liquid Glass aide à les mettre en relief, créant une plus grande séparation avec votre contenu, tout en renforçant l’interactivité.

Tout d’abord : si vous avez personnalisé vos barres, il est temps de les modifier. Nous avons tous ajouté des arrière-plans ou des bordures pour donner aux boutons le poids qu’il leur fallait. C’était courant, et tout à fait valable, pendant longtemps. La nouvelle apparence du système révolutionne la mise en évidence, ce qui rend inutiles des personnalisations comme celles-ci.

Au lieu de s’appuyer sur la décoration, la hiérarchie doit s’exprimer par la disposition et le regroupement. Pour une structure solide, il faut organiser les éléments de la barre pour plus de lisibilité et de clarté spatiale. À mesure que vous adopterez le nouveau look, les éléments regroupés à l’aide de l’API appropriée seront automatiquement mis à jour pour partager un même arrière-plan et préserver leur relation spatiale. Si les éléments ne se regroupent pas comme prévu, voici quelques conseils. Si votre barre est trop encombrée, supprimez tout ce qui n’est pas nécessaire et déplacez les actions secondaires dans un menu Plus pour que tout reste propre et accessible. Regroupez les éléments de barre par fonction et par fréquence. Les boutons permettant d’effectuer des actions connexes doivent généralement être regroupés. Assurez-vous de ne pas regrouper des symboles et du texte, comme « Sélectionner » et l’icône de partage que vous voyez ici. Cela pourrait être perçu comme un seul bouton. Si vous avez besoin de boutons textuels, placez-les dans leur propre conteneur.

Une action principale, comme OK, reste distincte et apparaît teintée, souvent sous la forme d’une coche bleue sous iOS et iPadOS ou d’un bouton textuel bien visible sous macOS, créant ainsi un point focal clair avec lequel il est facile d’interagir. La barre d’onglets est l’une des parties les plus permanentes de votre app. Le fait de bien l’organiser donne une idée claire de la disposition et aide à passer d’une section à l’autre. Lorsque le contenu n’est pas visible à l’avance, la recherche devient essentielle. C’est pourquoi iOS inclut désormais un onglet de recherche dédié en bas, plus rapide et plus accessible. Les barres d’onglets peuvent prendre en charge des fonctionnalités permanentes à l’aide de vues accessoires, comme des commandes de lecture multimédia qui restent visibles dans votre app. Évitez de placer des actions spécifiques ici. Un bouton de paiement, par exemple, a sa place avec le contenu qu’il prend en charge. Le mélange d’éléments provenant de différentes parties de la UI peut compliquer la distinction entre ce qui est permanent et ce qui est contextuel. Voyons comment les effets visuels aident à hiérarchiser le contenu et à assurer la clarté des interactions. Les éléments utilisant Liquid Glass doivent être séparés du contenu pour assurer la lisibilité. Dans Safari, les commandes sont placées au-dessus du matériel système, et pas directement sur le contenu. Sans cette séparation, le contraste peut en souffrir. Les effets de bord de défilement renforcent cette limite, remplaçant les séparateurs nets par un flou subtil pour assurer la lisibilité de l’interface. N’oubliez pas que les effets de bord de défilement ne sont pas décoratifs. Ils ne se bloquent pas et ne s’assombrissent pas comme les superpositions. Ils clarifient simplement où l’interface et le contenu se rencontrent, et ne doivent pas être utilisés là où il n’y a pas d’éléments de UI flottants.

Les vues de défilement affichent automatiquement un effet de bord lorsque des commandes épinglées s’y superposent. Vous verrez deux styles dans le système : flou et net. Vous devez éviter de les mélanger ou de les empiler. Le style flou est celui par défaut, utilisé dans la plupart des cas, en particulier sous iOS et iPadOS. Il offre une transition subtile pour les éléments interactifs, comme les boutons ou les entrées, avec Liquid Glass. Le style net est principalement utilisé sous macOS. Il crée une limite plus marquée et plus opaque, idéale pour le texte interactif, les commandes sans arrière-plan ou les en-têtes de tableau épinglés qui nécessitent davantage de clarté. Appliquez un effet de bord de défilement par vue. Dans les dispositions Split View sur iPad ou macOS, chaque volet peut avoir son effet. Conservez simplement la même hauteur pour maintenir l’alignement. L’accent mis sur le contenu se répercute sur les barres latérales, où il peut désormais être étendu jusqu’au bord. Vous remarquerez que les barres latérales sont encastrées et créées avec Liquid Glass, ce qui permet au contenu de passer derrière elles pour une sensation plus immersive. Les effets d’extension d’arrière-plan permettent au contenu de s’étendre derrière la barre latérale, remplissant toute la largeur, tout en gardant les visuels au centre de la disposition. Utilisez-les pour vos images principales, vos arrière-plans teintés ou toute autre surface vaste. Assurez-vous simplement de superposer tout texte et toute commande au-dessus pour éviter toute distorsion visuelle indésirable. Ce n’est pas tout ! Les vues de défilement s’étendent sous la barre latérale par défaut. Les carrousels glissent naturellement, pour une découverte sans interruption.

Vous pouvez appliquer des effets d’extension d’arrière-plan par vue, pour plus de flexibilité pour créer des dispositions plus riches. Ici, les vues du haut et du bas utilisent l’effet d’extension d’arrière-plan, tandis que la vue de défilement du milieu reste séparée. Si le langage de conception assure la cohésion et la structure régit l’action, la continuité relie le tout en une seule expérience fluide. L’idée est simple : lorsqu’une personne passe d’un appareil à un autre ou redimensionne une fenêtre, elle ne recommence pas, elle continue la même tâche. Votre app doit permettre à cette tâche d’avancer sans interruption, en la gardant active. Une décision, que ce soit en matière de disposition, de hiérarchie ou d’interaction, doit s’appliquer à tous les appareils. En fait, cela simplifie votre processus de conception ! Au lieu de repartir de zéro pour chaque plate-forme, vous n’avez besoin de concevoir l’anatomie de votre app qu’une seule fois. Ce concept n’a rien de nouveau. Nous redoublons juste d’efforts. Commençons par un rappel de notre définition du contexte d’un appareil. Alors que vous mettez à jour votre app pour adopter le nouveau système de conception, réévaluez la qualité de votre expérience sur toutes les plates-formes. Sur iPhone, la disposition est étroite et verticale. Sur Mac, tout se déploie sur une vaste toile. L’iPad représente la couche intermédiaire, faisant le lien entre l’utilité concentrée de l’iPhone et la spacieuse profondeur du Mac. C’est là que votre conception apprend à évoluer. En gardant cela à l’esprit, parlons de la façon dont le contenu partagé donne vie à ce sentiment de continuité. Vous vous souvenez des exemples d’organisation spatiale ? C’est là que la continuité compte vraiment. Lorsque le contenu est intentionnellement regroupé, il doit le rester, même si la disposition s’adapte. Utilisez les mêmes symboles sur tous vos appareils pour préserver le sens et créer une familiarité par la répétition. Certaines actions ne sont pas évidentes. Un crayon peut suggérer le fait d’annoter et, une coche, celui de confirmer. Les actions comme Sélectionner ou Modifier sont donc facilement mal interprétées. Lorsqu’il n’existe pas de symbole clair, une étiquette textuelle convient mieux.

Vous l’avez peut-être remarqué : les barres comportent davantage de symboles que de texte. C’est valable pour toute la plate-forme, y compris les menus. Utilisez des symboles dans vos menus, là où cela facilite la reconnaissance. Lorsque des actions sont étroitement liées, comme plusieurs façons de copier, ne répétez pas et ne modifiez pas les icônes. Utilisez le symbole une fois pour présenter le groupe, et laissez le texte faire le reste. La page Icônes des Directives d’interface humaine a été mise à jour pour inclure une liste de glyphes préférés pour les actions courantes. C’est un point de départ utile que vous utilisiez les symboles SF ou que vous les mappiez à votre propre système. Pour assurer la continuité sur tous les appareils, structurez les composants à l’échelle, en traitant la variation de plate-forme comme l’expression d’un cadre partagé, et non comme une exception.

Les faire fonctionner dans différents environnements se résume souvent à deux choses : la façon dont ils sont créés et leur comportement. Commencez par définir une anatomie commune. Comme les symboles, les éléments d’une disposition de composants doivent être conservés et réutilisés dans des emplacements familiers. Vous avez vu cela en action sur les barres latérales et les éléments de tableau, et nous avons adopté une approche similaire pour les menus. Les menus contextuels sous macOS et sous iOS peuvent ne pas se ressembler, mais ils comportent tous un indicateur de sélection, une icône, une étiquette et un élément accessoire. Et même lorsque la structure change, le comportement comble le vide. Les composants doivent toujours prendre en charge le même ensemble d’interactions de base. Par exemple, des composants comme les barres d’onglets, les commandes segmentées et les barres latérales signalent tous la sélection, la navigation et l’état de manière cohérente, offrant ainsi les mêmes repères de fonction et de feedback, quelle que soit leur forme. Il ne s’agit pas seulement de relier les plates-formes, mais de rapprocher les composants connexes au sein de chacune d’elles. Lorsque ces composants sont connectés et se comportent de la sorte, tout se met en place.

Les nouveautés du système de conception sont donc les mises à jour de la conception visuelle, de l’architecture et des composants, le tout relié par Liquid Glass. À vous de jouer, maintenant ! Nous sommes ravis de partager avec vous ce nouveau chapitre du design Apple. Explorez les Directives d’interface humaine, découvrez les nouveaux kits d’interface utilisateur sur le site web Apple Design Resources et commencez à donner vie à ces idées dans vos propres apps. Merci de votre attention. À bientôt !