Créez une app AppKit avec le nouveau design

Bonjour, je m’appelle Jeff Nadeau, responsable Ingénierie des frameworks chez Apple, et vous regardez « Build an AppKit app with the new design ». Le nouveau design de macOS établit une base commune pour l’apparence des apps Mac, en renouvelant les matériaux et les commandes dans tout le système. Un élément clé du nouveau design est Liquid Glass, une surface translucide qui réfléchit et réfracte la lumière, créant une sensation de profondeur et de dynamisme dans l’interface utilisateur. AppKit offre tout ce qu’il faut pour s’adapter à ce nouveau design. Je vais vous présenter les changements apportés au framework, notamment les nouveaux comportements sous macOS Tahoe et les nouvelles API qui permettent d’optimiser l’intégration du nouveau design. J’examinerai ces modifications, en commençant par les composants structurels de base de votre application. Je présenterai l’effet du bord du défilement, un effet visuel qui assure la lisibilité du contenu qui défile d’un bord à l’autre. Le nouveau design comprend une importante actualisation de l’apparence et de la disposition des commandes. Pour finir, je m’attarderai sur le matériau Liquid Glass, son fonctionnement et les API AppKit à utiliser pour adopter le verre dans les éléments personnalisés de la UI. Commençons par la structure de l’app. Le nouveau design transforme l’apparence d’une fenêtre Mac en modifiant la forme de la fenêtre et en encadrant ses principales zones structurelles dans du verre. L’une de ces régions est la barre d’outils. Dans le nouveau design du système, les éléments de la barre d’outils sont placés sur du verre et toute la barre d’outils semble flotter au-dessus du contenu, ce qui renforce le sentiment de hiérarchie dans la fenêtre. Le verre rassemble également les commandes en groupes logiques. AppKit regroupe automatiquement les boutons d’une barre d’outils sur un même morceau de verre. Différents types de commandes sont séparés sur leur propre élément en verre, comme les commandes segmentées, les boutons contextuels et le contrôle de la recherche. AppKit détermine ce regroupement automatiquement, en fonction du type de vue de contrôle de chaque élément. Pour remplacer le comportement automatique, utilisez NSToolbarItemGroup pour regrouper des éléments ou insérez des espaceurs pour séparer des éléments. Le matériau Liquid Glass est adaptatif. Il réagit intelligemment à son contexte, en changeant d’apparence pour s’adapter à la luminosité du contenu qui se trouve derrière. L’apparence de la barre d’outils en verre passe même du clair au sombre si le contenu qui défile est particulièrement clair ou sombre. Ce changement d’apparence est communiqué au contenu de la barre d’outils à l’aide de NSAppearance. Tout votre travail pour prendre en charge le Mode sombre s’applique ici aussi. NSToolbar place automatiquement le matériau en verre derrière chaque élément de la barre d’outils. Mais tous les éléments ne doivent pas figurer sur du verre. Évitez de mettre sur du verre les éléments non interactifs comme les titres personnalisés et les indicateurs d’état.

Le texte figurant dans la barre d’outils Photos en est un bon exemple. Avec le support en verre, il ressemble presque à un bouton. Vous pouvez supprimer le verre d’un NSToolBarItem en définissant la propriété IsBordered sur false. C’est beaucoup mieux comme ça.

Pour les autres éléments de votre barre d’outils, le matériau en verre a une autre caractéristique intéressante : sa teinte. Utilisez la nouvelle propriété de style de NSToolBarItem pour spécifier un style proéminent. Le style proéminent teinte le verre à l’aide de la couleur d’accentuation, ce qui est idéal pour indiquer un état ou souligner une action importante. Pour personnaliser encore l’apparence d’un élément important de la barre d’outils, sélectionnez une couleur spécifique dans la propriété backgroundTintColor. Le badge est un autre moyen d’attirer l’attention sur un élément de la barre d’outils. Utilisez l’API NSItemBadge pour indiquer qu’un élément de barre d’outils passe dans un contenu nouveau ou en attente. Par exemple, vous pouvez utiliser un badge pour indiquer un nombre de messages non lus ou de nouvelles notifications. Nous venons de voir les barres d’outils en verre, passons au contenu principal de la fenêtre, souvent organisé en vues scindées. Dans le nouveau design, les barres latérales flottent sur du verre au-dessus du contenu de la fenêtre, tandis qu’un morceau de verre allant d’un bord à l’autre à côté du contenu regroupe les inspecteurs. Pour obtenir cet effet dans votre application, utilisez NSSplitViewController. Lorsque vous créez des éléments fractionnés avec une barre latérale ou avec le comportement des inspecteurs, AppKit les associe automatiquement au matériau en verre approprié.

