设计出色的 visionOS App

原文

嗨，我是莎拉，一位设计布道者。您可能在过去一年中我们在全球举办的 Vision Pro Labs 中遇到了我团队中的一些出色的人员。我们的工作是帮助设计师和开发人员分享在 Apple 平台上构建的技术和指导。在本次会议上，我将分享 Vision OS 上出色体验的要素及其原因。您将看到来自与我们合作的少数开发人员的应用程序，我们认为这些应用程序拥有独特、深思熟虑、并提高质量标准。您甚至可以直接听到一些团队成员的见解和经验教训。我们有很多内容要介绍，所以让我们开始吧。

重要的是，您的应用或游戏的核心理念必须是有意为之并为平台构建的。所以我将从高层次开始讨论你们在 Vision OS 上的产品解决方案。然后我将解释拥抱沉浸式的含义，并展示在这方面表现出色的不同解决方案。Vision OS 的设计以人为本，以确保交互舒适，您的应用程序也应该如此。最好的应用程序是令人愉快的，因为它们实现了高品质标准并且对细节异常关注。首先，让我们开始探索 Vision OS 如何打开一个充满可能性的世界。

当我们第一次与团队合作时，我们鼓励开发者找到他们的关键时刻，这是针对 Vision OS 优化的应用程序中的时刻。正念应用程序是系统上的一个示例。这朵花有柔和的脉动，鼓励你呼吸和集中注意力。当花朵绽放时，给场景带来生机勃勃的感觉。这是只有在 Vision OS 上才能实现的体验。每个应用程序找到关键时刻的方式都会有所不同，但是让我们看一下团队为构建空间解决方案所采取的一些策略。一种方法是考虑您的应用程序如何使新事物成为可能。

JigSpace 是一款帮助可视化演示和宣传材料的 3D 资产的应用程序。看看这个喷气发动机。注意令人惊叹的细节水平，我如何查看内部的电线并逐个解构模型。作为基线，资产需要具有真实感和高度的视觉质量，才能令人信服和引人注目。为了让新事物成为可能，请将您的内容变为现实。考虑动画如何复制真实场景，就像您在进气风扇中看到的空气模拟一样，或者提供操作模型的方法，这在现实世界中是很麻烦的，比如把它们拆开，交换材料，或实时改变设计。伟大的解决方案需要时间来构建，它们是迭代和原型设计的结果。

这是Luna。iOS 应用程序提供优雅的动画场景，结合了放松活动、讲故事和氛围声音可以帮助您平静或入睡。将此 UI 引入 Vision OS 上的窗口体验是合理的，但是听听团队是如何处理它的。这是Sergei Gonchar，Luna 的联合创始人。

我们只是把自己置于这样一种心态，好吧，现在我们将构建很多原型，因为我们希望找到可以为这个平台塑造的最佳体验。- 看看他们的踏板车概念的早期草图。二维原型给人一种立体感。他们乞求被分成碎片来玩。这需要时间，但这些草图演变成 3D 模型，它有了自己的生命，充满乐趣，令人难以置信的细节，和微妙的动画。在 Vision Pro 上，Luna 是一款轻松的空间游戏，具有 3D 冥想谜题，可转变为充满活力的动画场景。本游戏使用所有标准手势。你点击拾取一块，将其悬停在该位置上，并将其释放到位。当你完成拼图时，场景就会变得栩栩如生，这感觉真的很有意义。这种方法与他们的 iOS 应用程序略有不同，但是互动元素和3D场景在空间平台上确实很有趣并且合适。

我要分享的关于有意体验的最后一个考虑因素是构建一些互补的东西。如果您的应用程序具有大量功能集，而这些功能集在平台上的相关性可能较低，那么这是一个很好的方法。劳氏公司就是一个很好的例子。他们的 iPad 和 iOS 应用程序充满了从库存到商店地图和产品计算器的功能。在 Vision Pro 上，他们构建了一款完全针对 Vision OS 定制的应用程序，称为 Lowe's Style Studio。您可以进入沉浸式 3D 厨房场景并自定义从后挡板到电器的所有内容。将这种体验带入虚拟空间可以更轻松地探索想法，探索不同产品组合在一起的效果，并完善您的设计方向和个人风格。他们通过跨平台的全面集成来完成消费者旅程。您的样式板可以跨设备保存以保持连续性。您可以在这里购买单件商品、检查库存、或在附近的商店查找产品。Jigspace、Luna 和 Lowe's 是非常不同的产品，但每个解决方案在将其经验转化为 Vision Pro 时都有着刻意的关注点。

