WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Design great visionOS apps

Design great visionOS apps

WWDC 2024
观看原视频

Highlight

苹果设计团队与多个开发者深度合作一年，总结出 visionOS 上做好 App 的三个核心方向：找到 Key Moment、拥抱沉浸感光谱、打磨交互舒适度与细节。

核心内容

很多团队拿到 Vision Pro 后的第一反应是”把 iPad App 搬过来”。Sarah（Apple Design Evangelist）在开场就指出这个思路的问题：搬过来能用，但无法让人感到”只有这个平台才能做到”。她给出了一个筛选标准——Key Moment：每款 App 都应该有一个为空间计算特别优化的高光体验，正念 App 的呼吸花是系统级的例子。

围绕 Key Moment，三个方向展开。第一，产品要为平台量身定制：Loona 从 iOS 的放松视频变成了 3D 拼图游戏；Lowe’s 没有移植整个家装 App，而是只做了厨房 Style Studio。第二，沉浸感是一个光谱：Full Immersion 把人带到虚拟世界（Sky Guide 的星空），Mixed Immersion 让虚拟内容融入真实空间（Super Fruit Ninja 的果汁溅到墙上），空间音频则是第三种沉浸手段（Blackbox 的音效像乐器一样可交互）。第三，交互舒适度和细节打磨：减少不必要的移动、用 Glass 材质适配环境光线、hover effect 给眼动交互提供反馈、可交互内容放在伸手可及的位置。DJay 的唱机是打磨到极致的案例——手势模拟 DJ 把耳机举到耳边的动作，同时团队花大量时间排除误触。

详细内容

找到 Key Moment（01:24）

Sarah 鼓励每个团队回答一个问题：你的 App 里哪个体验”只有 visionOS 才能做到”？三种策略：

  1. 让不可能变成可能（01:56）。JigSpace 把 3D 资产拆解做到了现实世界中无法实现的程度——逐件拆解喷气发动机、查看内部线路、实时更换材质。前提是资产必须达到照片级真实度。
  2. 大量原型迭代（02:52）。Loona 的联合创始人 Sergey Gonchar 说团队”做好了做大量原型的心理准备”。最初的 2D 滑板草图”感觉有层次感，想被拆成碎片来玩”，最终演变成 3D 冥想拼图——用标准手势点选、悬停、松开放置，完成后场景活过来。
  3. 做互补而非全移植（04:21）。Lowe’s 的 iPad App 有库存查询、门店地图、产品计算器等大量功能。在 Vision Pro 上他们只做了 Style Studio：进入沉浸式 3D 厨房，定制从后挡板到电器的每一个元素。Style Board 跨设备同步，回到手机上可以查库存、找附近门店。

沉浸感的光谱（05:44）

三种层次的沉浸，适合不同类型的 App：

  • Full Immersion（05:53）：Sky Guide 把你带到私人天文馆，星座在夜空中活起来。好的环境需要还原准确的深度和比例，让人信服。Sarah 特别提醒：自定义环境不适用于所有 App，不要默认这是唯一的沉浸方式。
  • 与真实空间融合（06:40）：Super Fruit Ninja 利用设备传感器扫描墙壁和表面，果汁溅到墙上、果肉碎片在真实空间弹跳。Truffles 小猪会跳上你的桌子和床——这些细节让每次游戏体验都不一样。
  • 空间音频作为沉浸手段（07:40）：设备传感器理解物理空间的尺寸和材质，系统自动添加混响，让声音听起来像真实存在于你的空间中。Blackbox 的音效设计师 Gus Callahan 说他们让声音”跟着拉伸，让玩家像演奏乐器一样互动”。

交互舒适度（09:26）