Maintenant que la barre latérale est sur du verre, le matériau de l’ancienne barre latérale n’est plus nécessaire. Si vous utilisez un NSVisualEffectView pour afficher ce matériau dans votre barre latérale, cela empêchera le matériau en verre de transparaître. Vous devez supprimer ces vues d’effets visuels de votre hiérarchie de vues.

Comme le verre de la barre latérale semble flotter au-dessus de la fenêtre, il peut s’afficher par dessus le contenu de la division adjacente. Cela fonctionne très bien avec un contenu à défilement horizontal, les éléments d’une liste Slide Over qui révèlent une action par glissement latéral ou le contenu enrichi qui peut s’étendre dans la zone de la barre latérale.

Pour permettre à votre contenu fractionné de s’afficher sous la barre latérale, définissez la propriété automaticallyAdjustSafeAreaInsets sur true. Définissez cet élément pour le contenu que vous souhaitez étendre au-dessous de la barre latérale, et non dans la barre latérale. Lorsque cette propriété est définie sur true, NSSplitView étend le cadre de cet élément sous la barre latérale, puis applique un guide de disposition de zone sûre pour vous aider à positionner votre contenu dans la zone non masquée.

Le contenu riche, comme les illustrations, met vraiment en valeur le matériau du verre flottant dans la barre latérale, mais il est rarement souhaitable de couvrir du contenu pour obtenir cet effet. Cette affiche de l’App Store crée un effet saisissant lorsqu’elle est affichée d’un bord à l’autre, mais l’illustration ne comporte pas d’espace négatif supplémentaire pour placer la barre latérale.

Masquons la barre latérale pour comprendre ce qu’il se passe vraiment. Le contenu est reflété et flouté, ce qui prolonge l’affichage de l’illustration sans masquer son contenu.

AppKit dispose d’une nouvelle API qui produit cet effet.

Elle s’appelle NSBackgroundExtensionView. Cette vue utilise la zone sûre pour positionner votre contenu dans la partie non obscurcie, tout en étendant son apparence d’un bord à l’autre par un effet visuel. Pour l’utiliser, créez un NSBackgroundExtensionView et positionnez-le pour remplir tout le cadre de l’élément fractionné. Attribuez-lui un contentView, qu’il positionne dans la zone de sûre, en dehors de la barre latérale flottante. C’est tout ! La vue d’extension de l’arrière-plan crée automatiquement une réplique de la vue de contenu pour remplir l’espace en dehors de la zone sûre.

La barre latérale flottante et la barre d’outils illustrent un élément clé du nouveau design du système : sa concentricité. Chaque élément est conçu avec une courbure qui épouse parfaitement le rayon d’angle de son conteneur, en l’occurrence la fenêtre elle-même.

Et cette relation va dans les deux sens. Dans le nouveau design du système, les fenêtres ont désormais un rayon d’angle plus doux et plus généreux, qui varie selon le style de fenêtre. Les fenêtres avec des barres d’outils ont maintenant un plus grand rayon, qui s’enroule concentriquement autour des éléments de la barre d’outils et s’adapte à sa taille. Les fenêtres avec une barre de titre uniquement conservent un rayon d’angle plus petit, qui s’enroule autour des commandes de la fenêtre. Ces angles plus grands apportent une douceur et une concentricité élégante à la fenêtre, mais ils risquent aussi de couper le contenu situé près des bords. Pour placer du contenu dans un angle, utilisez la nouvelle API NSView.LayoutRegion. Une région de mise en page décrit une zone d’une vue, avec des fonctionnalités intégrées telles que l’évitement des angles. Vous pouvez insérer une région horizontalement ou verticalement en fonction de la taille de l’angle. Voyons ensemble cette API. Vous pouvez obtenir une région pour la zone sûre ou pour la zone avec des marges standard. La région comprend l’adaptation des angles, qui peut appliquer une marge horizontale ou verticale à la région.

Dans une région de mise en page, utilisez la méthode layoutGuide pour obtenir un guide permettant d’appliquer les contraintes Auto Layout. Vous pouvez également obtenir la géométrie brute de la région sous la forme d’une marge intérieure ou de son rectangle actuel.

