visionos-design-guidelines

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

visionOS Design Guidelines

visionOS 设计指南

Comprehensive design rules for Apple Vision Pro based on Apple Human Interface Guidelines. These rules ensure spatial computing apps are comfortable, intuitive, and consistent with platform conventions.

基于Apple人机交互指南制定的Apple Vision Pro全面设计规则。这些规则确保空间计算应用舒适、直观,且符合平台惯例。

1. Spatial Layout [CRITICAL]

1. 空间布局【关键】

Spatial layout determines user comfort and usability. Poor placement causes neck strain, disorientation, or inaccessible content.
空间布局决定了用户的舒适度和易用性。放置不当会导致颈部疲劳、方向迷失或内容难以访问。

Rules

规则

SL-01: Center content in the field of view. Place primary windows and content directly ahead of the user at eye level. The comfortable vertical viewing range is approximately 30 degrees above and below eye level. Content outside this range requires head movement and causes fatigue.
SL-02: Maintain comfortable distance. Position content at a natural distance from the user, typically 1-2 meters for windows. Content too close feels invasive; content too far is hard to read. The system default placement is approximately 1.5 meters. Respect this unless there is a strong reason to override.
SL-03: Never place content behind the user. Users cannot see content behind them without physically turning around. All UI elements must appear within the forward-facing hemisphere. If content must surround the user, provide clear navigation to rotate or reposition.
SL-04: Respect personal space. Do not place 3D objects or windows closer than arm's length (~0.5 meters) from the user's head. Objects inside personal space cause discomfort and a feeling of intrusion. Direct-touch interactions are the exception, where objects are intentionally within reach.
SL-05: Use Z-depth to establish hierarchy. Elements closer to the user appear more prominent and interactive. Push secondary or background content further back. Use subtle depth offsets (a few centimeters) between layered elements rather than dramatic separation that fragments the interface.
SL-06: Manage multiple windows thoughtfully. When displaying multiple windows, arrange them in a gentle arc around the user rather than stacking or overlapping. Each window should be individually repositionable. Avoid spawning too many simultaneous windows that overwhelm the space.
SL-07: Anchor content to the environment, not the head. Windows and objects should stay fixed in world space as the user moves their head. Head-locked content (content that follows head movement) causes discomfort and motion sickness. Only use head-relative positioning for brief, transient elements like tooltips.

SL-01:将内容置于视野中心。 将主窗口和内容直接放在用户前方与视线齐平的位置。舒适的垂直视野范围大约是视线上下30度。超出此范围的内容需要用户移动头部,会引发疲劳。
SL-02:保持舒适的距离。 将内容放置在离用户自然的距离处,窗口通常为1-2米。内容过近会有侵入感,过远则难以阅读。系统默认放置距离约为1.5米,除非有充分理由,否则请遵循此设置。
SL-03:切勿将内容放置在用户身后。 用户不转身就无法看到身后的内容。所有UI元素必须出现在用户前方的半球范围内。如果内容需要环绕用户,请提供清晰的导航方式来旋转或重新定位内容。
SL-04:尊重个人空间。 请勿将3D对象或窗口放置在距离用户头部小于手臂长度(约0.5米)的位置。进入个人空间的对象会引起不适和被入侵的感觉。直接触摸交互是例外情况,此类场景下对象会被有意放置在可触及范围内。
SL-05:利用Z轴深度建立层级。 离用户更近的元素会显得更突出、更具交互性。将次要或背景内容向后推。在分层元素之间使用细微的深度偏移(几厘米),而非会割裂界面的大幅间距。
SL-06:合理管理多窗口。 显示多个窗口时,应将它们以柔和的弧形排列在用户周围,而非堆叠或重叠。每个窗口都应可单独重新定位。避免同时打开过多窗口,以免造成空间拥挤。
SL-07:将内容锚定到环境,而非头部。 用户移动头部时,窗口和对象应固定在世界空间中。头部锁定的内容(跟随头部移动的内容)会引起不适和晕动症。仅在显示短暂的临时元素(如工具提示)时使用相对头部的定位方式。

