灵动岛适配指南

移动开发
灵动岛将iPhone前置镜头和软件通知结合在一起的全新设计,用出色的交互设计掩盖硬件的缺陷,是一次交互玩法的革新。灵动岛可以通过点按、长按、轻扫来进行交互,最多支持两个应用同时“登岛”。

Part 01

灵动岛简介 

灵动岛全称Dynamic Island,作为iOS中实时活动(Live Activities)功能的一部分,用来展示需要实时更新的消息。例如外卖配送信息,地图实时导航信息等。灵动岛有3种展现形式。

1.1 紧凑(Compact)

当系统只有1个实时活动的内容时,灵动岛默认使用紧凑模式。紧凑模式下UI由头部(Leading side)和尾部(Trailing side)组成,如图1所示。用户可以点击灵动岛打开App查看实时活动的内容。

图片

图1

1.2 最小化(Minimal)

当系统有多个实时活动的内容时,灵动岛自动切换使用最小化模式。最小化模式下由附着的头部(Leading(attached))和分割开的尾部(Trailing(detached))组成,如图2所示。和紧凑模式一样,最小化模式也支持用户点击打开App。

图片

图2

1.3 扩展(Expanded)

当用户在紧凑或最小化模式轻扫或长按灵动岛时,灵动岛可以切换成扩展模式。用于向用户展示更多信息。扩展模式的UI设计尽量保持和紧凑模式一致,用户从紧凑模式切换到扩展模式会有一个平滑的体验。

图片

图3

当我们向App Store提交了适配灵动岛的App版本时,以上3种模式都需要适配。

Part 02

UI适配指南 

2.1 尺寸

目前只有iPhone 14 Pro及iPhone 14 Pro MAX具有灵动岛功能。在两种机型上,灵动岛的圆角半径都为44Points,这个数值和前置深感摄像头的半径是一样的。按照前述的3种模式,灵动岛的具体参数如下表格所示(表格涉及的数值表示Points)。

图片

2.2 颜色

开发者无法更改灵动岛的背景颜色,只能更改文字颜色、素材颜色、灵动岛边框颜色等。UI适配需要考虑系统的深色模式,必要情况可以使用两套UI。

Part 03

开发适配指南 

3.1 开发框架简介

苹果在iOS 16.1正式对外开放了灵动岛适配框架-ActivityKit,第三方App可以使用这些ActivityKit完成灵动岛适配工作。注意,ActivityKit的API目前仅适用于iPhone。灵动岛使用WidgetKit和SwiftUI完成UI开发工作,ActivityKit在其中扮演创建Activity,请求数据,更新数据,结束Activity的角色。

图片

图4

3.2 权限管理

灵动岛作为实时活动的一部分,需要实时活动权限才能正常展示。和通知权限,相机权限等类似,实时活动权限需要App主动向用户申请,用户也可以在“设置”中主动关闭实时活动权限。

图片

图5


Part 04

最佳实践 

灵动岛适配过程中,有些需要注意的点。一、灵动岛的实时信息要有明确的开始和结束时间点;二、当一个实时信息持续超过8小时,系统会从灵动岛移除这个App的信息;三、当一个实时活动结束时,灵动岛上的展示信息也会立即被系统移除。四、避免在灵动岛显示广告,毕竟引起用户反感可以被直接关闭;五、App要能够响应灵动岛的点击信息,跳转到App中正确的子页面,而不是停留在App的首页。

在和家亲业务落地中,例如设备的绑定、设备固件升级、设备重启等用户重点关注的流程可以考虑在灵动岛中展示,提升用户交互体验。

责任编辑:庞桂玉 来源: 移动Labs
相关推荐

2022-09-27 14:32:12

iOSiOS 16苹果

2022-09-14 10:09:35

iPhone 14灵动岛设计

2017-11-13 16:35:36

iPhone X全面屏APP

2022-12-25 10:53:47

2015-11-30 16:08:54

iosbitcode适配

2014-12-15 21:20:52

荣耀

2014-05-28 11:02:23

锐捷网络灵动天线

2012-01-13 10:31:25

ibmdw

2013-01-29 17:51:47

戴尔转型灵动基础架构

2011-05-07 11:03:01

轻博客宽岛

2013-03-12 15:11:58

火狐移动操作系统

2012-02-13 09:03:04

Web

2022-02-16 15:25:31

JS代码Canvas鸿蒙

2012-07-31 14:55:02

NetGainIT运维

2012-10-15 13:46:26

欧朋

2013-09-27 13:59:13

X-sense灵动天线智能天线

2010-04-07 14:46:44

2015-10-13 18:26:23

TalkingData

2013-05-22 09:49:36

2015-06-16 10:03:48

珍岛集团
点赞
收藏

51CTO技术栈公众号