首页：漫游Apple Vision Pro

大家好，我是 xChester。

想要上架一款 Vision Pro 应用，图标是必不可少的。相较于其他系统的应用，visionOS 的应用图标有些特别，它并非一张单一的图片，而是由多层图片组合而成。当用户注视图标时，会产生优雅的立体效果。本文将介绍 visionOS 图标的基本组成，探讨这样设计的原因以及我们如何制作自己的 visionOS 应用图标。

visionOS 独特的图标设计

visionOS 中的应用图标是一个圆形图标，由 3 层图片组合而成，当用户查看图标时，会在 z 轴（垂直于视平面）方向上轻微展开，产生精妙的 3D 的效果。

这 3 层分别为背景层（Background），第一层（Layer 1）和第二层（Layer 2）。三者按从下到上的顺序叠加，最终系统再叠加一个圆形的遮罩，形成应用图标。

为什么采用这样的形式？我们这里做了一些分析，欢迎探讨。

首先我们回顾一下用户的点击动作，通常用户与图标的互动会经历三个阶段：

探索：用户将指示物（鼠标等）悬停在物体上方，系统通过悬停特效给予用户反馈。根据是否出现了悬停特效，用户可以从直觉上理解当前悬停的对象是否是可交互对象。
意图：用户通过接触/按下表示想要与该对象交互的意图
确认：用户通过在互动对象范围内松开/点击表示确认。

这里总结了常见的一些系统里对基本的点击操作在上述 3 个阶段对应的不同动作。

	探索	意图	确认
iOS	无	手指接触	手指松开
浏览器	鼠标悬停	鼠标点击	鼠标松开
macOS	无	鼠标点击	鼠标松开
visionOS	目光注视	捏合手指	松开手指

iOS：在触屏操作系统如 iOS 中，由于并没有悬停的功能，只有接触、松开这两个阶段，因此用户对于交互的探索其实也落在了手指接触屏幕这一步。此时图标的颜色会变深，在给用户提供"此处可交互"这一信息的同时，也在告诉用户"我已收到你的点击意图"，当用户在图标范围内松开手指时，完成了整个点击的操作。

浏览器：在浏览器中经历了完整的三个阶段：悬停、点击和松开。
macOS：相比于浏览器，同为指针系统的 macOS 则稍有差别，在应用面板（Dashboard），访达（Finder）等界面中均没有为鼠标提供悬停效果。我认为其原因在于悬停特效虽然可以额外给用户提供"该元素是否可交互"的信息，但在常用且熟悉的系统中，额外的信息有时反而会干扰用户的注意力。因此不提供悬停特效才是更为简洁和直观的设计。
visionOS：visionOS 与浏览器类似，点击动作有完整的三个阶段，分别对应目光注视、捏合手指和松开手指。其中较为特殊的是注视阶段，系统会给出悬停反馈。这一悬停反馈是本文的主要内容。

首先需要讨论的是这一悬停反馈的目的。

悬停反馈的目的在于帮助用户理解哪些元素是可交互的，比如在浏览器中，尤其当用户初次使用网站时，需要快速理解哪里可以点，而哪里不可以，此时悬停反馈可以自然地给用户传达这样的信息。而 visionOS 提供这一反馈的目的却不止于此，还可以用来提升眼手交互中的精确性 。例如，同样是应用面板，macOS 的应用面板图标并没有提供悬浮效果。因为用户通常能够理解这些图标代表的是启动某个应用，自然是可以点击的。而在鼠标系统中，并不存在精确性的问题，因此不需要额外的悬停特效。而在精度不够的 visionOS 中，除了保证图标的大小外，更强的视觉反馈也更能吸引用户的目光。

那如何才能给用户提供清晰的悬停反馈呢？在浏览器中，悬停和点击一般伴随的是按钮底色的加深或者变浅。但在 Vision Pro 中，不同于光照稳定的电脑屏幕，考虑到用户可能在不同的环境光线条件下查看图标，图标亮度会受到环境光等各种因素的影响，因此仅仅依靠颜色深度变化并不总是能给用户提供良好的反馈。而 Vision Pro 的优势是空间，给出深度、阴影的变化则更为直观。因此苹果给出了三层图像叠加形成最终的图标的答案。

