AppleVisionPro设计规范之空间用户界面设计

引言

在上篇文章《AppleVisionPro设计规范之空间设计原则篇》中，我们了解到了VisionPro的核心设计原则。本篇我们将介绍VisionPro中如何设计UI界面，并探索设计规范中的UI组件、材质、字体等UI元素设计指导。VisionPro建立了一种新的视觉语言，即可以保持与现有平台的一致性，同时也增加了一些元素来适应沉浸式的空间体验设计。本篇文章将聚焦空间用户界面来介绍VisionPro以下三点设计规范：

1. 用户界面的基础设计原则（UIfoundations)）
2. 布局设计（Layout）
3. 从屏幕到空间中去（Fromscreentospatial）

UIfoundations

VisionPro中大部分UI系统组件都是我们已经熟知的，但有些也是全新的，现在让我们深入了解VisionPro用户界面的基础控件。

1. App icons

在App图标的设计上，VisionPro进一步将图标在空间中变得立体和逼真，当用户看向它们时，图标的层级会扩展，系统通过添加高光和阴影来增强这种空间效果，以加强图层间的微妙纵深。

• 使用多个图层：VisionPro上真正三维的图标最多有三层，一个背景层和最多两个前景层。每个图层都是1024*1024像素的矩形图像，两个前景层包含透明通道。可以将你的背景层设计为正方形图像，然后所有层再裁剪为圆形蒙版，最后系统会为图标自动添加深度，高光和阴影。
• 保持图标图形居中：尝试保持图形居中，如果它们太靠近边缘，在展开时可能会偏离中心，同时避免使用大范围的半透明像素。

2. Materials

应用应该易于在任何空间中放置、使用和阅读。VisionPro设计了一种新的视觉语言玻璃材质，这种效果就像物理世界的一部分。另外，镜面高光和阴影增强了它在空间中的大小和位置，而玻璃材质也可以作为画布来承载UI内容，让界面感觉更轻盈，并增加一种物理质感。这种轻质感材料也让人们感觉到窗口后可能有什么。比如其它应用或人。

3. Typography

增加字重以提升阅读性。VisionPro使用系统字体，以保持字体清晰。即使窗口可以扩大到非常大的尺寸，较小或细字重的字体仍然难以阅读，因此考虑增加重量或使用系统字体从而为优化可读性。

4. Vibrancy

Vibrancy使显示前景内容变亮，并通过将光线和颜色发挥作用。在VisionPro上，由于背景可以不断变化，Vibrancy也会实时更新，以确保您的文本始终清晰地显示。Vibrancy在玻璃材料中发挥作用，增强易读性，使系统材料感觉更丰富和复杂。

5. Colors

颜色上，我们通常使用白色的文字或符号以保证它们清晰可见。如果你需要使用其他颜色，请在背景层或整个按钮中使用它，以便人们更容易注意看到它。尽可能使用系统颜色而不是自定义颜色，因为它们已经被校准为易读性，并能自适应玻璃材质上的色调和对比度。

LayOut

在布局设计上，我们要考虑基于人因的最舒适布局方法，在元素大小上保证给予用户最易于操作的点击尺寸，以及在响应时基于眼球追踪来提供视觉反馈。

1. Ergonomics

用户主要用眼睛和双手互动，所以对于设计考虑符合人因的，舒适和安全的体验比以往任何时候都更加重要。优先将最重要的信息展示在你的应用中，这样用户可以舒适地查看你的内容。

2. Sizing

保证所有交互元素至少60pt的点击热区。交互元素的点击热区必须至少是60pt，这样它们可以很容易地被用户选择。如果你需要在容器中放置几个按钮，请使用标准系统按钮，按钮之间至少有16个pt间距。

3. Focus feedback

提供焦点反馈效果。当用户看向组件时，它们会自动显示微妙的视觉高亮或悬停效果，这种悬停效果让用户理解界面的哪些部分是可交互的。当一个元素不可点击时，它不再提供焦点反馈，这让用户将注意力集中在他们专注于预期的元素，并可以通过敲击手指来选择它。

Fromscreentospatial

在VisionPro上，菜单和弹窗可以在窗口外拓展展开，默认情况下它们居中显示。使用白色背景上的黑色图标来显示按钮被选中。在按钮的设计上，避免使用白色背景，除非是选中状态。所有系统组件都已经提供适当的反馈机制，并支持各种输入方式，所以当你开发你的应用时，使用系统组件，它们可以帮助您快速创建界面。