Voici un exemple de la nouvelle API en action. Mon nouveau bouton de dossier dépasse de cet angle et je veux le cantonner dans une région pour éviter cela. Avec la méthode updateConstraints, j’obtiens un guide de mise en page pour la zone sûre, y compris l’adaptation horizontale aux angles. Ce guide est similaire à celui d’une zone sûre standard, mais il ajoute un décalage supplémentaire au bord de l’angle.

Ensuite, je crée quelques contraintes de mise en page pour lier la géométrie du bouton au guide de zone sûre.

Avec quelques lignes de code seulement, j’ai parfaitement aligné mon bouton dans l’angle.

Je vais vous présenter l’effet du bord du défilement. Le nouveau design assure la fluidité de votre contenu d’un bord à l’autre, avec des éléments Liquid Glass flottant au-dessus. Pour garantir une séparation entre le verre et le contenu, le système applique un effet visuel dans les zones où ces deux éléments se chevauchent. Cet effet se décline en deux variantes : un style de bord doux, qui estompe et floute progressivement le contenu, et un style de bord dur, avec un support plus opaque pour une meilleure séparation entre le contenu et les éléments flottants.

Pour le contenu qui défile, l’effet du bord du défilement est contenu dans une NSScrollView. La vue du défilement fait varier la taille et la forme de l’effet en fonction du contenu flottant au-dessus.

L’effet s’adapte automatiquement aux éléments flottants au-dessus. Cet effet est appliqué automatiquement sous la barre d’outils, les accessoires de la barre de titre et les accessoires d’éléments fractionnés. Les accessoires d’éléments fractionnés ressemblent aux accessoires de barre de titre, sauf qu’ils ne couvrent qu’une seule division dans un contrôleur de vues scindées, et ils peuvent être placés sur le bord supérieur ou inférieur de la division. Pour ajouter un accessoire à un élément de vue fractionné, créez un NSSplitViewItemAccessoryViewController et associez-le à l’élément de vue scindée à l’aide de addTopAligned ou addBottomAligned du contrôleur de vue accessoire. Les accessoires d’élément de vue fractionnée comme les accessoires de barre de titre sont le meilleur moyen d’incorporer du contenu flottant à l’effet du bord du défilement. Ils influencent la taille et la forme de l’effet et insèrent la zone sûre du contenu, ce qui simplifie la mise en page. Aucun système de design n’est complet sans mes commandes préférées. Les commandes font peau neuve dans macOS Tahoe.

Le nouveau design donne un air de famille plus marqué aux appareils, en unifiant l’apparence d’éléments tels que les boutons, les commutateurs et les curseurs dans macOS, iOS et iPadOS. Ces changements ont été judicieusement appliqués afin de conserver le caractère et les capacités propres aux commandes Mac.

Les commandes macOS sont disponibles dans différentes tailles standard, allant de Mini à Large. Ces tailles établissent différents niveaux de densité et de hiérarchie entre vos commandes. macOS Tahoe introduit la taille Extra large afin de souligner les actions les plus importantes.

Le format Extra large est idéal pour mettre en valeur les actions les plus importantes de votre application. Il s’agit des actions principales de votre app, comme mettre de la musique en file d’attente pour un lecteur multimédia ou passer un appel pour une app de communication.

En plus de la nouvelle taille, nous avons profité de l’occasion pour revoir la hauteur des commandes.

Par rapport aux versions précédentes de macOS, les commandes mini, petites et moyennes sont maintenant légèrement plus hautes, offrant un peu plus d’espace autour du libellé de commande et améliorant la taille de la cible de clic.

Pour vous adapter aux hauteurs de commandes variables, utilisez Auto Layout et évitez de coder en dur les hauteurs des commandes. Pour garantir la compatibilité avec les mises en page très denses, comme des inspecteurs complexes et des popovers, AppKit propose une API pour demander des tailles de commande correspondant aux versions précédentes de macOS. Utilisez la nouvelle propriété prefersCompactControlSizeMetrics dans NSView. Cette propriété est héritée de la hiérarchie des vues. Lorsqu’elle est définie sur true, les commandes AppKit retrouvent un dimensionnement compatible avec les versions précédentes de macOS. Le nouveau système de design introduit également de nouvelles formes de commandes. Les tailles Mini à Moyenne conservent une forme rectangulaire arrondie, ce qui permet une plus grande densité horizontale, tandis que les tailles Large et Extra-large s’arrondissent en forme de capsule pour utiliser cet espace supplémentaire.

