设计出色的 visionOS App

大家好 我是设计布道师 Sarah 过去的一年我们在世界各地 举办了许多 Vision Pro 实验室活动 你可能已经在活动中认识了 我们其中一些出色的团队成员 我们的工作是向使用 Apple 平台进行构建的 设计师和开发者 分享技巧以及提供指导 在本次讲座中 我将分享出色 visionOS 体验的构成要素 以及相应的原因 你将看到与我们合作过的 一些开发者所开发的 App 我们认为他们设计的体验独一无二 考虑周到 还提高了质量标准 你甚至会直接听到一些 团队成员分享自己的见解和经验 要讲的内容很多 让我们一起进入正题吧 你的 App 或游戏务必要为平台 而打造 并充分体现平台核心理念 所以我将从较高的层面开始介绍 在 visionOS 上的产品解决方案

然后 我将阐释沉浸式体验的含义 并展示在这方面 表现出色的不同解决方案

visionOS 的设计以人为本 确保交互体验舒适自在 你的 App 也应如此

出色的 App 之所以会带来 愉悦的体验 是因为它们 达到了很高的质量标准 并且极为注重细节 首先 我们来看看 visionOS 如何开启了 一个充满无尽可能的新世界 首次与一支团队合作时 我们鼓励 开发者找到自身的关键时刻 也就是 App 中可针对 visionOS 进行优化的时刻 以系统中的“正念” App 为例 花朵的脉动很轻柔 能鼓励你深呼吸、集中注意力 花朵展开后 为这个场景带来了生机 这种体验只有 在 visionOS 上才能实现 每款 App 关键时刻的 寻找方式都不尽相同 让我们来看看团队在构建 空间解决方案时采取的一些策略 一种方法是思考 App 可通过 哪些方式让新事物成为可能

JigSpace 这款 App 有助于直观地 呈现 3D 素材资源 用于演示和推介 看看这个喷气发动机！ 看看这令人惊叹的细节 我可以查看内部的电气布线 并将模型逐片拆解 作为一项基本条件 素材需要达到 照片级真实感和高质量视觉效果 才能令人信服、引人入胜 要让新事物成为可能 就要让内容栩栩如生 思考如何使用动画来复现真实场景 就像你在这里看到的 进风扇中的空气模拟一样 或者提供多种方法来操控 在现实世界中难以完成的模型 例如拆解设备、更换材料 或实时更改设计 出色的解决方案需要时间来打造 是不断迭代和原型设计的结晶 这是 Loona 这款 iOS App 提供优美的 动画场景将放松活动、 故事讲述和氛围音效结合在一起 帮助你平静下来或进入梦乡 将这一 UI 引入 visionOS 的窗口体验是合理的 下面我们来听听相关 团队是如何实现的 这是 Loona 的联合创始人 Sergey Gonchar 我们确定自己要构建许多原型 因为我们希望找到 可以针对这个平台打造的最佳体验 来看看他们早期的小型 摩托车概念草图 2D 原型很有立体感 让人很想把它们拆解开来把玩 虽然这需要一定的时间 但这些草图 还是逐渐变成了 3D 模型 这些模型都栩栩如生 充满了妙不可言的细节 和精妙的动画效果 在 Vision Pro 上 Loona 是 一款令人放松的空间游戏 在这款游戏中 3D 冥想拼图 会变成生动的动画场景 这个游戏使用所有标准手势 你可以轻点选取一个元素 将其 悬停在相应位置上 然后松开到位 完成拼图时 场景会栩栩如生地 呈现在眼前 给你带来满满的成就感 虽然这种做法与其 iOS App 略有不同 但其中的 交互式元素和 3D 场景非常有趣 也非常适合空间平台 在思考有针对性的体验时 我要分享的最后一点是 构建一些互补的体验 如果你的 App 拥有 大量功能而这些功能 在平台上的相关性可能较低 那么这种方法就很不错 Lowe's 就是一个很好的示例 他们的 iPad 和 iOS App 功能十分丰富 从库存、门店地图 到产品计算器一应俱全 在 Vision Pro 上 他们建立了一个 完全为 visionOS 量身定制的 App 名为 Lowe's Style Studio 你可以进入身临其境的 3D 厨房场景 从后挡板到电器用具 各种物品都能自定 通过将这种体验带入虚拟空间 你可以更轻松地探索各种创意、 发现不同产品的组合效果 还能不断优化设计方向和个人风格 他们实现了全面的跨平台整合 从而完善了消费者体验之旅 样式板可以跨设备保存 实现连续性 在这里 你可以选购商品、查看库存 或查找附近商店的产品 JigSpace、Loona 和 Lowe's 是截然不同的产品 但是 对于如何将精彩体验 移植到 Vision Pro 上 每种解决方案都经过了深思熟虑 每种方法都很有针对性 针对平台进行构建时 可考虑使用 ARKit 和 RealityKit 等原生框架 从而充分利用设备的功能 提前着手构建创意并进行测试 以便了解 App 如何在 visionOS 上 获得最佳效果 Vision Pro 上的出色 App 都考虑了沉浸感 实现这一效果的方法有很多 我将举三个富有启发性的示例