他们的做法是有意的。在构建平台时，考虑使用 ARKit 和 RealityKit 等原生框架来充分利用设备功能。花一些前期时间来构建和测试想法，以了解您的应用程序如何在 Vision OS 上表现最佳。Vision Pro 上的优秀应用程序已经考虑了沉浸感的范围。有很多方法可以做到这一点。我将分享三个鼓舞人心的例子。沉浸式应用程序可以将人们带到新的地方，你可以完全沉浸地做到这一点。Fifth Star Labs 的 Sky Guide 在这方面表现出色。它们将您带到您自己的天文馆，当您凝视夜空时，星座就会变得栩栩如生。你可以选择世界上任何地点来观星，甚至可以看到北极光。您可以绘制天空中的星座以了解更多信息，或将双手用作双筒望远镜来仔细观察。伟大的环境复制了准确的深度和规模感，将您带入一个令人信服地再现可识别事物的空间，相关且真实。

但是请记住，自定义环境并不与 Vision Pro 上的每个应用程序相关，所以不要认为这是让人们沉浸其中的唯一方法。我发现这一点经常被忽视，但请考虑如何与人们的物理环境融为一体。让我们来看看Halfbrick的《超级水果忍者》。当你用手切水果时，注意果汁是如何溅落并滴落在墙壁上的，水果的残余物从真实空间的表面弹起。由于传感器和设备会扫描周围环境的墙壁和表面，这款游戏能够让人感觉超级灵敏、好玩，每次我使用它时都是独一无二的。他们还深思熟虑地考虑了他们的角色如何，像松露猪一样，在你的空间里与你互动。这是萨曼莎·特纳，超级水果忍者的首席游戏程序员。

他可以追逐草莓和水果。你可以和他玩接球游戏，拍拍他，而且他很好地融入了你的现实世界。我什至看到他在我床上的桌子上跳起来，当这种情况发生时真的很令人高兴。- 沉浸感就是探索如何让人们感觉自己是您的应用或游戏的经过深思熟虑的扩展。利用沉浸感的另一种方法是通过深思熟虑的声音设计来设计有意义的听觉时刻。为了阐明为什么声音可以成为一种沉浸感，首先了解 Vision OS 如何处理声音可能会有所帮助。传感器和设备了解您的物理空间的特征，喜欢房间的大小和材料。然后，该系统添加了混响，让您所交互的事物听起来就像真的与您在一起一样。这种复杂的识别水平和准确的播放使得 Vision Pro 上的空间音频非常强大。就像 iOS 上的触觉可以成为人们反馈的一种形式一样，将音频视为不仅仅是环境音乐，而且是引导的机会，鼓励和奖励人们。

一个特殊的例子是 Shapes and Stories 的益智游戏 Black Box。每个气泡都包含独特的谜题，利用设备的技术并鼓励您探索世界。这个游戏很有挑战性，有创意，如果你正在努力解决一个难题，有时有点尴尬。你必须尝试一下才能明白我的意思。声音基本上是体验的一部分。让我们听听 Black Box 的声音设计师 Gus Callahan 的意见。

