针对 visionOS 设计小组件

大家好 欢迎观看 “针对 visionOS 设计小组件” 我是 Jonathan 稍后我的同事 Moritz 也将会分享更多关于小组件的信息 小组件始终提供醒目、及时的信息 让用户无需打开 APP 就能及时了解重要的事情 比如查看天气预报、下一个日历事件 或是跟踪目标进度 小组件可让我们轻松访问实用内容 本次讲座将展示如何将 这些理念拓展到 visionOS 以及如何设计与用户空间 融为一体的小组件 我们需要利用平台的 空间和视觉功能做到这一点 visionOS 小组件采用了新的形式 变成了三维物体 同时融入周围环境 无论是放在墙上、桌子上 还是架子上 它们都会保存来自 App 环境的 信息 让你信手可得

我和 Moritz 将向你介绍设计系统 如何将这一切变为现实 我们将探讨指导它们空间行为的原则 并分享使用新材料、新样式 和新尺寸的实用技巧 这样 你的小组件不仅看起来很棒 而且真正成为人们居住、 工作和放松之处的一部分 如果你的 iPad App 已经包含小组件 那么你就有了一个良好的开端 只需启用兼容模式 现有的小组件就可以 转移到 visionOS 中 还会自动采用新的 空间和视觉处理方式 这种处理方式可为你的设计 带来新的深度和维度 还让用户能将它们 轻松置于周围环境中

此外 你还可以构建专为 visionOS 设计的原生小组件 用它们来访问平台特定的 尺寸和增强视觉样式 这有助于小组件进一步融入周围空间 Music Poster 小组件就是个很好的 例子 目的就是要让人感觉像是 房间里的海报 而不只是屏幕上的界面 为了帮助指导你设计 我们来详细探讨一下 Vision Pro 小组件背后的 四大核心原则 第一个原则是持久性 这是 visionOS 小组件的一个决定性特征 小组件被用户放到空间中之后 它就会一直待在原位不动 它会一直锚定那个位置 并在不同的会话期间保持这个状态 即使用户从一个房间走到另一个房间 或者设备关闭后又重新打开

在此基础上 下一个原则是固定大小 小组件具有始终如一的真实比例 无论放在哪里 都能让人觉得比例合理 Music Poster 小组件 使用了超大模板尺寸 赋予它一种熟悉的 类似印刷艺术画框的维度 除了持久性和固定大小之外 visionOS 小组件还有 很高的自定义程度 App 和用户都可充分利用这一特点 用户可以个性化设置 小组件在自己空间中的外观 而你可以提供样式选项 让小组件 能融入各种不同的空间

最后 是接近感知 visionOS 小组件会调整外观和布局 来适应与用户的距离 始终呈现适当的细节水平 无论是从房间另一端远看 还是近距离观看 我们将逐一介绍 首先是持久性原则 以及它如何影响小组件 在用户空间中的行为方式 一旦小组件放在房间中 它就会永久待在那里 令人兴奋的是 这将让你有机会设计 持久的情境感知体验 这种体验可与环境中的人共存 在深入探讨细节之前 了解一下用户对 visionOS 小组件 的访问方式会很有帮助 他们可以通过主屏幕网格上的 Widgets App 查找并放置小组件 让用户容易发现小组件 并将它们添加到任何空间 当用户从 Widgets App 添加小组件时 它首先以分离状态出现 悬浮在资料库窗口旁边 要将它锚定在空间中 必须把小组件放在水平或垂直表面上 这样就将它锁定在持久位置 当放在水平表面上时 比如办公桌、餐桌或架子上 小组件会略微朝放置者倾斜 这个细微的角度有助于辨认 它还会投下阴影 让人感觉它扎根在空间中

如果放在墙上 小组件将与表面齐平 并投下逼真的阴影 就像相框一样 visionOS 小组件始终显示在框架内 这个框架将数字内容与周围环境 连接起来

在考虑为 visionOS 引入 哪些类型的小组件时 或是从头开始设计 将它们视为 所在房间的一部分会有所帮助

