Design widgets for visionOS

Highlight

visionOS 26 上的 Widget 由四个原则定义：持久（Persistence）、固定尺寸（Fixed Size）、可定制（Customization）和距离感知（Proximity Awareness）。

核心内容

iPad 上的 Widget 是屏幕上的一块矩形，是应用的延伸。Vision Pro 上的 Widget 不一样，它是房间里的一个物件。摆在墙上像挂画，摆在桌上像相框。设备关机再开机，它还在原位（01:22）。

痛点很具体：开发者写惯了”屏幕里的 UI”。给 Vision Pro 设计 Widget 时，旧的思维会让设计变形——字号按手机比例缩，背景按 App 色调走，距离一远就看不清。Apple 给出的答案是把 Widget 当作真实物件来设计：尺寸映射到现实世界的厘米，材质响应房间的环境光，距离决定显示哪些信息。

Session 由 Jonathan 和 Moritz 两位讲师分讲：前半段讲 Persistence 和 Fixed Size，后半段讲 Customization 和 Proximity Awareness。如果应用已经有 iPad Widget，开启 compatibility mode 可以直接迁移过来；想要 visionOS 专属的尺寸和材质，需要做 Native Widget。

详细内容

Persistence：放下了就不再移动（02:14）

用户从 Widgets app 拖出 Widget，先以悬浮状态附着在 library window 旁边。要变成持久状态，必须贴附到一个物理表面：水平面（桌、架）或垂直面（墙）。

水平面上的 Widget 会朝向用户微微倾斜，并投下阴影增强”落地感”；墙面上的 Widget 与表面齐平，像挂画一样投影。Widget 永远显示在所有虚拟内容之后，强化它”属于这个房间”的感觉。同一个 Widget 支持多实例，多个相同 Widget 在墙面上会自动 snap 成网格。

Fixed Size：尺寸映射到现实（06:41）

模板尺寸的物理含义是固定的。Music Poster Widget 用 extra-large，相当于一张装裱的海报；待办清单用 small，能贴在 Mac Virtual Display 旁边不挡视线。

用户可以用角落的 affordance 在 75%–125% 之间缩放，但布局比例会被保持。因为用户可能凑近看，所有素材都要用高分辨率资源（08:39）。

Paper vs Glass：两种材质（09:21）

Paper 风格让整个 Widget 响应环境光，适合”实物感”内容（专辑封面、海报）。它由三层组成：系统提供的 Frame、开发者控制的 Content、统一反光的 Coating Layer。

Glass 风格强调对比度，前景内容始终保持原色不被环境光影响，背景可选择是否参与响应。News Widget 用 Glass：编辑图作为背景柔和地融入房间，标题在前景始终清晰。Glass 的层级更复杂——Frame、Backplate、UI Duplicate Layer（在主内容后形成阴影感）、UI Layer（文字图标）、Coating Layer。

Customization：调色板与挂载方式（12:34）

系统提供 14 种调色板（7 浅 + 7 深）。Widget 默认 untinted 显示原色，用户配置后整个 Widget 会被着色。开发者可以让背景退出 tinting（保留照片或插画），但 Frame 始终参与着色，无法排除。

挂载方式有两种：Elevated（贴在墙面外，像相框）和 Recessed（嵌入墙内，营造窗口感）。Recessed 只在垂直表面可用——在桌面上无法形成”嵌入”的视觉。Weather Widget 默认用 Recessed，像一扇看向天气的窗。开发者可以选择只支持 Elevated、只支持 Recessed，或两者都支持，但只支持 Recessed 会失去水平表面摆放能力。

边框宽度有 5 档可调，与模板尺寸独立。Recessed 风格下边框宽度是固定的。

Proximity Awareness：距离感知（17:15）

系统给 Widget 两个阈值：Default（近距离详细布局）和 Simplified（远距离精简布局）。Sports Widget 在远处只显示比分，走近后展开比赛详情。

Apple 把这种机制类比成响应式设计在空间中的延伸：响应的维度是 angular size（视角大小），随用户与 Widget 的距离变化。设计两个布局时尽量保留共享元素，让缩放过渡自然。

如果 Widget 包含交互（按钮等），proximity 会影响交互区域大小，确保远近都易点；没有交互的 Widget，点击行为是”在附近启动应用”。

核心启发

• 把 Widget 当作”房间里的物件”而不是”应用的窗口”来设计：为什么值得做——visionOS 上 Widget 与物理空间锚定，决策维度从屏幕坐标变成房间上下文。怎么开始——动笔前先确定它会出现在什么场景：厨房、客厅还是办公桌？这个场景决定了模板尺寸、材质（Paper or Glass）和信息密度。

• 在 14 种系统调色板下都跑一遍设计：为什么值得做——Frame 始终参与 tinting，用户能自由切换配色，未测试的色板下可能出现对比度灾难。怎么开始——把 Widget 截图叠在 7 个浅色和 7 个深色 Tint 上，凡是文字读不清或颜色冲突的，调整 backplate 是否参与 tinting。

• 为远距离场景设计 Simplified 布局：为什么值得做——visionOS Widget 经常被挂在墙上，3 米外的可读性决定它是否被使用。怎么开始——把 Default 布局拿到 3 米开外评估，挑出”这个距离根本看不清”的元素，做精简版的 Simplified 布局，保留共享元素让切换平滑。

• 优先选 Elevated，仅在窗口隐喻成立时才用 Recessed：为什么值得做——Recessed 失去水平表面摆放能力，只有”看向远方”的内容（天气、风景）才值得这种取舍。怎么开始——问自己 Widget 内容是否有”视野”语义，如果没有，留在 Elevated。

• 所有素材都用高分辨率，不要按 iPad 尺寸出图：为什么值得做——用户能在 75%–125% 区间缩放且能凑到面前看，模糊素材会被立刻发现。怎么开始——按 extra-large 模板的实际显示尺寸的 2x 出图，并在 visionOS 真机上验证。

关联 Session

• Design hover interactions for visionOS — visionOS 上 hover、look at 等空间交互的设计准则。
• What’s new for the spatial web — visionOS 26 上 Web 端获得的空间能力更新。
• Design great widgets — 跨平台 Widget 设计的通用准则，本场多次引用作为基础。
• What’s new in WidgetKit — 配套的技术实现，讲解如何把这些设计原则落地到代码。