Concevez des widgets pour visionOS

Bonjour et bienvenue dans la section Conception de widgets pour visionOS. Je suis Jonathan, et un peu plus tard, Moritz me rejoindra pour vous en dire plus sur les widgets. Les widgets permettent d’accéder rapidement à des informations faciles à voir, pour rester connecté à l’essentiel sans ouvrir d’app. Des prévisions météo au prochain évènement de votre calendrier ou le suivi d’un objectif, les widgets facilitent l’accès à des contenus utiles. Nous vous montrerons comment ces idées s’étendent à visionOS et comment vous pouvez concevoir des widgets parfaitement intégrés à l’espace, en tirant parti des capacités spatiales et visuelles de la plate-forme. Sur visionOS, les widgets prennent une nouvelle forme. Ils deviennent des objets tridimensionnels qui s’intègrent dans votre environnement. Qu’ils soient placés sur un mur, un bureau ou une étagère, ils conservent les infos de votre app à portée de main.

Moritz et moi-même allons vous présenter le système de conception qui leur donne vie. Nous examinerons les principes qui guident leur comportement dans l’espace et partagerons des conseils pour travailler avec les nouveaux matériaux, styles et tailles. Pour que vos widgets ne soient pas seulement esthétiques, mais qu’ils aient leur place dans les lieux de vie, de travail et de détente. Si votre app iPad propose déjà des widgets, vous êtes sur la bonne voie. En activant le mode de compatibilité, vos widgets existants peuvent être transférés vers visionOS, où ils adopteront automatiquement un nouveau traitement spatial et visuel. Ce traitement confère à vos designs une profondeur et une dimension nouvelles, et permet également aux personnes de les placer facilement dans leur environnement.

Vous pouvez également créer des widgets natifs conçus pour visionOS. Ceux-ci vous donnent accès à des tailles spécifiques à la plate-forme et à un style visuel amélioré qui aident votre widget à mieux s’intégrer à l’espace qui l’entoure. Le widget Music Poster en est un excellent exemple. Il est conçu pour ressembler à une affiche dans une pièce, et pas seulement à une interface sur un écran. Pour vous aider dans votre design, examinons les quatre principes fondamentaux des widgets sur Vision Pro. Le premier principe est la persistance, un aspect déterminant des widgets sur visionOS. Lorsque quelqu’un place un widget dans son espace, ce dernier reste à l’endroit où il a été placé. Il reste ancré à cet endroit et se répercute d’une séance à l’autre, même en passant d’une pièce à une autre ou en éteignant, puis en rallumant les appareils.

Sur cette base, le principe suivant est celui de la taille fixe. Les widgets ont une échelle cohérente et réaliste, ce qui leur permet d’être bien proportionnés quel que soit l’endroit où ils sont placés. Le widget Music Poster utilise la taille extra-large du modèle, ce qui lui confère une dimension familière, semblable à celle d’un cadre d’art imprimé. En plus d’être persistants et de taille fixe, les widgets sur visionOS sont extrêmement personnalisables, tant pour vos apps que pour leurs utilisateurs. L’aspect de vos widgets dans leur espace est personnalisable, tandis que vous pouvez proposer des options de style qui permettent à votre widget de s’intégrer dans un large éventail d’espaces.

À cela s’ajoute la prise en compte de la proximité. Les widgets sur visionOS adaptent leur apparence et leur disposition selon la proximité d’une personne, en affichant toujours le bon niveau de détail, qu’ils soient vus de l’autre côté de la pièce ou de près. Nous allons examiner chacun, en commençant par la persistance et la façon dont elle influe sur le comportement des widgets dans les espaces publics. Une fois qu’un widget est placé dans une pièce, il y reste en permanence. Cela ouvre des perspectives pour concevoir des expériences contextuelles et persistantes qui accompagnent les personnes dans leur environnement. Avant d’entrer dans les détails, il est utile de comprendre comment accéder aux widgets sur visionOS. Les personnes peuvent trouver et placer vos widgets via l’app Widgets sur la grille d’accueil, ce qui facilite leur découverte et leur ajout dans n’importe quel espace. Lorsque quelqu’un ajoute un widget depuis l’app Widgets, ce dernier apparaît sous une forme détachée, flottant près de la fenêtre de la bibliothèque. Pour ancrer le widget dans un espace, il doit être placé sur une surface horizontale ou verticale. Il est ainsi verrouillé dans sa position persistante. Placé sur une surface horizontale, comme un bureau, une table ou une étagère, le widget s’incline légèrement vers la personne qui le place. Cet angle subtil favorise la lisibilité. Il projette une ombre donnant l’impression qu’il est ancré dans l’espace.