因此设计时要始终考虑到环境 小组件不是孤立悬浮的 而是会放在用户的厨房、客厅、 办公室等地方 环境会影响小组件的查看和使用方式 尽早考虑到这一点会带来更好的体验

以 Weather 小组件为例 在 visionOS 中 Weather 采用类似大窗口的格式 设计优先考虑的是 对当前状况的清晰描述 旨在营造一种看向窗外的感觉 文本大小是为了 从房间另一头远看时也很醒目 确保壁挂式小组件易于辨识 缩放比例和视觉呈现的转变就是 小组件如何适应和改善 所在空间的良好示例 因此小组件一旦放置好 就不会乱跑 不过用户可以放置多个小组件 visionOS 支持多实例小组件 这意味着同一小组件的多个副本 可以存在于单个空间中 如果放在墙上 小组件会在 熟悉的网格布局中整齐就位 遵循跨平台设计准则 可确保你的小组件与网格中的 其他小组件无缝契合

如需了解有关小组件设计的 更多一般性指导 欢迎观看我的同事 Mac 主讲的 “设计出色的小组件”讲座

由于小组件存在于 你使用 Vision 时的现实世界中 它们的行为也符合现实规律 小组件显示在所有虚拟内容的后面 这加强了它们与你周围空间的联系 请记住 它们只能放在物理表面上 不会附着或停留在虚拟环境中 介绍完小组件如何在空间中持久存在 我们来谈谈它们如何在其中缩放大小 第二个原则是固定尺寸 当数字内容与真实物体共存时 需要有大小合适的感觉 这就是为什么 visionOS 小组件 具有确定的、 一致的尺寸 这样看起来与周围环境 融为一体 无论是放在墙上、桌子上还是架子上

就像在其他平台上一样 visionOS 有多个小组件模板可选 但在这里 这些尺寸 与现实世界的尺寸相对应 这意味着你选择的尺寸 在用户的空间中具有实际存在感 所以要有意而为之 想一想你的小组件可能放在哪里 装在墙上 还是放在工作区旁边 然后选择适合相关环境的尺寸 由于小组件与真实物体共享空间 布局尤其重要 在设计时要考虑到印刷或寻路原则 使用清晰的层次结构、 严谨的排版和缜密的比例 确保内容在一定距离范围内保持清晰 以下例子为我们展示 尺寸如何匹配环境 如果要设计一个工作效率小组件 你可能想用较小的模板尺寸 以便轻松放在桌子上 这种方法特别适合 待办事项列表之类的东西 可以放在 Mac 虚拟显示器旁边 用户一完成任务就能方便查看 另一方面 如果你的目的是让用户 在使用 Vision Pro 时 用视觉效果丰富的东西 比如艺术品 或摄影作品装饰自己的空间 就要考虑使用超大模板尺寸 这样你的小组件就变成个性化作品 感觉更像是墙面艺术而非界面 目前为止 我们已经探讨了 选择正确的模板尺寸能如何 帮助小组件融入不同的环境 但尺寸并不是完全固定的 用户也可以自己调节 每个模板的尺寸都可以使用 边角功能来调节大小 在 75% 和 125% 比例之间缩放 同时仍保持布局完好 因为用户可以调节小组件大小 并近距离查看 请确保始终使用高分辨率资源 接下来 有请我的同事 Moritz 为大家介绍如何让小组件 真正实现个性化 富有表现力 并适应不同的环境 大家好 我是 Moritz 很高兴能向大家展示如何对 visionOS 小组件进行个性化设置 无论是由用户自己 还是通过 你这位开发者提供的选项 这些选择让用户能够以自己感到自然 并与环境相适应的方式 对小组件进行个性化设置

