针对 visionOS 设计小组件

Hi and welcome to Designing Widgets for visionOS. I’m Jonathan, and a bit later, my colleague Moritz will join me to share more on widgets as well. Widgets have always been about glanceable, timely information, helping people to stay connected to what matters, without the need to open an app. From checking the forecast, to viewing your next calendar event, or tracking a goal's progress, widgets make useful content easy to access. In this session, we’ll show you how these ideas extend to visionOS, and how you can design widgets that feel at home in people’s spaces, by taking advantage of the platform’s spatial and visual capabilities.

On visionOS, widgets take a new form. They become three-dimensional objects that feel right at home in your surroundings. Whether placed on a wall, desk, or shelf, they keep information from your app ambient, and close by.

Moritz and I will take you through the design system that brings them to life. We’ll look at the principles that guide their behavior in space, and share practical tips on working with the new materials, styles, and sizes. So your widgets don’t only look great, but truly belong in places people live, work, and unwind. If your iPad app already includes widgets, you are already off to a great start. By simply enabling compatibility mode, your existing widgets can carry over to visionOS, where they will automatically adapt a new spatial and visual treatment. This treatment gives your designs new depth and dimension, and also unlocks the ability for people to easily place them in their surroundings.

You can also build native widgets designed specifically for visionOS. These give you access to platform-specific sizes, and enhanced visual styling that help your widget feel more integrated with the space around it. The Music Poster widget is a great example, designed to feel like a poster in a room, not just an interface on a screen. To help guide your design, let’s take a closer look at the four core principles behind widgets on Vision Pro. The first principle is persistence, a defining aspect of widgets on visionOS.

When someone places a widget in their space, it stays right where they put it. It remains anchored to that location and purses across sessions, even when they move from room to room or the devices turned off and then back on.

Building on that, the next principle is fixed size. Widgets have a consistent, real-world scale, helping them to feel well-proportioned wherever they are placed. The Music Poster widget is using the extra-large template size, giving it a familiar, printed art frame-like dimension. In addition to being persistent and fixed in size, widgets on visionOS are highly customizable, both for your apps and the people using them.

People can personalize how your widgets look in their space, while you can offer styling options that help your widget feel at home in a wide range of spaces.

And finally, there is proximity awareness. Widgets on visionOS adapt their appearance and layout based on how close someone is, always showing the right level of detail, whether viewed from across the room or up close. We will go through each one step by step, starting with persistence, and how it shapes the way widgets behave in people’s spaces. Once a widget is placed in a room, it remains there permanently. This opens up exciting opportunities to design context-aware, persistent experiences that live right alongside people in their environments.

Before we dive into the details, it’s helpful to understand how people access widgets on visionOS. They can find and place your widgets through the Widgets app on the home grid, making it easy to discover and add them to any space. When someone adds a widget from the Widgets app, it first appears in a detached state, floating next to the library window. To anchor it in a space, the widget has to be placed on a horizontal or vertical surface. This locks it into its persistent position. When placed on a horizontal surface, like a desk, table, or shelf, the widget gently tilts towards the person placing it. This subtle angle helps legibility. It also casts a shadow that makes it feel grounded in space.

When placed on a wall, widgets align flush with the surface and cast a realistic shadow much like a picture frame. Widgets on visionOS are always presented within a frame, that connects the digital content to the surrounding environment.

When thinking about what kinds of widgets to bring to visionOS, or designing one from scratch, it helps to consider them as part of the room they are in.

So always design with context in mind. They are not floating in isolation, they will live in people’s kitchens, living rooms, offices, and more. The environment shapes how widget is seen and used, considering that early on will lead to better experiences.

Take the Weather widget as an example. On visionOS, Weather adopts a large, window-like format. The design prioritizes a clear depiction of the current conditions, aiming to create an illusion of looking out of a window. The text size is designed to be glanceable from across the room, ensuring legibility when wall-mounted. The shift in scale and visual presence is a great example of how widgets can adapt to and enhance the spaces they live in. So once your widget is placed, it stays, but people can place more than one. visionOS supports multi-instance widgets, meaning multiple copies of the same widget can exist in a single space. When arranged on a wall, they neatly snap into a familiar grid layout. Following the cross-platform design guidelines ensures your widget fits seamlessly alongside other widgets in a grid.

For more general guidance on designing widgets, check out the “Design great widgets” session from our colleague Mac.

