visionOS：理想的UI设计竟要考虑这么多细节

拥有对macOS、iPadOS、watchOS、iOS等系统的开发经验，苹果在XR操作系统设计上也具有先天优势，相比于其他公司从头开始构建XR系统界面，苹果可直接借鉴已经过验证的设计美学。

与此同时，WWDC 2023上公布的一系列开发者教程来看，该公司在VST透视模式UI的设计上也有着深刻思考。这种混合现实形式背景基于周围动态环境，而不是像VR那样设定在可控的虚拟场景，因此在界面设计上需要重新考虑。另外再配上Vision Pro的眼球、手势输入功能，visionOS的视觉交互体验相当独特，对其他XR系统设计也许能带来启发。

以下是visionOS UI的一些特点：

visionOS的界面设计元素保持了iOS部分设计风格，比如侧边栏、标签选项、搜索栏等大家熟悉的元素；

菜单界面的尺寸（半透明窗口）可根据实际用途、显示内容和所在空间调整大小，比其他VR平台的固定尺寸界面更人性化。另外，还可以同时开启不同尺寸的界面，提升多任务处理效率；

界面默认位于用户视线高度和视野中心（考虑到用户的实际身高和姿态）；

在Quest平台，你可以点击手柄上的Oculus键来重置菜单位置，尽管Vision Pro没有官方手柄，但依然可以通过点击头显机身的数字旋钮来重定向；

为了帮助用户准确的将AR窗口固定在特定的物理空间，visionOS在窗口移动时采用了微妙的变化，比如移动时窗口为半透明，允许用户识别窗口背后的环境，固定后窗口又变回高饱和度图像；

在AR观影模式中，visionOS系统会自动调低VST透视的透明度，让观影体验更沉浸、专注；

visionOS非常注重虚拟和现实的融合，比如会渲染窗口投射到周围环境上的光以及地面阴影，看起来有实体感，就像是摆在空间中的屏幕。或者在显示照片等内容时，将照片边缘模糊化；

充分结合微弱的深度变化信息，来突出特定的界面元素，比如将需要用户关注的界面放在更靠近用户的位置，而其他界面则靠后一些。

01. 交互设计

在visionOS空间计算平台中，你只需要注视一个按钮，然后用手势轻敲即可输入，Vision Pro在头显底部配备摄像头，因此你无需抬手臂也能实现手势追踪。另外，相比于此前VR系统使用的光标投射操控方式，注视点可以更自然的瞄准选项，并与微手势快速配合。

Vision Pro并未配备原生手柄，但在输入方式上依然有多种选择，注视点是主要瞄准方式，无论UI距离用户多远，都可以毫不费力的根据注视点信息来瞄准任意部分。接着，可以使用微手势确认选择，或是用手直接和UI元素交互，除此之外还可以通过语音输入，或是连接蓝牙键盘、妙控板、游戏手柄。

为了确保注视点瞄准的准确性，苹果不仅优化了Vision Pro头显的传感器设计，在UI设计上也有诸多考虑，比如：

1）应用的主要内容应位于视野中心：即使空间计算有无限大的发挥空间，但用户只能看到视野内的画面，而且视野内也只有最中心的部分观看体验最舒适（下图30度范围内）；

2）应用的次要内容或操作机制可放在视野边缘；

3）应用布局也要考虑肩颈舒适性；

4）人眼一次只能聚焦在一个深度，频繁改变焦距会造成视觉疲劳，因此应该将交互内容保持在相同深度，确保用户能不费力切换UI；

5）可使用细微的深度变化来传达UI的层次结构；

6）适合注视点选定的最小区域至少60pt大小，开发者可以在这个范围内设计图标等元素（约44pt大小），并确保该元素与选定区边缘的间距够宽，从而让注视点选定更加准确、快速；

7）UI可动态缩放（近小、远大），如果开发者选择固定UI比例，那么如果界面放在远处，视觉看起来会更小，难以用眼球控制；

8）visionOS交互系统的设计初衷，是允许用户在远距离也能与UI舒适交互；也支持近距离直接输入，比如在虚拟键盘上用手指打字；

9）使用悬停突出/高亮来代表注视点运动，为了对人眼快速移动做出及时反应，这种效果做的比较自然微妙；

10）注视点长时间悬停在一个位置，代表了用户的兴趣和意图；

11）长时间注视一个位置，visionOS的界面会显示额外的信息、功能，比如工具提示、展开标签栏、触发语音搜索等等，当注意力从UI上转移时，UI会恢复干净简洁的界面；

12）在Vision Pro头显中，用眼神和语音即可操作；长时间注视甚至还可以取代手势来确认输入，意味着只用眼睛就能控制UI；

13）眼球+手势定位是visionOS系统的主要交互方式，宣称可提供准确、体验感好的交互，并实现一些智能的组合动作，比如：在缩放图像时，会优先从用户注视点位置放大或缩小；或者，还可以用注视点来控制绘图光标，实现更高效创作体验；

14）Vision Pro头显的手势交互设计与人们熟悉的手机触屏操作接近，比如手指捏合的动作相当于在手机屏幕上点击，而拖动捏合手势则可以浏览界面，还可以用双手来缩放；

15）手势交互的逻辑与多点触控手势的逻辑类似，因此容易上手，用户通过单手、双手的捏合动作，就能实现单击、双击、抓取、拖放、放大、旋转等操作；

16）除了系统标准手势外，开发者还可以自定义手势；

17）虚拟键盘使用动态高亮效果来提示距离，引导手指瞄准按键；

18）由于长时间举手臂容易引起疲劳，因此应适当使用近距离触控手势，仅在体验的核心玩法中使用；避免多次重复手势让用户感到疲劳，或是采用容易做错的手势；

19）在空间计算平台，软件应用不再局限于窗口中，而是可以占据用户所在的物理空间，并对用户的身体运动做出反应；

20）为了确保注视点输入的准确性，visionOS界面主要采用一些边缘圆润的图形，因为如果采用方形等边缘锋利的形状，注视点可能会跑到外部，从而降低识别的精确度；此外图形应避免采用粗轮廓，以避免将注意力吸引到图形外部。

02. 空间UI设计

为了帮助开发者更快适应空间计算平台，苹果构建了一种比较熟悉的视觉语言，特点是和iOS等现有的平台具有一致性，同时一些元素针对空间平台进行了优化。

◎ 基础和设计原则

1，App图标

visionOS的App图标采用了与iOS接近的风格，最大的区别是形状从圆角矩形变成了圆形，这种设计变化的一大原因，是为了让注视点瞄准的更准确。除此之外，visionOS的App标志是立体的，从侧面能看到表面凸起，而且可与注视点动态交互，当你盯着一个标志时，标志会展开，并显示高光和阴影来加深微妙的视觉层次。

简单来讲，visionOS的App标志为了呈现深度，通常由3个平面的图层组成（1个背景层，2个表面层），目的是呈现双目视差效果。此外，系统还会叠加一个“玻璃层”效果，来渲染深度、高光和阴影。

2，背景材质

值得注意的是，visionOS的应用标志并非直接叠加在物理透视背景上，而是固定在一个像毛玻璃质感的半透明界面上。苹果指出，这种设计的好处是具有轻盈感、物理空间感，并可适应各种不同的使用场景，比如狭小的空间、夜间或明亮的日光下等等。此外，半透光特性意味着不会完全遮挡物理空间，而是可模拟环境光动态透过的效果。