iOS 16灵动岛UI尺寸规范笔记

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作

iOS 16灵动岛UI尺寸规范笔记


灵动岛支持的设备


灵动岛支持的设备有iPhone 14 Pro 、iPhone 14 Pro max

屏幕大小

iPhone 14 Pro          393✖️852 pt

iPhone 14 Pro Max   430✖️932 pt

*灵动岛所有的显示内容都需要避开中间的相机硬件部分,硬件高度为36.67pt


视图概览

灵动岛主要分为3种视图


紧凑型(Compact)

最小型/分离型(Minimal)

展开型(Expanded)


1.紧凑型(Compact)

An illustration that shows the compact leading and compact trailing views in the Dynamic Island.

由两部分组成,分为前Leading side 和后Trailing side,两部分尺寸相同


Pro   52.33✖️36.67pt   总宽230pt

Max  62.33✖️36.67pt   总宽250pt


圆角形状与相机相匹配

示例:

iPhone 14 Pro灵动岛-录音UI


2.最小型/分离(Minimal)

An illustration that shows the minimal view in the Dynamic Island.

Leading side 和Trailing side都变成圆形


Pro  36.67pt✖️36.67pt

Max 36.67pt✖️36.67pt


示例:

iOS16灵动岛最小型视图示例

3.展开型(Expanded)


An illustration that shows the expanded view in the Dynamic Island.

展开型的高度范围为84-160pt,Pro支持的宽度为371,Max支持的宽度为408


Pro  371✖️84-160pt

Max 408✖️84-160pt


圆角的角度为44pt

示例:

展开型最小高度

iOS16灵动岛展开型视图示例

展开型最大高度

iOS16灵动岛展开型视图示例

此外,官方文档中将展开型视图划分了内容区域:


center将内容置于原深感摄像头下方。

leading将内容沿展开的 Live Activity 的前沿放置在原深感摄像头旁边,并在其下方包裹其他内容。

trailing将内容放置在 TrueDepth 摄像头旁边展开的 Live Activity 的后沿,并在其下方包裹其他内容。

bottom将内容置于前导、尾随和居中内容之下。


An illustration that shows the center, leading, trailing, and bottom positions for content for the expanded view in the Dynamic Island.


系统首先确定中心内容的宽度,同时考虑leadingtrailing内容的最小宽度。

然后系统根据其垂直位置放置leadingtrailing内容并确定其大小。

默认情况下,leadingtrailing接收相同数量的水平空间。

An illustration that shows leading and trailing positions in an expanded view with higher priority to render them below the TrueDepth camera.

规格一览表

Dynamic Island 使用 44 点的圆角半径,其圆角形状与 TrueDepth 相机相匹配。

演示类型设备动态岛宽度(点)
紧凑或最小iPhone 14 Pro Max250

iPhone 14 Pro230
展开iPhone 14 Pro Max408

iPhone 14 Pro371
屏幕尺寸(纵向)紧凑型领先紧凑的尾随最小(直径)扩展(以范围形式给出的高度)锁屏
430x93262.33x36.6762.33x36.6736.67408x84–160408x160
393x85252.33x36.6752.33x36.6736.67371x84–160371x160


参考资料:

https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/live-activities

https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities#Animate-content-updates

标记狮私有云部署
一键部署标记狮至私有服务器,构建快速、安全、高效、私密的UI设计团队云协作
立即部署>>
标记狮私有云部署-一键部署标记狮至私有服务器,构建快速,安全,高效,私密的UI设计团队云协作