visionOS:空间化设计-原则

655 阅读15分钟

文章摘录及翻译自Apple WWDC会议视频。版权所有。

随着Vision Pro的发布,开发者和设计师可以进入全新的空间化设计方式。在这里,现实世界就是承载App和游戏的无限画布。您可以通过深度、缩放、自然输入和空间音频创造从未有过的惊奇体验,也可以通过Key Moments增强现有App的体验,或者创建全新的内容。

保持熟悉感

在空间化平台上,用户应当能通过熟悉的元素快速可靠地找到他们的需求。我们通过窗口放置交互界面,以便用户能够轻松看到并能使用组件。在过去,用户对窗口的操作十分熟悉。在空间化平台中,窗口存在于空间中,并与周边环境融合。下面将先介绍窗口的操作。

1.png

窗口 Window

窗口通过全新的视觉语言重新设计。玻璃材质能够与现实世界交互,适应不同的光照条件,并能够让用户透过界面,感受周边环境。

截屏2023-06-08 23.44.26.png

移动

系统为窗口提供了移动、关闭和大小调整的操作。用户可以通过抓取窗口条来将窗口放置到周围的任何位置。整个窗口在移动时会始终保持面向用户,以便界面便于阅读和使用。当用户放开窗口条时,窗口会停留在最后抓取的位置。

截屏2023-06-08 23.44.50.png

尺寸 Sizing

在设计时,窗口应当在用户视野范围内以合适舒适的大小展现。同时,窗口大小具有很高的灵活性,用户可以调整至任意尺寸。窗口的大小取决于您想展示的内容。例如,Safari浏览器的窗口会更高,以便展示网页内容;Keynote文稿的窗口会更宽,以适应全尺寸的幻灯片。

2.png

窗口的形状可以很灵活。标签栏和工具栏可以悬浮独立于窗口之外。例如,在音乐中,播放控件和标签栏是悬浮的,以便用户在任何界面进行控制,同时为内容提供了更多的空间。此外,可以通过Multiple Section将控制组件从内容中剥离出来。例如,在Safari中,导航栏与页面独立,以便用户专注于页面浏览中。

3.png

窗口的大小是可以改变的。例如,在Safari中打开侧边栏,窗口会向侧边拓展,而不必遮挡网页内容。

ezgif-4-78ac39b9b7.gif

在空间化平台中,窗口不会被屏幕的边框所束缚。因此,在有条件的情况下,窗口大小应当保持最小化,以免遮挡用户的视野。在设计时,您应当考虑如何使窗口动态化,并在合适的时候根据内容更改窗口的大小。

与其他平台相同,您的App可以在特定情况下开启多窗口。窗口可以并排排列,例如同时浏览多个网页,或者展示与内容相关的一些操作。例如,在Keynote讲演时,一个窗口会展示幻灯片,另一个小一些的窗口会展示演讲者视图。

截屏2023-06-09 12.12.18.png

理想状态下,应当尽量使应用交互保持在一个窗口内。

点 Points

为了让我们的应用能够合理缩放,我们使用点进行设计。你可能对这个概念已经有了熟悉的认识。

我们通过点来描述交互元素的尺寸,描述能够适应不同屏幕尺寸的交互界面。为了增强界面的可读性和易用性,在空间化平台中,当用户将窗口移动至远处,界面会放大;移动至眼前时,界面会缩小

ezgif-4-62e4e84f68.gif

点的使用方式和其他平台相同,您可以通过熟悉的单位设置交互元素的大小,如按钮。

以人为本

好的设计总是以人为本。现在,这句话被带到了一个全新的高度。戴上Pro Vision,用户可以通过他们的眼睛和手进行交互,并通过自己的视野和世界体验App。在设计空间化App时,应当考虑:用户会看到什么?他们可能需要如何移动?

所见

当用户带上设备后,首先会看到视线的正前方。视线很容易被中间所吸引,因此,请将最重要的内容放在这里。由于视野宽泛,请使用水平布局。例如,在Safari中,当用户需要浏览所有标签页时,我们会将其展示在网格中。同时,这个布局很宽,以适应用户的视野。标签将被缩小,这样它们就不会离中心太远,侧面的标签向内稍微翻转,使其更容易阅读。

截屏2023-06-09 12.14.16.png

用户的头部并不是固定的。用户会环顾四周,这就意味着我们可以进一步扩展我们的内容,以提供沉浸式的体验。但是,请将您的主要内容保持在视野范围内。否则,会难以阅读或理解。

以人为本进行设计意味着需要在设计时考虑人体工程学。内容的位置对人们的肢体动作有很大影响。因此,不论是什么角度,请将内容放置在舒适的位置。