在发出任何声音之前，你知道，我们如何将这种弹性转化为空间和体验的东西？所以我们希望声音能够随着它延伸，让玩家像乐器一样与它互动。当所有这些设计元素结合在一起时，你知道，您将非常接近一对一的感官体验。- 声音是一种让人们沉浸其中、让您的应用程序栩栩如生的好方法，并且感觉更难忘。Vision OS 的设计独特地考虑了输入、舒适度、和可用性。让我们讨论一下为什么这很重要以及如何将其应用到您的应用程序中。我今天分享的所有应用程序都需要最少的身体运动才能让人们享受它们。Vision Pro 是一种戴在头上并用眼睛控制的设备，并且您无法预测应用程序将被使用的物理空间。在《超级水果忍者》中，这种体验确实感觉很活跃，因为当我用手切水果时，我的身体参与其中，但它不需要一个人在他们的空间中行走。他们的游戏区域在地面上有这个几何指南，以鼓励玩家在游戏过程中留在这个边界内。我认为这是让人们知道不需要移动的一种非常聪明的方式。尽管 JigSpace 中的模型可以是真人大小的，就像这辆 F1 赛车一样，如果我愿意的话我可以绕着它走但我也可以缩小它，以防我的物理空间不允许我绕着它走动。

最大限度地减少人员流动是为了确保人们的安全，并了解人们的物理空间中存在您无法控制的变量。为了保持应用程序符合人体工程学的舒适性，最大限度地减少所需的窗口数量并保持界面的凝聚力。Vision Pro 上的出色应用程序是为无限画布而构建的。这个术语是对应用程序不再受屏幕尺寸限制这一理念的认可。这提供了更大的灵活性，但您仍然应该考虑一些防护措施，以确保您的应用程序具有凝聚力并避免混乱。应用程序的内容和 UI 应包含在窗口中。选项卡栏和工具栏等控件可以位于窗口之外，但它们仍然锚定在视图上。这可以让人们清楚地描述您的应用程序提供的内容以及如何导航其内容，使其在物理空间中重新定位和布置更加舒适。空间并不意味着按钮和 UI 应该任意漂浮在人们的视野中。

PGA Tour 是一款应用程序，它利用无限画布进一步完善了他们的解决方案，并设计了具有凝聚力的体验。应用程序的主窗口包含直播和锦标赛信息，并且体积代表击球轨迹的相应过程和重播。这很棒，因为该解决方案的核心是通过上下文增强来提供增强的体育娱乐。我还喜欢该应用程序不需要单独的窗口来显示此内容，这将导致观看者需要维护来组织和移动它们。这种锁定感觉有凝聚力并且易于管理。视觉舒适的体验是那些感觉是操作系统的一部分的体验，它的设计目的是与世界融为一体。就像窗户所用的玻璃材料一样，由于 Vision OS 上没有明暗模式的概念，眼镜通过系统进行渲染并智能地适应人们环境中的照明。我们与团队经常讨论的一件事是品牌主题。很少有公司像红牛那样拥有如此知名和成熟的品牌。我是凯利·菲茨杰拉德，红牛的高级产品设计师。所以在我们的电视和移动应用程序中，我们使用深蓝色背景颜色作为红牛电视的有凝聚力的品牌元素。然而，当我们开始适应 Vision Pro 时，传递开始发挥作用。所以在这种情况下，我们必须决定是否优先考虑突出的品牌元素或可用性。红牛电视应用程序选择通过其身份固有的高质量视觉图像来突出其品牌。但是当你滚动主视图时，窗口的其余部分使用玻璃背景，而不是纯色背景。寻找类似的方法来整合您的品牌，而不影响舒适性或可用性。在窗口上使用纯色背景可能会分散视觉注意力并且不舒服。它们不适应我们环境的照明，并且挡住了我们看世界的视野。这是红牛团队的另一个深思熟虑的方法。我们看到了一个机会，可以在图像加载时短暂地融入我们的深蓝色品牌颜色。正是这些小小的品牌时刻才能真正像滚雪球一样，描绘出更大的图景。

Vision OS 上的元素应具有悬停效果。这是一个亮点，可以为人们提供有关他们正在查看的位置的反馈。Carrot Weather 是一款让查看天气变得有趣且有趣的应用程序。该应用程序很有特色，并且在多个平台上精心制作。尽管该界面需要大量数据和信息，这个应用程序在正确使用悬停效果方面做得很好。每个具有交互性且具有详细视图的元素，与每小时温度一样，使用悬停效果。但是，要在黎明和黄昏时读取的详细信息等数据不需要悬停效果。并且拥有一个会使界面更加混乱和复杂。请记住，交互元素需要足够的点击目标，因此至少使用 60 点空间。如果悬停效果太小，人们可能觉得他们需要非常精确才能与您的应用程序进行交互，这变得令人沮丧和不舒服。当悬停效果设计得当时，他们给某人的互动灌输信心。

