美观流畅的动态效果赋予界面活力,从而传达状态、提供反馈和指示以及丰富你 App 或游戏的视觉体验。

很多系统组件自动包括动态效果,让你在整个 App 或游戏中提供熟悉且一致的体验。系统组件还可能会根据辅助功能设置或不同输入方式等因素调整其动态效果。例如,Liquid Glass 在移动时会以更强烈的方式响应直接触控交互,从而加强触觉体验,但对使用触控板交互的用户则会表现出更轻柔的效果。
如果设计自定义动态效果,请遵循以下指南。
有目的地添加动态效果,让其在不妨碍体验的同时提供支持。不要添加毫无意义的动态效果。不必要或过多的动画会分散用户的注意力,且可能让其感到违和或身体不适。
将动态效果设为可选。并非所有用户都能够或想要在 App 或游戏中体验动态效果,因此避免将动态效果用作传达重要信息的唯一方式至关重要。为了帮助每个用户享受你的 App 或游戏,还可以通过使用触感反馈和音频等替代方式进行传达来作为视觉反馈的补充。
尽量使用真实且符合用户手势和期望的反馈动态效果。在非游戏类 App 中,准确真实的动态效果可帮助用户理解运作原理,但无意义的反馈动态效果可能会让其感到混乱。例如,如果用户通过从顶部向下滑动显示视图,他们不会期望通过将视图滑到一侧来进行关闭。
尽量使反馈动画内容简洁、精确。简洁精确的动画反馈往往会让用户感到轻盈且不唐突,并且通常比显眼的动画更能有效地传达信息。例如,当游戏显示与成功操作精确关联的简明动画时,玩家可立即理解该信息,而不会分散游戏注意力。再例如在 visionOS 中:当用户轻点“照片”中的全景照片时,照片会快速平滑展开以填充用户面前的空间,从而帮助其追踪过渡效果且无需等待即可欣赏内容。
在 App 中,通常避免在频繁出现的用户界面交互中添加动态效果。系统已经为标准界面元素的交互提供了精细的动画。对于自定义元素,一般应避免让用户每次与其进行交互时都要花额外的时间关注不必要的动态效果。
让用户可取消动态效果。尽量不要让用户等待动画完成才能执行操作,尤其是当其需要多次体验动画时。
考虑在可行时使用具有动画效果的符号。使用 SF 符号 5 或更高版本时,你可以将动画效果应用到 SF 符号或自定义符号。有关指南,请参阅动画。
确保游戏的动态效果默认在支持的各个平台上都良好呈现。在大多数游戏中,始终保持 30 至 60 fps 帧速率通常可打造流畅且具有视觉吸引力的体验。对于支持的各个平台,使用设备的图形功能启用默认设置,让用户无需先更改这些设置就能享受你的游戏。
让用户可自定义游戏的视觉体验,以优化性能或电池续航能力。例如,考虑让用户在系统检测到外部电源的存在时可切换电量模式。
无针对 iOS、iPadOS、macOS 或 Apple tvOS 的额外考量因素。
除了可巧妙地传达上下文、吸引用户关注信息和丰富沉浸式体验之外,visionOS 中的动态效果还可与深度结合使用,以在用户注视交互式元素时提供至关重要的反馈。因为动态效果很可能会占据 visionOS 使用体验的很大一部分,所以避免引起注意力分散、困惑或不适至关重要。
尽量避免在用户视场的边缘显示动态效果。用户对于发生在边缘视觉处的动态效果尤其敏感:这种动态效果除了会分散用户注意力外,甚至还会引起不适,因为它会让用户感到自身或四周在移动。如果你需要在沉浸式体验期间显示在边缘处移动的对象,请确保对象的亮度与其余可见内容接近。
显示较大虚拟对象的移动时,帮助用户保持舒适感。如果对象大到足以填充大部分视场,请遮盖大部分或所有透视,用户会自然将其视为四周的一部分。为了帮助用户感知对象的移动而不会让其觉得自身或四周在移动,你可以增加对象的半透明效果,帮助用户透视对象,或者降低对象对比度来让其动态效果不那么明显。
注: 即使是用户本人在移动诸如窗口这样的大型虚拟对象,他们也可能会感到不适。虽然在这种场景下调整半透明效果和对比度会有所帮助,但仍应考虑保持窗口的尺寸相对较小。
需要重新放置对象时,考虑使用渐变。当对象从一个位置移到另一个位置时,用户会自然看到移动。如果此类移动并未传达对用户有用的任何信息,你可以在移动对象前将其淡出,对象出现在新位置后重新将其淡入。
一般而言,避免让用户旋转虚拟世界。虚拟世界旋转时所带来的体验通常会扰乱用户的稳定感,即使其可控制旋转和只是细微移动。相反,在快速淡出期间,应考虑使用瞬时方向变化。
考虑为用户提供静态参考系。在不会移动的区域内包含视觉移动时,用户会更容易接受。相反,如果整个周围区域都看似发生移动(例如,使玩家在空间中自动移动的游戏内),用户可能会感到不适。
避免显示持续振荡的对象。尤其应避免显示频率为 0.2 赫兹左右的振荡,因为用户对于此频率非常敏感。如果需要显示对象振荡,请尽量保持振幅较低并考虑让内容半透明。
SwiftUI 提供了强大而精简的方式来为 App 添加动态效果。如果需要使用 WatchKit 为布局和外观更改添加动画,或者创建动画图像序列,请参阅 WKInterfaceImage。
注:所有基于布局和外观的动画都会自动包括在动画起止时播放的内建缓动。你无法关闭或自定义缓动。
有0人收藏了本文