Vision Pro 是戴在头上的设备，你无法预测用户的使用空间。几个关键原则：

  • 减少物理移动（09:36）：Super Fruit Ninja 在地面画出几何边界，提示玩家不需要走动。JigSpace 的 F1 赛车可以 1:1 展示，但也可以缩小比例——物理空间不够时用户不会被困住。
  • 窗口设计（10:33）：减少窗口数量，保持界面内聚。Tab bar 和 Toolbar 可以放在窗口外但必须锚定在视图上。“Spatial”不等于按钮和 UI 随意漂浮在视野中。PGA Tour 是正面案例：主窗口放直播和赛事信息，旁边的 Volume 放球场和击球回放，一个整体不需要用户手动管理多个窗口。
  • Glass 材质与品牌（12:01）：visionOS 没有 Light/Dark Mode，Glass 材质由系统渲染，自动适配环境光线。Red Bull TV 的做法值得借鉴：滚动区域用 Glass 背景，品牌深蓝色只在图片加载时短暂出现。纯色背景会遮挡现实世界、不适配光线，体验不舒适。
  • Hover Effect（13:40）：每个可交互元素都需要 hover effect（眼动高亮反馈）。Carrot Weather 做得对：每小时温度有 hover（点击有详情），日出日落等纯信息不需要 hover（加了反而混淆）。可交互元素的点击区域至少 60pt，太小会让用户觉得需要极度精确，产生挫败感。
  • 可交互内容放在近处（14:57）：DJay 的唱机放在伸手可及的位置，促使人直接交互——滑唱片、拿起唱臂、推推子。这是空间体验的重要原则：我们预期近处的物体是可交互的。

打磨细节：DJay 案例（14:39）

DJay 是整场 Session 里打磨最深的案例。几个细节：

  • 手势映射真实行为（16:10）：DJ 会把耳机举到一只耳朵预听下一首曲目。在 DJay 中，举起手到耳朵旁边就能听到预听——不需要戴真实耳机。但这个手势带来了误触问题（抬手整理头发或调整头带），CEO Karim 说团队做了大量用户测试来确保手势识别准确。
  • 适度抽象降低门槛（17:21）：传统唱机手动对拍很复杂，Algoriddim 在 3D 环境中问自己”为什么 DJ 还需要手动对拍？“——于是把节拍匹配自动化了。抽象掉复杂性，让人专注于创作。
  • 动画引导注意力（15:47）：启动 App 后音乐图标有脉冲描边动画，引导你点选音乐库。人对运动和动画天生敏感，这是引导注意力的有效手段。

核心启发

  • 做什么：为你的 App 找到 Key Moment——一个”只有空间计算才能做到”的体验片段。为什么值得做：移植 iPad 界面到 visionOS 能用但不会让人记住，Key Moment 是用户推荐你 App 的理由。怎么开始：列出 App 的核心功能，逐一问”去掉空间维度后这个功能还成立吗”，不成立的那个就是候选。

  • 做什么：用空间音频替代视觉反馈，减少界面复杂度。为什么值得做：visionOS 的音频系统自动根据房间尺寸和材质添加混响，零额外开发成本就能获得”声音在你身边”的效果，Blackbox 证明音频本身可以成为核心交互手段。怎么开始：在 RealityKit 中给 3D 对象添加 Spatial Audio Entity，用 AudioFileResource 加载音效，设置 SpatialAudioComponent 的 directivity 和 gain 参数。

  • 做什么：如果你的 App 功能集庞大，在 visionOS 上只做一个互补子集。为什么值得做：Lowe’s 证明了子集体验比全功能移植更有冲击力——用户在 3D 厨房里定制风格后跨设备继续购物，比在 Vision Pro 上查库存自然得多。怎么开始：找到你的 App 中”最适合 3D 空间展示”的功能切片，用 window + volume 组合实现，数据通过 iCloud 跨设备同步。

  • 做什么：给每个可交互元素加上 hover effect，纯信息元素不加。为什么值得做：Carrot Weather 的做法让用户一眼分清”可以点”和”只能看”，60pt 的点击区域配合 hover 让交互有信心。怎么开始：用 SwiftUI 的 .hoverEffect() 修饰符给 Button 和 NavigationLink 加上系统级 hover，自定义场景参考 Session 10152。

关联 Session

评论

GitHub Issues · utterances