我们来详细了解一下这一切 是如何实现的 设计小组件时 你可以定义整体外观 选择两种样式处理方式： 一种是 Paper 样式 这是更接地气的印刷风格样式 具有与环境一体的实体感 还有一种是 Glass 样式 这个外观 更轻盈、具有层次感 可以增加深度 还能让前景和背景形成视觉分离 每种样式都可以在空间中营造出 独特的存在 选择正确的样式 有助于强化你想要打造的体验 首先介绍 Paper 样式 如果你打算获得类似印刷品的外观 感觉更像是房间里的真实物体 选 Paper 样式准没错 这种处理方式会让整个小组件 对环境光照作出响应 有助于将它自然融入周围环境

例如 Music Poster 小组件 使用 Paper 样式 展示相簿和播放列表 就像墙上的装裱艺术品一样

从视觉上看 Paper 样式由几个 主要组件组成

由系统提供的框架 由你设计和控制的内容 还有将这一切融为一体的 一层不易察觉的反射涂层 这个涂层还会帮助小组件 对周围光线做出反应 Paper 样式的主要目的是融入空间 而 Glass 样式的目的则不同 强调的是清晰度和对比度 特别是对于信息丰富的小组件

前景元素始终以全彩显示 不受环境光照的影响 全天保持关键内容清晰且易于辨认

Glass 样式还在前景和背景之间 引入视觉分离 这样 你就可以决定界面中哪些部分 对环境做出反应 哪些部分保持不变

例如在这个 News 小组件中 社论图像位于背景中 具有 柔和的印刷效果 而新闻头条则保持在前景中 始终清晰易读

Glass 样式有多个层次 效果是在空间中营造出深度、 清晰度和存在感

系统提供的框架将小组件锚定到表面 背景或背板位于内容后面 可以完全由你来定义

UI Duplicate Layer 可增加细微深度 这个界面版本颜色更深、类似阴影 就位于主要内容的后面

UI Layer 是文本、符号和图形等 重要内容所在之处 需要保持明亮、清晰和 高度可辨认的元素

最后 Coating Layer 可添加一层柔和的 反光饰面 有助于小组件 对房间内的光线作出响应 这些层次共同构成 Glass 样式的视觉结构 具有清晰度、维度和灵活度

现在我们已经了解 小组件的视觉结构是如何形成的 下面我们来了解用户如何 进一步设置个性化外观 从色彩开始 visionOS 包含一系列丰富的 系统调色板 专为各种环境而设计 提供七个浅色选项和七个深色选项 便于用户灵活搭配自己的风格 同时让小组件在任何空间都很亮眼 设计小组件时 非常重要的是 要在全套系统调色板中测试你的内容

小组件在一开始总是未着色状态 显示你的设计的全部颜色

放置后 用户就可以对它们进行 个性化设置 通过配置 UI 来选择颜色

你可以选择小组件的背景是否着色 如果选择不着色 例如为了维持照片或插图原状 就需要确保它与所选调色板 搭配起来效果也很不错 请记住：小组件的框架始终要着色 不能被排除在外 颜色和样式有助于小组件融入空间 但材料也会随着一天中光线的变化 而影响它的感观

Paper 样式会随空间变暗 从而保持视觉协调性 而 Glass 样式则使前景元素保持 明亮清晰 即使光线不足时也是如此 正如材质可以帮助小组件在不同的 光照条件下给人以自然的感觉 安装样式也会影响 小组件与周围空间的关系

小组件在墙上的摆放方式会在 很大程度上影响用户对它的感知 要么让人觉得像是展示的物品 要么像是可以向外眺望的窗口 visionOS 有两种安装方式可选： Elevated 和 Recessed 后者就是嵌入墙壁

Recessed 会给人在墙内挖孔的错觉 内容置于其中的空间内 非常适合沉浸式内容或环境内容 如天气或社论性图片 这样一来 增加的深度可以增强体验

Elevated 则将小组件置于墙面上 类似于相框的安装方式 非常适合那些应该突出、 有存在感的内容 比如提醒事项、媒体或醒目的数据

小组件默认使用 Elevated 样式 是有充分理由的 这种样式在垂直和水平表面都适用 因此是多数小组件类型的通用选择