2. Eye & Hand Input [CRITICAL]

2. 眼动与手部输入【关键】

visionOS uses indirect interaction as its primary input model: users look at a target and pinch to select. This is fundamentally different from touch or mouse input.
visionOS将间接交互作为主要输入模式:用户注视目标并捏合手指进行选择。这与触摸或鼠标输入有着本质区别。

Rules

规则

EH-01: Design for look-and-pinch as the primary interaction. The standard interaction is: user looks at an element (eyes provide targeting), then pinches thumb and index finger together (hand provides confirmation). Design all primary interactions around this model. Users do not need to raise their hands or point at objects.
EH-02: Minimum interactive target size is 60pt. Eye tracking has inherent imprecision. All tappable elements must be at least 60 points in diameter to be reliably targeted by gaze. This is larger than iOS touch targets (44pt). Smaller targets cause frustration and mis-selections.
EH-03: Provide hover feedback on gaze. When the user's eyes rest on an interactive element, show a visible highlight or subtle expansion to confirm the element is targeted. This feedback is essential because there is no cursor. Without hover states, users cannot tell what they are about to select.
EH-04: Support direct touch for close-range objects. When 3D objects or UI elements are within arm's reach, allow direct touch interaction (physically reaching out and tapping). Direct touch should feel natural: provide visual and audio feedback on contact. Use direct touch for immersive experiences where it enhances presence.
EH-05: Never track gaze for content purposes. Eye position is used exclusively for system interaction targeting. Do not use gaze direction to infer user interest, change content based on what the user looks at, or record where the user looks. This is a core privacy principle of the platform. The system does not expose raw eye-tracking data to apps.
EH-06: Keep custom gestures simple and intuitive. If you define custom hand gestures beyond the system pinch, ensure they are easy to discover, physically comfortable to perform, and do not conflict with system gestures. Avoid gestures that require sustained hand raising, complex finger patterns, or two-handed coordination for basic actions.
EH-07: Do not require precise hand positioning. Users interact with hands resting naturally in their lap or at their sides. Do not require users to hold their hands in specific positions, reach to specific locations, or maintain sustained gestures. The indirect interaction model exists specifically to reduce physical effort.
EH-01:以“注视+捏合”为核心设计交互。 标准交互流程为:用户注视元素(眼动提供目标定位),然后捏合拇指和食指(手部提供确认)。所有主要交互都应围绕此模式设计。用户无需抬起手或指向对象。
EH-02:交互目标最小尺寸为60pt。 眼动追踪存在固有误差。所有可点击元素的直径至少应为60点,以确保能被可靠定位。这比iOS的触摸目标(44pt)更大。过小的目标会导致用户沮丧和误操作。
EH-03:注视时提供悬停反馈。 当用户的目光停留在交互元素上时,显示明显的高亮或细微的放大效果,以确认元素已被定位。由于没有光标,这种反馈至关重要。没有悬停状态的话,用户无法知道自己即将选择的是什么。
EH-04:为近距离对象支持直接触摸。 当3D对象或UI元素在手臂可及范围内时,允许直接触摸交互(伸手点击)。直接触摸应自然:在接触时提供视觉和音频反馈。在能增强沉浸感的沉浸式体验中使用直接触摸。
EH-05:切勿将眼动追踪用于内容相关目的。 眼动位置仅用于系统交互定位。请勿利用注视方向推断用户兴趣、根据用户注视内容更改显示或记录用户注视位置。这是平台的核心隐私原则。系统不会向应用暴露原始眼动追踪数据。
EH-06:自定义手势应简单直观。 如果定义系统捏合之外的自定义手势,请确保它们易于发现、执行时身体舒适,且不与系统手势冲突。避免在基础操作中要求用户持续抬手、做出复杂手指动作或双手配合。
EH-07:不要求精确的手部定位。 用户会自然地将手放在腿上或身侧进行交互。不要要求用户将手保持在特定位置、伸到特定区域或维持手势。间接交互模式的存在正是为了减少体力消耗。

