设计用户引导

这款无代码移动应用用户引导编辑工具功能强大、高度可定制,可帮助您为用户提供最佳的用户引导体验。即使您不是开发者或设计师,也能获得出色的效果。

用户引导屏幕

用户引导流程由您添加和设计的多个屏幕组成。

用户将通过点击按钮在屏幕之间进行导航。

如果您的部分用户需要略有不同的流程(例如,在健身应用中,您可能希望根据用户性别显示不同的”目标”图片),无需创建单独的用户引导。

您可以将某些屏幕默认隐藏,仅在特定场景下显示

用户引导元素

用户引导元素按照显示顺序列于左侧。点击右上角的 Add 可添加新元素。

可添加的元素分为以下几组:

  • Containers:容器允许您设置灵活的布局。例如,如果您想添加两列文本,需要先添加 Columns,然后在左侧面板中将两个文本块拖入 Columns。或者,如果您要添加轮播,则需要在 Media 元素内添加图片。

  • Typography:添加预格式化的文本块,并根据需要配置其外观。

  • Media & Display:除图片和视频外,您还可以添加动态数据图表,以展示应用价值并激励用户。

    支持的视频格式为 MP4 和 WebM。媒体文件最大大小为 15 MB。

    如果您想添加不支持的动画元素(如 Lottie),可以将其转换为视频(例如使用此工具)并以视频形式嵌入。

  • Quiz:创建包含文字和图片选项的简短问卷,以定制用户引导体验并更好地了解您的用户。

  • Inputs:收集用户数据。

  • Buttons:按钮允许用户在屏幕间导航、关闭用户引导或跳转至付费墙。您还可以添加光泽或动态按钮,以吸引用户注意力并将安装转化为购买。

  • Loaders:动画加载器在流程进行中保持用户的参与度。

  • User engagement:添加用户评价、用户邮件列表和倒计时。

作为 Media & Display 组的一部分,如果提供的自定义选项不够用,您还可以添加自定义 HTML 代码。

但是,自定义 HTML 元素不会被预加载或缓存,因此建议仅将 Raw HTML 用于小型、轻量级元素。

design-onboarding4.png

元素 ID 与动作 ID

如果您想将按钮用于自定义操作,请为其分配一个动作 ID,然后在源代码中使用它。动作 ID 允许您以相同的方式处理具有相同动作 ID 的不同按钮。

ios-events-1.webp

如果您想处理特定字段中的用户输入(例如,保存用户的年龄或邮箱),请为其分配一个元素 ID,然后在源代码中使用它将问题与答案关联起来。元素 ID 在您的用户引导中只能使用一次。

design-onboarding5.png

自定义选项

编辑工具中提供以下自定义选项:

  • Styles 标签页:调整元素的外观。
    design-onboarding1.png
  • Element 标签页:设置元素的属性,例如可见性、按钮点击动作或其他与元素外观无关的属性。
    design-onboarding2.png
  • Screen 标签页:设置屏幕的常规配置,例如标题或显示屏幕计数器。
    design-onboarding3.png

复制屏幕和元素

如果您已创建了一个用户引导并希望复用其中的部分内容,或者想进行细微修改并运行 A/B 测试,可以将一个或多个屏幕从一个用户引导复制到另一个。

要复制屏幕,请打开用户引导编辑工具,然后执行以下任一操作:

  • 右键单击单个屏幕并选择 Copy
  • 选中所需屏幕并按 Ctrl+C(Windows)或 ⌘+C(Mac)

您还可以复制单个元素或文本块,可以在同一用户引导内复制,也可以在不同用户引导之间复制。

从网页到应用漏斗复制屏幕

如果您使用在 FunnelFox 中创建的网页到应用漏斗,并希望将漏斗中的屏幕用于用户引导,可以通过在漏斗编辑工具中复制屏幕并粘贴到用户引导编辑工具中来快速实现:

  1. 在 FunnelFox 漏斗编辑工具中,右键单击某个屏幕并选择 Copy,或选中该屏幕并按 Ctrl+C/⌘+C
  2. 打开用户引导编辑工具。
  3. 右键单击要插入复制屏幕的位置,选择 Paste,或选中该屏幕并按 Ctrl+V/⌘+V。复制的屏幕将插入到所选屏幕的下方。
funnel-to-onboarding.gif