默认情况下,窗口沿着自然视线放置,以鼓励用户保持健康舒适的姿势。放置自己的内容时,将其面对面放置,以便人们看到你的内容并与之互动。请考虑不同身高和不同姿势的人,比如躺在沙发上。

截屏2023-06-09 12.15.02.png

大多数时候,把内容放在远离用户,但稍微伸手就可以接触到的地方,以鼓励人们在远处互动。避免将内容放在用户身后或极高、极低的地方,除非它是沉浸式体验的一部分。

截屏2023-06-09 12.15.32.png

不是每个用户都能坐下来使用应用,请避免将内容锚定在人们的视野中。这会造成卡顿感,可能会让人迷失方向。相反,应当将内容锚定在人们的空间中,用户就可以自然地环顾四周。

所动

带上设备后,用户可以四处走动。但是,我们推荐您创建一个仅需要微小动作即可操控的应用,这样可以提高App的可用性。

在非必要的条件下,用户应当在不必移动时就能使用App。

当用户从一个位置移动到另一个位置后,有时会面朝不同的方向。当用户停下后,仅需按下数码旋钮即可使空间重新居中。画面也会重新回到视野中央,因此,你的App并不需要提供居中视野的方法,仅需依靠系统的这一功能即可。

利用维度

空间 Space

优秀的App能充分利用用户周围的空间。然而,尽管空间画布是无限的,用户的肢体空间可能受到限制。因此,由于您不了解用户使用时所处的位置,您的应当设计在任何空间下都能良好运行的App。还要注意App不要受可用物理空间的限制。下面以TV App为例具体说明。

当窗口被移动时,窗口一部分会半透明化,周围环境可以被看到,以便放置。放下窗口后,窗口将不再透明,用户可以看到并使用App。通过窗口,开发者不必考虑如何适应用户周围的环境,系统将自动处理。

截屏2023-06-09 12.17.27.png

当用户需要观影时,视频界面将会占据整个窗口,同时,背景将会暗淡。暗淡是最大化空间的最简单并有效的模式。尽管视频画面可能会与环境重叠,但暗淡能够帮助用户专注于内容上。与此同时,用户仍然能够感受到周围的环境,而不是被禁锢在视频中。这创造了绝佳的平衡。

截屏2023-06-09 12.18.04.png

此外,用户可以在现实环境范围之外开启更大的环境(Environment)。如果你的App需要更大的空间以展示内容,您可以自行创造宏伟的场景。例如,在TV中,可以创建巨幕影院的场景。

深度 Depth

在空间化平台中,深度是一个全新的变量。深度能够创造丰富的层次和不同的焦点。

在空间中,深度影响我们与物体之间的关系。远处的内容会被放大,以鼓励用户在一定距离外交互。近处的物体更促进互动,并能够很方便的从不同角度观察。我们仅需稍微移动物体,即可从四面八方观察它。

层次 Hierarchy

深度的一个重要用途是创建层次结构。以TV为例,当用户处在沉浸式影院中,播放控件离用户的距离更近,尺寸更小。但是,很明显播放控件控制着视频画面。如果将其放在视频画面上,会显得太大,十分突兀。像这样,近处元素可以保持较小,但仍然比远处的大型对象具有视觉优先权。

截屏2023-06-09 12.19.24.png

光影

深度需要通过光影等视觉线索来加强其体验。我们知道,有些物体会发光,如电影屏幕。它发出的光线照射在天花板和地面上,可以凸显其在房间中的位置。因此,任何会发光的物体都应当将光线投射到周围的物体上。

截屏2023-06-09 12.19.png

大多数物体会在光线下留下阴影。例如悬浮在桌面上的窗口,阴影使其与周围环境更和谐。在App中,任何自定义的对象也应当投射阴影。

浅深度 Subtle Depth

在大多数情况下,请使用较浅的深度。过大的深度容易使用户分心,并让内容不真实。仅需浅浅的深度就足以引起用户的注意。

另外,当一个模型出现时,窗口会稍微后退并暗淡以引起人们的注意。

不需要添加深度的情况

并不是所有物体都需要添加深度。3D文字在一些角度下会难以阅读,并使用户分心。因此,在设计交互界面时,请使文字保持扁平。

缩放 Scale

与深度相同,缩放也是一种全新的强调内容的方式。较的物体给人一种轻量、私密的感觉;巨大的物体则令人震撼,例如在湖泊上的巨型电影屏幕。

然而,一些物体以现实尺寸展示会更好。例如,购物网站会将商品以现实大小呈现。您可以通过缩放内容至最大或最小,以感受其功能。为了进一步增强体验,可以使用沉浸。

沉浸 Immersion

沉浸的体验超越了窗口,沉浸改变了视野周围的世界。

沉浸视野

在空间化平台,App可以是动态化的。App可以根据您想给用户带来的体验而灵活地在不同的沉浸模式之间切换。