Spatial Interaction Quick Reference

空间交互速查表

InteractionMethodUse Case
Tap / SelectLook + pinchButtons, links, list items
ScrollLook + pinch-and-dragLists, long content
ZoomTwo-hand pinchMaps, images, 3D models
RotateTwo-hand twist3D object manipulation
DragLook + pinch-hold-and-moveRepositioning windows
Direct touchReach and tapClose-range 3D objects
Long pressLook + pinch-and-holdContext menus
交互操作方式使用场景
点击/选择注视+捏合按钮、链接、列表项
滚动注视+捏合拖动列表、长内容
缩放双手捏合地图、图片、3D模型
旋转双手扭转3D对象操作
拖动注视+捏合按住并移动重新定位窗口
直接触摸伸手点击近距离3D对象
长按注视+捏合并按住上下文菜单

Target Size Reference

目标尺寸参考

ElementMinimum SizeRecommended Size
Buttons60pt60-80pt
List rows60pt height80pt height
Tab bar items60pt72pt
Close/dismiss60pt60pt
Toolbar items60pt60pt
3D interactive objects60pt equivalentScale to context

元素最小尺寸推荐尺寸
按钮60pt60-80pt
列表行60pt高度80pt高度
标签栏项60pt72pt
关闭/取消60pt60pt
工具栏项60pt60pt
3D交互对象等效60pt根据上下文缩放

3. Windows [HIGH]

3. 窗口【重要】

Windows in visionOS float in the user's physical space. They use a glass material that blends with the real-world environment.
visionOS中的窗口悬浮在用户的物理空间中。它们使用玻璃材质,可与现实环境融合。

Rules

规则

WN-01: Use glass material as the default window background. The system glass material dynamically adapts to the user's real-world surroundings, providing a consistent and readable backdrop. Do not replace glass with opaque solid colors unless you have a specific design reason (such as media playback). Glass grounds the interface in the shared space.
WN-02: Maintain standard window controls. Windows include a system-provided window bar at the bottom for repositioning and a close button. Do not hide, override, or replace these controls. Users rely on consistent window management across all apps.
WN-03: Make windows resizable when appropriate. If your content benefits from different sizes (documents, browsers, media), support window resizing. Use the system resize handle. Define reasonable minimum and maximum sizes. Adapt layout responsively as the window resizes.
WN-04: Place the tab bar as a leading ornament (left side). On visionOS, the tab bar (app navigation) is positioned as a vertical ornament on the leading (left) edge of the window, not at the bottom as on iOS. This keeps navigation accessible without consuming window content area. Use SF Symbols for tab icons.
WN-05: Place the toolbar as a bottom ornament. Primary action controls appear in a toolbar ornament anchored to the bottom edge of the window. This positions controls near the user's natural hand resting position and keeps the content area unobstructed.
WN-06: Windows float in space with no fixed screen. There is no fixed display. Windows exist in the user's physical environment. Design content that looks correct when viewed from slight angles and at varying distances. Avoid designs that assume a fixed viewport size or pixel-perfect positioning.

