空间APP设计思路 - Apple Vision 产品设计指导（一）

    大家好，我是李康Max。最近Apple面向开发者更新了visionOS中软件设计开发流程的教学内容。我也在同步学习，在此分享一些学习笔记，和大家一起交流学习心得。

    关于Apple Vision提供的设计内容，官方给出的信息相对错综复杂。有些分布在WWDC整体介绍中，有些分布在visionOS介绍中，有些分布在Apple汇总设计指导文档中。目前在主动学习状态，我将优先以官方提供原文内容整理汇总，共计12篇，这是第1篇。

    阅读提醒：本文共计7400字，预计阅读时长30分钟，请大家合理安排时间。共计总结了46条设计思路，主要是理解Vision APP的产品设计和交互设计，我用特殊颜色标注方便浏览。

1. 文章说明

1.1 原文

    笔记内容难免有些中文翻译和自己的理解，所以每篇文章都优先提供原文地址。Principles of spatial design - WWDC23 - Videos - Apple Developer：https://developer.apple.com/videos/play/wwdc2023/10072/

1.2 引言

    Discover the fundamentals of spatial design. Learn how to design with depth, scale, windows, and immersion, and apply best practices for creating comfortable, human-centered experiences that transform reality. Find out how you can use these spatial design principles to extend your existing app or bring a new idea to life.    本文用于探索空间设计的基础知识。了解如何进行深度、比例、窗口和沉浸感的设计，然后通过案例展示如何创造一个以人为本的舒适MR体验。了解如何使用这些空间设计理念来扩展现有应用程序或开发新的应用。

1.3说明

    这篇文章原文标题使用了“Principles”单词，绝大部分人都会直译成“原则”。但是我认为“原则”是个非常重的词，在XR产品设计中，前有Google的白日梦设计团队，现有Meta、Microsoft的设计团队，大家都有自己的设计理念。所以我这里不认为vision并不能代表「空间应用的设计原则」，暂时称为「空间APP设计思路」。

    我觉得苹果这个视频内容有些杂糅，所以我对内容进行了适当拆分、重组、补充便于理解消化，还有部分适配中文语境。

1. 空间APP设计思路

2.1 通用功能的设计思路 Familiar

• 产品功能结构设计是多平台相通的

就像现在已有的产品功能一样，我们在Mac/iPad端提供了边栏，在iPhone中就变成了底部导航；每个导航中存在多个tabs；每个tab中又容纳了很多内容。就像原有的搜索功能也是用户刚需，所以我们在做Vision端适配的时候，依旧可以保持原有的产品功能结构设计。

Vision端是把原有在平面屏幕上的窗口变成了现实。

窗口 Windows

• 用毛玻璃效果做窗口背景

窗口背景采用毛玻璃设计。首先一个应用的元素都需要一个画布将他们关联起来，所以产品设计依旧需要一块背景板。这个背景板使用毛玻璃材质，可以增加通透性，就像我们会在墙上开窗户一样，增加一定通透性可以让用户保持相对舒适。同时毛玻璃材质还能适配场景中的光线变化，当场景变暗时不需要对窗口背景板单独调整光线亮度，跟随整体光线变化即可，这样还能让设计元素更加凸显。

• visionOS已经提供了窗口控制功能

这里提供了系统级窗口控制方案。每打开一个窗口，窗口下方都会有一个「点-横」，眼睛注意到点上就可以关闭窗口。注意到横条上，可以对窗口进行移动。当注意到窗口边缘则可以调整窗口的大小。当用户移动窗口位置时，窗口始终面向头显位置，相当于在一个以头显为原点，半径固定的球面上移动。

尺寸 Sizing

窗口尺寸服务于内容——灵活 动态 效率

• 多窗口设计要保持灵活

在Safari浏览器上，主要内容以图文竖向分布，那么窗口就可以设计成更高的便于展示更多内容；在PPT制作时，主要内容都是横向分布，那么窗口就可以设计得更宽以保持体验。当需要音乐播放器的控制栏常驻时，就可以把tool bar单独分离出来放在前面固定，不用跟随界面内容变化。当播放PPT时，可以把PPT播放控制栏单独提供一个窗口，既能完成页面控制，还能保持实际观察体验。甚至浏览器的工具栏相对固定，网页内容是动态的就可以把两个窗口分开，让网页本身看起来是完整一体的，尤其是一些WebApp，非常实用。