Sur un mur, les widgets s’alignent au ras de la surface et projettent une ombre réaliste, un peu comme un cadre photo. Les widgets sur visionOS sont toujours présentés dans un cadre qui relie le contenu numérique à l’environnement.

Lorsque vous réfléchissez aux types de widgets pour visionOS, ou que vous en créez un à partir de zéro, considérez-les comme faisant partie de la pièce où ils sont.

Avant de concevoir, gardez le contexte à l’esprit. Ils ne flottent pas de manière isolée, mais seront dans les cuisines, les salons, les bureaux et plus encore. L’environnement influe sur la façon dont les widgets sont utilisés. Tenez-en compte dès le début pour améliorer l’expérience.

Prenons l’exemple du widget Météo. Sur visionOS, ce widget a un grand format, semblable à une fenêtre. Le design privilégie une représentation claire des conditions actuelles, afin de créer l’illusion de regarder par une fenêtre. La taille du texte est conçue pour être visible d’un bout à l’autre de la pièce, afin d’être lisible une fois au mur. Les modifications de l’échelle et de la présence visuelle montrent comment les widgets peuvent s’adapter à leurs espaces et les améliorer. Une fois votre widget en place, il y reste, mais les gens peuvent en ajouter plusieurs. visionOS prend en charge les widgets à plusieurs instances. Plusieurs copies peuvent co-exister dans un même espace. Disposés sur un mur, ils s’intègrent parfaitement dans une grille familière. Le respect des directives de design multiplateforme garantit l’intégration parfaite de votre widget aux autres widgets d’une grille.

Pour des conseils sur le design des widgets, consultez « Design great widgets » de notre collègue Mac.

Comme les widgets habitent votre monde réel lorsque vous utilisez Vision, ils se comportent en conséquence. Les widgets sont affichés derrière le contenu virtuel, ce qui renforce leur connexion à l’espace qui vous entoure. Gardez à l’esprit qu’ils ne s’accrochent qu’aux surfaces physiques et ne se maintiendront pas dans les environnements virtuels. Après avoir vu la persistance des widgets dans l’espace, voyons comment ils se redimensionnent. Le deuxième principe est celui de la taille fixe. Lorsque le contenu numérique cohabite avec des objets réels, il doit être d’une taille appropriée. C’est pourquoi les widgets sur visionOS ont des dimensions définies et cohérentes, afin de bien s’intégrer, tant sur un mur, un bureau qu’une étagère.