WN-01:默认使用玻璃材质作为窗口背景。 系统玻璃材质会动态适应用户的现实环境,提供一致且可读的背景。除非有特定设计理由(如媒体播放),否则不要用不透明纯色替换玻璃。玻璃能将界面锚定在共享空间中。
WN-02:保留标准窗口控件。 窗口底部包含系统提供的窗口栏(用于重新定位)和关闭按钮。请勿隐藏、覆盖或替换这些控件。用户依赖于所有应用中一致的窗口管理方式。
WN-03:在合适时允许窗口调整大小。 如果你的内容能从不同尺寸中获益(如文档、浏览器、媒体),请支持窗口调整大小。使用系统调整手柄。定义合理的最小和最大尺寸。窗口调整大小时,布局应能自适应。
WN-04:将标签栏作为左侧装饰控件。 在visionOS中,标签栏(应用导航)作为垂直装饰控件位于窗口的左侧边缘,而非像iOS那样位于底部。这样可以在不占用窗口内容区域的同时保持导航的可访问性。使用SF Symbols作为标签图标。
WN-05:将工具栏作为底部装饰控件。 主要操作控件位于锚定在窗口底部边缘的工具栏装饰控件中。这样可以将控件放置在用户手部自然休息位置附近,同时不遮挡内容区域。
WN-06:窗口悬浮在空间中,无固定屏幕。 没有固定的显示屏。窗口存在于用户的物理环境中。设计内容时要考虑到从轻微角度和不同距离观看的情况。避免假设固定视口大小或像素级完美定位的设计。

4. Volumes [HIGH]

4. 体积容器【重要】

Volumes display 3D content within a bounded box. They are ideal for 3D models, visualizations, and objects users can examine from multiple angles.
体积容器在边界框内显示3D内容。它们非常适合展示3D模型、可视化内容以及用户可从多角度检查的对象。

Rules

规则

VL-01: Contain 3D content within the volume bounds. All content must fit within the defined volume dimensions. Content that escapes the bounds will be clipped. Size the volume appropriately for the content it holds and respect the system-enforced limits.
VL-02: Design for viewing from all angles. Users can physically walk around a volume or reposition it. Ensure 3D content looks correct from all viewing angles, not just the front. Avoid flat facades that look like cardboard cutouts from the side.
VL-03: Do not require a specific viewing position. The user may view the volume from above, below, or any side. Content must remain comprehensible regardless of viewing angle. If orientation matters, use visual cues (a base, a label) rather than forcing a specific position.
VL-04: Scale content appropriately for the space. Volumes should be sized relative to their content and the user's environment. A molecular model might be small and held at arm's length. An architectural visualization might fill a table. Consider the context in which users will interact with the volume.
VL-05: Use volumes for self-contained 3D experiences. Volumes are not windows with 3D objects inside them. Use volumes when the 3D content is the primary experience (examining a product model, viewing a 3D chart). Use windows for primarily 2D interfaces that may include some 3D elements.

VL-01:将3D内容限制在体积容器边界内。 所有内容必须符合定义的体积容器尺寸。超出边界的内容会被裁剪。根据内容大小适当调整体积容器,并遵守系统强制限制。
VL-02:为多角度观看设计内容。 用户可以绕着体积容器行走或重新定位它。确保3D内容从所有观看角度看都正常,而不仅仅是正面。避免设计成侧面看起来像纸板剪影的平面外观。
VL-03:不要求特定的观看位置。 用户可能从上方、下方或任意侧面观看体积容器。无论观看角度如何,内容都必须易于理解。如果方向很重要,请使用视觉提示(如底座、标签),而非强制特定位置。
VL-04:根据空间适当缩放内容。 体积容器的大小应与其内容和用户环境相关。分子模型可能很小,放在手臂可及范围内;建筑可视化可能会填满整张桌子。考虑用户与体积容器交互的场景。
VL-05:将体积容器用于独立的3D体验。 体积容器不是内部包含3D对象的窗口。当3D内容是核心体验(如检查产品模型、查看3D图表)时使用体积容器。当主要是2D界面(可能包含一些3D元素)时使用窗口。

5. Immersive Spaces [HIGH]

5. 沉浸式空间【重要】

visionOS supports a spectrum of immersion from shared space (apps alongside reality) to full immersion (complete virtual environment).
visionOS支持从共享空间(应用与现实共存)到完全沉浸(纯虚拟环境)的多种沉浸层级。

Rules

规则