• 窗口可以使用动态设计

窗口是服务于内容的。当我需要用户专注于内容浏览的时候就可以把控制栏收起，交互设计四大方式之隐藏。当需要使用的时候再展示出来，除非是一些强弹窗提醒，否则也没有必要覆盖原有内容。因为visionOS的窗口就像一个大画布，所有窗口都可以动态设计，提升用户使用效率。

• 窗口设计核心是提升使用效率 （个人补充）

visionOS支持很多个性化窗口的设计，但是产品设计是为了内容服务的。产品功能逻辑的美比样式设计的美更重要。所以当用户需要专注于内容时，就可以把其他功能隐藏；当用户对于音乐播放控制要求较高时，就可以把tool bar拎出来固定；当用户需要在多个标签中选择时，就可以缩放形成标签预览；当用户需要对网页内容进行对照时，可以同一个应用展示多个窗口。设计的自由应该服务于功能逻辑，功能逻辑应该对应用户需求，用户的注意力十分有限，不要为了炫技而炫技，让用户和内容/服务更近就是产品设计的最重要的价值。

效率公式 内容/服务提供 > 功能结构设计 > 样式设计。

• 遵守基于Points的空间设计

什么是Points设计？（补充解释）

眼动追踪实际上是分析眼睛移动的角度，所以眼动追踪的精度也是受到移动角度的限制。

假设你有点近视，往你前面3米的地方放了2个苹果，2个苹果放的太近了你就会看不清 到底是1个还是2个。所以2个苹果要拉开一点距离。如果3米的地方是一个黑板，黑板上画了2个苹果，你依旧需要把2两个苹果画的开一点才能分辨。假设这个距离你3米远的黑板上，两个苹果需要分开20cm，那么距离你5米的黑板需要分开多少厘米呢？需要计算对吧。假设一个黑板距离用户是300厘米，黑板宽也是300厘米，苹果说眼动追踪识别两个物体最小距离就是15厘米。假设这个宽300厘米的黑板刚好容纳1200像素，那么15厘米就是60像素。

所以visionOS有远近多个窗口，当窗口进行前后移动时，就需要时刻关注两个元素的空间距离变化，以保证两个元素入眼角度差不变小，避免眼动追踪识别错误。那么visionOS就表示不用那么麻烦，一方面限制窗口和用户的距离，另一方面制定好像素和距离的比例，设计师只需要把注意力放到两个元素的像素间距。visionOS自行控制同比缩放其中的元素，就能保证角度不变了。也就是这里所说的Points设计。

实际这个仅适用于visionOS的平面应用，关于Points设计详细信息，在下一篇文章产品界面设计中学习。

2.2 以人为本的设计思路 Human-centered

视野内的设计 Field of view

• 把重要的东西放在用户视野中央

用户会优先关注视野中间的东西，所以尽量把重要的内容放在中间。当用户需要从多个选项中选择时，可以给出围绕着中间的选项卡缩略图，这样用户就能保持自然的观察习惯。

• 尽量别让用户摇头找

两侧的内容，用户不容易注意到，同时摇头是个操作成本比较高的用户行为。除非要构建某种沉浸感，否则尽量少让用户转头。

效率 Ergonomics —— 把元素放到用户最舒服的地方 Place objects comfortably

• 窗口放在用户的自然视角处

一般就是把窗口放在用户的自然视角处，用户会看到正前方偏下一点的位置。

• 以Vision设备为空间坐标的原点进行设计

但是用户可能有高有低，有的用户会靠在沙发上抬着头，所以最好是按照Apple Vision设备为空间坐标系的原点进行设计。

• 别把窗口放的太近

窗口内容一般都是需要用户用眼动追踪和手势识别进行交互的，放的太近了用户可能会误以为可以上手摸。反之，可以摸的物体同理。

• 内容设计别太高或者太低

有用的就放在用户一眼能看到的地方，没用的就隐藏起来。当然如果这就是产品体验的一部分，就该咋放就咋放。

• 内容设计不要视角跟随

内容跟随视角，像牛皮癣贴在脸上，像个赶不走的苍蝇。（恶心，唾弃！）

移动 Movement —— 最小化用户移动 Require minimal movement

• 不要想着让用户移动

除非让用户移动是你应用的核心玩法。否则让用户移动就像上课时老师让学生起立一样，就像命令一个人一样，让人厌烦。