沉浸视野提供了很大的灵活性,您可以增强用户的视觉体验甚至将用户带到一个全新的世界。App可以在共享空间的窗口内与其他App一同展示。如果需要更多的空间,App可以在全空间内运行——其他应用将会被隐藏。您应当让App从共享空间启动,以便用户自主选择所需的沉浸度

截屏2023-06-09 12.22.11.png

例如,在Keynote讲演中,App从一个窗口启动。当演讲开始,我们通过暗淡来使用户关注到演讲中。暗淡是一种简单的方法,可以在您的内容与周围环境之间形成对比,而无需将内容带出空间。当需要排练演讲的时候,我们可以把用户带到大舞台上,让他们完全沉浸在讲台上。像这样的真实的体验在实际上需要更多空间,因此Keynote现在处于全空间中,其他应用程序被隐藏。

截屏2023-06-09 12.22.53.png

用户可以在不移动实际位置的前提下进入全新的世界,可以在观看内容的同时看到房间的环境。您可以在不占据用户所有视野的同时设计丰富、沉浸的体验。在用户需要看到他们的手部,例如打字或做控制时,会十分有用。 沉浸式的App可以使用户感到与现实世界紧密联系。如果您的内容与用户所处的环境有关,请让您的内容更灵活。每位用户所处的环境不尽相同,因此请确保您的内容能够在任何环境下有良好的表现。

重要提示
  1. 引导用户关注最重要的内容

    用户可以环顾四周,关注不同的事情,但是如果同时发生太多事情,他们可能会感到不知所措。例如,在冥想App中,您的注意力将会被空间中的一个物体所吸引。开发者可以通过动画、空间音频、材质引导用户关注在内容上。

  2. 充分与现实世界融合

    如果您的应用程序位于全空间中,您可以使用房间的形状来锚定内容或创建肢体交互。充分了解用户所处的环境可以让您的内容更自然的融入其中。当您将整个场景融入用户的空间中时,请确保使用模糊边缘(Soft Edge)来融合您的应用程序。这避免了突兀的转变,可以让人们专注于您的内容。

截屏2023-06-09 12.26.23.png

  1. 丰富的媒体可以让内容栩栩如生

    细微的动画可以给场景带来活力,就像湖水荡漾或云彩漂浮在天空中。轻微的运动可以将静态体验转化为生动和动态的体验。为了让效果更上一层楼,我们用声音来营造氛围。

    使用空间音频,您可以将声音锚定到空间中的对象,或者创造完全包围人们的音景。

    要了解更多信息,请查看“探索沉浸式声音设计”。

  2. 以小见大

    在电影院里,反射在地板和天花板上的细微光线给人一种真实的空间感。您不需要渲染真实剧院的所有细节来传达置身其中的感觉。

让用户掌控并营造舒适感

如果您需要移动您的沉浸式App或用户在其中的位置,请避免巨大、快速的移动,这可能会让用户迷失方向。

相反,我们建议在切换时将视野淡出,场景切换后再淡入,这会让用户感到踏实。如果用户在他们的空间中进行物理移动,沉浸式视野也会淡化,以便与向用户展示了他们在真实环境中的运动。确保为您的沉浸式体验提供清晰的进出方式,使用便于识别的标签及符号(如展开和折叠箭头)来引导用户。

截屏2023-06-09 12.48.15.png

表现出真实性

在构建优秀的App体验时,很重要的一点就是充分利用平台的优点及其设备独特的能力。在空间化平台,优秀的App能够充分利用用户所处的空间来创造丰富的、沉浸式的体验。App的构建应当经过深思熟虑。您应当考虑:如何让自己的App更有价值,有吸引力,有足够的特色,让用户愿意体验您提供的内容。应用的灵感来源有许多方式,我们推荐您从一个空间化或沉浸式的特殊的形式开始,构建您的内容。因此,您需要找到一个只能够通过空间化来体验的关键点

例如,在照片中,您的时光会被放大,背景环境会暗淡以凸显内容。当展示全景照片时,我们得到一个关键点:全景图能够包围用户,带来沉浸式体验。

截屏2023-06-09 12.50.27.png

通过专注于一个特殊形式,开发者可以利用Vision Pro的特有功能,带来令人印象深刻的体验。您可以通过深度和缩放来增强体验感,或者将用户带入您的环境。丰富的视觉效果和高保真的音频能够让您的体验栩栩如生。

结语

以上即为Apple提供的空间化设计原则。我们可以发现,空间化计算是在用户已有的平台使用基础上,针对空间所增加的一层体验。这种体验继承了平面计算中的一些元素,同时带来了创新——特别是对维度的使用,是以往的平面平台所不具备的。开发者及设计师可以通过深度与缩放,在空间中创造前所未有的体验。但是,设计的核心仍然不变:以人为本。