灵动岛和 iOS 实时活动推送界面的设计规范终于出来了，做设计和开发的同学记得看看。建议大家收藏并转发，以备需要之日调用！
实时活动显示的是来自 APP 最新的信息，让人一目了然地看到最新的事件或者任务的进度。
实时活动帮助用户跟踪他们关心的任务和事件，在固定的位置持续地更新信息。例如送餐 APP 可以显示剩余的抵达时间，或者体育 APP 会显示正在进行中的比赛的得分。
除了在锁屏状态下借助实时活动之外，支持实时活动显示功能的设备可以以不同的形式来呈现信息，这主要取决于设备是否支持灵动岛功能。
 
  • 在支持灵动岛的设备上，系统会在前置摄像头周围的固定位置上显示实时活动。
  • 在不支持灵动岛的设备上，系统会在主屏幕或者其他 APP 运行过程中，在顶部弹出横幅中短暂显示实时活动，前提条件是 APP 推送的信息足够重要。
在灵动岛当中，系统将会以三种形态呈现实时活动：
 
  • 紧凑型。在当前只有一个实时活动状态的时候，系统会使用紧凑型视图，整个视图会由前后两个部分构成，两者将中间的摄像头区域包裹起来。尽管两者其实是两个独立区域，但是在视觉和信息上会明确给人是来自同一个 APP 的信息推送。用户可以通过点击，跳转到这个 APP。
 
  • 最小型。当有多个 APP 有实时活动推送的时候，灵动岛会使用最小型视图来呈现其中的2个，系统会选择让其中一个附着到灵动岛上，另外一个则以圆形小图标的形式存在，用户同样能够通过点击跳转到对应的 APP 上。
  • 扩展型。当用户在紧凑型视图和最小型视图中，长按会触发扩展型视图。
  •  

 01 
灵动岛和实时活动界面最佳实践
▼
  • 为有明确开始和结束的实时事件定义实时活动。
用户需要借助实时活动来追踪行进中的、涉及频繁更新的事件和任务，所以最好不要超过 8 个小时。并且始终在实时任务结束之后立刻结束实时活动的呈现。
  • 只呈现最重要的内容。
用户喜欢获取行进中的任务和时间的摘要和关键信息，他们不希望收到过多详细信息，或者在实时活动区域中进行交互。用户需要通过点击实时活动跳转到相应的 APP。
  • 仅在有新内容时提供实时活动的更新，仅在有必要引起用户注意的时候才提供提醒。
实时活动会打断用户当前的任务，过于频繁的提醒可能会对用户造成困扰，可能会导致用户彻底关闭你的 APP 的实时活动推送。请注意，系统会以不同的方式提醒用户有实时活动正在发生，但是具体取决于硬件是否具有灵动岛功能。
  • 避免在实时活动中显示敏感的信息。
实时活动在视觉上很突出，很容易被人不经意看到。所以如果你的 APP 推送的信息涉及到敏感的内容，请在其中提供一个无害的摘要，并且让用户通过点击透过实时活动抵达 APP 的特定页面，让用户详细查看。
  • 避免在实时活动中显示广告或促销。
实时活动可以帮助用户了解正在发生的事情，因此仅用来显示和用户高度相关的内容即可。
  • 让用户有权限控制实时活动的开始和结束。
为了帮助用户更好地管理实时活动，最好在实时活动所链接的页面当中，提供按钮允许用户按照自己的需求，提前结束实时活动的推送。而下单了外卖之后，透过实时活动告诉你你的外卖到哪了则是有意义的推送信息。在设置中，你应当允许用户控制哪些实时活动能推送，哪些不用推送或者提前结束等等。
  • 确保点击实时活动的时候，会打开 APP 中对的页面或位置。
当用户透过实时活动打开应用程序的时候，应当将用户直接带到 APP 相应的页面，而无需用户再手动导航找到位置。有关的链接功能你需要查看 SwiftUI 相关的说明。
  • 尽量在实时活动结束后，从锁屏界面中将其移除。