• 不用提供窗口错位重置功能

用户自己会在现实场景中走动。所以确实会出现应用窗口相对于用户最佳体验位置来讲有点歪了。这时候不用监督用户状态 和 设计应对策略。Apple Vision提供了表冠按钮按下重置窗口的功能，从系统级保持了用户交互的统一性。

2.3 巧用空间维度 Dimensional

空间 Space

是高手要会玩转用户空间 Take advantage of the space ，包含现实空间与应用空间。

• 不要被用户的现实空间限制

用户的现实空间是有限的，可能是在一线城市几千块钱租一个几平米的卧室。但是Apple Vision 应用空间是无限的。要敢于提供超过现实空间限制的内容。

• 使用窗口模式时，visionOS会帮你解决辐辏问题

当用户使用窗口模式时，用户把窗口移动到了现实空间的椅子和桌子等空间上。visionOS会在用户移动窗口时，保持用户看到虚拟物体和现实物体同时可见，虚拟物体让步于现实物体被穿透。而当用户释放窗口后，visionOS就会以窗口优先，让窗口被遮挡的部分优先展现出来。最后由窗口的毛玻璃透光保持现实物体的部分可见的方式融合。所以不用担心窗口会因为现实场景的辐辏问题而影响用户体验。

• 使用聚焦模式帮用户集中注意力

如果你需要用户把注意力全部集中到窗口上，可以使用聚焦模式，这时候屏幕就没有毛玻璃效果，窗口在最前方。人眼对明暗的感知远超颜色，聚焦模式通过降低现实场景的入眼亮度，可以非常有效的提升用户对窗口的注意力。

• 使用VR模式完全屏蔽现实空间的干扰

VR沉浸模式可以认为是聚焦模式的加强状态，通过完全屏蔽用户现实空间，进而发挥应用对空间的最大改造。这个在下一节具体讲。

深度 Depth

尝试用深度来强化内容。

• 善用深度来构建应用的层级关系 Create hierarchy with depth

在这个电视应用上，节目进度控制栏放在屏幕前面，虽然比屏幕小，但是用户还是能够立即这个控制栏管理着屏幕内容。如果把控制栏放回屏幕，那就太大了，显得用户不容易控制似的，降低用户体验。

用光线和阴影强化深度信息

• 通过光线反射和漫反射强化物体深度信息

正如电影荧幕模拟影院效果时，投影仪照射在白幕上就会出现光线的漫反射，所以在地板和天花板上就会有光影，这些光线反证了物体的空间位置。如果面前的桌子有很强的镜面效果，也可以通过镜面反射，加强用户深度认知。当然visionOS都已经提供了这些能力。

• 通过投射阴影强化物体的深度信息

如果使用点光源和平行光，现实中物体都会投射影子。正如光线的漫反射一样，影子同样反证了物体的存在。所以窗口就会有影子来加强空间存在感，也就有深度信息。当然visionOS提供了这种能力。

善于使用微妙的深度关系 Prefer subtle depth

• 用深度实现用户对内容的聚焦

就像应用的弹窗一样，可以把当前的窗口向后移动，弹窗出现。以实现用户把用户视角移到弹窗的过度，让用户聚焦到新内容上。

• 避免过度使用深度设计

用户注意力往往只能集中在一点上，元素没必要全都是深度设计的，以免分散用户注意力。还有如文本内容就没必要用3D的，影响用户切换视角后的阅读效率。

比例 Scale

要敢于尝试不同的比例和深度！

• 把物品做的比现实更小，让用户觉得轻便

一个小的屏幕放在桌面上，可以降低用户注意力的负担。例如音乐APP在PC上最小化成控制bar。

• 把物品做的比现实更大，让用户觉得震撼

一个放大的物体会让用户觉得十分震撼，例如关公提起40米的大刀，在房间中的霸王龙。

• 把物品还原成现实比例，让用户觉得真实

购物APP就可以提供原有物品的大小，让用户可以在现实中对照。甚至直接试衣，以提升用户选择效率。

2.4沉浸模式的设计思路 Immersive

灵活使用沉浸模式 Immersion spectrum

• 每个应用程序都有3种沉浸模式：窗口模式，聚焦模式，VR模式

