图片、视频和图标

A flow screen with an image element on it

付费墙编辑工具的 Media 分类下包含三种媒体元素类型:Image(图片)、Video(视频)和 Icon(图标)。

Tip

如需让图片或视频铺满整个屏幕(包括刘海和 Home 指示器后面的区域),请将其定位方式设置为固定,将所有偏移量设为 0,并勾选 Ignore safe area。详见布局与定位。

图片

上传 .JPG、.PNG 或 .WEBP 格式的文件,大小不超过 20 MB。

不支持动态 GIF 和 WEBP。如需添加动效,请改用 视频 元素。

图片元素可以为每种语言设置不同的图片。如需在深色模式下显示不同的图片,请向元素添加深色文件。

Tip

如需将内容叠加在全屏图片上,可通过屏幕背景和滑动面板构建主视觉图。

  • Content mode — 控制图片在设置高度时填充容器的方式。请参阅图片尺寸。
  • Use custom media ID — 请参阅下方的自定义媒体 ID。

图片尺寸

图片有其固有比例,而你设置的容器尺寸可能与之不符。先设置宽度,再决定高度:

  • 自动高度。图片保持原有比例:高度由所设宽度自动推算。内容模式会随之关闭,因为无需裁剪。
  • 固定或填充高度。容器拥有独立的比例,此时内容模式用于处理尺寸不匹配的情况:
    • 适应。将整张图片缩放至容器内,留有空白区域。
    • 填充。裁剪超出部分。默认选项。

要让图片在任意屏幕宽度下都不被裁剪,请将宽度设置为 Fill,高度设置为 Auto。如果固定高度,顶部和底部的裁剪效果会随屏幕尺寸变化而改变。

视频

上传 .MP4 或 .WEBM 文件,大小不超过 50 MB,时长不超过 30 秒。视频最低分辨率为 640x640 像素。

  • Aspect — 控制视频在设置高度后填充容器的方式。请参阅视频尺寸。
  • Loop — 循环播放视频,默认开启。
  • Use custom media ID — 请参阅下方自定义媒体 ID。

视频在编辑器预览中不会播放——画布仅显示静帧。在设备上运行时,视频默认静音播放。开启 Loop 后,视频将无限循环。

Video 元素可以为每个语言区域设置不同的视频。如需在深色模式下显示不同的视频,请为该元素添加深色文件。

视频大小调整

视频有其自身的比例,而你为其设置的容器尺寸可能与之不符。高度属性决定了处理方式:

  • Hug height。高度跟随视频自身比例自动调整。
  • Fixed 或 Fill height。通过 Aspect 属性解决尺寸不匹配的问题:
    • Fit。将整个视频缩放至容器内,多余空间留白。
    • Fill。裁剪超出部分。默认设置。

当 Adapty 无法读取上传视频的尺寸时,会弹出警告:“Could not determine video dimensions. Set a fixed height to ensure the video displays correctly.”请为视频设置固定高度,或确保其容器具有固定高度,否则视频高度可能会折叠为 0。

视频播放结束时触发动作

视频元素支持 On playback finished 触发器,当视频播放到结尾时触发。在 Interactions 面板中进行设置,可跳转到其他页面、显示 CTA,或执行任何其他动作。

图标

Icon picker with the Tabler Icons library

从内置的 Tabler Icons 图标库中选择,提供两种视觉风格的数千个图标:

  • Stroke — 仅描边轮廓。
  • Filled — 实心填充。

在选择器中通过关键词搜索图标。在 Color 选择器中设置图标颜色——可选择已保存的颜色样式或自定义颜色。每个图层样式只能应用单一纯色。

本地化媒体资源

以下元素和图层支持为每种语言单独上传不同的文件:

  • 图片和视频元素。
  • 填充中的图片和视频图层,例如屏幕背景。
  • 颜色样式的图片和视频图层,可分别为浅色或深色版本单独设置。

上传本地化文件的步骤:

  1. 如果 Localizations 面板已打开,请先关闭它以显示属性面板。
  2. 在底部工具栏中,将 Locale 设置为目标语言。
  3. 选中元素,或点击预览区域的空白处以选择屏幕背景。
  4. 在属性面板中上传本地化文件。
  5. 将 Locale 重新设置回默认语言,以便后续编辑应用于默认语言。

对于颜色样式,在激活目标语言时替换样式中的图片或视频。

在没有独立文件的语言区域中,用户将看到默认语言区域的文件。对于颜色样式,每个版本会单独回退到默认语言区域。你也可以在 Localizations 面板中为每个语言区域上传文件。

限制

图标和自定义媒体 ID 无法本地化。如需本地化具有自定义媒体 ID 的图片或视频,请使用该 ID 在运行时替换为本地化文件。

自定义媒体 ID

Important

你可以为填充中的图片或视频(例如屏幕背景)设置自定义媒体 ID。

为图片或视频元素添加自定义媒体 ID,即可在运行时通过应用代码动态替换它。适用于个性化视觉内容——例如,显示用户选择的头像。

在 Flow & Paywall Builder 中上传的媒体文件作为备用内容。如果你的代码在运行时未提供该 ID 对应的媒体,则会显示备用内容。

自定义媒体 ID 只能将文件替换为同类型的文件——图片换图片,视频换视频。若类型不匹配,则显示备用内容。

要在图片或视频元素上启用自定义媒体 ID:

  1. 勾选上传区域下方的 Use custom media ID 复选框。
  2. 输入媒体 ID。
  3. 上传备用图片或视频。

在应用代码中,通过 ID 获取媒体资源——请参阅 自定义资源 了解 SDK API。

Tip

要让流程首屏即时渲染,请为首屏中较大的图片和视频添加自定义媒体 ID,并让开发者将这些文件打包到应用中。详见从应用包中显示首屏媒体资源。