Understanding real-world sizes for visionOS

Understanding real-world sizes for visionOS

Learn how to convert meters and inches to points when designing for visionOS.

The design philosophy behind visionOS transcends traditional principles tied to screen dimensions. Unlike other Apple platforms, designing spatial experiences for visionOS involves a novel approach: it's not just about translating real-world dimensions into digital measures but also about ensuring those digital creations retain their tangible essence when reimagined within a physical space.

The scalability of UI components in visionOS is facilitated through prototyping tools since the designed elements are in vector format. For this reason, the points of the frames used in these tools do not represent the real differences between the iPhone or iPad screens and the infinite canvas provided by the Vision Pro.

iPhone 15 Pro and visionOS default window size frames within a design tool.

However, when it comes to sizing objects for visionOS, designers need to transition from thinking about points or display size to how objects will exist and interact within a tangible environment.

Understanding size conversions

Although the visionOS design library by Apple provides pre-designed elements, easing the design process, it's essential to understand the meters-to-points (or inches-to-points) conversion.

1 meter = 1360 points

39,37 inches = 1360 points

Employing the conversion ratio enables precise calculations for object sizing within visionOS prototypes. For instance, a standing lamp that is 2 meters tall (about 78.74 inches) would be represented as:

Height in points = height in meters × conversion ratio = 2 × 1360 = 2720 points.

Height in points = height in inches × (1360 / 39.37) = 78.74 × 34.56 ≈ 2720 points.

This conversion principle underlines the importance of employing vector graphics over raster images to avoid assets' quality loss and/or designing at reduced scales (e.g., designing at half or quarter size) and then scaling up the final output according to the conversion ratio.

Designing at scaled-down dimensions.

For transitioning from an iOS or iPad app to visionOS, scaling the interface requires adjusting sizes to this conversion ratio to adapt the experience across devices and operative systems. Design directly for visionOS requires precise size dictated by the conversion or scaling them appropriately to ensure high fidelity in the final output.

Optimizing window sizes

The default window size in visionOS is 1280x720 points, translating to approximately 0.94 meters in width and 0.53 meters in height.

Width in meters = 1280 points / 1360 points per meter = 0.941 meters (approximately)

Height in meters = 720 points / 1360 points per meter = 0.529 meters (approximately)

This knowledge is paramount for designers aiming to choose window sizes to suit the application's needs, customizing the user experience. For instance, applications such as Safari may benefit from taller windows for web content, while Keynote presentations might require wider dimensions for slide displays. This decision hinges on several factors, including the application's purpose, content volume, and the intended user interaction.

Comparing window sizes of Safari and Keynote.

To learn more about the principles of space, depth, and scale, and how to optimize the sizes of visionOS windows, refer to the following articles.

Understanding spatial awareness: dimension
Learn the core principles of space, depth and scale in visionOS.
Implementing windows in visionOS
Learn the fundamentals of using windows in a visionOS application.