Design widgets for visionOS
Spatial Computing 进阶 3m

为 visionOS 设计 Widget：从屏幕到空间

Design widgets for visionOS

2025年6月9日

在 Apple 官方观看视频

一句话判断

visionOS 上的 Widget 终于不再是 iPad 的”兼容模式移植”了——它有了自己的设计语言：持久锚定、物理尺寸、环境感知，这三个特性让 Widget 从”信息卡片”变成了”房间里的实物”。

这场 Session 讲了什么

这场 Session 系统地介绍了 visionOS 26 上 Widget 的完整设计体系。核心围绕四个原则展开：

持久性（Persistence）：Widget 被放置后会锚定在物理表面（墙面、桌面、书架），跨 session 保持位置，甚至设备关机再开机也不会消失。用户通过 Widgets app 将 Widget 放入空间，先以悬浮状态出现，贴附到水平或垂直表面后才锁定为持久位置。放在水平面上会微微朝向用户倾斜并投射阴影，放在墙面上则像相框一样贴合。

固定尺寸（Fixed Size）：Widget 在 visionOS 上有真实世界尺寸映射。模板尺寸从桌面小尺寸到墙面大尺寸各有适用场景。用户可以通过角落控件在 75%-125% 之间缩放，但布局不会被破坏。设计时要考虑”远距离可读性”——就像印刷品或导视系统的设计原则。

自定义（Customization）：提供两种视觉风格——Paper（纸质感，整体响应环境光）和 Glass（玻璃质感，前景内容保持清晰可读，背景可响应环境）。用户可以从 14 种系统调色板（7 亮 + 7 暗）中选择个性化配色。挂载方式有 Elevated（浮出墙面）和 Recessed（嵌入墙面，营造窗口感）。框架宽度可从细到粗五档调节。

距离感知（Proximity Awareness）：Widget 会根据用户距离切换 Default（近距离详细）和 Simplified（远距离精简）两种布局。这本质上是一种”响应式设计”，但响应的不是屏幕宽度，而是视角大小。

值得深挖的点

Paper vs Glass 的选择不是随意的。Paper 让整个 Widget 作为统一的物理对象融入环境——适合媒体海报、装饰性内容。Glass 则在前景/背景之间建立视觉层级——前景文字始终清晰，背景图片可以有印刷质感。News Widget 就是 Glass 的典型用例：标题始终锐利，编辑图片在背景中带柔焦效果。

Recessed 挂载方式有严格限制。它只能用于垂直表面，因为”嵌入墙面”的视觉效果依赖墙面作为参照。如果 Widget 支持 Recessed，它就无法放在桌面上。设计时需要想清楚你的 Widget 主要出现在什么场景。

多实例 Widget 是一个容易被忽略但很有意思的特性。同一 Widget 可以在空间中存在多个副本，墙面上会自动对齐成网格。这意味着天气 Widget 可以同时显示不同城市的天气——这在 iPad 上是不可能的。

代码片段

虽然这场 Session 偏设计，但距离感知的实现值得关注：

// 在 Widget 视图中响应距离变化
struct MyWidgetView: View {
    @Environment(\.levelOfDetail) var levelOfDetail

    var body: some View {
        if levelOfDetail == .simplified {
            // 远距离：只显示核心信息
            SimplifiedView()
        } else {
            // 近距离：显示完整详情
            DetailedView()
        }
    }
}

最佳实践

  1. 以房间为单位思考 Widget 设计。Widget 不会悬浮在虚拟环境中，它只贴附在物理表面上。设计时要考虑它会出现在厨房、客厅还是办公室，这直接影响尺寸和内容密度的选择。

  2. 始终使用高分辨率素材。用户可以近距离查看 Widget（75%-125% 缩放），模糊的素材在 visionOS 上会被放大暴露。

  3. 在 Paper 和 Glass 之间做出有意识的选择。如果你的内容核心是视觉冲击力（艺术品、摄影、海报），选 Paper。如果需要在信息密度和可读性之间平衡，选 Glass。

  4. 距离感知不是可选的，但也不是所有 Widget 都需要。对于数据展示类 Widget（天气、股票），距离感知能显著提升体验。对于纯装饰类 Widget，可以不实现。

  5. 测试所有系统调色板。Widget 的背景可以选择是否参与调色，但框架始终会应用调色效果。确保你的内容在 14 种配色方案下都不违和。

还有什么值得关注

  • visionOS Widget 支持轻量交互：点击按钮可以展开更多细节，不带交互的 Widget 点击后会启动关联 app
  • 自定义配置 UI 可以暴露内容相关参数，比如 Music Poster Widget 允许选择基于专辑封面生成的亮/暗主题，或根据时间自动切换
  • Widget 始终显示在所有虚拟内容之后，强化了”属于物理空间”的定位
  • 不支持在虚拟环境（如 Environments）中放置 Widget
空间计算 SwiftUI Design