各种沉浸式 App 可将用户 带到一个全新的情境中 全沉浸式技术就能实现这一目标 Fifth Star Labs 的 Sky Guide 在这方面表现出色 你仿佛置身于专属的天文馆 凝视夜空时 星座栩栩如生 你可以选择世界上的任何地点 眺望星空 甚至还能看到北极光 可随手摘取天上的星座 了解更多信息 也可以将手当作双筒望远镜 把细节看个清楚

出色的环境会精确复制纵深感和比例感 带你进入一个令人信服的空间 再现一些可识别、 有相关性且真实的事物 但请注意 自定环境并不适用于 Vision Pro 上的每个 App 因此 不要认为这是 让人产生沉浸感的唯一方法 我发现有一点经常被忽视 那就是如何与用户所处的 实际环境融为一体 我们来看看 Halfbrick 开发的 Super Fruit Ninja 当你用手切水果时 注意果汁 是如何飞溅到墙壁上并滴落的 水果的残渣是如何 在你真实空间的表面上反弹的 由于设备中的传感器 会扫描玩家周围的墙壁和表面 因此 每次我玩这款游戏时 都能感受到它的灵敏响应、 妙趣横生和独特之处 他们还充分考虑了 小猪 Truffles 等角色 如何与玩家以及玩家所处的空间互动 这是 Samantha Turner 她是 Super Fruit Ninja 的首席游戏程序员 它可以追逐草莓和水果 你可以和它一起玩游戏或者轻拍它 而它能完美融入你的现实世界 我甚至能看到 它跳上我的书桌或床 这种互动真的很好玩 沉浸式体验就是要探索如何让用户 感觉自己是 App 或游戏的延伸 另一种提升沉浸感的方法 是借助深思熟虑的音效设计 打造富于意义的听觉时刻 要阐明声音为什么可以 营造一种沉浸感 首先来了解 visionOS 如何处理声音 可能会有所帮助 设备上的传感器能够 识别你所在物理空间的特征 例如房间的大小和材质 然后系统会添加混响 让与你互动的物体 就像真的跟你在一起一样 这种复杂的识别水平和准确的播放 使 Vision Pro 上的 空间音频功能非常强大 就像 iOS 上的触觉反馈 可以为用户提供反馈一样 音频也不仅仅是环境音乐 也是引导、鼓励和奖励用户的机会 Shapes and Stories 的益智游戏 Blackbox 就是一个不错的示例 每个泡泡中都有独特的谜题 这些谜题会利用设备的技术 鼓励大家探索自己的世界 这款游戏富有挑战性 很有创意 如果你难以解开谜题 有时会觉得有点尴尬 你需要亲自尝试一下 才能明白我的意思 从根本上来说 声音是体验的一部分 让我们听听 Blackbox 的 声音设计师 Gus Callahan 怎么说 对于能够引起共鸣的声音 我们自问“如何转化这种弹性 来传达某种空间感和体验感？” 因此我们希望 声音也能随之伸展 让玩家能够与之互动 就像与乐器互动一样

