前言

关键词：空间设计原则、Apple Vision Pro、WWDC 2023、visionOS、窗口 window、空间 space、沉浸immersive。

本文写于2023/06/13，共3500字，预计阅读时长

WWDC2023 Principal of Spatial Design 翻译整理版，内容按照个人理解进行了一定的删减，仅供学习交流使用。本课程为 WWDC 2023 中关于空间设计的一部分，后续我将继续更新 WWDC 上 visionOS 的内容。感兴趣的同学可以关注等待更新，或去查看原视频内容。

Principles of spatial design 空间设计的原则

探索空间设计的基础知识。学习如何运用深度、缩放、窗口和沉浸感进行设计，并应用最佳实践来创造舒适、以人为中心的体验，用这种体验改变现实。了解如何利用这些空间设计原则来扩展您现有的应用程序或将新的想法付诸实践。

Familiar 熟悉的界面和交互

这一章节讨论的是 visionOS 如何给用户带来用户界面的熟悉感。

这是一个正常 iPad 版本上的 Apple Music 应用，它由侧边栏（Side Bars）、侧边栏选项（Tabs）、搜索框（Search Fields）等组件来让用户找到音乐。

那么在 visionOS 这个空间交互平台上，人们应该能同样可靠的找到音乐。用户应该了解这些界面的元素并且知道如何使用。

苹果选择使用窗口为媒介放置界面，因为用户可以舒适的看到并使用窗口。

人们对应用窗口（App Windows）很熟悉，但是在 visionOS 这个平台中，窗口放置于你的空间中，像是你周围环境的一部分。

Windows

Windows窗口

全新的视觉语言

毛玻璃材质，提供了与背景世界的对比，让人们也能更多的注意到周围的环境。

毛玻璃材质会针对不同的环境进行自适应变换。

值得一提的是，这种毛玻璃效果将是系统原生提供的，不需要开发者进行调整，只需要调用即可，不过目前尚未知道第三方是否强制使用这种面板材质。

窗口基础操作：移动窗口、关闭窗口、调整窗口大小

移动窗口的提示条（window bar）位于窗口正下方居中的位置，形态上类似于 iOS 和 iPadOS 上的全面屏导航条。

拖动窗口提示条（window bar）可以移动窗口到任何位置（如上下左右），但是窗口总会调整角度来朝向你，这样让界面易于使用和阅读。

关闭窗口的提示在激活前是一个小圆点，激活后则变换为关闭图标。

调整窗口大小和 iPadOS 上台前调度的调整方式类似，激活时在窗口边缘会显示小圆角线条。

Sizing 尺寸

如何为空间的窗口选择合适的尺寸。

窗口的设计目标是舒适的适配人们的视野，但是窗口是非常灵活的，可以拉伸成任何尺寸。

基于内容选择合适的窗口大小。

以 visionOS 中的 Safari 为例，它的窗口高度是为了让人们看到更多网页。

而 Keynote 很宽，适配全尺寸的演讲。

在窗口外使用选项卡栏（tab bars ）和工具栏（tool bars）

就像这里在 Apple music 中一样。这些控件总是可以随时使用，并且为内容让出了更多的显示空间。

或者使用多个部分将控件和内容分开，就像 Safari 一样，将导航栏（Navigation bar）和网页内容分开，让网页成为焦点。

窗口也可以改变大小，Safari 的侧边栏（Side bar）可以从左侧扩大窗口显示。窗口大小改变最好基于上下文交互设计。

同一个 App 可以打开多窗口

这种多窗口可以是一次查看多个网页，可以是显示要一起用的不同功能。

如 keynote 使用演讲者模式播放时的设计，幻灯片在一个又大又远的窗口中，而演讲者的控制视图在一个比较小但近的窗口中，这个窗口还可以任意移动位置。

在理想情况下，App 应该还是存放于一个窗口中。因为窗口快速增多会增加人们对窗口的管理和认知负担。

Points

为了让我们的界面能够在缩放时表现良好，需要使用点(point)来设计。

点是设计中界面元素大小的基本单位，用来适配其他屏幕大小和平台。

在 visionOS 中也是一样的，用点设计让Ui可以在任何距离上工作。

Human-centered 以人为本的

Field of view 视角

把重要内容放在视角中心。