Comme sur les autres plates-formes, visionOS propose plusieurs modèles de widgets. Ici, ces tailles correspondent à des dimensions réelles. Les tailles sélectionnées ont une présence physique dans un espace. Soyez donc attentif. Pensez à l’emplacement de votre widget, qu’il soit fixé au mur ou posé à côté d’un espace de travail, et choisissez la taille adaptée à ce contexte. Les widgets partageant l’espace avec des objets réels, leur mise en forme est primordiale. Concevez en gardant à l’esprit les principes d’impression ou d’orientation, utilisez une hiérarchie claire, une typographie forte et une échelle adéquate pour que le contenu reste clair à différentes distances. Voici un exemple de la façon dont la taille peut accompagner le contexte. Pour concevoir un widget axé sur la productivité, vous voudrez peut-être un petit format pour qu’il tienne facilement sur un bureau. Cela convient très bien pour une liste de choses à faire par exemple. Il peut être placé à côté de l’écran virtuel du Mac et rester visible pendant que quelqu’un travaille. Si vous voulez permettre aux gens de décorer leur espace tout en utilisant Vision Pro avec quelque chose de visuellement riche, comme une œuvre ou une photo, envisagez un modèle extra large. Cela transforme votre widget en une pièce maîtresse, plus proche d’une œuvre d’art murale que d’une interface. Nous avons vu comment le choix de la bonne taille de modèle peut aider votre widget à s’intégrer dans différents contextes. Mais la taille n’est pas complètement fixe. Les personnes peuvent également l’ajuster. Chaque taille de modèle se redimensionne à l’aide de l’affordance des coins (de 75 à 125 %), tout en préservant la mise en forme. Comme les personnes peuvent redimensionner vos widgets et les voir de près, travaillez toujours avec des ressources de haute résolution. Je cède la parole à mon collègue Moritz, qui vous expliquera comment rendre vos widgets vraiment personnels, expressifs et adaptables à différents environnements. Bonjour, moi c’est Moritz. Je vais vous montrer comment les widgets sur visionOS peuvent être personnalisés, par les personnes, mais aussi par les options choisies en tant que développeur. Ces choix permettent de personnaliser le widget d’une manière qui semble naturelle et correspond à l’environnement.

Regardons de plus près comment tout cela s’articule. Pour concevoir votre widget, vous pouvez définir son apparence générale en choisissant entre deux traitements stylistiques : Paper, un style imprimé qui semble plus ancré et intégré à l’environnement, et Glass, un style plus léger et en couches qui ajoute de la profondeur et une séparation visuelle entre l’avant et l’arrière-plan. Chacun crée une présence distincte dans l’espace, et choisir le bon contribue à renforcer l’expérience que vous souhaitez créer. Commençons par Paper. Si vous recherchez un aspect imprimé qui ressemble davantage à un objet réel de la pièce, Paper est le bon choix. Ce traitement permet à l’ensemble du widget de réagir à l’éclairage ambiant, afin de se fondre naturellement dans son environnement.

Ainsi, le widget Music Poster utilise le style Paper pour afficher des albums et des listes de lecture, comme une œuvre d’art encadrée sur un mur.

Visuellement, le style Paper se compose de plusieurs éléments principaux.

Un cadre, fourni par le système, votre contenu, que vous concevez et contrôlez, et un revêtement réfléchissant subtil qui rassemble le tout et l’aide à réagir à la lumière environnante. Alors que Paper s’efforce de se fondre dans l’espace, Glass adopte une approche différente, qui met l’accent sur la clarté et le contraste, en particulier pour les widgets riches en informations.

Les éléments de premier plan sont toujours affichés en couleur, indépendamment de l’éclairage ambiant, pour que le contenu clé reste net et lisible tout au long de la journée.

Glass introduit également une séparation visuelle entre l’avant et l’arrière-plan, ce qui permet de décider quelles parties de votre interface réagissent à l’environnement et lesquelles ne changent pas.

Dans ce widget News, les images éditoriales se trouvent à l’arrière-plan comme un doux imprimé, tandis que les titres restent au premier plan, toujours clairs et faciles à lire.

Le style Glass se compose de plusieurs couches associées pour créer de la profondeur, de la clarté et de la présence dans l’espace.

Le cadre, fourni par le système, ancre le widget à sa surface. L’arrière-plan ou la plaque arrière se trouve derrière votre contenu et peut être entièrement défini par vous.

Le calque de duplication de l’interface utilisateur ajoute une profondeur subtile. Il s’agit d’une version plus sombre, semblable à une ombre, de votre interface qui se trouve juste derrière le contenu principal.

La couche de la UI est l’endroit abritant des contenus clés tels que le texte, les glyphes et les graphiques. Autant d’éléments qui doivent rester clairs, nets et parfaitement lisibles.

