Apple官方 visionOS UI设计规范五个总结

2023-07-0317:07:35UI设计Comments1,451 views字数 2727阅读模式

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

当您着手进行visionOS设计应用程序或游戏时，首先要了解该平台有的基本设备特征和模式。利用这些特征和模式来指导您的设计决策，帮助你打造出沉浸式的沉浸式体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

本期小编速读了Apple官方的设计指南，帮各位设计师朋友总结了如下设计规范：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

一、visionOS图标的设计

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS App 图标呈圆形，并包括一个背景层及其上方的一至两层，以生成在用户查看时会巧妙展开的三维对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

总结（很重要）：应用程序图标由一个背景层和一两个前景层组成，最多三个，各层为正方形，1024×1024像素。重叠后切成直径1024像素的圆，成为图标文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

设计原则：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

为图标的背景层使用全幅不透明图像。相反，避免在非背景层中使用全幅图像。在非背景层中使用透明区域可让下层的视觉信息透过。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

为每层提供正方形图像。系统会使用圆形遮罩裁剪 App 图标的所有层，因此提供已裁剪的层可能会对结果产生负面影响。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

避免大面积使用半透明。虽然使用半透明像素来为形状消除锯齿效果不错，但大面积的半透明区域无法与 Alpha 很好融合，还可能跟系统提供的阴影结合产生黑色结果。除非要为形状消除锯齿，否则请保持像素不透明或全透明。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

在非背景层中，首选为完全不透明或完全透明像素的不同区域之间使用明确边缘。非背景层包含的形状具有清晰边缘时，系统绘制的高光和阴影看起来最美观。避免使用柔化或羽化边缘。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

避免在背景层中添加看起来像孔洞或凹面区域的形状。系统添加的阴影和镜面高光可使此类形状看起来突出而非内凹。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

保持非背景层中的不同形状或图像靠近中心。圆形遮罩可能会截断过于靠近边缘的形状或图像，导致形状看起来偏离中心并破坏图标的三维外观。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

避免使用从一个固定的有利位置看起来有深度的视觉元素。如果用户只能从一个视角感知层内元素的深度，当其聚焦该图标时，这种深度感便会消失。避免使用突出层元素的底部边缘这样的技术，因为这样做会与其他 App 图标的垂直透视发生冲突。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

避免为 visionOS App 图标添加自定义镜面高光或阴影。除了会干扰系统提供的视觉效果外，自定义高光和阴影为静态，而 visionOS 提供的高光和阴影则为动态。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

二、visionOS的空间布局

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS App 可使用窗口或空间容器在设备中显示内容。一般而言，你可以使用窗口来呈现 2D 或 3D 内容，例如“邮件”中的收件箱或 Safari 浏览器中的网页等。若要呈现游戏棋盘或地球仪这样的 3D 内容和对象，你通常可以使用空间容器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

应用的主要内容应位于视野中心：即使空间计算有无限大的发挥空间，但用户只能看到视野内的画面，而且视野内也只有最中心的部分观看体验最舒适（下图30度范围内）文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS 窗口使用半透明玻璃特效，可让光线以及现实和虚拟对象透过显示。玻璃窗口会让用户觉得你的内容与周围融为一体，同时使用镜面反射和阴影来传达窗口的缩放和位置。使用默认样式创建窗口时，你会自动获得玻璃背景。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

窗口的默认大小为 1306 x 734 pt。窗口首次打开时，系统会将其放在佩戴者前方约两米的位置，并看起来约有三米宽。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

系统还会为标准窗口中的视图和控件添加高光和阴影，从而让视图和控件看起来有深度且更有实质感，尤其是当用户从一定角度查看窗口时。虽然你可以在标准窗口中显示 3D 内容，但如果内容延伸出窗口表面过远，系统会将其截断。若要显示更大深度的 3D 内容，请使用空间容器。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

三、visionOS的按钮

用户看向交互式对象时，visionOS 会高亮标记它，以提供视觉反馈来帮助用户确认这是其想要的对象。视觉反馈（或悬停效果）用于显示对象已获得焦点，意味着用户可使用轻点等非直接手势与其交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS 按钮通常包括可帮助用户看到它的视觉背景，还会播放声音以在用户与之交互时提供反馈。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS 定义了三种标准按钮形状，每一种都支持以下标签类型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS 按钮使用不同的视觉样式来体现以下每一种交互状态：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

空闲
悬停
选定
选定切换
不可用

除了以上列出的五种状态，圆形按钮还可在用户看向该按钮片刻后显示工具提示。相反，包含文本的按钮不会显示工具提示，因为按钮的描述性标签表达了其功能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

在按钮周围留出足够空间，以便用户聚焦其上。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

建议将其高度和宽度设置为至少 60pt的大小。对于 44 pt大小按钮（这是一种常见尺寸），您可以在顶部、底部、左侧和右侧设置 8 pt的边距文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS 提供了多种大小的按钮，具体取决于形状和内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

四、visionOS的装饰

在 visionOS 中，装饰呈现了与窗口相关的控件和信息，而不会挤占或遮挡窗口内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

装饰悬浮在与其关联窗口平行的平面中，并且沿着 z 轴稍微位于窗口前面。如果关联窗口移动，装饰也会随之移动，以保持其相对位置不变；如果窗口内容滚动，装饰中的控件或信息保持不变。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

装饰可以出现在窗口的任何边缘并包含诸如按钮、分段控件等用户界面组件和其他视图。系统使用装饰来创建和管理工具栏、标签页栏和视频播放控件等组件；你可以使用装饰来创建自定义组件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

将它们放在彼此之上重叠20pt会让他们感觉它们与主窗口集成在一起，但它们不会阻挡内容。装饰可以完全显示和删除，只需轻点一下即可快速访问重要操作，使其成为更直观内容操作的必要元素。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

在 visionOS 中，系统提供的工具栏沿窗口的底部边缘显示，位于窗口管理控件的上方，处于沿 z 轴方向稍微位于窗口前方的平行平面中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

在 visionOS 中，标签页栏始终垂直，悬浮在相对于窗口前沿而言固定的位置。当用户看向标签页栏时，它会自动展开；若要打开特定标签页，用户可聚焦标签页并轻点。标签页栏展开后，它可能会暂时遮挡后面的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

如果 App 的层级结构较深，考虑在标签页栏的标签页内使用边栏。在这种情况下，边栏可支持在标签页内进行二级导航。如果使用边栏，请务必防止在边栏中进行的选择操作更改当前打开的标签页。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

五、visionOS的字体

SF Pro 是 visionOS 中的系统字体。如果使用 NY 字体，则需要指定想要使用的字体样式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

visionOS 使用动态字体正文和标题样式的更粗版本，并且引入了特大标题 1 和特大标题 2 以实现较宽的编辑风格布局。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

一般而言，首选 2D 文本。字符的视觉深度越深，就越难以阅读。虽然少量的 3D 文本可提供有趣的视觉元素来吸引用户注意，但如果要显示用户需要阅读并理解的内容，请首选包含少量或不含视觉深度的文本。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/49479.html