IS-01: Start in the Shared Space. Apps launch into the Shared Space by default, where multiple app windows coexist alongside the real world. Only transition to more immersive experiences when the user explicitly requests it. Do not force immersion on launch.
IS-02: Use progressive immersion. Move through immersion levels gradually: Shared Space (windows alongside reality) to Full Space (your app takes over but passthrough remains) to Full Immersion (completely virtual environment). Each step should feel intentional and user-initiated.
IS-03: Always provide an exit path. Users must always be able to return to a less immersive state or exit the experience entirely. The Digital Crown is the system-level escape. Within your app, provide clear controls to reduce immersion. Never trap users in an immersive experience.
IS-04: Use passthrough for safety. In experiences where users might move physically, maintain passthrough of the real environment or provide a guardian boundary. Users need awareness of physical obstacles, other people, and room boundaries. Full immersion is only appropriate when the user is stationary.
IS-05: Dim passthrough gradually. When transitioning to increased immersion, dim the passthrough environment gradually rather than cutting to black. Abrupt visual changes are disorienting. Use smooth, animated transitions between immersion levels.
IS-06: Do not assume room layout or size. Users are in diverse physical spaces. Do not design experiences that require a minimum room size, assume a clear floor area, or expect specific furniture placement. Gracefully adapt to whatever physical space is available.
IS-07: Provide spatial audio cues. In immersive spaces, use spatial audio to help users orient. Sounds should come from the direction of their source in the virtual environment. Audio cues can guide attention and provide feedback without requiring visual focus.

IS-01:从共享空间启动。 应用默认在共享空间中启动,多个应用窗口与现实世界共存。仅当用户明确请求时,才切换到更沉浸式的体验。请勿在启动时强制进入沉浸模式。
IS-02:使用渐进式沉浸。 逐步切换沉浸层级:从共享空间(窗口与现实共存)到完整空间(应用接管但保留透视)再到完全沉浸(纯虚拟环境)。每一步都应是用户主动发起的、有意的操作。
IS-03:始终提供退出路径。 用户必须始终能够返回低沉浸状态或完全退出体验。数码表冠是系统级的退出方式。在你的应用内,提供清晰的控件来降低沉浸度。永远不要将用户困在沉浸式体验中。
IS-04:使用透视功能保障安全。 在用户可能会移动身体的体验中,保持现实环境的透视显示或提供防护边界。用户需要感知物理障碍物、他人和房间边界。完全沉浸仅适用于用户静止的场景。
IS-05:逐渐调暗透视画面。 切换到更高沉浸度时,逐渐调暗透视环境,而非直接切到黑屏。突然的视觉变化会让人迷失方向。在不同沉浸层级间使用平滑的动画过渡。
IS-06:不假设房间布局或大小。 用户处于各种不同的物理空间中。不要设计需要最小房间尺寸、假设空旷地面或特定家具摆放的体验。要能灵活适应任何可用的物理空间。
IS-07:提供空间音频提示。 在沉浸式空间中,使用空间音频帮助用户定位。声音应来自虚拟环境中声源的方向。音频提示无需视觉聚焦即可引导注意力并提供反馈。

6. Materials & Depth [MEDIUM]

6. 材质与深度【中等】

visionOS uses a physically-based material system that responds to real-world lighting. Proper use of materials creates depth hierarchy and ensures readability.
visionOS使用基于物理的材质系统,可响应现实世界的光照。正确使用材质可建立深度层级并确保可读性。

Rules

规则

