Skip to content
tezvyn:
Menu

Spatial UI Design Systems

Source: developer.apple.comHardHow cards are made

Spatial UI Design Systems

Spatial UI design systems define how interfaces behave in 3D space on devices like Vision Pro: depth-based hierarchy, distance-aware scale, and gaze-and-pinch interaction, replacing the flat, pointer-driven rules of traditional 2D design systems.

Why it exists

Every prior design system, Material Design, Apple's own Human Interface Guidelines for iOS, assumed a flat rectangular screen viewed at a roughly fixed distance and driven by touch or a pointer. Spatial computing devices like Vision Pro place interface elements in a 3D room around the user, viewed through eye tracking and hand gestures at varying, user-controlled distances. None of the old rules for type size, contrast, or hit targets transfer directly, so spatial UI design systems exist to define a new, consistent set of rules for depth, scale, and gaze-driven interaction.

The mental model

Stop thinking of UI as pixels on a pane of glass and start thinking of it as physical objects placed in a room. A window is not simply 80 points wide, it occupies a real position and size in space, and how big it needs to look depends on how far away it is, the same way a street sign must be physically larger the farther it sits from the road. Depth, materials, and lighting matter the way they would for a real object, not just a flat image.

How it works

Content lives in windows, volumes, which are 3D bounded content, and free-floating ornaments like toolbars that hover just outside a window's edge in their own depth layer. Type and targets scale by visual angle rather than fixed point size, so an element two meters away needs a proportionally larger physical size than one half a meter away to stay equally legible. Glass materials blur and darken whatever passthrough background sits behind a window so text stays readable against an unpredictable real room. Gaze replaces cursor hover, and a pinch gesture replaces a click, which forces larger effective hit targets since eye tracking is less precise than a mouse.

When it matters

It matters directly for anyone building visionOS or mixed reality apps. The footgun is porting a flat 2D layout straight into 3D: a UI that ignores depth reads as an awkward flat billboard floating in space, and placing critical controls too close to the eyes causes vergence-accommodation conflict, a mismatch between where the eyes focus and where they converge that causes real discomfort over time.

A concrete example

Apple's visionOS guidelines place a default window about 1.5 meters from the user, with a horizontal grabber bar below the window's content that lets a person physically drag it closer, farther, or to the side, repositioning it in the room rather than resizing it on a flat screen.

Interview question

In spatial UI design for a device like Vision Pro, why do type size and hit targets scale by visual angle rather than a fixed point size?

  • a.Because visionOS does not support fixed point sizes for any UI element under any circumstance
  • b.Because legibility and precision depend on how large an element appears from the user's actual viewing distance, not its absolute physical sizeCorrect
  • c.Because Apple requires all spatial apps to use exactly the same window size regardless of content
  • d.Because eye tracking hardware can only detect elements that are rendered above a minimum absolute pixel size
Why?

An object's legibility depends on the visual angle it subtends, which changes with distance, so a fixed point size would look tiny far away and huge up close, while scaling by visual angle keeps things consistently legible. VisionOS does support fixed sizing in some contexts, the constraint is about visual angle not a hardware pixel minimum, and window sizes are not mandated to be identical.

Just read this? Test yourself on what you have been reading.

Read the original → developer.apple.com

Put your scrolling time to good use

Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.

The iPhone app is on the way

We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.

Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.

Get it on Google PlayiPhone app coming soon

We are hiring for this. Open roles that interview on ui — each one lists the topics its interview covers.

See open roles