这一设计既不是纯粹的 2D 图形，也不是完全自定义的拟物化 3D 模型。这两者都是一个"整体"，无法让系统提供统一的空间化处理逻辑。而使用三层图像叠加这一设计，系统能够理解图标的结构层次。当用户查看图标时，系统将图标的不同层次在 z 轴上拉开一定距离，添加高光和阴影 ，增加了图标的层次感，形成一种微妙的空间感，增强其视觉反馈效果，提升交互体验。

简而言之，这一设计利用了 Vision Pro 的空间特性，规避了亮度的不确定性带来的问题，为用户提供了良好的意图反馈，提升眼手交互场景下的体验和精确性。因此当我们为 visionOS 应用制作图标时，除了可以利用好分层结构提供更多的设计意图表示外，需要特别关注分层拆分后是否给用户足够的空间视觉反馈，帮助用户精准操作图标。

制作流程

这一节主要分享一下整体的图标制作流程，并且介绍官方提供的预览工具------Parallax Previewer，帮助我们更好地感受图标的深度信息。

整体制作流程分为 3 步：

分层绘制图标
在 Parallax Previewer 中预览
导入 XCode

设计图标

在设计方面，不同的设计、开发人员都可以使用自己习惯的设计工具。只要分层制作，每层都符合官方规定的尺寸大小即可。本文使用 Figma，利用官方提供的模板来进行图标制作。

官方模板地址：developer.apple.com/design/reso... ，下拉到 visionOS 部分即可获得。

模板提供了 visionOS UI 设计的各种元素，其中在 App icon 一页，提供了图标设计所需的各种要素。在下图的左侧边栏中可见，App icon 一页提供了 3 部分内容：

App icon：链接提供了 HIG 关于图标设计的文档链接，即此前章节中讨论的部分
Parallax Preview tool：提供了预览工具 Parallax Preview tool 的链接
App Icon - 1024 x 1024 pt：将图标拆解成 3 层，并且提供了用于指导和遮罩预览的 Guides 层

这里，就可以根据 Background，Layer 1 和 Layer 2 的层级，分别进行图标的绘制。

我制作了一款应用 GitSkyline，是将 2D 的 GitHub 贡献图，根据每日贡献数量的多少，变成 3D 的小摆件。可以简单地理解为将 2D 的马赛克图片根据颜色深浅变成 3D 的立体形式。

因此，我希望可以在图标中出现标志性的小方块样式，并且多个方块颜色由浅入深，表示效率产出日渐提升。考虑到 4 个小方块数量较少，并不能准确反馈意图。因此设计成 2 行 3 列共 6 个方块，分别代表上图图例中从 Less 到 More 的变化。平面效果如下所示。

在考虑分层拆分时，由于横轴表示时间，从左到右颜色渐深才能表示"天天向上"，因此需要将小方块竖向拆分成 3 组，并且逐层递进。考虑到 visionOS 图标总共只有 3 层，所以需要 Background 层可以在提供背景色的同时，也放下最左侧一组小方块，从而能实现 3 层递进的效果。

在 3 层分别绘制完成后，叠加上 Guides 层，就能看出最终图标通过圆形遮罩切割后的效果。当然我知道我的下层小方块和上层并不对称，这并不是为了逼死强迫症，而是考虑了视（xiang）觉（tou）错（lan）觉（le）后最终决定的效果。

预览图标

上一节我们基本上已经可以看到图标的雏形，但还是没有办法验证拆分后是否可以给用户带来足够的空间视觉反馈。这里官方提供了预览工具 Parallax Preview 用于验证立体效果。我们只需要将刚刚绘制的 3 层图标从 Figma 中导出成 PNG 格式，并且添加到预览工具中，按照从下到上：Background，Layer 1 和 Layer 2 的顺序放置即可。