虽然visionOS只命名了两种模式Shared Space 和 Full Space，但实际从用户角度来看就是3种模式。窗口模式就是多个应用共享一个空间，就像PC的桌面一样。聚焦模式就是让一个应用独占这个空间，并且能够降低现实空间的存在感，就像PC的全屏。VR模式可以认为是聚焦模式中，把现实空间存在感降到完全用虚拟空间取代，因为苹果希望通过表冠旋钮渐进式切换，所以两个就并称Full Space，但是我觉得后者叫VR模式挺好的。

• 用窗口模式让用户保持协作效率

窗口模式可以同时运行多个应用，就像我现在写文章一样。需要打开doc、查看原文、同时搜索尚未理解透彻的信息，一共3个窗口。通常我还会播放bgm给自己打气，挂着微信方便回消息。而这些软件的协作可以在窗口模式Shared Space下一起提供给用户。

• 用聚焦模式让用户集中注意力

当用户需要更加沉浸一点的体验时，就会进入聚焦模式，就相当于电脑应用程序的全屏模式。在这个模式下，通过降低环境光亮度，应用独占窗口，让用户对当前内容保持专注。

• 用VR模式让用户身临其境

一般来讲聚焦模式已经足够沉浸，非必要不用开启VR模式。除非VR模式内容就是你产品核心体验之一，例如你是一个文旅APP，当用户查看一个景点的时候，最佳的方式就是把用户带到这个景点先看一下。那就大胆的使用VR模式吧。再如，你需要练习产品发布会的演讲，那就可以用VR模式切换到大剧院的场景中，让你提前熟悉环境，以免真的到现场了紧张。

• 用户现实场景可以被认为是一种特别的VR模式

虽然Apple Vision花费了巨大的努力让用户觉得通过眼镜看到的现实世界和实际看到的几乎无差别。但实际上用户通过眼镜看到的现实世界一直都是VR构建的。因为用户始终保持在VR模式下，所以哪怕不给用户切换新的VR场景依旧有很多内容可以做。例如把用户的一面墙做成面朝大海的落地窗，把AR物品投射在桌面上，往房间里加一个虚拟橱窗摆放商品等等。

Full Space模式下的设计技巧 Essential tips

• 学会正确引导用户注意力  Guide people's focus

用户使用空间APP一定会面临注意力分散的问题，所以通过交互设计引导用户注意力非常必要。拿正念APP举例。刚开始就正前面有一朵花，让用户只有一个注意点。同时给这个花加上声音，加上动效，加上丰富多彩的颜色变化，把用户的注意力集中过来。随着用户进入正念状态，用户不再关注现实中的物体，转而进入一种关注自身感受的状态。那么就让花瓣四散分散注意力，现实中没有注意力焦点，用户就会关注回自身的感觉。

• 让产品内容尽可能和现实空间融合 Blend thoughtfully with reality

如果你是在VR模式下，那么就可以考虑通过用户现实空间锚定来设定产品内容。例如用户有张宽敞的桌面，那就可以把部分物体放到桌面上。用户有一面白墙，就可以尝试把屏幕边框和墙面对齐。

而这些BR（Blend Reality）内容过渡一定要平滑，不要让用户觉得割裂。上述提到的边框渐变、边角虚化、物品边角契合，光线漫反射，毛玻璃底色等等都是平滑过渡的效果。

如果你使用VR模式，天空盒最好也契合内容，或者直接契合用户现实环境光照状态。

• 让APP构建的内容栩栩如生 Make things feel alive

一些简单的动画就能明显增加场景活力，例如动态水流波光粼粼，动态天空盒带来的云彩飘动，给模型加上idle动画，给光线加上节奏性闪烁。

• 学会用声音营造氛围 Create atmosphere with sound

因为Apple Vision对于空间音频的良好支持，可以让声音准确的标记到空间的物体上。所以不仅可以在产品内容上给一个物体挂载声音，同时也可以创造立体环境声。具体使用方式会在后面的文章详细介绍。

• 抓住设计核心内容，而不是啥都做 Do more with less

设计中尽量避免什么都要的情况，都是重点就等于没有重点，做好基础设计的价值高于花式炫技。除非炫技就是你产品的核心竞争力。例如在AppleTV应用中，用好空间音频，屏幕光线漫反射，层叠式窗口控制栏，一个纯黑天空盒的VR模式，就已经完成了这个场景的设计。再多可能反而会干扰用户注意力。

提升用户体验 Comfort

提升用户对产品的掌控感，就能让用户保持安全感。