As widgets live in your real world while using Vision, they behave that way too. Widgets are displayed behind all virtual content, which reinforces their connection to the space around you. Just keep in mind, they only snap to physical surfaces, they won’t attach or persist in virtual environments. Now that we have covered how widgets persist in space, let’s talk about how they scale within it. The second principle is fixed size. When digital content lives alongside real objects, it needs to feel appropriately sized. That’s why widgets on visionOS have defined, consistent dimensions, so they look right at home, whether they are placed on a wall, a desk, or a shelf.

Just like on other platforms, visionOS offers multiple widget templates to choose from. But here, those sizes map to real-world dimensions. That means the sizes you select have a physical presence in someone’s space. So be intentional. Think about where your widget might live -- mounted on a wall or sitting next to a workspace -- and choose the size that feels right for that context. Because widgets share space with real objects, layout matters more than ever. Design with print or wayfinding principles in mind, use clear hierarchy, strong typography, and thoughtful scale to make sure your content stays clear from a range of distances. Here is an example of how size can support context. If you are designing a productivity-focused widget, you might want to offer it in a small template size so it fits easily on a desk. That works especially well for something like the to-do list. It can sit next to the Mac Virtual Display and stay glanceable while someone gets work done. On the other hand, if your goal is to let people decorate their space while using Vision Pro with something visually rich, like an artwork or photography, consider using the extra large template size. It turns your widget into a statement piece, something that feels more like a wall art than an interface.

So far, we have looked at how choosing the right template size can help your widget feel home in different contexts. But sizing isn’t completely fixed. People can also adjust it themselves.

Each template size can be resized using the corner affordance, scaling from 75% to 125% while still preserving your layout. As people can resize your widgets, and view them from up close, make sure you always work with high resolution assets. And with that, I will hand it over to my colleague Moritz, who will take you through how to make your widgets truly personal, expressive, and adaptable to different environments.

Hi, I’m Moritz. I'm excited to show you how widgets on visionOS can be personalized, both by the people and through the options you as a developer choose to offer. These choices allow people to personalize the widget in a way that feels natural to them and fits their environment.

Let’s take a closer look at how it all comes together. When designing your widget, you can define its overall appearance by choosing between two stylistic treatments: Paper, a more grounded print-like style that feels solid and part of the environment, and Glass, a lighter, layered look that adds depth and visual separation between foreground and background.

Each creates a distinct presence in space, and choosing the right one helps reinforce the experience you want to create. Let’s start with Paper. If you’re aiming for a print-like look that feels more like a real object in the room, Paper is the right choice.

This treatment makes the entire widget respond to the ambient lighting, helping it blend naturally into its surroundings.

For example, the Music Poster widget uses the Paper style to display albums and playlists like framed artwork on a wall.

Visually, the Paper style is made up of a couple of main components.

A frame, which is provided by the system, your content, which you design and control, and a subtle reflective coating that brings it all together and helps it react to the surrounding light. While Paper focuses on blending into the space, Glass takes a different approach -- one that emphasizes clarity and contrast, especially for information-rich widgets.

The foreground elements are always shown in full color, unaffected by the ambient lighting, keeping key content sharp and legible throughout the day.

Glass also introduces visual separation between foreground and background, so you can decide which parts of your interface respond to the environment and which will remain consistent.

In this News widget, for example, editorial images sit in the background with a soft, print-like feel, while headlines stay in the foreground, always clear and easy to read.

The Glass style is composed of several layers that work together to create depth, clarity, and presence in space.

The frame, provided by the system, anchors the widget to its surface.

The background or backplate sits behind your content and can be fully defined by you.

The UI Duplicate Layer adds subtle depth. It’s a darker, shadow-like version of your interface that sits just behind the main content.

The UI Layer is where key content like text, glyphs, and graphs live -- elements that need to remain bright, crisp, and highly legible.

And finally, the Coating Layer adds a soft, reflective finish that helps the widget respond to the lighting in the room.

Together, these layers form the visual structure of the Glass style, offering clarity, dimensionality, and flexibility.

Now that we’ve seen how the visual structure of a widget comes together, let’s look at how people can personalize its appearance even further, starting with color.

visionOS includes a rich set of system-provided palettes designed to work across a variety of environments -- seven light options, and seven dark options -- giving people flexibility to match their style while helping your widget look great in any space. When designing your widget, it’s important to test your content across the full range of system color palettes.

Widgets always start out untinted, showing the full color of your design.

Once placed, people can personalize them by choosing a color through the configuration UI.

You can choose whether the background of your widget participates in tinting. If you opted out, for example to preserve a photo or illustration, make sure it still looks good alongside the selected color palette.

And keep in mind: the widget’s frame always receives tinting and can't be excluded. Color and style help your widget fit into a space. But materials also shape how it feels as lighting changes throughout the day.

Paper dims with the room to stay visually integrated, while Glass keeps foreground elements bright and legible, even in low light.

Just like materials help widgets feel natural in different lighting conditions, mounting styles shape how they relate to the space around them.

The way a widget sits on a wall plays a big role in how it’s perceived, whether it feels like an object on display or a view into something beyond. visionOS offers two mounting styles people can choose from: Elevated and Recessed, which is inset into the wall.

Recessed creates the illusion of a cutout in the wall, with the content set back into space. It's ideal for immersive or ambient content, like weather or editorial visuals, where added depth enhances the experience.

Elevated places the widget on the surface of the wall, similar to how a picture frame is mounted. Perfect for content that should stand out and feel present, like reminders, media, or glanceable data.

By default, widgets use the Elevated style, and for good reason. It works well across both vertical and horizontal surfaces, making it a versatile choice for most widget types.

In fact, when a widget is placed on a horizontal surface, like a desk or table, it will always use the Elevated style to maintain a consistent, familiar presentation.

The Recessed style creates a unique sense of depth, like in the Weather widget, where it feels like a window into another place.

It’s only available on vertical surfaces, since the effect relies on alignment that wouldn’t work on a table or desk.

You can opt out of Recessed, or make it exclusive. Just note that doing so removes horizontal placement.

Another way people can personalize the look of a widget is by adjusting the frame width.

There are five options to choose from, independent of the template size, ranging from thin to thick.

Be sure to test your layout across all widths to ensure it stays balanced. And keep in mind, when using the Recessed style, frame width is fixed and not customizable.

Frame width, mounting style, tinting -- all of these come together in the customization UI, where people personalize your widget to match their space and style.

The system handles standard options, but you can also extend this UI with custom settings tailored to your design.

For example, the Music Poster widget lets people choose between light and dark themes generated from the album art, or an automatic option that adjusts the tone based on the time of day.

You can expose parameters like these to offer meaningful, content-specific customization, making your widget feel more expressive and adaptive.

So far, we’ve looked at how widgets can be customized, styled, and placed to feel at home in any space. But there’s one more feature that makes widgets on visionOS truly stand out, and that’s proximity awareness. This gives your widget a powerful signal: how close someone is.

With that, you can adapt the information density in real time making sure your widget is always readable, relevant, and appropriately detailed, whether someone is viewing it from across the room or up close.

visionOS provides two key thresholds you can design for.

Default, when the widget is viewed up close, and Simplified, when it’s seen from a distance.

Supporting both states doesn’t require a full redesign, just thoughtful layout adjustments, like scaling back detail or changing type size, to keep content glanceable and effective at any range.

For example, in the Sports widget, only the most essential details are shown when viewed from afar.

As someone steps closer, more detailed information of the current game is revealed.

To create a smooth and consistent experience, try to maintain shared elements across both distance thresholds whenever possible.

This helps the layout feel continuous, while still rendering each element at a size that’s appropriate and legible at any distance. Adapting layout is one part of the story, but proximity can also influence how people interact with your widget.

Widgets support lightweight, glanceable interactions. For example, you can add a button to reveal more details of a live baseball game.

Use proximity awareness to your advantage so that the interactive areas of your widget are always easy to target, whether someone is standing close or further away.

If your widget doesn’t include interaction, a tap will simply launch your app nearby as a shortcut.

So how should you approach proximity awareness? Not every widget needs it, but adapting to distance can really improve clarity.

Think of it like responsive design, but instead of screen size, it’s the angular size that changes as someone moves closer or farther away. The layout adjusts to show the right level of detail.

Now we've seen how widgets on visionOS can live in people’s spaces, respond to their environment, and even adapt to how close someone is.

From layout and materials to interaction and customization, there’s a lot of opportunity to create something that feels both useful and deeply personal.

Let’s wrap up with a few key things to keep in mind as you get started.

Think about how your own content could live in this new context.

If your app already includes widgets, consider how they might take on new meaning when placed in someone's environment. And if you’re building a native visionOS experience, think about what kinds of glanceable, persistent content could provide real value throughout the day.

To learn more about the technical details and on how to bring widgets into your app, check out “What’s new in WidgetKit.” visionOS now opens the door to a whole new dimension for widgets. And we’re excited to see what you will build! Thanks for watching. The rest is just spacing, taste, and knowing when to stop. Vielen Dank!