Pour obtenir une concentricité dans vos designs personnalisés, vous pouvez remplacer la forme préférée d’une commande. Ici, j’ai créé une barre de légende personnalisée pour la vérification orthographique à l’aide de commandes de taille moyenne. Le conteneur de la barre a la forme d’une capsule, mais il ne s’ajuste pas bien avec les commandes rectangulaires arrondies à l’intérieur.

C’est un cas d’utilisation parfait pour la nouvelle propriété borderShaped. Cette API vous permet de remplacer la forme des boutons, des boutons contextuels et des commandes segmentées.

En optant pour la forme de capsule, les commandes s’intègrent parfaitement dans mon conteneur personnalisé.

En plus de la forme, vous pouvez personnaliser le matériau d’un bouton à l’aide du nouveau style de bordure en verre. Ce style de bordure remplace le support standard des boutons par le matériau Liquid Glass, idéal pour les boutons qui doivent flotter sur d’autres contenus. Le style de bordure en verre est compatible avec la propriété bezelColor existante, qui teinte le verre avec la couleur choisie.

Le nouveau design introduit également l’idée de proéminence des commandes dans AppKit. En faisant varier la proéminence d’un bouton, vous pouvez contrôler le niveau de poids visuel donné à sa teinte. Cela vous permet d’ajouter de la couleur à un bouton sans éclipser les commandes à plus forte prééminence dans la même interface, comme le bouton par défaut. Cette technique est utilisée pour les boutons destructeurs. La couleur rouge distinctive est un indice utile que l’action est destructrice, mais avec un niveau de proéminence qui n’écrase pas les commandes à proximité.

Le type de proéminence de teinte a quatre variantes : Automatique, qui indique que la commande doit choisir un niveau de proéminence approprié à son style et à sa configuration ; Aucun, qui correspond à une teinte minimale ou pas de teinte ; Secondaire, qui indique une application plus modérée de la teinte, et Principal, qui applique le niveau de teinte le plus important.

Pour appliquer une teinte de proéminence inférieure à un bouton, définissez la propriété tintProminence sur Secondaire. Par défaut, la couleur d’accentuation sera utilisée. Dans cet exemple, je traite le bouton de lecture différemment, car je veux qu’il se comporte comme le bouton par défaut. Je l’ai configuré comme équivalent à la touche de retour. Cela garantit que le bouton répond au clavier de manière prévisible et, comme il s’agit du bouton par défaut, le niveau de teinte le plus important lui sera automatiquement appliqué.

TintProminence dispose aussi d’une fonction avec les curseurs. L’API tintProminence vous permet de choisir si la piste est remplie avec la couleur d’accentuation. Un curseur défini sur Aucun n’aura pas de couleur de remplissage, contrairement à un curseur défini sur Secondaire ou Principal.

Le remplissage du curseur a une autre capacité dans macOS Tahoe. Il peut s’ancrer à n’importe quel endroit de la piste, et pas seulement à l’extrémité minimale. Utilisez la nouvelle propriété neutralValue pour définir une valeur qui sert d’ancrage au remplissage de la piste. Dans cet exemple de contrôle de vitesse de lecture, j’ai défini neutralValue sur 1x, de sorte que lorsque la vitesse est ralentie ou accélérée, le remplissage bleu souligne la différence entre la valeur sélectionnée et la valeur par défaut.

Le nouveau design apporte une mise à jour des menus avec une nouvelle apparence et une expansion significative de l’utilisation des icônes.

Les menus contextuels et de la barre des menus comportent maintenant des icônes pour les actions clés.

Dans chaque section d’un menu, les icônes forment une seule colonne facile à parcourir. L’ajout de symboles clairs et reconnaissables dans les menus aide les utilisateurs à y repérer rapidement les actions les plus importantes.

La vidéo « Get to know the new design system » fournit une tonne de conseils supplémentaires pour choisir des symboles pour les éléments de vos menus. Ne la manquez surtout pas ! Finissons par parler de l’intégration des éléments Liquid Glass dans votre app. Avant d’intégrer le matériau Liquid Glass dans les éléments d’UI personnalisés, vous devez saisir l’objectif visé par la création de ce nouveau matériau.

Les éléments Liquid Glass flottent à la surface de l’interface, élevant les commandes et la navigation en une couche fonctionnelle distincte.