将所有这些设计元素整合在一起 就能实现近乎一对一的感官体验 声音是让用户身临其境、让 App 栩栩如生、令人过目难忘的绝佳方式 visionOS 的设计考虑到了 输入、舒适度和易用性等独特因素 我们来讨论一下这一点的重要性 以及如何把它应用到 App 中

对于我今天要分享的所有 App 用户使用时只需很少的身体活动即可 Vision Pro 是一款头戴设备 用眼睛进行控制 你无法预测你的 App 将在哪些物理空间使用 在 Super Fruit Ninja 中 用手切水果的时候 整个体验都非常活跃 因为我的双手都在切水果 但这并不需要一个人 在自己所在的空间内走动 他们的游戏区域在地面上 有这个几何辅助线 鼓励玩家在玩游戏时 保持在这个边界内 我认为这是一种非常明智的方式让用户知道不需要移动 JigSpace 中的模型可以是实物大小 就像这辆 F1 汽车 我可以根据需要 在它周围走动 如果物理空间不允许 我绕着它走动 我也可以将它缩小 尽量减少移动是为了 确保用户的安全并认识到 用户的物理空间中 存在你无法控制的变量 为了确保 App 符合人体工程学 让用户使用舒适 应尽量减少所需窗口的数量 并保持界面的连贯性 Vision Pro 上的出色 App 专为无边画布而构建 这一术语是指 App 不再受屏幕尺寸的限制 这样可以大大提高灵活性 但你仍应考虑一些原则 以确保你的 App 简洁明了 并给人带来连贯的体验 一个窗口中应包含 App 的内容和 UI 标签页栏和工具栏等控件可以 位于窗口之外 但仍锚定到视图 这可以让用户清楚了解 App 提供哪些服务以及如何浏览其内容 能够在自己的物理空间中 更自在地调整位置和排列内容 空间感并不意味着按钮和 UI 应在用户的视野中任意浮动 PGA Tour 就是一款利用无边画布 进一步完善其解决方案并设计出 连贯体验的 App App 的主窗口中包含直播和比赛信息 空间容器代表相应的球场 以及击球轨迹的回放 这非常棒 因为这个解决方案的核心 是通过情境增强功能提供 增强的体育娱乐内容 App 不再需要在单独的窗口中 显示相应内容 观看者无需 00:11:54.581 --> 00:11:56.788 费力整理和移动这些窗口

