为 iPhone Duo 准备流程
iPhone Duo 拥有较窄的外屏和较宽的内屏。与其他 iPhone 不同,即使在竖屏方向下,它也可以在显示屏侧面(前置摄像头旁边)显示状态栏。
为确保你的流程在 Duo 上呈现良好效果,请按照以下步骤操作:
- 保持Safe area开启,确保文字和按钮不被状态栏遮挡。
- 如果某个元素显示在状态栏后面,请取消勾选该元素的Ignore safe area。
- 发布前,请预览两个屏幕的横竖屏效果,并在必要时调整布局。
- 如果某个流程在 Adapty 新增 iPhone Duo 支持之前已上线,请重新发布以应用最新的布局改进。
- 如果 Duo 流程需要独立设计,可以为 Duo 用户展示单独的流程。
保持文字和按钮远离状态栏与摄像头区域
开启 Safe area 可让屏幕的以下部分避开状态栏:
屏幕、底栏和滑动面板的背景仍会延伸至整个显示区域,包括状态栏后方的区域。
有意忽略 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 的双屏设计一个独立的流程,而不是用一套布局适配所有手机:
- 复制现有流程以创建 Duo 流程。
- 针对两种显示屏调整副本,然后发布该流程。
- 创建一个市场细分,将 Device 属性设置为 iPhone Duo。
- 在提供主流程的版位中,添加一个目标受众,并关联 Duo 市场细分和 Duo 流程。
- 如果该版位中的另一个目标受众也可能匹配 Duo 用户,请提高 Duo 目标受众的优先级,使其排在前面。
要查看结果,请在真实的 iPhone Duo 上打开您的应用。