MD-01: Use the system glass material for UI surfaces. The glass material is the foundation of visionOS UI. It provides depth, translucency, and environmental integration. Use the system-provided glass variants (regular, thin, ultra-thin) rather than custom translucent materials.
MD-02: Specular highlights respond to the environment. Materials in visionOS react to real-world lighting conditions. Design elements that leverage this: subtle specular highlights on interactive elements reinforce their dimensionality. Do not flatten materials with purely matte surfaces.
MD-03: Layer materials to create depth hierarchy. Use lighter/thicker glass for foreground elements and darker/thinner glass for background. Sidebars use a slightly different glass tint than content areas. This layering creates natural visual hierarchy without sharp borders.
MD-04: Apply vibrancy for text readability. Text over glass materials uses vibrancy effects to remain legible regardless of the background environment. Use the system text styles which include appropriate vibrancy. Custom text rendering over glass must account for varying background lightness and color.
MD-05: Use shadows and highlights for elevation. Elements that float above the window surface (popovers, menus, hover states) should cast subtle shadows and show slight specular highlights on their upper edges. These depth cues help users understand the spatial relationship between interface layers.
MD-06: Avoid fully opaque backgrounds in shared space. Opaque surfaces in the shared space create visual holes in the environment. Use translucent glass materials that let the environment show through. Exceptions include media playback (video, photos) where an opaque background improves the viewing experience.

MD-01:将系统玻璃材质用于UI表面。 玻璃材质是visionOS UI的基础。它提供深度、半透明性和环境集成。使用系统提供的玻璃变体(常规、薄、超薄),而非自定义半透明材质。
MD-02:镜面高光随环境变化。 visionOS中的材质会响应现实世界的光照条件。设计时要利用这一点:交互元素上的细微镜面高光可增强其立体感。不要用纯哑光表面让材质显得扁平。
MD-03:通过分层材质建立深度层级。 前景元素使用更浅/更厚的玻璃,背景使用更深/更薄的玻璃。侧边栏使用的玻璃色调与内容区域略有不同。这种分层无需明显边框即可创建自然的视觉层级。
MD-04:使用活力效果提升文本可读性。 玻璃材质上的文本使用活力效果,以确保在任何背景环境下都清晰可读。使用包含适当活力效果的系统文本样式。在玻璃上自定义文本渲染时,必须考虑背景亮度和颜色的变化。
MD-05:使用阴影和高光表示高度。 悬浮在窗口表面上方的元素(弹出框、菜单、悬停状态)应投射细微阴影,并在其上边缘显示轻微的镜面高光。这些深度提示可帮助用户理解界面层之间的空间关系。
MD-06:在共享空间中避免完全不透明的背景。 共享空间中的不透明表面会在环境中造成视觉空洞。使用能让环境透出来的半透明玻璃材质。例外情况包括媒体播放(视频、照片),此时不透明背景可提升观看体验。

7. Ornaments [MEDIUM]

7. 装饰控件【中等】

Ornaments are UI controls that attach to the edges of windows, floating partially outside the window bounds. They provide toolbars, navigation, and contextual actions.
装饰控件是附加在窗口边缘的UI控件,部分悬浮在窗口边界之外。它们用于提供工具栏、导航和上下文操作。

Rules

规则

OR-01: Attach controls as ornaments rather than inline. Toolbars, tab bars, and persistent action buttons belong as ornaments, not embedded within the window content area. Ornaments keep the content area clean and establish a clear spatial hierarchy between controls and content.
OR-02: Place primary actions in the bottom ornament. The bottom edge ornament is the primary location for action controls (play/pause, formatting tools, share). This position is ergonomically accessible and visually prominent without obscuring content.
OR-03: Place navigation in the leading (left) ornament. App-level navigation (tab bar equivalent) attaches to the leading edge of the window. This keeps navigation persistent and accessible while leaving the content area and bottom ornament for contextual controls.
OR-04: Do not occlude window content with ornaments. Ornaments extend outward from the window edge, not inward. They should not cover or overlap the window's content area. Size ornaments appropriately so they remain functional without becoming visually dominant over the content.
OR-05: Show ornaments contextually when appropriate. Not all ornaments need to be visible at all times. Toolbars can appear on hover (when the user looks at the window) and fade when the user looks away. This keeps the interface clean while maintaining discoverability.
OR-06: Use standard ornament styling. Ornaments use the same glass material system as windows but at a slightly different depth. Use system-provided ornament containers rather than custom floating UI. This ensures visual consistency with other visionOS apps.