这个组合感觉十分协调并且易于管理 视觉舒适的体验让人感觉仿佛置身于 操作系统 与周围环境融为一体 例如用于窗口的 Glass 素材 由于 visionOS 上没有 浅色模式和深色模式的概念 Glass 通过系统进行渲染 智能适应用户环境中的光线 我们与各个团队讨论得最多的 一个话题是品牌推广 很少有公司能像 Red Bull 一样拥有如此知名和成熟的品牌 这是 Red Bull 的高级产品设计师 Kelly FitzGerald 因此在 TV App 和移动 App 中 我们使用深蓝色背景色 作为 RedBull TV 的品牌推广元素 然而当我们开始适应 Vision Pro 时 透视功能发挥了作用 在这个案例中 我们需要决定 是要优先考虑突出的品牌元素 还是要优先考虑易用性 Red Bull TV App 选择 以高质量的视觉图像 来突出其品牌形象 这正是其固有的特征 但是当你滚动主视图时 窗口的其余部分会使用 Glass 背景而不是纯色背景 通过这类方式 可在不影响舒适度 或易用性的情况下展示你的品牌 在窗口上使用纯色背景可能会 干扰视觉并让用户感到不舒服 它们不仅不适应我们所处的 照明环境 还会挡住我们的视野 Red Bull 团队还采用了 另一种周到的方法： 在加载图像时我们看到有机会 可短暂加入深蓝色的品牌色 正是这些微小的品牌推广时刻 可以真正产生滚雪球效应 带来宏观层面的影响力 visionOS 上的元素应具有悬停效果 这是一项特色功能 对用户正在查看的内容提供反馈 Carrot Weather 是一款 让查看天气变得有趣好玩的 App 这款 App 极具个性 经过精心制作 且适用于多个平台 尽管界面需要大量数据和信息 但这款 App 在正确使用悬停效果 方面做得非常出色 具有详细视图的每个交互元素 如每小时的温度 都使用了悬停效果 但对于需要阅读的数据 如黎明和黄昏时分的详细信息 则不需要悬停效果 在这些地方使用悬停效果 会让用户更困惑、界面也更复杂 请记住互动元素需要足够的点击目标 因此至少要使用 60 个点的空间 如果悬停效果太小 用户 可能会觉得必须非常精确 才能与 App 进行交互 这会令人沮丧和不舒服 如果悬停效果设计得当 可以 让用户在进行交互时充满信心 现在我将通过一个 App 更深入地介绍卓越的设计 如何给用户带来愉悦的体验 这是我在 visionOS 上最喜欢的 App 之一 由 Algoriddim 开发的 DJay 令人愉悦的体验符合我们对真实感的 预期 并且符合我们的空间感知力 DJay 完全符合用户 对 DJ App 的预期 完全逼真的 DJ 设备带有两个 唱片机 配有唱臂和节奏同步功能 唱片机就在你面前 伸手可及 用户可以直接与之互动 这种情况下 你可以像使用 物理唱片机一样刮唱片、 拿起唱臂并滑动节奏 我们希望伸手可及的对象 具有交互性 因为它们离我们很近 这是设计空间体验时 应遵循的一条重要原则 将交互式内容放在靠近用户的位置 即使他们可以根据需要重新放置 内容 或是进行间接互动 我们对周围内容的感知 也在很大程度上由动画和动作驱动 启动这个 App 后 首先需要选择曲目 注意音乐图标周围的脉动描边轮廓 这是为了引导你轻点音乐库 一个简单的细节却能产生巨大的影响 动作和动画是吸引用户注意的好方法 让他们知道某些内容是可交互的 因为我们天生对其敏感并乐于接受 他们通过构建与现实世界接近的 自定手势 将互动映射到熟悉的体验上 你见过 DJay 把耳机 放到一侧的耳朵旁边吗？ 他们所做的是试听下一首曲目 为与当前播放的歌曲实现 无缝混音做好准备 你知道吗？在 DJay 中 你也可以这样做 将一只手举到耳边 就会通过 扬声器听到即将播放的歌曲

在此场景中 无需戴上实体耳机 通过手势模仿这一熟悉的 音频排序操作即可 但在转化这一体验时 我们 遇到了一些有意思的挑战 他们意识到 必须考虑误报的情况 例如有人可能抬起手来整理头发 或调整 Vision Pro 专用带 下面来看看 Algoriddim 的 CEO 兼联合创始人 Karim 是如何解决这个问题的： 这就需要进行大量的用户测试 我们必须收集反馈 才能确保手势能够被准确识别 获取反馈非常重要 你可能会惊奇地发现 用户使用你 App 的方式以及 他们的某些行为可能会出乎你的意料 理解在哪些地方可以 对字面意思进行抽象化 从而使内容更平易近人、更简洁 对于 DJay 让我们仔细看看唱片机 唱片机以模拟形式存在 已有相当长的时间 但与之相关的技术却有了巨大的发展 举例来说 匹配节奏和同步音轨 在传统硬件上可能非常复杂 对于不熟悉它的人来说 有一定的准入门槛 Algoriddim 团队认为这是一个机会 在 3D 环境中我们问自己 “为什么 DJ 需要手动匹配节奏？ 什么时候才能在后台 完全自动化这一流程呢? “这种抽象化不仅降低了 复杂性还能让用户 更好地专注于 DJ 工作的创造性 消除复杂性可以让用户享受 App 中最能引起共鸣的部分 好了 在我们结束之前 这里有一些资源可以协助你 开始构建自己的 visionOS App Apple 的《人机界面指南》 是一份不断更新的文档资源 其中介绍了最新的推荐做法 如果你对某种模式或组件感兴趣 请先查看这份文档中最新的准则 我们的设计资源旨在 帮助你加快原型设计 Figma 和 Sketch 套件 包含丰富的原生组件库 无需自行重新构建这些素材资源 我今天谈到的每个 App 都可以 在 Apple Vision Pro 的 App Store 上找到 所以 我鼓励大家亲自尝试一下 感谢你的耐心倾听