Apple Vision Pro Spatial Design 101 — A Beginner’s Guide (Part 1)
Apple’s Spatial Design is a booming field, and learning from the basics is the right way to go for better understanding.
This is part 1 of an ongoing series, catch up on part 2, part 3, part 4, part 5 here.
Spatial Design refers to the design of user interfaces and experiences in a 3D spatial environment, offering a more immersive and intuitive way to interact with digital content.
Here are the first 12 important lexicons to remember:
1. Windows
- A window displays 2D or 3D content in a container.
- There can be single window or multiple windows, which can be resized to any scale.
2. Volumes
- A volume displays 3D content that people can view from any angle. For example, products from e-commerce website can be viewed in 3D to see how it looks in real life, before purchasing it.
- It doesn’t display frames around 3D objects (like the frames in windows).
3. Ornaments
- An ornament contains controls or information related to a window.
- It can be components like toolbars, tab bars, and video playback controls. For e.g., when a video plays in a Window, its controls such as Stop, Pause, Forward, etc., are displayed in an Ornament.
4. Toolbars
- VisionOS-provided toolbar is horizontal and appears along the bottom edge of a window, slightly in front of the window along the z-axis.
- Toolbars contain frequently used controls to perform actions on the current view.
5. Tab bars
- A tab bar is always vertical, floating in a window’s leading side.
- Tab bars are used to navigate between different sections in an app.
6. Side Bars
- A side bar extends from a window’s leading side when a tab within tab bar is selected. It is used to display additional navigation options.
- For example, in the image above, when the Library icon tab is selected in the Tab bar, the Side bar containing Library’s different navigation options opens up, extending from the window.
7. Menus and Popovers
- Menus and popovers can expand outside the window.
- When a button is selected, use black labels on a white background. This helps people have clear feedback of which button invoked the popover without the need of arrows.
- As a general rule on this platform, avoid using buttons with white backgrounds unless they are selected.
8. Sheets
- A sheet is a modal that floats in front of its parent window, requesting specific information from people or presenting a simple task that they can complete before returning to the parent view.
- For e.g., a Sheet asking user to subscribe to Music app.
9. Spaces
- Shared Space: This is the default space. Windows can exist side by side and people can reposition those wherever they like.
- Full Space: For a more immersive experience, user can transition an app to a Full Space, where other apps hide and only the selected app is visible. It can also open a portal to a different world, or fully immerse people in an environment.
10. Immersion Spectrum
- Window (can be in Shared Space as well as in Full Space)
- Panorama View (in Full Space)
- Environment (in Full Space)
An app can be dynamic and can fluidly transition between different states of immersion as this spectrum offers so much flexibility. An app can be within a window in the Shared Space alongside other apps. Or if it needs more room, it could run in a Full Space, where other apps are hidden. By default, start an app in a window in the Shared Space. This will give people control over how immersed they want to be.
In the example below, in Keynote, the app opens in a window. But when it’s time to play the slideshow, it transitions to Full Space, and dimming is used by default to bring focus to this presentation.
Dimming is a simple way to create contrast between content and people’s surroundings without taking them out of their space.
When it’s time to rehearse the presentation, a big stage environment can be formed in the surroundings fully immersing people within the theater. Life-size experiences like these require more room, so Keynote is now in a Full Space and other apps are hidden.
Another example shown below is Photos library - browsing through photos is made familiar, and when a photo is selected, it grows big in space and dims surroundings. Seeing such great memories at a lifelike scale is truly magical. And when it’s time to view a panorama, it makes people feel like they are really there. Panoramas transport users in a way that’s only possible with infinite space.
11. Passthrough
- Passthrough enables people (while wearing Apple Vision Pro) to see their physical surroundings, through the real-time video from the device’s external cameras.
- Turning Digital Crown adjusts the amount of Passthrough, to change how much of their surroundings they can see, to control immersive experience.
- Increasing Passthrough will enable more of their real surroundings to be visible, while decreasing Passthrough will decrease the amount of real surroundings to be visible, and can also bring up a fully immersive experience using an Environment.
12. Transitions & Subtle Animations
- Design smooth, predictable transitions to create continuity between different states of experience.
- Blend thoughtfully with reality — when blending entire scenes into someone’s space, make sure to use soft edges to smoothly integrate the app. This avoids abrupt transitions and keeps people focused on the content.
- The most inspiring experiences make things feel alive. Subtle animation can bring liveliness to a scene.
There is so much more to explore. In my next article here, we learn how eyes and hands can be amazingly used as spatial inputs in Apple’s Spatial Design.
Credits: Apple
Let’s work together on an interesting project. Ping me at hello@luxanza.com.
Get the Best Seller Professional Resume that has helped dozens land great jobs, now available here.