Enfin, la couche de revêtement ajoute une finition douce et réfléchissante qui aide le widget à réagir à l’éclairage de la pièce. Ensemble, ces couches forment la structure visuelle du style Glass, offrant clarté, dimensionnalité et flexibilité.

Maintenant que nous avons vu comment la structure visuelle d’un widget se met en place, voyons comment personnaliser encore plus son apparence, en commençant par la couleur. visionOS comprend un riche ensemble de palettes fournies par le système et adaptées à divers environnements, sept options claires et sept autres sombres, qui permettent à chacun de trouver son style, tout en améliorant l’esthétique de son widget dans n’importe quel espace. Lors de la conception de votre widget, il est important de tester votre contenu sur l’ensemble des palettes de couleurs du système.

Les widgets commencent toujours par être non teintés. Ils montrent toute la couleur de votre design.

Une fois placés, les utilisateurs peuvent les personnaliser avec une couleur dans la UI de configuration.

Vous pouvez choisir si l’arrière-plan de votre widget participe à la teinte. Dans le cas contraire, notamment pour préserver une photo ou une illustration, assurez-vous que le résultat reste harmonieux avec la palette de couleurs sélectionnée. Et n’oubliez pas : le cadre du widget est toujours teinté et ne peut être exclu. La couleur et le style aident votre widget à s’intégrer dans un espace. Les matériaux modifient également la sensation ressentie selon les changements de luminosité au fil de la journée.

Paper s’assombrit avec la pièce pour rester visuellement intégré, tandis que Glass garde les éléments de premier plan lumineux et lisibles, même en cas de faible luminosité. Comme les matériaux confèrent aux widgets un aspect naturel sous différents éclairages, les styles de montage déterminent leur intégration à l’espace environnant.

Le positionnement d’un widget sur un mur joue un rôle important dans la façon dont il est perçu, comme un objet exposé ou une vue sur quelque chose d’autre. visionOS propose deux styles de montage au choix : Surélevé et Encastré, qui s’insère dans le mur.

Encastré crée l’illusion d’une découpe dans le mur, avec le contenu situé en retrait dans l’espace. Idéal pour les contenus immersifs ou d’ambiance, comme la météo ou les visuels éditoriaux, où une profondeur supplémentaire améliore l’expérience.

Surélevé place le widget sur la surface du mur, de la même manière qu’un cadre photo. Parfait pour les contenus qui doivent se démarquer et être présents, comme les rappels, les contenus multimédias ou les données visibles d’un coup d’œil.

Par défaut, les widgets utilisent le style Surélevé, et pour cause. Il fonctionne bien sur les surfaces verticales et horizontales, ce qui en fait un choix polyvalent pour la plupart des types de widgets.

En fait, lorsqu’un widget est placé sur une surface horizontale, comme un bureau ou une table, il utilisera toujours le style Surélevé pour conserver une présentation cohérente et familière.

Le style Encastré crée une sensation unique de profondeur, comme dans le widget Météo, où l’on a l’impression d’ouvrir une fenêtre sur un autre lieu. Il n’est disponible que sur des surfaces verticales, car l’effet repose sur un alignement qui ne fonctionnerait pas sur une table ou un bureau. Vous pouvez désactiver Encastré, ou le rendre exclusif. Sachez simplement que cela supprime le placement horizontal. Une autre façon de personnaliser l’apparence d’un widget consiste à ajuster la largeur du cadre.

Vous avez le choix entre cinq options, indépendamment de la taille du modèle, allant de fin à épais.

Veillez à tester votre mise en forme sur toutes les largeurs afin de vous assurer qu’elle reste équilibrée. Gardez à l’esprit que lorsque vous utilisez le style Encastré, la largeur du cadre est fixe et non personnalisable.

La largeur du cadre, le style de montage, la teinte, tout cela est réuni dans la UI de personnalisation, où les utilisateurs personnalisent votre widget selon leur espace et leur style.