使用景观布局 (Landscape layout)

Safari的例子，查看全部网页时，使用了一个网格布局。这个布局很宽，以配合人们的视野。

Ergonomics 工效学

在各个维度上恰当的放置物体。

默认情况下，窗口沿着自然视线放置。

大多数时候，需要把内容放在离人们远一点的地方。

内容锚定在人们的空间中而不是跟随人的视角移动。

movement 移动

建议创造需要最少运动的静止体验。

除非这是你应用的核心体验，否则应该能在静止状态下体验一切。

用户移动到一个新位置或按住数字表冠重新进入时，重新定位应用程序的内容全部依靠系统能力。

Dimensional 多维的

Space

设计你的App适应任何空间大小。

你不用担心界面如何融入空间，系统会自动处理。这里右下角的椅子系统做了一些微妙的处理。

暗色调光是一种简单而强大的方法来最大化空间。

你也可以创造超越生活的体验，如创建一个沉浸式的电影院。

Depth

深度是一个新的变量，它是一个强大的工具，用来区分层次结构和焦点。

如播放控件，这样距离人近的元素可以保持较小的尺寸，但在视觉上仍然优先于远处的大物体。

使用光和影作为线索来强化深度。

如发光的物体应该在附近的其他物体上反光。如这里的地面被正在播放的视频照亮了

App 中的任何自定义对象也应该投下阴影。

轻微的深度能更好的表现空间感

并不是所有元素都适合深度，比如文本就应该保持平坦。

Scale

小物体感觉个性化和轻量级。

大物体令人印象深刻

有些物体最好在真实生活的尺度上观看，更符合人们的一贯认知，如鞋子。

Immersive 沉浸感

immersive spectrum 沉浸光谱

Shared Space，在共享空间中与其他App共享空间。如图第一种。

Full Space，隐藏其他应用程序的完整空间。如图示后两种。

建议App首先从共享空间中启动，让人们控制他们想要的沉浸程度。

例如Keynote，有三种沉浸模式同时存在。第一种是共享空间中的默认浏览模式。

聚焦模式：使用调光来凸显幻灯片主体。

幻灯片排练模式：来到了完整空间，来到一个沉浸的大剧院。

完整空间也可以不把人带到一个新地方，也可以是存在于本身的空间中。如图片的查看

沉浸的应用程序也可以感觉到人和物理环境的联系。如下方的hello投下的阴影。

Essential tips

引导人们的注意力

正念App通过运动和调光吸引你的注意力。结合空间化的多样材质、音频，更好的引导你的注意。

深思熟虑的与现实进行融合

把整个场景融入某人的空间时，需要柔和边缘的平滑过度。

让事情活灵活现具有活力

添加微妙的运动，可以把静态的东西转化为有生命力和动态的体验

用声音烘托气氛

Do more with less 化繁为简

你可以用很小的效果来创造很大的影响。如这个电影院的上下微妙光线和反光，没有必要追求过于真实的细节，而是去还愿场景的给人带来的感觉。

Comfort

退出时使用淡出效果

提供进入和退出沉浸模式要提供清晰的方法。如可识别的符号和文字。

Authentic

找到一个关键的时刻

一个空间或沉浸式的，只能在空间上体验的关键时刻

以照片为例，找到照片应该很容易。

但当你找到这张图片，并聚焦于此时。在这个逼真的尺度上看到它们真的很神奇。

对于全景照片，还有一个关键时刻可以带你回到那个特殊的地点。

为自己的应用程序中思考一个关键时刻。

利用人们周围的空间来创造真实的沉浸体验。

感谢你看到最后

相信你一定对 Apple Vision Pro 和 visionOS 很感兴趣，我创建了一个微信群叫 Byte Zone，供大家对这些超 cool 的产品硬件和软件进行交流，如果你感兴趣，可以微信扫码进群。相信有你的加入，事情会变得更有意思。

或者添加我的微信 mepolizhan 备注知乎～，拉你进群。

关于我

我是一名设计师，这里是我的一些介绍。

https://www.yuque.com/lizhan-vutje

相关链接

我的视频：

Developerdeveloper.apple.com/visionos/learn/

Principles of spatial design - WWDC23 - Videos - Apple Developerdeveloper.apple.com/videos/play/wwdc2023/10072/