为 iPhone Duo 准备流程

iPhone Duo 拥有较窄的外屏和较宽的内屏。与其他 iPhone 不同,即使在竖屏方向下,它也可以在显示屏侧面(前置摄像头旁边)显示状态栏。

为确保你的流程在 Duo 上呈现良好效果,请按照以下步骤操作:

保持文字和按钮远离状态栏与摄像头区域

开启 Safe area 可让屏幕的以下部分避开状态栏:

屏幕、底栏和滑动面板的背景仍会延伸至整个显示区域,包括状态栏后方的区域。

有意忽略 iPhone Duo 的安全区域

单个元素可以覆盖安全区域设置,使其显示在状态栏后面。建议仅在对图片和视频有特殊效果需求时使用此功能。

为该元素设置固定或绝对定位,然后勾选忽略安全区域复选框。

如果希望图片或视频随页面其余内容一起滚动,请将其放置在屏幕顶部。

设计一套布局适配双屏

底部工具栏中已选择 iPhone Duo、屏幕方向切换按钮以及折叠/展开状态切换按钮

每个屏幕只有一套布局。在 Flow & 付费墙编辑工具中设计屏幕时,请参考本节中的技巧,确保布局在 iPhone Duo 的两块屏幕上均能正常显示。

在设备列表中选择 iPhone Duo,然后分别预览每块屏幕:

  • 已收起:状态栏占用较多空间。请注意:

    • 文字被截断或换行
    • 底部区域占据大量屏幕空间
    • 关闭、恢复或购买按钮不在视野内

    开启垂直滚动,或将内容分布在多个屏幕上。如需保持购买按钮可见,请将其放置在固定底部区域中。

  • Open:如果你的应用只针对竖屏设计,iOS 仍可能在内屏以横屏模式显示它。

    留意在两种方向下都过宽、难以阅读的内容。将其放入一个设置了**固定(Fixed)宽度的容器中,然后通过修改父元素的对齐(Alignment)**设置来居中该容器。这样容器在任何设备上都能保持固定宽度。

    如果容器宽度对最窄的手机来说过宽,Width 旁边会出现一个警告图标。请减小宽度,直到该图标消失。

如果你设计的布局适合 Duo,但在其他手机上显示效果不佳,可以为 Duo 用户单独展示一个流程。

为已上线的流程添加 iPhone Duo 支持

如需将最新的布局优化应用到 Adapty 支持 iPhone Duo 之前已上线的流程,请重新发布该流程。

在 Flow & Paywall Builder 中打开该流程,做一处小改动以启用 Publish to Live 按钮,然后点击该按钮。

下次应用请求提供该流程的版位时,即可获取最新发布的版本。如需查看效果,请在 iPhone Duo 或 Xcode 的手机模拟器上打开应用中的流程。

为 iPhone Duo 用户显示独立的流程

您可能更倾向于为 Duo 的双屏设计一个独立的流程,而不是用一套布局适配所有手机:

  1. 复制现有流程以创建 Duo 流程。
  2. 针对两种显示屏调整副本,然后发布该流程。
  3. 创建一个市场细分,将 Device 属性设置为 iPhone Duo。
  4. 在提供主流程的版位中,添加一个目标受众,并关联 Duo 市场细分和 Duo 流程。
  5. 如果该版位中的另一个目标受众也可能匹配 Duo 用户,请提高 Duo 目标受众的优先级,使其排在前面。

要查看结果,请在真实的 iPhone Duo 上打开您的应用。