A quick look at Apple VisionOS design specifications
This article mainly analyzes the design highlights HE Tuber of Apple VisionOS. The author uses icons, interface materials, text, effects and colors as examples to analyze the interaction methods of Apple VisionOS, which can provide some reference suggestions for digital product design to product design students.
At the "One More Thing" session of the WWDC2023 conference,
Tim Cook officially released Apple's first MR device, called Apple Vision Pro, and announced that a new era of spatial computing is about to begin.
Soon after, the Apple design team launched VisionOS’s Design for spatial user interfaces (spatial user interface design), which brought a lot of inspiration to us designers.
Now, let us take a look at the eye-catching design highlights of VisionOS from a design perspective.
1. Icon layered design
In visionOS, the App icon adopts a style close to that of iOS, but the biggest difference is that the shape changes from a rounded rectangle to a circle. The main reason for this design change is to allow the gaze point to be more accurately aimed at the icon.
In addition to the change in shape, the visionOS App logo also has a three-dimensional effect. When viewed from the side, the surface of the logo is raised, giving it a three-dimensional appearance.
What's more, these signs also dynamically interact with the user's gaze. When a user stares at a logo, the logo expands and displays highlights and shadows to enhance subtle visual hierarchy.
Such design changes make the app logo more visually appealing and provide
users with a more immersive experience. Through three-dimensional effects and dynamic interactions, logos can attract users' attention and present more vivid and rich visual effects.
To put it simply, in order to present a more realistic depth effect, the visionOS App logo usually consists of three plane layers: a background layer and two surface layers . This design aims to achieve a binocular parallax effect, making the logo visually more three-dimensional.
In addition to the composition of the three planes, the system also overlays a
"glass layer" effect for rendering depth, highlights and shadows. The addition of this glass layer further enhances the realism of the logo, making it look more three-dimensional and textured.
What needs to be emphasized is to avoid using large-area translucent effects, because the icon's projection is built-in at the bottom of the system, and the transparent layer will be mixed with the projection and difficult to distinguish.
2. Frosted glass material
The entire interface adopts the material effect of frosted glass. This material will produce light and shadow changes as the environment changes. For example, when the external light changes, the edge light of the glass will also change.
Apple pointed out that the benefits of this design are that it has a sense of lightness, physical space, and can be adapted to various usage scenarios, such as small spaces, night or bright daylight, etc.
bright color
dark color
Glass materials can also express information levels through brightness changes and contrast.
On the menu, a streamer selection effect is made:
