天天看点

苹果“Vision Pro”空间用户界面设计规则是什么?

作者:薛定谔D家肥猫
苹果“Vision Pro”空间用户界面设计规则是什么?

2023 年 6 月 6日举行的苹果全球开发者大会(Worldwide Developers Conference简称为“WWDC” )的主题演讲中,发布了苹果首款 MR 设备 Vision Pro,苹果正在倡导,用于Vision Pro在真实空间中显示应用程序窗口和内容“空间用户界面设计”,苹果的设计团队解释了开发人员应该知道的空间用户界面设计的原则。

Design for spatial user interfaces - WWDC23 - Videos - Apple Developer

https://developer.apple.com/videos/play/wwdc2023/10076/

苹果“Vision Pro”空间用户界面设计规则是什么?

Vision Pro中安装的visionOS操作系统的是其最大的特征是应用程序图标是三维呈现的。

苹果“Vision Pro”空间用户界面设计规则是什么?

应用程序图标由一个背景层和一两个前景层组成,最多三个:各层为正方形,1024×1024像素。重叠后切成直径1024像素的圆,成为图标。

苹果“Vision Pro”空间用户界面设计规则是什么?

窗体使用半透明玻璃特效。 苹果的设计团队表示,“应用程序需要适应周围的照明环境,它们需要易于放置在周围的空间中,易于在任何距离使用,并且在任何照明条件下都易于查看。”

苹果“Vision Pro”空间用户界面设计规则是什么?

苹果的设计团队还表示,应该避免使用不透明普通窗体,因为它们会在界面中感到局促或沉重,而不会与周围环境融为一体。

苹果“Vision Pro”空间用户界面设计规则是什么?

半透明玻璃窗体对照明做出动态响应,并自动调整对比度和色彩平衡,因此当您从白天移动到夜晚时,窗口也会作为空间的一部分发生变化。

苹果“Vision Pro”空间用户界面设计规则是什么?

因此,visionOS 中窗口不如 iOS 和 iPadOS中的窗口那样明暗分明。 窗口中的单元格由半透明玻璃特效的浓淡来表示。 此外,默认情况下,窗口上显示的字符是白色空心的。

苹果“Vision Pro”空间用户界面设计规则是什么?

至于系统字体,类型与iOS和iPadOS相同,但为了提高可读性,稍微变粗了。

苹果“Vision Pro”空间用户界面设计规则是什么?

由于字体尺寸变大或变小的会使阅读变得困难,因此标题基本上是通过调整Vibrancy(鲜艳度)而不是字体大小来强调的。

苹果“Vision Pro”空间用户界面设计规则是什么?

至于颜色,仍然建议基本上使用白色文本。

苹果“Vision Pro”空间用户界面设计规则是什么?

苹果的设计团队说:“visionOS主要是用眼睛和手进行操作,所以创造一种身体舒适和安全性优先的体验是很重要的。比以往任何时候都要考虑到人体工程学来配置内容,以免引起眼睛和脖子的疲劳。”UI 设计要求上、下、左和右留出足够的空白区域,以方便人们查看。

苹果“Vision Pro”空间用户界面设计规则是什么?

此外,如果您需要比应用程序更大的画布,建议基本上不要在垂直方向而是在水平方向扩展。

苹果“Vision Pro”空间用户界面设计规则是什么?

对于按钮,建议将其高度和宽度设置为至少 60pt的大小。 对于 44 pt大小按钮(这是一种常见尺寸),您可以在顶部、底部、左侧和右侧设置 8 pt的边距。

苹果“Vision Pro”空间用户界面设计规则是什么?

这将在视觉上提供按钮之间的 16pt分隔。 这个纵横60pt的个设置,可以更轻松地在 visionOS 窗口中进行选择。

苹果“Vision Pro”空间用户界面设计规则是什么?

例如,此按钮在 28 pt处看起来很小。

苹果“Vision Pro”空间用户界面设计规则是什么?

但是,实际上,按钮的面积是长度和宽度为 60 pt。 通过这样做,即使是小按钮也可以毫无问题地选择。

苹果“Vision Pro”空间用户界面设计规则是什么?