• 避免让用户大幅度运动

如果你的产品必须要用户移动，可能是走进一个物体或者走到标定位置触发流程，就一定要避免距离远、速度快的运动。这种方式会非常干扰用户集中注意力，就连日常生活中，经常也有人起身走两步就忘了自己要做什么。

• 在用户运动时暂时退出VR模式 Fade out content in motion

当用户小幅度移动时，系统就会自动帮用户渐变式由VR模式 变为类聚焦模式，帮助用户看清周围的环境，以免和现实物体发生碰撞。同时，系统在用户进入VR模式后会自动形成150cm的安全区，当用户离开安全区，就会自动退出VR模式。

• 开启和关闭VR模式需要有醒目的按钮和提示

未知的事物让人觉得不安，安全感来源于用户对现实的掌控感。在VR模式下整个环境都变成了虚拟的，所以用户就会处于一个未知的环境，这会让用户觉得不安全。所以有必要让用户手动点击按钮来进入VR模式，让用户意识到自己将要进入一个陌生的环境，以提升用户使用频率。同时更重要的是提供醒目且便捷的关闭按钮，避免用户失去对环境的掌控感，导致直接退出应用程序，甚至直接摘掉头显。

2.5实操思路：整体设计空间APP Authentic

• 确认你产品的核心价值

毋庸置疑产品体验是互联网产品的一个核心竞争力，但是一个健康的公司核心是它的商业模式。所以平台型的产品一定是解决用户问题，提供核心价值。仅仅依靠产品形式的提升很快就会被别人抄走。

• 将基本功能进行Apple Vision平台适配

正如Photo一样，原版在iPhone上，有底部的导航栏。在图库中提供了基于年月日的筛选功能，这些都可以在visionOS中使用左侧导航，底部筛选的方式提供。只需要进行功能结构的适配和跑通。

• 尽快探索出产品的沉浸式玩法

想要在一个新的平台脱颖而出，就要尽快使用上这个平台提供的新特性，能够灵活使用空间玩法和沉浸式玩法的产品会更快进入用户眼球。例如「无边记」应用能够给用户提供一块无限空间画布，极大的丰富了用户的创作自由，让用户能够专注在创作本身。这就是「无边记」的沉浸式玩法和用户价值。

又如Photo应用，用户查看某张照片的时候，希望看到更多的照片细节，所以就可以使用类聚焦模式进行放大。让用户专注到内容欣赏，同时挥挥手就能切换照片。

• 找到产品的“啊哈”时刻  Find a key moment

你可能已经有一个成熟的产品了，现在就是把产品移植到Apple Vision 平台上，所以一定要找到一个体验的关键时刻，让用户觉得空间设计有意义，要么提升效率，要么提升体验。

以Apple Photos举例，更大的屏幕和展示效果这是平台带来的，并不会有其他差异。但是在浏览全景图的时候使用聚焦模式，将全景图环绕用户。这种体验只能在visionOS上，当用户首次体验时，会发出“哇哦！”“卧槽！牛逼！”的感叹。那么你这个产品体验就是独一无二的，让用户牢牢的记住你的产品。

• 如何探索自己产品产品“啊哈”时刻？ （个人观点）

首先探索一下你产品在使用过程中是否有需要元素以立体式呈现的需求点。例如购物类APP物品展示。

然后探索一下你产品在使用过程中是否有需要元素以不同比例的形式呈现。例如视频播放的大屏幕。

如果你的APP是工具类产品，那你考虑一下是否能够通过多窗口，聚焦模式等帮用户提升使用效率？例如浏览器往往要开很多窗口，社交聊天软件也是需要多个窗口。

如果你的APP是体验类产品，那你考虑一下是否能通过改造用户现有空间，或者直接创建一个虚拟空间，让用户获得更加真实的场景体验。例如旅游类APP

如果你的APP是分享类产品，那你可以考虑一下能否通过VisionPro拍摄的立体视频，让其他人以作者的视角共享感受。例如Vlog分享短视频。

3.个人说明

我个人觉得用飞书写文档和阅读文档都比较方便，所以最后提供飞书的原稿地址，大家可以针对每一句进行评论讨论，互相学习。https://lovny4olg5.feishu.cn/docx/LR49ddNjVohHkKxkWz3cVV6anOe?from=from_copylink

微信公众号：九棱镜的笔记

个人微信：likangmax（添加请说明来意）