这是苹果 WWDC 23 关于如何进行空间界面设计的一个讲解视频，主要聚焦设计师将学习如何把基于屏幕的 UI 设计知识，迁移并应用到 visionOS 的空间计算应用中。视频会讲解界面组件、材质以及排版规范，并带你了解那些熟悉的界面元素，如何在沉浸式体验中发生演变。以下是视频视频内容的中文译文版，文末为中文译注版视频详情。

大家好，我是Miquel Estany Rodriguez。大家好，我是 Lorena Pazmino，我们都来自 Apple 设计团队。今天，我们想和你聊聊如何为空间用户界面做设计。为了帮助你在这个平台上顺利起步，我们构建了一套视觉语言。它既延续了 Apple 现有平台的一致性与熟悉感，也针对沉浸式与空间化体验，对部分元素做了进化。

首先，我们会从 UI 基础开始，讲讲在设计App 图标与界面时，需要考虑哪些原则，才能让它们在环境中清晰可读、易于使用。

接着，我们会介绍关键概念和最佳实践，帮助你做出既符合人体工学、又容易操作的布局。最后，我们会带你看看这个平台如何把你的 App 从屏幕体验带入空间体验，并逐步介绍系统组件。其中大多数你已经很熟悉，也有一些是全新的。现在，我们先深入看看 UI 基础。这一部分会介绍几条核心设计原则。先从 App 图标说起。

1. App 图标

我们希望主屏幕仍然保持熟悉感，同时更进一步，让App 图标在你的空间中呈现三维且真实的效果。当人们注视这些图标时，它们会展开。系统还会加入镜面高光和阴影，强化图层之间细微的纵深感，从而增强这种视觉效果。

那么，怎样才能设计出优秀的图标呢？首先，尽量使用多层结构。在其他平台上，图层通常用于制造视差效果。而在这里，即使只是使用平面图层，系统也能生成真正的 3D 效果。

所有 App 图标最多可以包含三层，包括一层背景，以及上方最多两层前景。

每一层都是 1024×1024 像素的正方形图像。两层前景都应使用透明背景。背景层应设计成铺满边缘的正方形图像。

随后，所有图层都会被圆形蒙版裁切。

最后，当这些图层叠合在一起时，系统会自动加上一层玻璃材质，为它们带来深度、高光和阴影。

尽量让图形内容保持居中。如果元素离边缘太近，图标展开后看起来可能会偏心。避免大面积使用半透明像素。透明度较低的图层会与背后的投影混在一起。

这样，你就能相对轻松地做出三维感的 App 图标。接下来，我们来看看材质。

2. 材质

当用户点按你的 App 图标时，App 可能会在很多不同环境中打开，比如明亮的白天房间、飞机这样的狭小空间，或者夜晚场景。因此，App 需要能够适应周围环境中的光照条件。它应该容易放置在你周围的空间中，在不同距离下都易于使用，也能在各种光线条件下清晰可见。这也正是我们设计出全新视觉语言——玻璃材质——的原因。

这种由系统定义的精美玻璃窗口，会让界面仿佛成为物理世界的一部分。它独特的属性能让周围环境中的光线，以及虚拟内容，从中自然透出。此外，镜面高光和阴影还能强化它在空间中的尺度感与位置感。同时，它还充当了界面内容的承载画布，让 UI 显得更轻盈，也更具实体感。这种轻量的材质，还会让人隐约感知窗口背后可能存在的内容，例如其他 App 或人物。

要打造优秀的空间体验，感知并尊重周围环境非常重要。尽量不要在窗口上使用纯实色。过多不透明窗口会带来压迫感，也会让界面显得沉重。玻璃材质会动态响应光线，自动调整对比度与色彩平衡，让界面真正融入你的空间，就像这里从白天切换到夜晚时所展示的那样。与 iOS 和 macOS 不同，这个平台没有明确的浅色模式或深色模式。相反，当玻璃和界面出现在浅色或深色背景前时，它们会自然自适应。系统提供的鲜活材质很好地利用了这一点，确保你的App 在不同场景和光照条件下都拥有出色表现。我们来看看它们。

首先，从玻璃窗口开始。如果你想区分 App 中的不同区域，比如侧边栏，可以使用较深的材质。

如果想让交互元素更醒目，比如按钮，可以使用较浅的材质。

而像输入框这样的标准组件，你也可以考虑使用较深材质来提升对比度。这就是音乐 App 中所有 UI 元素搭配在一起时的样子。

可以看到，文本默认是白色。假设你想设计一个像这样的信息组合，并在其中加入一个较浅的按钮。把它放在玻璃材质之上会是很不错的选择。

如果你还想获得更强的对比度，可以在后面加一个较深的单元背景。

