设计用户引导

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

用户引导页面

用户引导流程由多个页面组成,你可以自由添加和设计这些页面。

用户点击按钮即可在页面之间跳转。

如果某些用户需要稍有不同的流程(例如,在健身应用中,你可能希望根据用户性别展示不同的”目标”图片),不必单独创建多个用户引导。

你可以将部分页面默认设为隐藏,仅在特定场景下显示。

用户引导元素

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

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

  • 容器:容器可让您灵活布局。例如,如果想添加两列文本,需要先添加 Columns,然后在左侧面板将两个文本块拖入 Columns 中。如果要添加轮播图,则需要在 Media 元素内添加图片。
  • 排版:添加预格式化文本块,并按需调整其样式。
  • 媒体与展示:除图片和视频外,您还可以添加动态数据图表,直观展示应用价值,吸引用户购买。 支持的视频格式为 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