按钮是处于活动状态还是非活动状态,通过按钮的色调直观地指示。

苹果“Vision Pro”空间用户界面设计规则是什么?

还可以使用悬停效果,使其在选中时从周围环境中显示。 这种悬停效果使用户可以轻松查看界面的哪些部分是交互式的。

苹果“Vision Pro”空间用户界面设计规则是什么?

建议悬停效果中出现的单元格部分至少间隔 4 pt。

苹果“Vision Pro”空间用户界面设计规则是什么?

苹果的设计团队还表示,每个元素的形状应该保持一致。 例如,在以下情况下,外部容器和内部嵌套元素是带有圆角的矩形: 此时,必须注意确保角的半径已设置并彼此同心。

苹果“Vision Pro”空间用户界面设计规则是什么?

换句话说,重要的是要注意嵌套元素的拐角半径 + 边距宽度 = 容器的拐角半径的公式。

苹果“Vision Pro”空间用户界面设计规则是什么?

接下来,关于输入。 使用 visionOS,您无需使用鼠标或键盘等物理设备,而是使用手和眼睛进行打字。 例如,您可以通过在膝盖上做捏右手的动作,来将其添加到收藏夹中。

苹果“Vision Pro”空间用户界面设计规则是什么?

此外,通过用手指直接触摸出现在空间中的虚拟键盘,您可以像使用物理键盘一样使用它。

苹果“Vision Pro”空间用户界面设计规则是什么?

也就是说,visionOS需要空间输入设计时, 就是“系统组件”的用武之地。

苹果“Vision Pro”空间用户界面设计规则是什么?

例如,当您在 iPhone 上打开“照片”应用程序时,就会有一个水平放置在窗口上标签栏控制器,以便快速访问应用程序的每个部分。

苹果“Vision Pro”空间用户界面设计规则是什么?

另一方面,visionOS Photos应用程序将标签栏纵向放置在左侧的固定位置。

苹果“Vision Pro”空间用户界面设计规则是什么?

它位于左侧,以便平时不受妨碍,但是如果您查看此选项卡栏,它将自动展开以显示每个部分的标签。 当您将视线从放大的标签栏移开时,它会自动关闭,让您再次专注于内容。

苹果“Vision Pro”空间用户界面设计规则是什么?

当您在iPad屏幕上查看“照片”应用程序时,这就是它的外观。

苹果“Vision Pro”空间用户界面设计规则是什么?

如果你看一下visionOS中的“照片”应用程序,你可以看到为了符合人体工程学,上下左右都有很好的空白,标签栏显示在窗口的左侧。

苹果“Vision Pro”空间用户界面设计规则是什么?

此外,visionOS还提供了一个名为“装饰品”的功能。 它被用作工具栏,以便轻松操作内容。

苹果“Vision Pro”空间用户界面设计规则是什么?

关键是装饰品被用作工具栏略微遮住窗体。 根据苹果设计团队的说法,将它们放在彼此之上重叠20pt会让他们感觉它们与主窗口集成在一起,但它们不会阻档内容。 装饰品可以完全显示和删除,只需轻点一下即可快速访问重要操作,使其成为更直观内容操作的必要元素。

苹果“Vision Pro”空间用户界面设计规则是什么?

当您在iPad上显示菜单时,菜单部分将弹出如下。

苹果“Vision Pro”空间用户界面设计规则是什么?

在visionOS的类似的情况下,弹出菜单的按钮突出显示为“白底黑字”。 这样可以更轻松地直观地查看哪个按钮调用了弹出菜单。 这就是为什么苹果的设计团队敦促人们“不要在visionOS中使用白色背景的按钮,除非是为了表示'已选择'”。

苹果“Vision Pro”空间用户界面设计规则是什么?

此外,显示内容信息的模态窗口 (Modal Window)以与上级窗口相同的 Z 坐标显示,当显示模态窗口时,上级窗口被推得更深并变暗。

苹果“Vision Pro”空间用户界面设计规则是什么?

苹果的设计团队表示,模态窗口中的关闭和后退按钮应始终位于左上角。

苹果“Vision Pro”空间用户界面设计规则是什么?

继续阅读