尽量不要把多个浅色材质一层层叠在一起，因为这会影响可读性并降低对比度。

下面我来讲讲字体是如何为这个平台做精准适配的。

3. 适配

为了保持熟悉感，所有字体样式仍然采用可跨平台使用的语义化命名。这些字体已经基于我们的点值单位系统进行了调校，确保在不同观看距离下都清晰可读。如果想了解更多，可以查看《Principles of spatialdesign》这场分享。我们还调整了部分字重，以进一步提升可读性。我们来仔细看看。为了提升文字在鲜活材质上的对比度，字重被适当加重了一些。例如，在 iOS 上，正文样式通常使用 Regular。而在这个平台上，我们会使用 Medium。标题方面，我们也会把原本的 Semibold 改成 Bold，以便在任何时候都保持清晰。

因此，字间距也略微增大了一些，以帮助阅读。除了跨平台共用的那些熟悉字体样式之外，我们还新增了两种全新的字体样式，以充分利用这种更宽、更具编辑感的布局方式。

这里是 Arcade 中 Extra Large Title 1 的示例。很酷吧？

即使窗口可以放大到非常夸张的尺寸，自定义的小字或较轻字重的字体仍然可能难以辨认。想改善这一点，可以考虑增加字重，或者使用专门为高可读性优化过的字体，例如系统字体。接下来我们说说鲜活效果。

4. 鲜活效果

这是确保整个系统可读性的关键细节之一。鲜活效果会提亮显示在材质之上的前景内容，它通过把后方的光线与色彩提取并推向前景来工作。在这个平台上，由于背景会不断变化，鲜活效果会实时更新，确保文本始终清晰可读。为了说明这一点，我们来看一个例子。鲜活效果作用在玻璃材质之上，既提升了可读性，也让系统材质显得更丰富、更精致。因此，能用系统组件时，尽量优先使用系统组件。默认情况下，它们都会自动利用鲜活效果。

我们先暂停一下，把鲜活效果关闭。正如刚才看到的，鲜活效果会同时提升可读性和材质表现。我来回切换一次，让你更直观地看到差别。

接下来看看如何有效利用它。可以用鲜活效果来体现文本、符号和填充层级。它一共有三种模式：Primary、Secondary 和 Tertiary。Primary 适合标准正文。Secondary 适合说明文字、脚注和副标题。

前面你已经看到，玻璃材质会根据背后的内容呈现出不同颜色。如果玻璃颜色和前景彩色元素过于接近，这些元素就可能难以辨认。因此，大多数情况下，优先使用白色文本或白色符号，以确保始终清晰可见。如果确实需要使用颜色，最好把它用于背景层或整个按钮，这样用户会更容易看见。

在可能的情况下，请优先使用系统色，而不是自定义颜色，因为系统色已经针对玻璃上的可读性做过校准，并且会动态调整色相与对比度。

以上就是我们为空间平台核心组件所做的设计原则与调整，包括材质、字体和鲜活效果，它们会让你的 App在这个平台上表现得更出色。接下来我把内容交给 Lorena，她会带你看看如何做出符合人体工学、又容易操作的布局，帮助你的 App 从屏幕体验过渡到空间体验。

洛雷娜：谢谢你，Miquel。我们先从内容如何摆放更舒适开始讲起。然后看看内容应如何设定尺寸，才能更容易被选中。最后，再介绍如何设计布局，来配合我们全新而优雅的视线焦点反馈。

5. 人体工学

由于在这个平台上，人们主要通过眼睛和双手与内容交互，因此创建体验时必须把身体舒适度与安全性放在优先位置。比以往任何时候都更需要考虑设计的人体工学，确保内容的位置安排是有意为之的，不会造成眼部或颈部疲劳。

例如，由于颈部活动范围的特点，大多数人向左右转头通常比向上或向下更轻松。因此，请尽量把 UI 保持在用户视野范围内，避免把重要内容放得过高或过低。

如果你的 App 需要一个较大的画布，优先选择更宽的纵横比，而不是更高的比例。例如在 Freeform 中，画布是横向延展，而不是纵向拉长。

还应优先把最重要的信息放在 App 中央，方便用户舒适地浏览。讲完内容摆放后，我们再来看内容尺寸。

6. 尺寸

每个人的身体条件都不同，眼睛也会有细微差异，因此界面元素必须采用容易被选中的尺寸。下面来具体看看。所有交互元素都必须至少拥有 60 点的点击目标区域，这样用户才容易选中。

这意味着，界面元素的视觉尺寸可以更小，例如标准按钮本身只有 44 点，只要你在四周留出足够的空间即可。

所以，像这个按钮一样，周围始终至少要保留 8 点空白，才能满足 60 点目标区域的最低要求。