现在，我将通过一个应用程序更深入地分享卓越的工艺如何让人们感到高兴。这是 Vision OS 上我最喜欢的应用程序之一，DJ by Algorithm。令人愉快的体验符合我们对现实的期望并尊重我们的空间意识。DJ 正是人们对 DJ 应用程序的期望，完全真实的 DJ 设置，带有两个转盘供您录制唱片，配有唱臂和节奏同步。转盘放置在您面前伸手可及的地方，这迫使人们直接与他们互动。在这种情况下，您可以刮掉唱片，拿起唱臂，并以与使用物理转盘相同的方式滑动速度。我们期望物体和手臂的触及范围能够互动，因为它们离我们很近。在设计空间体验时，这是一个需要遵循的重要原则。让互动内容贴近人们，尽管他们可以将其重新放置在他们想要的任何地方或间接与之交互。我们对周围内容的认识也在很大程度上受到动画和动作的驱动。当您启动应用程序时，您需要做的第一件事就是选择曲目。注意音乐图标周围脉动的笔划轮廓。这是引导您点击音乐库的微妙方式。这是一个具有重大影响的简单细节。运动和动画是吸引人们注意力并让他们知道某些东西是互动的好方法，因为我们天生对它敏感和容易接受。

他们通过构建模仿现实世界的自定义手势，将交互映射到熟悉的体验。你见过 DJ 将耳机举到一只耳朵吗？他们正在做的是预览下一首曲目，为他们当前正在播放的歌曲之间的无缝混音做好准备。你猜怎么着？您也可以在 DJ 中执行此操作。如果你将一只手举到耳边，您将通过该扬声器听到即将播放的歌曲。♪ 宝贝，我可以独自在家里爱 ♪ 在这种情况下，您不需要佩戴实体耳机。该手势只是模仿这种熟悉的提示音频动作。但是翻译这段经历提出了一些有趣的挑战。他们意识到必须考虑误报，例如，当有人举手固定头发或调整 Vision Pro 上的带子时。Algorithm 的首席执行官兼联合创始人卡里姆 (Karim) 是如何解决这个问题的。

这需要大量的用户测试，我们必须收集反馈以确保准确识别手势。- 获得反馈非常重要。您可能会对人们使用您的应用程序的方式以及他们的某些行为可能与您的预期不同感到惊讶。了解可以抽象出字面解释的机会，以使某些内容更容易理解、更简单。对于 DJ，让我们仔细看看转盘。转盘以其模拟形式已经存在相当长一段时间了，但是围绕它们的技术已经发生了巨大的发展。例如，在传统硬件上匹配速度和同步轨道可能很复杂。对于不熟悉它的人来说存在进入障碍。算法团队认为这是一个机会。
在 3D 环境中，我们问自己，当我们可以在幕后完全自动化这个过程时，为什么 DJ 甚至需要手动匹配节奏。这种抽象不仅降低了复杂性，而且还增强了用户更加关注 DJ 创意方面的能力。- 消除复杂性可以帮助人们享受应用程序中最能引起共鸣的方面。

好吧，在我们结束之前，这里有一些资源，可以帮助您开始构建自己的 Vision OS 应用程序。Apple 的人机界面指南是最新最佳实践的动态文档。当你对某个模式或组件感到好奇时，首先查看此处，了解最新的指南是什么。我们的设计资源旨在帮助您加快原型设计。Figma 和 Sketch 套件拥有大量包含原生组件的库，所以您不必自己重建这些资产。我今天谈到的每个应用程序都可以在 Apple Vision Pro 的 App Store 上找到，所以我鼓励你亲自尝试一下。感谢您的聆听。