Le système gère les options standard, mais vous pouvez aussi étendre cette interface utilisateur avec des paramètres personnalisés selon votre design.

Par exemple, le widget Music Poster permet de choisir entre des thèmes clairs et sombres générés à partir de la pochette de l’album, ou une option automatique qui ajuste le ton en fonction de l’heure de la journée.

Vous pouvez afficher de tels paramètres pour offrir une personnalisation significative et spécifique au contenu, rendant votre widget plus expressif et adaptable. Nous avons vu comment les widgets peuvent être personnalisés, stylisés et placés pour convenir à tout type d’espace. Une autre fonctionnalité permet aux widgets sur visionOS de se démarquer vraiment, c’est la prise en compte de la proximité. Cela confère à votre widget un impact puissant : le degré de proximité d’une personne. Vous pouvez ainsi adapter la densité des informations en temps réel pour vous assurer que votre widget est toujours lisible, pertinent et suffisamment détaillé, que quelqu’un le regarde de près ou de l’autre côté de la pièce.

visionOS fournit deux seuils clés pour les besoins de votre design.

Default, lorsque le widget est vu de près, et Simplified, lorsqu’il est vu de loin. Utiliser ces états n’exige pas une refonte complète, mais seulement des ajustements de la mise en forme, comme une réduction des détails ou une modification de la taille de police, pour un contenu visible et efficace quelle que soit la distance.

Par exemple, dans le widget Sports, seuls les détails les plus importants sont affichés lorsque l’on s’éloigne.

Lorsque l’on se rapproche, des informations plus détaillées sur le match en cours sont révélées.

Pour créer une expérience fluide et cohérente, essayez de conserver des éléments communs aux deux seuils de distance.

Cela procure une sensation de continuité à la mise en forme, tout en conférant une taille appropriée et lisible à chaque élément, quelle que soit la distance. La mise en forme est une partie de l’histoire, mais la proximité peut également influer sur les interactions des personnes avec votre widget.

Les widgets permettent des interactions légères et facilement visibles. Ainsi, vous pouvez ajouter un bouton pour afficher plus de détails sur un match de baseball en direct.

Utilisez la prise en compte de la proximité à votre avantage, afin que les zones interactives de votre widget soient toujours faciles à cibler, quelle que soit la proximité d’une personne. Si votre widget n’inclut pas d’interaction, un tapotement lancera simplement votre app à proximité en tant que raccourci.

Comment aborder la prise en compte de la proximité ? Tous les widgets n’en ont pas besoin, mais l’adaptation à la distance peut vraiment améliorer la clarté.

Pensez-y comme à un design réactif, mais au lieu de la taille de l’écran, c’est la taille angulaire qui change à mesure que quelqu’un se rapproche ou s’éloigne. La mise en forme s’ajuste pour afficher le bon niveau de détail.

Nous avons maintenant vu comment les widgets sur visionOS peuvent s’adapter à l’espace des personnes, à leur environnement et même à leur degré de proximité.

De la mise en forme aux matériaux, en passant par l’interaction et la personnalisation, il existe de nombreuses façons de créer quelque chose d’utile et de très personnel.

Concluons par quelques points essentiels à garder à l’esprit.

Réfléchissez à la manière d’intégrer votre contenu dans ce nouveau contexte. Si votre app comprend déjà des widgets, réfléchissez à la façon de leur donner un nouveau sens une fois placés dans un environnement. Et si vous créez une expérience visionOS native, réfléchissez aux types de contenus persistants et faciles à voir qui pourraient apporter une réelle valeur ajoutée tout au long de la journée.

Pour plus de détails techniques et la façon d’intégrer des widgets à votre app, consultez « What’s new in WidgetKit ». visionOS ouvre désormais la porte à une foule de nouveautés pour les widgets. Nous avons hâte de découvrir ce que vous allez développer ! Merci de votre attention ! Le reste n’est qu’une question d’espacement, de goût et de savoir s’arrêter. Vielen Dank !