有一个简单的记忆方法：如果要垂直堆叠多个按钮，请使用标准系统按钮，并保证它们之间至少有 16 点间距。

再比如，如果你需要使用视觉上更小的元素，比如disclosure control。你可以在节标题这样的区域里使用 28 点的迷你按钮。虽然这个按钮看起来很小，但由于它周围保留了 60 点的空间，所以依然很容易选中。

我们再看一个例子。这里，这个按钮依然有足够的空间，因为旁边的文字并不是可交互元素。

同样地，较大和超大按钮由于本身尺寸更大，对周围间距的需求会更低。

所以，请始终记住，所有交互元素都应至少拥有 60 点的可点击空间。

7. 焦点反馈

讲完布局中的元素尺寸后，我们再来看看焦点反馈。焦点反馈是这个平台内建于每个交互元素中的强大能力。当用户注视系统提供的组件时，它们会自动显示一种轻微提亮的视觉效果，也就是悬停效果。这种悬停效果能让用户仅凭注视，就知道界面中的哪些部分是可以交互的。

而当某个项目变为不可用状态时，比如 Share 按钮，它就不会再提供焦点反馈。

这会让用户更有把握，知道自己当前注视的是正确元素，也就能通过手指点按来完成选择。因此，在设计布局时，务必要把悬停效果考虑进去。

例如，当你设计列表或菜单时，需要在每个项目之间留出少量内边距，避免悬停效果互相重叠。

推荐值是 4 pt。在设计一个信息组合时，要加入一个形状区域，让系统能在用户注视时显示悬停效果。

这里我们看到的是一些图片，下方带有文字。每一个组合块都是单一的交互元素。因此你需要定义一个自定义区域，让它在用户注视时整体提亮。这能帮助用户理解，整个区域其实是一个可以被选择的单一元素。

同时也别忘了，在每个包裹形状之间保留那一点点间距。

还要注意，嵌套元素之间应具有相对协调的圆角半径和内边距，从而保持彼此同心。

为了帮助你确定圆角尺寸，可以使用这个简单公式。嵌套元素的圆角半径，加上它与外层容器之间的内边距，就等于外层容器的圆角半径。

同时请记得，为了让圆角过渡更顺滑，圆角样式应设置为 continuous。

在整个系统里，每个元素都遵循同心关系，最基本的例子就是窗口与角落元素之间的关系。所以，请让嵌套元素彼此保持同心，这会让它们看起来更协调，也更像属于同一个整体。现在我们已经讲完布局的最佳实践，接下来就来仔细看看你会用到的系统组件。这一部分会展示如何把你在现有平台上的经验迁移到空间计算环境中。我们会先快速概览输入模型，然后深入看看如何用窗口、标签栏和侧边栏构建 App 的核心结构。

接着，我们会介绍一种全新的内容呈现方式。最后，我们再看看不同的模态形式。先从输入方式开始。

正如前面提到的，在这个平台上，人们会用眼睛、双手和语音与设备交互。他们主要通过注视元素并用手指点按来完成操作，而且通常是在一定距离之外进行。

当然，用户也可以直接伸手去触碰元素来选择它。

此外，还可以连接键盘或触控板，以更多样的输入方式与系统交互。

这种交互方式会带来非常神奇的体验，但也意味着界面元素必须针对每一种输入模型提供恰当反馈。我们的系统组件都已经为这些输入方式做好支持，所以，请尽量使用系统组件。它们能帮助你更快搭建界面，让你把更多时间投入到真正体现 App 独特价值的部分，也就是这个新媒介中的差异化体验。如果想进一步了解输入方式，请查看《Design forspatial input》这场分享。下面我们来看一些例子。

如果你熟悉 iOS，这个平台上的许多组件都会让你感到熟悉。先从窗口、标签栏和侧边栏开始。

我们先看 iOS App 的核心结构。你需要一个窗口，它拥有不透明材质，并为所有元素提供承载画布。正如 Miquel 刚才所说，窗口由玻璃材质构成，下方还有一个 window bar，用户可以借此把 App 流畅地移动到自己的空间中。类似地，在窗口上方就是你的内容区域。

在 iPhone 上，窗口底部通常会水平放置一个 tab barcontroller，作为主导航，帮助用户通过一次点按快速进入 App 的顶层分区。

而在这个平台上，标签栏会垂直放置，并以悬浮形式固定在窗口左侧。它既尽量不打扰内容，又容易访问；需要时就在身边，让用户随时知道自己位于 App 的哪个位置，同时不会抢走主内容的注意力。

通常来说，这类导航应尽量保持轻量，因此最好不要超过六个项目。当用户注视标签栏时，就可以快速选择其中一个项目。

