应用图标(Logo)可以说是每个应用程序在 App Store 中的名片。对于一个多平台的应用来说,设计一个适应不同平台的 Logo 也是相当重要。
苹果的 Vision Pro 已发布有一段时间,不知道你有没有针对这个平台单独适配图标呢?
在 visionOS 上,需要拥有一个分层的图标,当用户通过眼睛选择图标时,系统会给予分层效果。
今天我们就来讲讲如何在 Apple Vision Pro 上适配你应用程序的 Logo。
visionOS 中的应用图标在 visionOS 中,应用图标采用圆形设计,包括一个背景层和一到两个非背景层的叠加。
这种组合创造了三维效果,当用户查看图标时,图标会轻微扩展,通过非背景层的透明通道呈现浮雕效果。
设置步骤与其完全重新设计你的 App 图标,最好的路径应该是修改现有的应用图标内容。思考需要达到什么层次的细节和分层,以便系统能够增强你的设计,呈现三维效果。
其实 visionOS 上的图标和手表系统(watchOS)很相似,因为都是圆形的。以系统设置这个应用图标为例,我们来看一下 Apple 在不同平台上的设计:
对于不同平台上的图标设计,Figma[1] 上有一个完整的模板可以免费使用,有需要也可以参考一下。
具体实现在设计 Vision OS App Logo 时,确保至少有两层结构,或者三层结构,以确保系统能够顺利应用阴影和分层。
1、背景层设计要点在设计应用图标的层时,背景层应该使用方形图像。系统会使用蒙版自动将你的层切成圆形。
处理背景图像时,确保使用不透明的颜色或渐变,不要使用透明度。如果背景有透明度,可能会导致系统可视化中的错误。
最后,应该避免在背景层添加孔洞或凹陷区域的形状,因为系统添加的阴影和高光会使这些形状特别突出,最终可能导致非预期的效果。
非背景层对于应用 Logo 的非背景图像(上边两层),可以使用透明度。这样可以让系统平滑地创建三维和浮雕效果。
另外,考虑通过透明区域获得不同的深度层次,使用明确的形状和清晰的区域,避免使用模糊或软边界,以便系统从动态角度正确添加阴影和高光。
最后,将非背景图像的元素和形状保持在设计的中心附近。当形状或图像接近圆形蒙版的边缘时,可能会被剪裁,导致中心偏移,影响预期的三维效果。
其他重要提示对于背景和非背景图像,这几层都需要提供尺寸为 1024x1024 像素(512 现在好像也可以了,不过我没试)的方形图像。
另外,切记不要创建自定义阴影和高光效果,因为这可能与系统自带效果冲突。
如何在项目中适配你的 Vision OS 图标首先,打开项目的 Assets 文件,然后右键创建一个新的 Vision OS 的 App Icon:
它会自动创建出一个含有三层结构的视图,包含(Front、Middle 和 Back 三层)。在右侧的菜单栏中还可以选择添加更多层,或者删掉某一层(但最少需要两层):
最后,将你设计好的图标导入即可。我在网上找了一个迪士尼的 Logo,大家可以看下效果,最上层会展示一个预览效果:
最后通过以上步骤和提示,你将能够更好地将你的应用图标适配到 visionOS 系统,带给用户一个立体而生动的视觉体验。希望这篇指南对你有所帮助,如果你有任何问题或建议,欢迎在评论区与我们分享。