BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计 - Since 2011

针对 iPhone Duo 纵向灵动岛的设计调整

针对 iPhone Duo 纵向灵动岛的设计调整

继续 iPhone Duo 设计相关话题。也继续糟糕睡眠与头痛着的新一天。时值周五,准备蒸煮些新东西给自己吃。三文鱼和豆腐或许不坏,上次的毛豆或许也可以再剥一盘子出来。

iPhone Duo 外屏灵动岛默认将以纵向的形式呈现,正如首日发布的 Tech Talks 视频“Design for iPhone Duo”在 01:45 和 05:40 两处所示(更多首日资源详见“iPhone Duo 发布首日的官方设计开发资源汇总”):

可见单一 App 的实时活动(Live Activities)呈现时,上下紧邻展示的,是原本在传统 iPhone 竖屏模式时紧凑状态下 leading 和 trailing (前端与后端)所呈现的内容:

传统 iPhone 可以提供较充足的横向屏幕空间,供实时活动以它所需要的宽度出现,譬如在需要展示更多文本信息的时候。

而 iPhone Duo 的纵向灵动岛无法提供。如本文图一所示,在此字号下无法呈现超过三位。

而三个月前在 WWDC26 当中有一个名为“Live Activities essentials”(实时活动基础知识)的讲座:

其中在讲解如何面向 iOS 27 横屏模式的“纵向灵动岛”调整实时活动呈现方式的时候,实际上已经 address 到了这个问题:

在 iOS 27 中,灵动岛的紧凑视图和极简视图在竖屏和横屏模式下都能显示。在竖屏模式下,紧凑视图的宽度具有弹性;但在横屏模式下,没有宽度扩展空间。你的实时活动需要考虑灵动岛在横屏显示时,宽度受限的情况,比如这种情况:

这是咖啡订单的 CompactTrailingView 实现。它是一个 SwiftUI 视图,可在饮品订单存在预计时间时,显示预计时间,或者显示当前订单阶段的标签,比如字符串“Ready”:

添加环境值 isDynamicIslandLimitedInWidth,然后调整 View 的主体。当灵动岛宽度有限时,会显示后置视图进行代替,在后置视图上显示订单进度图标:

现在,新的后置视图非常适配受限的宽度:

“将时间信息可视化为进度条”是一个思路。但显然并不适用于所有需要在实时活动当中展示文本内容的情况。例如确实需要展示完整时间信息的场景,或是诸如打车 App 需要展示车牌号码一类。

目前来看:

  • 要么尝试将信息转化为图形。
  • 要么考虑根据产品的情况设置截断规则。
  • 要么或许只有提升用户交互成本,在扩展形态或其他设备姿态下的实时活动中展示完整信息。

期待更优的系统方案吧。