Vous devez donc limiter votre utilisation du Liquid Glass Glass aux éléments les plus importants de votre app, c’est-à-dire les commandes du niveau supérieur de la hiérarchie. Les commandes d’édition en ligne de Freeform en sont un parfait exemple. Elles flottent au-dessus du contenu au lieu de rester à côté, et fonctionnent à merveille avec le matériau Liquid Glass.

Pour placer votre contenu sur du verre, utilisez l’API NSGlassEffectView. La définition d’une contentView permet à AppKit d’appliquer tous les traitements visuels nécessaires pour que votre contenu reste lisible à mesure que le verre s’adapte à son environnement. Évitez donc de placer le NSGlassEffectView derrière votre contenu en tant que vue sœur. Vous pouvez personnaliser l’apparence du verre à l’aide des propriétés de rayon d’angle et de teinte.

Je vais vous donner un exemple d’adoption de NSGlassEffectView pour un élément existant.

Cette app de fitness affiche les statistiques quotidiennes d’entraînement et une commande personnalisée pour choisir le type d’entraînement. Je les affiche à l’aide d’un NSStackView horizontal. C’est une partie importante de mon interface utilisateur. Je vais donc mettre les deux parties sur du verre.

Liquid Glass ne nécessite que quelques nouvelles lignes de code. Tout d’abord, créez un NSGlassEffectView pour chaque élément en verre que vous souhaitez afficher et définissez la propriété contentView de chacun sur la vue souhaitée.

Le GlassEffectView et le contentView sont synchronisés géométriquement par AutoLayout, ce qui vous évite de devoir les gérer.

Ensuite, placez les vues à effet verre dans la hiérarchie des vues. Dans cet exemple, j’ai mis à jour la vue de la pile pour permuter les nouveaux GlassEffectViews. Si vous avez plusieurs formes en verre sont proches, regroupez-les à l’aide de NSGlassEffectContainerView. La vue du conteneur à effet verre combine plusieurs éléments en verre en un seul effet de rendu. Cela présente quelques avantages.

Tout d’abord, les éléments en verre regroupés peuvent être joints et séparés de manière fluide avec un effet visuel liquide. Les formes en verre fusionnent en fonction de leur proximité et de la valeur de la propriété d’espacement, qui est disponible dans NSGlassEffectContainerView.

Deuxièmement, l’aspect adaptatif du verre est partagé entre les éléments regroupés, ce qui garantit qu’ils conservent un aspect uniforme à mesure que le contenu sous-jacent change.

Et le regroupement est important pour l’exactitude visuelle. Liquid Glass réfléchit et réfracte la lumière, prenant la couleur du contenu environnant.

Pour créer cet effet, le matériau en verre échantillonne le contenu d’une zone plus étendue.

Que se passe-t-il si cette région d’échantillonnage comprend un autre élément en verre ? Le verre ne pouvant pas échantillonner d’autres morceaux de verre, les résultats visuels ne seront pas cohérents.

L’utilisation d’un conteneur à effet verre permet à ces éléments de partager leur région d’échantillonnage. Non seulement cela permet d’obtenir un résultat visuel plus cohérent, mais cela améliore les performances de l’effet verre. Un seul échantillon est nécessaire pour l’ensemble du groupe.

Pour reprendre l’exemple précédent, ces deux effets verre font partie d’un groupe logique. Ils doivent donc être à l’intérieur d’un conteneur à effet verre. En configurer un est très simple. Dans cet exemple, je crée un NSGlassEffectContainerView et je définis la vue de la pile comme contentView. Le conteneur et sa vue de contenu sont également contraints ensemble à l’aide d’Auto Layout. Je peux donc remplacer proprement ce conteneur dans ma mise en page. Le matériau Liquid Glass est un outil puissant qui améliore les contrôles clés de votre app et permet à votre contenu de circuler librement d’un bord à l’autre. C’est un excellent moyen de mettre en avant les fonctionnalités qui rendent votre app unique. Alors, quelle est l’étape suivante ? Dans un premier temps, créez votre app avec Xcode 26. Une grande partie du nouveau design commencera à fonctionner directement. Étendez votre contenu d’un bord à l’autre si possible, pour profiter pleinement de la barre d’outils et de la barre latérale flottantes en verre.

Adaptez-vous aux nouvelles tailles de commandes en vérifiant que votre app ne comporte pas de hauteurs codées en dur ou de contraintes de mise en page rigides. Améliorez les actions des menus avec des icônes et identifiez les éléments clés de votre interface qui doivent flotter avec le matériau Liquid Glass. Merci de votre attention et merci de créer de superbes apps Mac.