在灵动岛功能中，实时活动结束之后将会被直接移除。但是在锁屏和通知当中，实时活动的结果默认会保留 4 个小时，方便用户回去查看。不过如果你的 APP 当中实时活动的时间相关度不算高，你也可以设置在 4 小时内的任何一个时间周期内结束。比如，拼车 APP 会在行程结束后 15 分钟内可以在锁屏通知上显示，方便用户在这个时间段内查看最终的支付结果。

 

 02 
让实时活动具备可用性
▼
  • 确保灵动岛中紧凑型视图下信息和设计的统一性。
虽然相机的区域将前后两个区域分开，但是在紧凑视图下，应当被视作为一体的，并且无论点击哪个区域，都将会将两者带到同一 APP 的同一页面当中。使用色彩、图标和文本来确保灵动岛中的内容和 APP 的关联。
  • 紧凑型视图和扩展型视图之间应当保持一致性。
扩展型视图是前者的放大扩展版，确保两者之间信息和布局的可预测性。
  • 锁屏通知界面和扩展型视图中的设计应当保持一致性。
这两者在内容和样式上理应保持相似性和共通性，确保用户对他们两者熟悉且有关联感，方便跟踪进度。
  • 实时活动样式设计应该适应不同的屏幕尺寸。
实时活动应该通过缩放适应不同的屏幕尺寸，通过提供不同大小的内容确保它们在不同设备上看起来都很棒。请遵循以下规范来进行创建。
规范链接：https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/live-activities#specifications
  • 在锁屏通知上使用自定义颜色和不透明度时请深思熟虑。
在锁屏通知界面上使用实时活动窗口时候，如果想要设置背景颜色或者图像，请记得测试两者的对比度，尤其需要考虑在「全天候显示」界面上的效果。另外，灵动岛界面的实时活动界面背景为了确保沉浸效果，是不允许自定义背景颜色的。但是其中的文本和图标是可以自定义的。具体请参考以下规范。
规范链接：https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities
  • 内容的圆角半径和实时活动界面圆角半径保持协调。
内容和实时活动窗口边距要保持一致，为了确保其中圆角看起来不错，让 SwiftUI 容器内的圆角半径尽量准确，开发者请参阅：ContainerRelativeShape（https://developer.apple.com/documentation/swiftui/containerrelativeshape）
  • 通常情况下，请使用标准边距确保内容清晰易读。
通常情况下，对于实时活动扩展型视图和锁屏界面下的视图，应当采用标准宽度 20 pt，某些特殊情况可能会更加拥挤，具体情况请参阅以下文档：padding( _:_:)（https://developer.apple.com/documentation/swiftui/view/padding(_:_:)）
  • 选择适合个性化锁屏的色彩。
考虑到用户自定义屏幕、壁纸和小组件，谨慎自定义你的实时活动在锁屏通知界面下的颜色和透明度，确保内容的清晰易读。
  • 支持深色模式和全天候显示。
实时活动的颜色在深色和全天候显示的模式下，颜色会发生改变，你需要调整其颜色，确保不会影响可读性。具体可以参考「深色模式」和「全天候显示」的章节内容。
  • 谨慎使用动画，仅在引起用户关注时使用。
实时活动仅会调用系统动画功能的子集，在全天候显示模式下，动画不会显示。具体请参考「动画内容更新」。

 

 03 
灵动岛尺寸规格
▼
灵动岛使用 44 pt 圆角，其圆角形状应当同物理前置相机圆角保持一致。
 
实时活动的规范尺寸也同样使用 pt 为单位：
设计规范：
https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/live-activities

 

声明：* 本站所提供的资源均来源于互联网，站内所有文字、图片内容由网站会员上传而来，UI社不具备此内容的版权。由于将本站资源用于商业用途而引起的纠纷，本站不负任何责任。如果有侵犯到您的权益，请联系本站删除，谢谢合作！联系邮箱：Uishe#qq.com (请将[#]换成@)