OR-01:将控件作为装饰控件,而非内联放置。 工具栏、标签栏和持久操作按钮应作为装饰控件,而非嵌入窗口内容区域。装饰控件可保持内容区域整洁,并在控件和内容之间建立清晰的空间层级。
OR-02:将主要操作放在底部装饰控件中。 底部边缘的装饰控件是放置操作控件(播放/暂停、格式工具、分享)的主要位置。这个位置符合人体工程学,易于访问且视觉突出,同时不遮挡内容。
OR-03:将导航放在左侧装饰控件中。 应用级导航(等效于标签栏)附加在窗口的左侧边缘。这样可以保持导航的持久性和可访问性,同时将内容区域和底部装饰控件留给上下文控件。
OR-04:装饰控件不要遮挡窗口内容。 装饰控件应从窗口边缘向外延伸,而非向内。它们不应覆盖或重叠窗口的内容区域。适当调整装饰控件的大小,确保其功能正常且不会在视觉上盖过内容。
OR-05:在合适时根据上下文显示装饰控件。 并非所有装饰控件都需要始终可见。工具栏可以在用户注视窗口时显示,用户移开目光时淡出。这样可以保持界面整洁,同时确保可发现性。
OR-06:使用标准装饰控件样式。 装饰控件使用与窗口相同的玻璃材质系统,但深度略有不同。使用系统提供的装饰控件容器,而非自定义悬浮UI。这样可确保与其他visionOS应用的视觉一致性。

Evaluation Checklist

评估检查表

Use this checklist to evaluate a visionOS design or implementation.
使用此检查表评估visionOS设计或实现。

Spatial Layout

空间布局

  • Primary content centered in forward field of view
  • Content placed at comfortable distance (1-2m for windows)
  • No content placed behind the user
  • Personal space respected (nothing closer than ~0.5m)
  • Z-depth used meaningfully for hierarchy
  • Multiple windows arranged in arc, not stacked
  • Content anchored to world space, not head-locked
  • 主要内容位于前方视野中心
  • 内容放置在舒适距离(窗口为1-2米)
  • 无内容放置在用户身后
  • 尊重个人空间(无内容距离小于约0.5米)
  • 有意义地使用Z轴深度建立层级
  • 多个窗口呈弧形排列,而非堆叠
  • 内容锚定到世界空间,而非头部锁定

Eye & Hand Input

眼动与手部输入

  • All interactions work with look-and-pinch
  • All interactive targets >= 60pt
  • Hover states visible on all interactive elements
  • Direct touch supported for close-range objects
  • No gaze tracking for content or analytics purposes
  • Custom gestures are simple and discoverable
  • No sustained hand-raising required
  • 所有交互支持“注视+捏合”
  • 所有交互目标≥60pt
  • 所有交互元素都有可见的悬停状态
  • 为近距离对象支持直接触摸
  • 未将眼动追踪用于内容或分析目的
  • 自定义手势简单且易于发现
  • 无需持续抬手

Windows

窗口

  • Glass material used as default background
  • Standard window bar and close button present
  • Tab bar positioned as leading ornament
  • Toolbar positioned as bottom ornament
  • Layout adapts to different window sizes
  • Content designed for floating in space
  • 默认使用玻璃材质作为背景
  • 存在标准窗口栏和关闭按钮
  • 标签栏作为左侧装饰控件
  • 工具栏作为底部装饰控件
  • 布局可适应不同窗口大小
  • 内容为悬浮在空间中设计

Volumes

体积容器

  • Content contained within volume bounds
  • Content looks correct from all viewing angles
  • No specific viewing position required
  • Scale appropriate for content and context
  • 内容限制在体积容器边界内
  • 内容从所有观看角度看都正常
  • 不要求特定观看位置
  • 根据内容和上下文适当缩放