事实上 如果小组件放在水平表面上 比如桌子 始终使用 Elevated 样式 以便保持惯常的呈现方式

Recessed 样式可以营造出 独特的纵深感 比如 Weather 小组件 感觉就像是通往另一个地方的窗口 它仅适用于垂直表面 因为这种效果依赖于对齐效应 而这在桌子上不起作用 你可以选择退出 Recessed 样式 或将它设为独占性 只需注意 这样操做会删除 水平放置方式 用户个性化设置小组件外观的 另一种方式 是调整框架宽度

有五个选项可选 这与模板尺寸无关 从薄到厚不等

请务必在所有宽度上测试布局 确保始终保持平衡 请记住 使用 Recessed 样式时 框架宽度是固定的 不可自定义

框架宽度、安装样式、着色 所有这些都汇集在自定义 UI 中 用户可以在这里个性化设置小组件 以匹配他们的空间和风格

系统负责标准选项 但你也可以通过针对你的设计的 自定义设置 来扩展这个 UI

例如 Music Poster 小组件 让用户在专辑封面生成的 浅色和深色主题之间进行选择 或提供自动选项 即根据一天中的时间调整色调

你可以公开这些参数 以便用户针对特定内容 进行有意义的自定义 让你的小组件更具表现力和适应性 目前为止 我们探讨了如何对小组件 进行定制、设置样式 和放置 以便融入任何空间 但还有一项功能让 visionOS 小组件 真正脱颖而出 这就是接近感知 它能给小组件发出强有力的信号 告诉小组件用户离它有多近 这样 就能实时调整信息密度 确保小组件始终具有 可读性、相关性和适当细节 无论用户是从房间另一端远看 还是近距离观看

visionOS 提供两个重要的阈值 可供你设计时使用

近距离观看小组件时 使用 Default 从远处观看时使用 Simplified 同时支持这两种状态并不需要 完全重新设计 只需经过深思熟虑的布局调整 比如减少细节或更改字体大小 就能让内容在任何范围内 都很醒目有效

例如在 Sports 小组件中 从远处观看时 只显示最重要的信息

当有人走近时 当前赛事的更多信息 就会显现出来

为了打造流畅一致的体验 尽可能在两个距离阈值之间 保持共享元素

这样可以让布局看起来是连续的 同时仍以合适的大小渲染每个元素 让它们在任何距离上都清晰可辨 调整布局是一方面 但邻近程度也会影响 用户与小组件的互动方式

小组件支持轻量级、一目了然的互动 例如 你可以添加按钮来显示 现场棒球比赛的更多信息

利用接近感知来发挥你的优势 以便小组件的互动区域始终易于定位 无论用户离得近还是远 如果你的小组件不包含互动功能 轻点一下即可作为快捷指令 启动附近的 App

那么应该如何实现接近感知呢？ 并非每个小组件都需要接近感知 但适应距离确实可以提高清晰度

你可以把它想象为响应式设计 但并非屏幕尺寸 而是角度尺寸 随着用户靠近或远离而相应改变 布局将进行调整 以显示适当的细节水平

现在 我们了解了 visionOS 小组件 如何融入用户空间 对环境做出反应 乃至适应与用户的距离远近

从布局和材质到互动和定制 有很多机会可以创造 既实用又极具个性的东西

最后我们来总结几个关键要点 你从一开始就需要牢记

想一想你的内容如何融入这种新环境 如果你的 App 已包含小组件 请考虑它们被放到用户环境中后 可能会如何传达新的含义 如果你正在打造原生 visionOS 体验 想一想哪些醒目而持久的内容 可以一整天都提供真正的价值

如需进一步了解技术细节以及 如何将小组件引入 App 请观看“WidgetKit 的新功能”

visionOS 现在为小组件 打开了全新的维度 非常期待看到你的作品！ 谢谢观看！ 剩下的就只有间距、品位 以及知道什么时候该停下来 非常感谢！