如果他们多看一会儿，标签栏会自动展开，显示每个分区的文字标签。当用户移开视线时，它又会自动收起，让人重新专注于内容本身。

如果你还需要提供次级导航，比如这个例子中的专辑层级，侧边栏就会位于窗口内部，与标签栏并存。这样能让用户更清楚地知道自己在当前标签页中的位置。

讲完 App 的核心结构后，我们再来看一个新加入的呈现方式——ornaments。

在照片 App 中，顶部中央有一个悬浮辅助控件，用于在年、月、日之间切换浏览。

而在这个平台上，由于我们不再受屏幕边界限制，这个辅助控件会作为 ornament 放在窗口前方、底部略微靠前的位置。

这样就能为用户提供额外且持续可用的控制项，并通过纵深关系建立层级感。Ornament 也是展示工具栏的一种很棒的方式。它能让用户在方便的位置快速执行与当前内容相关的操作。同时，它还会为你的 App 增添一些空间层次。

由于 ornament 通常由一组按钮组成，并且本身位于独立的玻璃容器中，因此这里非常适合使用无边框按钮。

在这种情况下，交互性会非常明确，而且当用户注视这些按钮时，它们依然会显示悬停效果。音乐 App 里还有一个 ornament 的优秀示例。Now Playing 控件会以 ornament 的形式持续存在，无论用户当前在 App 的哪个位置都能看到。这让用户可以一边寻找下一首歌，一边控制当前播放内容。

当 ornament 放在窗口底边时，建议让它与底边重叠20 点。这样既能让 ornament 看起来更像是主窗口的一部分，又不会遮挡太多内容。而且，当你滚动内容时，透过玻璃带出的颜色过渡也会显得非常漂亮。

Ornament 也可以完全出现或完全消失。不过，只有在用户聚焦于单一内容时，才建议这样做。例如查看一张照片，或者观看一部影片。就像这个例子中，只需一次点按，我们就能在不打扰主体验的前提下，为用户快速呈现重要控制项。此外，ornament 还可以展开，显示更多内容，甚至拥有自己的导航层级。

因此，试着在你的 App 中找到 ornament 合适的位置。它非常灵活，能在不遮挡内容的前提下为 App 增加层次深度。

讲完 ornament 后，我们再来看菜单、popover 和sheet。在 iPad 上，菜单会与触发按钮的前导边对齐，而按钮会在菜单打开时变暗。Popover 会指向触发它的元素，而导航栏则会变为不可用状态。

在这个平台上，菜单和 popover 可以扩展到窗口之外。它们默认会居中出现，确保内容始终出现在用户注视的位置。

有一点必须时刻记住：触发它们的按钮要切换到selected 状态。

在这个平台上，我们始终使用白底黑字来表示按钮已被选中。这样一来，即使没有箭头提示，用户也能清楚知道究竟是哪个按钮触发了当前的 popover。作为这个平台的一般规则，除非按钮处于选中状态，否则尽量不要使用白色背景按钮。

最后，我们来说说 sheet。在这个系统里，sheet 以模态视图的形式呈现，并显示在 App 中央。模态视图与父窗口处于相同的 Z 轴位置。父窗口则会被向后推移并变暗。这样可以让用户更专注于当前体验，也能避免他们在sheet 关闭前继续操作父视图。

如果还需要再展示一个 sheet，前方可以再叠加一个次级模态层，同时增加一层变暗效果，把其余内容继续往后推。

我们再从侧面看一次。

由于这些元素都是沿着 Z 轴叠放的，因此对于嵌套视图，更建议使用 push navigation。这是一个在模态视图中使用 push navigation 的快速示例。次级视图会显示返回按钮，而不是关闭按钮。

还要注意，关闭按钮和返回按钮都位于左上角。作为系统模式，关闭按钮始终应放在左上角。

米克尔：现在你已经理解了构建 App 和使用系统组件的基本方法，接下来就可以思考，你的 App 最特别的地方是什么，以及怎样利用窗口之外的空间去创造更丰例如在照片 App 中，我们保留了熟悉的浏览体验，同时重点打造了新的图像体验方式，比如 SpatialCaptures。它能让你以更具沉浸感的方式重温瞬间，

我们介绍了如何设计并开发出既易于访问、又熟悉直观的 App；如何使用能与周围环境融合的材质；以及如何构建能够利用不同深度层级的界面与丰富组件。它们不仅视觉上吸引人，也在这个新平台中保持熟悉、易用。我们的所有系统组件都已经针对丰富多样的输入方式做好支持，同时也与整个 Apple 生态保持一致性，因此无论你是设计师还是开发者，都可以把更多精力放在打造突破性的沉浸式体验和空间体验上。感谢观看。

8. 完整视频