Immersive Spaces

沉浸式空间

  • App starts in Shared Space
  • Immersion increases progressively
  • Clear exit path always available
  • Passthrough maintained where safety requires it
  • Transitions between immersion levels are smooth
  • No assumptions about room size or layout
  • 应用从共享空间启动
  • 沉浸度逐步提升
  • 始终提供清晰的退出路径
  • 在需要安全保障的场景下保留透视功能
  • 沉浸层级间的过渡平滑
  • 不假设房间大小或布局

Materials & Depth

材质与深度

  • System glass material used for UI surfaces
  • Material layering creates depth hierarchy
  • Text uses vibrancy for readability over glass
  • Shadows and highlights indicate elevation
  • No fully opaque surfaces in shared space (except media)
  • UI表面使用系统玻璃材质
  • 材质分层建立深度层级
  • 文本使用活力效果以在玻璃上可读
  • 阴影和高光表示高度
  • 共享空间中无完全不透明表面(媒体除外)

Ornaments

装饰控件

  • Controls attached as ornaments, not inline
  • Primary actions in bottom ornament
  • Navigation in leading ornament
  • Ornaments extend outward, not over content
  • Standard ornament styling used

  • 控件作为装饰控件附加,而非内联放置
  • 主要操作在底部装饰控件中
  • 导航在左侧装饰控件中
  • 装饰控件向外延伸,不覆盖内容
  • 使用标准装饰控件样式

Anti-Patterns

反模式

These are common mistakes in visionOS design. Avoid them.
Anti-PatternProblemCorrect Approach
Head-locked UICauses motion sickness, feels claustrophobicAnchor UI to world space
Tiny tap targetsEye tracking cannot reliably target < 60ptMinimum 60pt interactive targets
No hover statesUsers cannot tell what is interactiveAlways show highlight on gaze
Opaque windows in shared spaceCreates visual holes in environmentUse system glass material
Forced full immersionDisorienting, traps usersStart in shared space, progressive immersion
Content behind userInvisible, requires full body rotationKeep content in forward hemisphere
Gaze-driven contentPrivacy violation, feels surveilledUse gaze only for system targeting
Flat 3D volumesLooks like cardboard cutout from sideDesign for all viewing angles
Inline toolbarsWastes content space, breaks conventionsUse ornaments for controls
Small room assumptionsFails in tight spacesAdapt to available physical space
Abrupt immersion changesDisorienting, breaks presenceGradual transitions with animation
Sustained arm raisingPhysical fatigue in minutesDesign for hands resting at sides
Custom window chromeBreaks platform consistencyUse system window controls
Z-fighting layersVisual flicker, unclear hierarchyUse intentional depth offsets
这些是visionOS设计中常见的错误。请避免。
反模式问题正确做法
头部锁定UI引起晕动症,有幽闭感将UI锚定到世界空间
极小点击目标眼动追踪无法可靠定位<60pt的目标交互目标最小为60pt
无悬停状态用户无法判断哪些元素可交互注视时始终显示高亮
共享空间中的不透明窗口在环境中造成视觉空洞使用系统玻璃材质
强制完全沉浸让人迷失方向,困住用户从共享空间启动,渐进式沉浸
用户身后的内容不可见,需要全身转动将内容保持在前方半球范围内
眼动驱动内容违反隐私,让人感觉被监视仅将眼动用于系统定位
扁平3D体积容器侧面看起来像纸板剪影为所有观看角度设计内容
内联工具栏浪费内容空间,违反惯例使用装饰控件放置工具栏
假设房间较小在狭窄空间中无法使用适应可用物理空间
沉浸度突变让人迷失方向,破坏沉浸感使用动画进行逐步过渡
持续抬手数分钟内就会导致身体疲劳为手部放在身侧的场景设计
自定义窗口边框破坏平台一致性使用系统窗口控件
图层Z轴冲突视觉闪烁,层级不清晰使用明确的深度偏移